Sistema de diseño Samsung One UI.

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

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

<!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>