Sistema de design Samsung One UI.

Orientações de design do One UI e escopo do navegador do sistema de design Samsung One UI

Trate o One UI como orientação para plataformas

O One UI descreve interações em dispositivos Samsung, incluindo celulares, telas maiores e dispositivos dobráveis. Não é um pacote genérico de componentes para a web. O exemplo fornecido é um estudo original no navegador sobre preferências de leitura. Ele demonstra uma área de visualização, uma área de interação inferior e opções explícitas de recuperação, sem alegar que executa componentes Samsung ou altera uma configuração do dispositivo.

Mantenha os valores de implementação precisos

A referência separa requisitos publicados de valores criados para o navegador. Uma margem nativa de 24dp é registrada em sua unidade original; o recuo de 24px da pré-visualização é uma interpretação deliberada para a web. O azul, as superfícies cinza e o raio de 24px dos cartões são valores originais do estudo. Essa distinção impede que um agente trate uma variável CSS visualmente plausível como um token Samsung verificado.

• Mantenha dp e px CSS distintos.
• Identifique as escolhas originais de paleta e raio como originais.
• Não descreva uma pré-visualização no navegador como uma configuração do sistema Samsung.

Área de visualização e ações acessíveis do sistema de design Samsung One UI

Dê uma função útil à área inicial

A região superior apresenta Preferências de leitura e uma breve linha de contexto. Abaixo, as configurações agrupadas e um exemplo de leitura dão suporte à tarefa. Aplicar e redefinir aparecem depois desses grupos. A estrutura facilita a leitura do título e mantém juntas as ações relevantes, em vez de espalhar controles sem relação entre si ao redor de uma moldura decorativa de dispositivo.

Adapte a estrutura em vez de simular um dispositivo

O estudo no navegador não tem barra de status do sistema operacional, recorte de câmera nem permissões do dispositivo. No layout estreito, todas as configurações continuam disponíveis e a linha de ações pode ser empilhada. Implementações nativas ainda precisam considerar áreas seguras reais, recortes, orientação e mudanças em dispositivos dobráveis. Uma captura de tela responsiva do navegador não verifica esses comportamentos específicos do dispositivo.

Superfícies discretas e aparência explícita do sistema de design Samsung One UI

Use blocos de fundo para agrupar conteúdo relacionado

Cada configuração e o exemplo de leitura ficam sobre uma superfície de cartão discreta. A cor de ação identifica as opções interativas, enquanto o texto descritivo usa uma função visual atenuada distinta. A aparência escura altera as mesmas funções em vez de sobrepor uma camada escura à interface clara. Todas essas cores CSS são valores criados para esta interpretação e estão identificadas como tal no código-fonte para download.

Preserve as configurações ao alterar a aparência

A caixa de seleção de aparência afeta apenas o tema da pré-visualização. Ela não apaga o tamanho de leitura selecionado nem indica que uma preferência do sistema Samsung foi alterada. O aplicativo limpa qualquer confirmação de aplicação anterior quando uma opção muda, para que a mensagem de status não descreva um estado que já não é atual.

Escala de leitura e reorganização do sistema de design Samsung One UI

Demonstre explicitamente o caso de 200%

O controle de tamanho de leitura oferece as opções de 100%, 150% e 200%. Ele altera o tamanho da fonte do parágrafo de exemplo e permite que o cartão se expanda naturalmente. O texto não é truncado, não se sobrepõe aos controles adjacentes nem exige uma segunda região com altura fixa. O controle serve especificamente para o exemplo de leitura; não altera todas as configurações de fonte do navegador ou do sistema operacional.

Mantenha todas as palavras disponíveis

Aplicação, redefinição e foco do diálogo no sistema de design Samsung One UI

Use uma confirmação que corresponda à ação

Aplicar a esta pré-visualização informa a aparência escolhida e a porcentagem de leitura. A mensagem deixa explícito que nada foi enviado a um dispositivo. Em vez de um aviso temporário que desaparece rapidamente, ela permanece visível para dar tempo de conferir o resultado. Alterar qualquer uma das configurações limpa essa confirmação anterior.

Torne a redefinição uma escolha explícita

Redefinir abre um diálogo nativo do navegador com as ações Manter preferências e Redefinir. Cancelar e Escape preservam as duas opções atuais. Ao confirmar, a aparência clara e o tamanho padrão são restaurados, e o foco retorna à ação que abriu o diálogo. A transição completa de estado está implementada no código-fonte, em vez de ser descrita como um manipulador indefinido.

Estudo completo no navegador e próximos passos nativos do sistema de design Samsung One UI

Execute sem inventar uma dependência do One UI

O documento HTML completo inclui todos os estilos, conteúdos e JavaScript. Salve-o como index.html e disponibilize-o localmente. Ele não faz solicitações de fontes externas ou de execução e não exige um SDK Samsung. Ao migrar para um aplicativo nativo, use os recursos oficiais do One UI e do Android para controles reais da plataforma, unidades de densidade, serviços de acessibilidade e alterações de configuração.

1. Salve o documento HTML autocontido fornecido.
2. Disponibilize o diretório localmente e abra a pré-visualização.
3. Teste o tamanho de leitura em 200% e os dois modos de aparência.
4. Verifique separadamente o cancelamento, Escape e a redefinição confirmada.

Teste a sequência que revela problemas

Selecione a aparência escura e o tamanho de leitura de 200%, aplique as opções e confira a confirmação. Abra a redefinição, cancele e verifique se as duas opções foram mantidas. Repita usando Escape; depois, confirme a redefinição e verifique os valores e o retorno do foco. Confira o parágrafo ampliado nas larguras de computador e celular, verificando se nenhuma palavra ou controle fica cortado.

Exemplos de componentes do sistema de design 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>