# Sistema de design Samsung One UI ## Prévia da interface do sistema de design Samsung One UI Alterne a aparência, confira o texto de leitura em 200% e cancele ou confirme uma redefinição. ## Referência de design do sistema de design Samsung One UI Orientações públicas de layout e acessibilidade da Samsung, com escolhas originais do estudo CSS identificadas separadamente. Nenhuma paleta, fonte ou componente API não publicado foi inventado. ### Requisitos publicados de layout e acessibilidade | Nome / Regra | Valor / Configuração | Uso | | --- | --- | --- | | Side margins | At least 24dp on left and right | Referência de layout nativo; não rotule silenciosamente dp como pixels CSS. | | Viewing and interaction areas | Viewing above; frequently used interaction below | Organize o contexto e as ações acessíveis de forma intencional; este é um princípio de layout, não uma fração fixa da altura da tela. | | Cutout handling | Adapt placement to camera cutouts and orientation | Não coloque conteúdo essencial atrás do recorte do dispositivo. | | Text resizing | Up to 200% without losing content or function | Orientações de acessibilidade publicadas; o estudo no navegador demonstra a reorganização do parágrafo com o controle explícito de tamanho de leitura. | | Target separation | Large enough touch areas with space between them | O texto público não especifica um mínimo numérico neste caso; os controles de 48px do exemplo são uma escolha original para a web. | ### Regras de interação publicadas | Nome / Regra | Valor / Configuração | Uso | | --- | --- | --- | | Complex gestures | Provide an alternative action | Não faça de arrastar ou de interações com vários dedos a única maneira de concluir uma tarefa. | | Automatic content | Provide control for moving content over 5 seconds | O estudo não inclui carrossel automático nem conteúdo que desaparece após um tempo. | | Error recovery | Clear message and focus on the next useful action | Use texto visível e uma ação clara de recuperação. | | Screen transitions | Feedback and an explicit way back | O diálogo de redefinição oferece cancelamento e recuperação pela tecla Escape. | | Focus blocks | Subdued surfaces for function-focused content | Orientações sobre funções das cores; nenhuma paleta numérica é inventada como exportação oficial de tokens. | ### Escolhas originais do estudo no navegador — não são tokens da Samsung | Nome / Regra | Valor / Configuração | Uso | | --- | --- | --- | | --study-background | #F3F3F6 | Criado para esta interpretação independente no navegador. Este valor não é apresentado como um token oficial de design do One UI. | | --study-card | #FFFFFF | Criado para esta interpretação independente no navegador. Este valor não é apresentado como um token oficial de design do One UI. | | --study-text | #17171C | Criado para esta interpretação independente no navegador. Este valor não é apresentado como um token oficial de design do One UI. | | --study-action | #2557C8 | Criado para esta interpretação independente no navegador. Este valor não é apresentado como um token oficial de design do One UI. | | Card radius | 24px | Criado para esta interpretação independente no navegador. Este valor não é apresentado como um token oficial de design do One UI. | | Minimum control height | 48px | Criado para esta interpretação independente no navegador. Este valor não é apresentado como um token oficial de design do One UI. | | Reading-size options | 100%, 150%, 200% | Criado para esta interpretação independente no navegador. Este valor não é apresentado como um token oficial de design do One UI. | ## Guia completo do sistema de design Samsung One UI Um guia prático para escolher, aplicar e avaliar este sistema em uma interface real. Orientações completas, um ponto de partida para a implementação e links para o código-fonte. ## 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 O parágrafo usa texto comum e uma altura de linha que acompanha a escala. Na menor largura testada, as palavras quebram dentro do cartão e o conteúdo continua disponível na ordem do documento. Isso demonstra um caso de reorganização; em uma interface de produção, também é necessário testar todos os rótulos, traduções e conteúdos reais nas configurações nativas de acessibilidade. ## 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 ### index.html — estudo completo de preferências de leitura Layout completo, funções visuais para os modos claro e escuro, controle de escala do texto e diálogo de redefinição que permite cancelar. ``` Reading preferences study

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.

Make space to read

Reading preferences

A moment to pause

A clear page gives each idea room to breathe. Keep the words that help the reader decide what to do next.

Reset reading preferences?

This returns the preview to its light appearance and standard reading size.

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.

``` Referência de código - Cores e dimensões com o prefixo Study são escolhas originais para a web. - A escala de leitura altera o parágrafo de exemplo; nenhuma preferência do navegador ou do dispositivo é modificada. ## Configuração do agente para o sistema de design Samsung One UI ### Ponto de partida para implementação Isso executa o estudo original no navegador. Este exemplo não inclui um pacote npm do One UI nem um ambiente de execução nativo da Samsung. ``` # Save the supplied complete example as index.html. python3 -m http.server 8000 # Open http://localhost:8000/ ``` ### Um prompt para seu projeto ``` Crie o estudo de leitura fornecido, inspirado no One UI, como uma interpretação original e explicitamente voltada para o navegador. Preserve as áreas de visualização e interação, a reorganização responsiva do texto em 200%, o estado explícito da aparência, a confirmação somente local, a redefinição com opção de cancelamento e o retorno do foco. Mantenha os requisitos nativos em dp separados das escolhas originais de pixels CSS. ``` ## Fontes e escopo do sistema de design Samsung One UI Uma interpretação original OpenDesign, no navegador, dos princípios do One UI. Não é um ambiente de execução nativo do One UI e não altera as configurações do dispositivo. Os requisitos publicados e os valores originais para a web são apresentados separadamente na referência. - Princípios do One UI Visualização, interação e experiência adaptável. - Sistema de grade Margens de 24dp, recortes e contextos de dispositivos. - Layout e tipografia Escala de texto em 200% e separação das áreas de interação. - Interação e controles Recuperação, métodos de entrada alternativos e navegação explícita. - Sistema de cores Áreas de foco discretas e funções de cor intencionais. ## Recursos relacionados ao sistema de design Samsung One UI ### SAP Fiori Use o tema Horizon de SAP Fiori com UI5 Web Components: parâmetros reais do tema, densidade de conteúdo explícita, estados semânticos de valor e uma composição para solicitações de compra com validação local. ### SEEK Braid Entenda o Braid por meio de uma composição original para busca de empregos: variáveis com escopo de tema, quatro breakpoints reais, texto contextual, botões com tonalidades distintas e um campo controlado que explica a validação em vez de desativar a ação. ### Segment Evergreen Uma referência do Evergreen com valores reais do tema, entrada controlada de tags, correspondência de regras em tempo real, alternativa de recuperação para estados vazios e uma caixa de diálogo nativa para revisão. - [Referência de implementação](https://developer.samsung.com/one-ui/index.html) - [Fonte](https://developer.samsung.com/one-ui/accessibility/layout-and-typo.html) - [Fonte](https://developer.samsung.com/one-ui/accessibility/interaction-and-control.html) - [Fonte](https://developer.samsung.com/one-ui/color/system.html) - [Referência de código](https://developer.samsung.com/one-ui/accessibility/interaction-and-control.html) - [Princípios do One UI Visualização, interação e experiência adaptável.](https://developer.samsung.com/one-ui/index.html) - [Sistema de grade Margens de 24dp, recortes e contextos de dispositivos.](https://developer.samsung.com/one-ui/layout/grid.html) - [Layout e tipografia Escala de texto em 200% e separação das áreas de interação.](https://developer.samsung.com/one-ui/accessibility/layout-and-typo.html) - [Interação e controles Recuperação, métodos de entrada alternativos e navegação explícita.](https://developer.samsung.com/one-ui/accessibility/interaction-and-control.html) - [Sistema de cores Áreas de foco discretas e funções de cor intencionais.](https://developer.samsung.com/one-ui/color/system.html)