Système de design Samsung One UI.

Consignes One UI du système de design Samsung One UI et périmètre dans le navigateur

Considérez One UI comme des consignes de plateforme

One UI décrit les interactions sur les appareils Samsung, notamment les téléphones, les grands écrans et les appareils pliables. Il ne s’agit pas d’un package générique de composants Web. L’exemple fourni est une étude originale des préférences de lecture dans un navigateur. Il illustre une zone de lecture, une zone d’interaction inférieure et des options de récupération explicites, sans prétendre exécuter des composants Samsung ni modifier un réglage de l’appareil.

Présentez honnêtement les valeurs d’implémentation

La référence distingue les exigences publiées des valeurs définies pour le navigateur. Une marge native de 24dp est consignée dans son unité d’origine ; l’inset de 24px de l’aperçu est une interprétation web délibérée. Le bleu, les surfaces grises et le rayon de carte de 24px sont des valeurs originales issues de l’étude. Cette distinction évite qu’un agent IA traite une variable CSS visuellement plausible comme un jeton Samsung vérifié.

• Distinguez les dp des px CSS.
• Indiquez que la palette et le rayon sont des choix originaux.
• Ne présentez pas un aperçu dans un navigateur comme un réglage système Samsung.

Samsung One UI Zone d’affichage du système de design et actions accessibles

Donnez un rôle utile à la zone supérieure

La partie supérieure présente les préférences de lecture et une courte phrase de contexte. Plus bas, les paramètres regroupés et un exemple de lecture permettent d’accomplir la tâche. Les boutons Appliquer et Réinitialiser suivent ces groupes. Cette structure rend le titre facile à lire et rassemble les actions importantes, au lieu de disperser des commandes sans lien autour d’un cadre d’appareil décoratif.

Adaptez la structure au lieu de simuler un appareil

L’étude dans le navigateur ne comprend ni barre d’état du système d’exploitation, ni découpe pour la caméra, ni autorisations de l’appareil. La mise en page étroite conserve tous les paramètres accessibles et permet d’empiler la rangée d’actions. Les implémentations natives doivent néanmoins tenir compte des zones de sécurité, des découpes, de l’orientation et des changements liés aux appareils pliables. Une capture d’écran adaptative dans un navigateur ne permet pas de vérifier ces comportements propres aux appareils.

Samsung One UI Surfaces discrètes et apparence explicite du système de design

Regroupez les contenus associés dans des blocs d’arrière-plan

Chaque paramètre et l’exemple de lecture se trouvent sur une surface de carte discrète. La couleur d’action signale les choix interactifs, tandis que le texte descriptif utilise un rôle atténué distinct. Le thème sombre modifie ces mêmes rôles plutôt que de superposer un voile sombre à une interface claire. Toutes ces couleurs CSS sont des valeurs d’interprétation définies pour l’étude ; le code source téléchargeable les identifie comme telles.

Conservez les paramètres lors du changement d’apparence

La case à cocher d’apparence ne modifie que le thème de l’aperçu. Elle n’efface pas la taille de lecture sélectionnée et ne signifie pas qu’une préférence système Samsung a changé. Lorsqu’un choix est modifié, l’application efface toute confirmation précédente afin que le message d’état ne décrive pas un état qui n’est plus actuel.

Samsung One UI Échelle de lecture et redistribution du texte du système de design

Présentez explicitement le cas à 200 %

Le contrôle de taille de lecture propose des options à 100, 150 et 200 %. Il modifie la taille de police du paragraphe d’exemple et permet à sa carte de s’agrandir naturellement. Le texte n’est ni tronqué ni superposé aux commandes voisines et ne nécessite pas de zone supplémentaire à hauteur fixe. Ce contrôle sert précisément à présenter un exemple de lecture ; il ne prétend pas modifier tous les paramètres de police du navigateur ou du système d’exploitation.

Gardez le texte complet accessible

Samsung One UI Application, réinitialisation et focus des boîtes de dialogue du système de design

Adaptez le message de confirmation à l’action

Le bouton Appliquer à cet aperçu indique l’apparence choisie et le pourcentage de lecture. Le message précise qu’aucune information n’a été envoyée à un appareil. Il s’agit d’un message d’état persistant, et non d’une notification éphémère, afin de laisser au lecteur le temps d’examiner le résultat. La modification de l’un ou l’autre des paramètres efface cette confirmation précédente.

Faites de la réinitialisation un choix explicite

Le bouton Réinitialiser ouvre une boîte de dialogue native du navigateur proposant les actions Conserver les préférences et Réinitialiser. Les actions Annuler et Échap conservent les deux choix actuels. La confirmation de la réinitialisation rétablit l’apparence claire et la taille standard, puis rend le focus à l’action qui a ouvert la boîte de dialogue. La transition complète est implémentée dans le code source plutôt que décrite comme un gestionnaire non spécifié.

Samsung One UI Étude complète dans le navigateur et étapes suivantes pour le natif — système de design

Exécuter sans dépendance One UI inventée

Le document HTML complet inclut tous les styles, le contenu et JavaScript. Enregistrez-le sous le nom index.html et servez-le en local. Il ne fait aucune requête externe pour des polices ou l’exécution et ne nécessite aucun SDK Samsung. Pour passer à une application native, utilisez les ressources officielles One UI et Android pour les commandes de plateforme, les unités de densité, les services d’accessibilité et les changements de configuration réels.

1. Enregistrez le document autonome HTML fourni.
2. Servez son répertoire en local et ouvrez l’aperçu.
3. Testez la taille de lecture à 200 % et les deux modes d’apparence.
4. Vérifiez séparément l’annulation, la touche Échap et la réinitialisation confirmée.

Testez la séquence qui révèle les erreurs

Choisissez l’apparence sombre et une taille de lecture de 200 %, appliquez ces choix, puis examinez la confirmation. Ouvrez la réinitialisation, annulez et vérifiez que les deux choix sont conservés. Recommencez avec la touche Échap, puis confirmez la réinitialisation et vérifiez que les valeurs sont rétablies et que le focus revient au bon endroit. Examinez le paragraphe agrandi sur ordinateur et téléphone, en vérifiant qu’aucun mot ni aucune commande n’est tronqué.

Samsung One UI Exemples de composants du système de design

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