# Sistema de diseño Samsung One UI

## Vista previa de la interfaz del sistema de diseño Samsung One UI

Cambia la apariencia, examina el texto de lectura al 200 % y cancela o confirma el restablecimiento.

## Referencia de diseño del sistema de diseño Samsung One UI

Directrices públicas de diseño y accesibilidad de Samsung, con las decisiones propias del estudio CSS claramente identificadas. No se inventa ninguna paleta, fuente ni componente API no publicado.

### Requisitos publicados de diseño y accesibilidad

| Nombre / Regla | Valor / Configuración | Uso |
| --- | --- | --- |
| Side margins | At least 24dp on left and right | Referencia de diseño nativa; no cambies silenciosamente dp por píxeles CSS. |
| Viewing and interaction areas | Viewing above; frequently used interaction below | Organiza deliberadamente el contexto y las acciones accesibles; es un principio de diseño, no una fracción fija de la altura de la pantalla. |
| Cutout handling | Adapt placement to camera cutouts and orientation | No ocultes contenido esencial detrás de una muesca del dispositivo. |
| Text resizing | Up to 200% without losing content or function | Directrices de accesibilidad publicadas; el estudio en el navegador muestra la redistribución de párrafos con su control explícito de tamaño de lectura. |
| Target separation | Large enough touch areas with space between them | El texto público no proporciona aquí un mínimo numérico; los controles de 48 px del ejemplo son una decisión original para la web. |
### Reglas de interacción publicadas

| Nombre / Regla | Valor / Configuración | Uso |
| --- | --- | --- |
| Complex gestures | Provide an alternative action | No hagas que arrastrar o interactuar con varios dedos sea la única forma de completar una tarea. |
| Automatic content | Provide control for moving content over 5 seconds | El estudio no incluye ningún carrusel automático ni elementos que desaparezcan tras un tiempo determinado. |
| Error recovery | Clear message and focus on the next useful action | Usa texto visible y una acción clara para recuperarse. |
| Screen transitions | Feedback and an explicit way back | El diálogo de restablecimiento permite cancelar y recuperarse con la tecla Escape. |
| Focus blocks | Subdued surfaces for function-focused content | Directrices sobre roles de color; no se inventa ninguna paleta numérica como si fuera una exportación oficial de tokens. |
### Decisiones originales del estudio en el navegador: no son tokens de Samsung

| Nombre / Regla | Valor / Configuración | Uso |
| --- | --- | --- |
| --study-background | #F3F3F6 | Creado para esta interpretación independiente en el navegador. Este valor no se presenta como un token oficial de diseño de One UI. |
| --study-card | #FFFFFF | Creado para esta interpretación independiente en el navegador. Este valor no se presenta como un token oficial de diseño de One UI. |
| --study-text | #17171C | Creado para esta interpretación independiente en el navegador. Este valor no se presenta como un token oficial de diseño de One UI. |
| --study-action | #2557C8 | Creado para esta interpretación independiente en el navegador. Este valor no se presenta como un token oficial de diseño de One UI. |
| Card radius | 24px | Creado para esta interpretación independiente en el navegador. Este valor no se presenta como un token oficial de diseño de One UI. |
| Minimum control height | 48px | Creado para esta interpretación independiente en el navegador. Este valor no se presenta como un token oficial de diseño de One UI. |
| Reading-size options | 100%, 150%, 200% | Creado para esta interpretación independiente en el navegador. Este valor no se presenta como un token oficial de diseño de One UI. |
## Guía completa del sistema de diseño Samsung One UI

Una guía práctica para elegir, aplicar y revisar este sistema en una interfaz real.

Orientación completa, un punto de partida para la implementación y enlaces al código fuente.

## Directrices de diseño de One UI y alcance del navegador del sistema de diseño Samsung One UI

### Trata One UI como directrices de plataforma

> One UI describe interacciones en dispositivos Samsung, incluidos teléfonos, pantallas más grandes y dispositivos plegables. No es un paquete genérico de componentes web. El ejemplo proporcionado es un estudio original en el navegador sobre preferencias de lectura. Muestra una zona de visualización, una zona de interacción inferior y opciones explícitas de recuperación, sin afirmar que ejecuta componentes Samsung ni que cambia la configuración de un dispositivo.

### Representa los valores de implementación con precisión

La referencia distingue los requisitos publicados de los valores creados para el navegador. Un margen nativo de 24dp se registra en su unidad original; el margen interior de 24px de la vista previa es una interpretación deliberada para la web. El azul, los fondos grises y el radio de tarjeta de 24px son valores originales del estudio. Esta distinción evita que un agente de IA confunda una variable CSS visualmente plausible con un token de Samsung verificado.

- Mantén separados dp y px CSS.

- Identifica las decisiones originales sobre la paleta y el radio como originales.

- No describas una vista previa en el navegador como si fuera un ajuste del sistema Samsung.

## Zona de visualización y acciones accesibles del sistema de diseño Samsung One UI

### Asigna una función útil a la zona inicial

La región superior presenta las preferencias de lectura y ofrece una breve línea de contexto. Debajo, los ajustes agrupados y una muestra de lectura sirven de apoyo para la tarea. Las acciones de aplicar y restablecer aparecen después de esos grupos. Esta estructura facilita la lectura del título y mantiene juntas las acciones relevantes, en lugar de repartir controles sin relación por un marco decorativo de dispositivo.

### Adapta la estructura en lugar de fingir que es un dispositivo

El estudio en el navegador no tiene barra de estado del sistema operativo, muesca de cámara ni permisos del dispositivo. En la disposición estrecha, todos los ajustes siguen disponibles y la fila de acciones puede apilarse. Las implementaciones nativas deben tener en cuenta las áreas seguras reales, las muescas, la orientación y los cambios en dispositivos plegables. Una captura de pantalla adaptable del navegador no permite verificar esos comportamientos específicos del dispositivo.

## Fondos discretos y apariencia explícita del sistema de diseño Samsung One UI

### Usa bloques de fondo para agrupar contenido relacionado

Cada ajuste y la muestra de lectura se encuentran sobre una superficie de tarjeta discreta. El color de acción identifica las opciones interactivas, mientras que el texto descriptivo utiliza un rol atenuado distinto. La apariencia oscura cambia los mismos roles en lugar de superponer una capa oscura sobre una interfaz clara. Todos estos colores CSS son valores creados para esta interpretación y están identificados como tales en el código fuente descargable.

### Conserva los ajustes al cambiar la apariencia

La casilla de apariencia solo afecta al tema de la vista previa. No borra el tamaño de lectura seleccionado ni implica que haya cambiado una preferencia del sistema Samsung. La aplicación elimina cualquier confirmación aplicada previamente cuando cambia una opción, para que el mensaje de estado no describa un estado que ya no está vigente.

## Escala de lectura y redistribución del texto del sistema de diseño Samsung One UI

### Demuestra explícitamente el caso del 200 %

El control de tamaño de lectura ofrece opciones del 100, 150 y 200 %. Cambia el tamaño de fuente del párrafo de muestra y permite que su tarjeta crezca de forma natural. El texto no se trunca, no se superpone a los controles adyacentes ni requiere una segunda región de altura fija. El control sirve específicamente para la muestra de lectura; no pretende cambiar la configuración de fuentes de todos los navegadores o sistemas operativos.

### Mantén las palabras completas disponibles

El párrafo usa texto corriente y una altura de línea que escala junto con él. En el ancho mínimo probado, las palabras se ajustan dentro de la tarjeta y el contenido sigue disponible en el orden del documento. Esto demuestra un caso de redistribución del texto; una interfaz de producción también debe probar todas sus etiquetas, traducciones y contenido real con la configuración de accesibilidad nativa.

## Aplicar, restablecer y enfocar diálogos en el sistema de diseño Samsung One UI

### Usa un mensaje de confirmación que corresponda a la acción

Aplicar a esta vista previa muestra la apariencia elegida y el porcentaje de lectura. El mensaje indica explícitamente que no se envió nada a ningún dispositivo. Es un mensaje de estado persistente, en lugar de una notificación emergente que desaparece rápidamente, para que el lector tenga tiempo de revisar el resultado. Al cambiar cualquiera de los ajustes, se borra la confirmación anterior.

### Haz que restablecer sea una elección explícita

Restablecer abre un diálogo nativo del navegador con las acciones Mantener preferencias y Restablecer. Cancelar y Escape conservan ambas opciones actuales. Al confirmar el restablecimiento, se recuperan la apariencia clara y el tamaño estándar; después, el foco vuelve a la acción que abrió el diálogo. La transición de estado completa está definida en el código fuente, en lugar de describirse como un controlador sin especificar.

## Estudio completo del navegador y próximos pasos nativos del sistema de diseño Samsung One UI

### Ejecutar sin una dependencia inventada de One UI

El documento completo HTML incluye todos los estilos, el contenido y JavaScript. Guárdalo como index.html y sírvelo localmente. No realiza solicitudes a fuentes externas ni al entorno de ejecución, y no requiere el SDK de Samsung. Al pasar a una aplicación nativa, usa los recursos oficiales de One UI y Android para los controles reales de la plataforma, las unidades de densidad, los servicios de accesibilidad y los cambios de configuración.

1. Guarda el documento HTML autocontenido proporcionado.

2. Sirve su directorio localmente y abre la vista previa.

3. Prueba el tamaño de lectura del 200 % y ambos modos de apariencia.

4. Verifica por separado la cancelación, Escape y el restablecimiento confirmado.

### Prueba la secuencia que permite detectar errores

Elige la apariencia oscura y el tamaño de lectura del 200 %, aplícalos y revisa la confirmación. Abre el restablecimiento, cancélalo y comprueba que ambas opciones se conserven. Repite el proceso con Escape; después, confirma el restablecimiento y verifica que se recuperen los valores y el foco. Revisa el párrafo ampliado en anchos de escritorio y teléfono, y comprueba que no se recorten palabras ni controles.

## Ejemplos de componentes del sistema de diseño Samsung One UI

### index.html — estudio completo de preferencias de lectura

Diseño completo, roles claro/oscuro, control de escala de texto y diálogo de restablecimiento que permite cancelar.

```
<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Reading preferences study</title><style>
/* Original web-study values, not exported Samsung design tokens. */
:root{--study-background:#f3f3f6;--study-card:#fff;--study-text:#17171c;--study-muted:#5b5b66;--study-action:#2557c8;--study-border:#d9d9e1;--study-text-scale:1}*{box-sizing:border-box}body{margin:0;background:var(--study-background);font-family:Arial,sans-serif;color:var(--study-text)}body.dark{--study-background:#101014;--study-card:#222228;--study-text:#f7f7fb;--study-muted:#bbbbc8;--study-action:#9bbaff;--study-border:#41414c}main{max-width:980px;padding:32px;margin:auto}.context{font-size:13px;line-height:1.6;color:var(--study-muted);max-width:74ch}.phone{max-width:560px;margin:32px auto;background:var(--study-background)}.viewing{padding:40px 24px 32px;min-height:230px;display:flex;flex-direction:column;justify-content:flex-end}.viewing p{font-size:14px;margin:0 0 16px;color:var(--study-muted)}h1{font-size:40px;line-height:1.15;margin:0;letter-spacing:-.025em}h2,.setting-title{font-size:20px;line-height:1.4;margin:0}section.settings{padding:0 24px}.card{border-radius:24px;background:var(--study-card);padding:24px;margin-bottom:16px}.setting{display:flex;gap:24px;justify-content:space-between;align-items:center}.setting p{font-size:14px;line-height:1.5;color:var(--study-muted);margin:8px 0 0}input[type=checkbox]{width:28px;height:28px;accent-color:var(--study-action);flex-shrink:0}label{cursor:pointer}.field{display:grid;gap:12px}select,button{font:inherit}select{width:100%;border:1px solid var(--study-border);border-radius:12px;padding:12px;background:var(--study-card);color:var(--study-text);min-height:48px}.sample{font-size:calc(16px * var(--study-text-scale));line-height:1.55;overflow-wrap:anywhere;margin:16px 0 0}.actions{padding:16px 24px 24px;display:grid;grid-template-columns:1fr 1fr;gap:16px}button{border:0;border-radius:999px;min-height:48px;padding:12px 16px;color:var(--study-action);background:var(--study-card);font-weight:700;cursor:pointer}.primary{background:var(--study-action);color:var(--study-background)}:focus-visible{outline:3px solid var(--study-action);outline-offset:4px}dialog{width:min(440px,calc(100% - 32px));border:0;border-radius:24px;padding:24px;background:var(--study-card);color:var(--study-text)}dialog::backdrop{background:#0008}dialog p{line-height:1.6}dialog .dialog-actions{display:flex;gap:12px;justify-content:flex-end;flex-wrap:wrap}#confirmation{font-size:14px;line-height:1.5;padding:0 24px 16px;color:var(--study-muted)}#confirmation:empty{display:none}@media(max-width:600px){main{padding:16px}.phone{margin:16px auto}.viewing{padding:32px 24px}.card{padding:20px}.actions{grid-template-columns:1fr}.setting{gap:16px}h1{font-size:34px}h2,.setting-title{font-size:18px}}
</style></head><body><main><p class="context">OpenDesign original One UI-inspired web study. This demonstrates viewing and interaction areas, readable settings and explicit recovery. It does not control a Samsung device or run native One UI components.</p><div class="phone"><header class="viewing"><p>Make space to read</p><h1>Reading preferences</h1></header><section class="settings" aria-label="Reading preferences"><div class="card"><label class="setting"><span><strong class="setting-title">Dark appearance</strong><p>Use a darker surface in this preview.</p></span><input type="checkbox" id="dark" aria-label="Dark appearance"></label></div><div class="card"><label class="field" for="size"><strong class="setting-title">Reading size</strong><select id="size"><option value="1">Standard · 100%</option><option value="1.5">Large · 150%</option><option value="2">Extra large · 200%</option></select></label></div><div class="card"><h2>A moment to pause</h2><p class="sample">A clear page gives each idea room to breathe. Keep the words that help the reader decide what to do next.</p></div></section><div class="actions"><button id="reset">Reset preferences</button><button class="primary" id="apply">Apply to this preview</button></div><p id="confirmation" role="status"></p></div><dialog aria-labelledby="reset-title"><h2 id="reset-title">Reset reading preferences?</h2><p>This returns the preview to its light appearance and standard reading size.</p><div class="dialog-actions"><button id="cancel">Keep preferences</button><button id="confirm-reset" class="primary">Reset</button></div></dialog><p class="context">Published references include the 24dp side-margin guidance and text scaling up to 200%. CSS pixels here are an original browser interpretation of the layout; app colors and radii are explicitly original. Reading-size changes affect the sample paragraph so its reflow can be inspected. No preference is saved beyond this page.</p></main><script>
const dark=document.querySelector('#dark'),size=document.querySelector('#size'),confirmation=document.querySelector('#confirmation'),dialog=document.querySelector('dialog');function refresh(){document.body.classList.toggle('dark',dark.checked);document.documentElement.style.setProperty('--study-text-scale',size.value);confirmation.textContent='';}dark.onchange=refresh;size.onchange=refresh;document.querySelector('#apply').onclick=()=>{confirmation.textContent=`Applied to this preview: ${dark.checked?'dark':'light'} appearance, ${Math.round(Number(size.value)*100)}% reading size. Nothing was sent to a device.`};document.querySelector('#reset').onclick=()=>dialog.showModal();document.querySelector('#cancel').onclick=()=>dialog.close();document.querySelector('#confirm-reset').onclick=()=>{dark.checked=false;size.value='1';refresh();dialog.close();confirmation.textContent='Light appearance and standard reading size restored.';};dialog.addEventListener('close',()=>document.querySelector('#reset').focus());
</script></body></html>
```

Referencia de código

- Los colores y dimensiones con el prefijo Study son decisiones originales para la web.

- La escala de lectura cambia el párrafo de muestra; no modifica las preferencias del navegador ni del dispositivo.

## Configuración del agente para el sistema de diseño Samsung One UI

### Punto de partida para la implementación

Esto ejecuta el estudio original en el navegador. Este ejemplo no incluye ningún paquete npm de One UI ni entorno de ejecución nativo de Samsung.

```
# Save the supplied complete example as index.html.
python3 -m http.server 8000
# Open http://localhost:8000/
```

### Una instrucción para tu proyecto

```
Crea el estudio de lectura proporcionado, inspirado en One UI, como una interpretación original y explícitamente web. Conserva las áreas de visualización e interacción, la redistribución adaptable del texto al 200 %, el estado explícito de la apariencia, la confirmación solo local, el restablecimiento que permite cancelar y la devolución del foco. Mantén separados los requisitos nativos en dp de las decisiones originales en píxeles de CSS.
```

## Fuentes y alcance del sistema de diseño Samsung One UI

Una interpretación original para navegador de los principios de OpenDesign inspirada en One UI. No es un entorno de ejecución nativo de One UI ni modifica los ajustes del dispositivo. En la referencia se distinguen los requisitos publicados de los valores originales para la web.

- Principios de One UI Visualización, interacción y experiencia adaptable.

- Sistema de cuadrícula Márgenes de 24dp, recortes y contextos de dispositivo.

- Diseño y tipografía Escalado de texto al 200 % y separación de objetivos táctiles.

- Interacción y controles Recuperación, métodos de entrada alternativos y navegación explícita.

- Sistema de color Bloques de enfoque discretos y roles de color deliberados.

## Recursos relacionados del sistema de diseño Samsung One UI

### SAP Fiori

Usa el tema Horizon de SAP Fiori mediante UI5 Web Components: parámetros de tema reales, densidad de contenido explícita, estados de valor semánticos y una composición de solicitud de compra con validación local.

### SEEK Braid

Conoce Braid mediante una composición original de búsqueda de empleo: variables limitadas al tema, cuatro puntos de ruptura reales, texto contextual, tonos de botón diferenciados y un campo controlado que explica la validación en lugar de desactivar la acción.

### Segment Evergreen

Una referencia de Evergreen con valores de tema reales, entrada controlada de etiquetas, coincidencia de reglas en tiempo real, una vía para recuperarse de un estado vacío y un diálogo de revisión nativo.


- [Referencia de implementación](https://developer.samsung.com/one-ui/index.html)
- [Fuente](https://developer.samsung.com/one-ui/accessibility/layout-and-typo.html)
- [Fuente](https://developer.samsung.com/one-ui/accessibility/interaction-and-control.html)
- [Fuente](https://developer.samsung.com/one-ui/color/system.html)
- [Referencia de código](https://developer.samsung.com/one-ui/accessibility/interaction-and-control.html)
- [Principios de One UI Visualización, interacción y experiencia adaptable.](https://developer.samsung.com/one-ui/index.html)
- [Sistema de cuadrícula Márgenes de 24dp, recortes y contextos de dispositivo.](https://developer.samsung.com/one-ui/layout/grid.html)
- [Diseño y tipografía Escalado de texto al 200 % y separación de objetivos táctiles.](https://developer.samsung.com/one-ui/accessibility/layout-and-typo.html)
- [Interacción y controles Recuperación, métodos de entrada alternativos y navegación explícita.](https://developer.samsung.com/one-ui/accessibility/interaction-and-control.html)
- [Sistema de color Bloques de enfoque discretos y roles de color deliberados.](https://developer.samsung.com/one-ui/color/system.html)