# Système de design Samsung One UI ## Aperçu d’interface du système de design Samsung One UI Changez l’apparence, examinez le texte agrandi à 200 % et annulez ou confirmez la réinitialisation. ## Référence de conception du système de design Samsung One UI Consignes publiques de Samsung sur la mise en page et l’accessibilité, avec les choix propres à cette étude CSS identifiés séparément. Aucune palette, police ni aucun composant API non publié n’est inventé. ### Exigences publiées en matière de mise en page et d’accessibilité | Nom / règle | Valeur / configuration | Utilisation | | --- | --- | --- | | Side margins | At least 24dp on left and right | Référence de mise en page native ; ne requalifiez pas silencieusement les dp en pixels CSS. | | Viewing and interaction areas | Viewing above; frequently used interaction below | Organisez délibérément le contexte et les actions accessibles ; il s’agit d’un principe de mise en page, pas d’une fraction fixe de la hauteur de l’écran. | | Cutout handling | Adapt placement to camera cutouts and orientation | Ne placez pas de contenu essentiel derrière une découpe de l’appareil. | | Text resizing | Up to 200% without losing content or function | Consignes d’accessibilité publiées ; cette étude montre la redistribution des paragraphes à l’aide d’une commande explicite de taille de lecture. | | Target separation | Large enough touch areas with space between them | Le texte public ne précise pas de minimum numérique à cet endroit ; les commandes de 48px de l’exemple relèvent d’un choix de conception Web d’origine. | ### Règles d’interaction publiées | Nom / règle | Valeur / configuration | Utilisation | | --- | --- | --- | | Complex gestures | Provide an alternative action | Ne faites pas du glisser-déposer ou des interactions à plusieurs doigts le seul moyen d’accomplir une tâche. | | Automatic content | Provide control for moving content over 5 seconds | L’étude ne comporte ni carrousel automatique ni disparition programmée. | | Error recovery | Clear message and focus on the next useful action | Utilisez un texte visible et une action de récupération explicite. | | Screen transitions | Feedback and an explicit way back | La boîte de dialogue de réinitialisation permet d’annuler et de récupérer le focus avec la touche Échap. | | Focus blocks | Subdued surfaces for function-focused content | Consignes sur les rôles des couleurs ; aucune palette numérique n’est inventée comme export officiel de jetons. | ### Choix propres à l’étude dans le navigateur — pas des jetons Samsung | Nom / règle | Valeur / configuration | Utilisation | | --- | --- | --- | | --study-background | #F3F3F6 | Conçu pour cette interprétation autonome dans un navigateur. Cette valeur n’est pas présentée comme un jeton officiel du système de design One UI. | | --study-card | #FFFFFF | Conçu pour cette interprétation autonome dans un navigateur. Cette valeur n’est pas présentée comme un jeton officiel du système de design One UI. | | --study-text | #17171C | Conçu pour cette interprétation autonome dans un navigateur. Cette valeur n’est pas présentée comme un jeton officiel du système de design One UI. | | --study-action | #2557C8 | Conçu pour cette interprétation autonome dans un navigateur. Cette valeur n’est pas présentée comme un jeton officiel du système de design One UI. | | Card radius | 24px | Conçu pour cette interprétation autonome dans un navigateur. Cette valeur n’est pas présentée comme un jeton officiel du système de design One UI. | | Minimum control height | 48px | Conçu pour cette interprétation autonome dans un navigateur. Cette valeur n’est pas présentée comme un jeton officiel du système de design One UI. | | Reading-size options | 100%, 150%, 200% | Conçu pour cette interprétation autonome dans un navigateur. Cette valeur n’est pas présentée comme un jeton officiel du système de design One UI. | ## Guide complet du système de design Samsung One UI Un guide pratique pour choisir, appliquer et évaluer ce système dans une interface réelle. Des conseils complets, un point de départ pour la mise en œuvre et des liens vers les sources. ## 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 Le paragraphe utilise du texte courant et une hauteur de ligne qui s’adapte à sa taille. À la plus petite largeur testée, les mots reviennent à la ligne dans la carte et le contenu reste accessible dans l’ordre du document. Cela illustre un cas de redistribution du texte ; une interface de production doit également être testée avec l’ensemble de ses libellés, traductions et contenus réels, ainsi qu’avec les paramètres d’accessibilité natifs. ## 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 ### index.html — étude complète des préférences de lecture La mise en page complète, les rôles clair et sombre, le contrôle de taille du texte et la boîte de dialogue de réinitialisation qui permet d’annuler sans risque. ``` 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.

``` Référence du code - Les couleurs et dimensions préfixées par Study sont des choix web originaux. - L’échelle de lecture modifie le paragraphe d’exemple ; aucune préférence du navigateur ou de l’appareil n’est modifiée. ## Samsung One UI Configuration de l’agent IA — système de design ### Point de départ de l’implémentation Cette commande exécute l’étude originale dans le navigateur. Cet exemple ne contient aucun package npm One UI ni environnement d’exécution Samsung natif. ``` # Save the supplied complete example as index.html. python3 -m http.server 8000 # Open http://localhost:8000/ ``` ### Un prompt pour votre projet ``` Créez l’étude de lecture fournie, inspirée de One UI, sous la forme d’une interprétation originale explicitement destinée au navigateur. Préservez les zones d’affichage et d’interaction, la redistribution adaptative du texte à 200 %, l’état d’apparence explicite, la confirmation locale uniquement, la réinitialisation annulable et le retour du focus. Distinguez les exigences natives en dp des choix originaux en pixels CSS. ``` ## Samsung One UI Sources et périmètre du système de design Interprétation originale OpenDesign des principes One UI dans le navigateur. Il ne s’agit pas d’un environnement d’exécution One UI natif et aucun paramètre de l’appareil n’est modifié. La référence distingue les exigences publiées des valeurs web originales. - Principes One UI Affichage, interaction et expérience adaptable. - Système de grille Marges de 24 dp, découpes et contextes d’appareil. - Mise en page et typographie Mise à l’échelle du texte jusqu’à 200 % et espacement des cibles. - Interaction et commandes Récupération, saisie alternative et navigation explicite. - Système de couleurs Zones de focus discrètes et rôles de couleur définis avec intention. ## Ressources associées au système de design Samsung One UI ### SAP Fiori Utilisez le thème Horizon de SAP Fiori avec UI5 Web Components : véritables paramètres de thème, densité du contenu définie explicitement, états de valeur sémantiques et composition d’une demande d’achat avec validation locale. ### SEEK Braid Découvrez Braid à travers une composition originale de recherche d’emploi : des variables propres à chaque thème, quatre véritables points de rupture, du texte contextuel, des styles de boutons distincts et un champ contrôlé qui explique les erreurs de validation au lieu de désactiver l’action. ### Segment Evergreen Une référence Evergreen avec les valeurs de thème réelles, la saisie contrôlée de tags, la correspondance des règles en temps réel, un parcours de récupération depuis un état vide et une boîte de dialogue de révision native. - [Référence de mise en œuvre](https://developer.samsung.com/one-ui/index.html) - [Source](https://developer.samsung.com/one-ui/accessibility/layout-and-typo.html) - [Source](https://developer.samsung.com/one-ui/accessibility/interaction-and-control.html) - [Source](https://developer.samsung.com/one-ui/color/system.html) - [Référence du code](https://developer.samsung.com/one-ui/accessibility/interaction-and-control.html) - [Principes One UI Affichage, interaction et expérience adaptable.](https://developer.samsung.com/one-ui/index.html) - [Système de grille Marges de 24 dp, découpes et contextes d’appareil.](https://developer.samsung.com/one-ui/layout/grid.html) - [Mise en page et typographie Mise à l’échelle du texte jusqu’à 200 % et espacement des cibles.](https://developer.samsung.com/one-ui/accessibility/layout-and-typo.html) - [Interaction et commandes Récupération, saisie alternative et navigation explicite.](https://developer.samsung.com/one-ui/accessibility/interaction-and-control.html) - [Système de couleurs Zones de focus discrètes et rôles de couleur définis avec intention.](https://developer.samsung.com/one-ui/color/system.html)