# Samsung One UI-Designsystem

## Vorschau der Samsung One UI-Designsystem-Oberfläche

Darstellung wechseln, Text in 200 % Leseschriftgröße prüfen und Zurücksetzen abbrechen oder bestätigen.

## Designreferenz für das Samsung One UI-Designsystem

Samsungs öffentliche Layout- und Barrierefreiheitsrichtlinien sowie separat gekennzeichnete Gestaltungsentscheidungen der originalen CSS-Studie. Es werden keine unveröffentlichten Farbpaletten, Schriftarten oder Komponenten des API erfunden.

### Veröffentlichte Layout- und Barrierefreiheitsanforderungen

| Name / Regel | Wert / Konfiguration | Verwendung |
| --- | --- | --- |
| Side margins | At least 24dp on left and right | Referenz für natives Layout; dp nicht stillschweigend als CSS Pixel umdeklarieren. |
| Viewing and interaction areas | Viewing above; frequently used interaction below | Kontext und gut erreichbare Aktionen bewusst anordnen; dies ist ein Layoutprinzip und kein fester Anteil der Bildschirmhöhe. |
| Cutout handling | Adapt placement to camera cutouts and orientation | Wichtige Inhalte dürfen nicht hinter einer Gerätekerbe liegen. |
| Text resizing | Up to 200% without losing content or function | Veröffentlichte Barrierefreiheitsrichtlinien; die Browserstudie veranschaulicht den Absatzumbruch mit einer eigens dafür vorgesehenen Steuerung der Leseschriftgröße. |
| Target separation | Large enough touch areas with space between them | Der öffentliche Text nennt hier keinen numerischen Mindestwert; die Steuerelemente mit 48px in diesem Beispiel sind eine eigens für das Web getroffene Gestaltungsentscheidung. |
### Veröffentlichte Interaktionsregeln

| Name / Regel | Wert / Konfiguration | Verwendung |
| --- | --- | --- |
| Complex gestures | Provide an alternative action | Ziehen oder Mehrfingerbedienung darf nicht die einzige Möglichkeit sein, eine Aufgabe abzuschließen. |
| Automatic content | Provide control for moving content over 5 seconds | Die Studie enthält weder ein automatisches Karussell noch Inhalte, die nach einer bestimmten Zeit verschwinden. |
| Error recovery | Clear message and focus on the next useful action | Sichtbaren Text und eine klare Möglichkeit zur Wiederherstellung verwenden. |
| Screen transitions | Feedback and an explicit way back | Der Zurücksetzen-Dialog bietet eine Abbruchmöglichkeit und die Wiederherstellung über die Escape-Taste. |
| Focus blocks | Subdued surfaces for function-focused content | Richtlinien für Farbrollen; es wird keine numerische Palette als offizieller Token-Export erfunden. |
### Gestaltungsentscheidungen der ursprünglichen Browserstudie — keine Samsung-Token

| Name / Regel | Wert / Konfiguration | Verwendung |
| --- | --- | --- |
| --study-background | #F3F3F6 | Für diese eigenständige Interpretation im Browser erstellt. Dieser Wert wird nicht als offizieller One UI-Design-Token dargestellt. |
| --study-card | #FFFFFF | Für diese eigenständige Interpretation im Browser erstellt. Dieser Wert wird nicht als offizieller One UI-Design-Token dargestellt. |
| --study-text | #17171C | Für diese eigenständige Interpretation im Browser erstellt. Dieser Wert wird nicht als offizieller One UI-Design-Token dargestellt. |
| --study-action | #2557C8 | Für diese eigenständige Interpretation im Browser erstellt. Dieser Wert wird nicht als offizieller One UI-Design-Token dargestellt. |
| Card radius | 24px | Für diese eigenständige Interpretation im Browser erstellt. Dieser Wert wird nicht als offizieller One UI-Design-Token dargestellt. |
| Minimum control height | 48px | Für diese eigenständige Interpretation im Browser erstellt. Dieser Wert wird nicht als offizieller One UI-Design-Token dargestellt. |
| Reading-size options | 100%, 150%, 200% | Für diese eigenständige Interpretation im Browser erstellt. Dieser Wert wird nicht als offizieller One UI-Design-Token dargestellt. |
## Vollständiger Leitfaden zum Samsung One UI-Designsystem

Ein praktischer Leitfaden zur Auswahl, Anwendung und Überprüfung dieses Systems für ein echtes Interface.

Umfassende Anleitung, Einstieg in die Implementierung und Links zu den Quellen.

## Designrichtlinien für One UI und Browserumfang des Samsung One UI-Designsystems

### One UI als Plattformrichtlinie verstehen

> One UI beschreibt die Interaktion auf Samsung-Geräten, einschließlich Smartphones, größeren Bildschirmen und Foldables. Es ist kein allgemeines Webkomponentenpaket. Das bereitgestellte Beispiel ist eine originale Browserstudie zu Leseeinstellungen. Es veranschaulicht einen Anzeigebereich, einen unteren Interaktionsbereich und explizite Wiederherstellungsmöglichkeiten, ohne vorzugeben, Samsung-Komponenten auszuführen oder Geräteeinstellungen zu ändern.

### Implementierungswerte korrekt einordnen

Die Referenz trennt veröffentlichte Anforderungen von eigens für den Browser festgelegten Werten. Ein nativer Randabstand von 24dp wird in der ursprünglichen Einheit angegeben; der Innenabstand von 24px in der Vorschau ist eine bewusste Interpretation für das Web. Die blauen und grauen Flächen sowie der Kartenradius von 24px sind eigene Werte der Studie. Diese Unterscheidung verhindert, dass ein Agent eine optisch plausible CSS-Variable für einen verifizierten Samsung-Token hält.

- dp und CSS px getrennt halten.

- Originale Farbpaletten- und Radiuswerte als eigene Gestaltungsentscheidungen kennzeichnen.

- Eine Browservorschau nicht als Samsung-Systemeinstellung beschreiben.

## Anzeigebereich und gut erreichbare Aktionen im Samsung One UI-Designsystem

### Dem oberen Bereich eine sinnvolle Funktion geben

Der obere Bereich nennt die Leseeinstellungen und bietet eine kurze Kontextzeile. Darunter erfüllen gruppierte Einstellungen und eine Leseprobe die Aufgabe. „Anwenden“ und „Zurücksetzen“ folgen auf diese Gruppen. So ist der Titel gut lesbar, während die wichtigen Aktionen zusammenbleiben, anstatt voneinander unabhängige Steuerelemente über einen dekorativen Geräterahmen zu verteilen.

### Die Struktur anpassen, statt ein Gerät vorzutäuschen

In der Browserstudie gibt es keine Statusleiste des Betriebssystems, keine Kameraaussparung und keine Geräteberechtigungen. Im schmalen Layout bleiben alle Einstellungen verfügbar, und die Aktionsleiste kann umgebrochen werden. Bei nativen Implementierungen müssen weiterhin tatsächliche Safe Areas, Aussparungen, Ausrichtung und Änderungen bei faltbaren Geräten berücksichtigt werden. Ein responsiver Browser-Screenshot kann diese gerätespezifischen Verhaltensweisen nicht überprüfen.

## Samsung One UI Zurückhaltende Oberflächen und explizite Darstellung des Designsystems

### Verwandte Inhalte mit Hintergrundflächen gruppieren

Jede Einstellung und die Leseprobe befinden sich auf einer zurückhaltenden Kartenfläche. Die Aktionsfarbe kennzeichnet interaktive Auswahlmöglichkeiten, während der Beschreibungstext eine eigene gedämpfte Rolle verwendet. Bei dunkler Darstellung werden dieselben Rollen angepasst, statt eine dunkle Ebene über eine helle Oberfläche zu legen. Alle diese CSS-Farben sind eigens interpretierte Werte und werden in der herunterladbaren Quelle entsprechend gekennzeichnet.

### Einstellungen bei Darstellungsänderungen beibehalten

Die Auswahl für die Darstellung ändert nur das Design der Vorschau. Sie löscht weder die gewählte Lesegröße noch bedeutet sie, dass sich eine Samsung-Systemeinstellung geändert hat. Wenn eine Auswahl geändert wird, löscht die Anwendung eine zuvor angezeigte Bestätigung, damit die Statusmeldung keinen inzwischen veralteten Zustand beschreibt.

## Samsung One UI Leseskala und Neuanordnung des Designsystems

### Den Fall mit 200 Prozent ausdrücklich veranschaulichen

Die Steuerung der Lesegröße bietet Optionen für 100, 150 und 200 Prozent. Sie ändert die Schriftgröße des Beispielabsatzes und lässt dessen Karte natürlich mitwachsen. Der Text wird weder abgeschnitten noch überlappt er angrenzende Steuerelemente; auch ist kein zweiter Bereich mit fester Höhe erforderlich. Die Steuerung dient ausdrücklich als Leseprobe und gibt nicht vor, sämtliche Browser- oder Betriebssystem-Schrifteinstellungen zu ändern.

### Den vollständigen Text verfügbar halten

Der Absatz besteht aus einfachem Text und einer Zeilenhöhe, die sich mit der Schriftgröße skaliert. Bei der geringsten getesteten Breite werden die Wörter innerhalb der Karte umgebrochen, und der Inhalt bleibt in der Dokumentreihenfolge verfügbar. Dies veranschaulicht einen Fall der Neuanordnung. Bei einer produktiven Oberfläche müssen zusätzlich alle Beschriftungen, Übersetzungen und tatsächlichen Nutzerinhalte mit den nativen Bedienungshilfeneinstellungen getestet werden.

## Samsung One UI Anwenden, Zurücksetzen und Dialogfokus im Designsystem

### Bestätigungstext passend zur Aktion formulieren

„Auf diese Vorschau anwenden“ bestätigt die gewählte Darstellung und Lesegröße. Die Meldung stellt ausdrücklich klar, dass nichts an ein Gerät gesendet wurde. Sie bleibt als Statusmeldung sichtbar, statt kurz darauf als Toast zu verschwinden, sodass Leserinnen und Leser Zeit haben, das Ergebnis zu prüfen. Wenn eine der beiden Einstellungen geändert wird, wird diese vorherige Bestätigung gelöscht.

### Das Zurücksetzen als ausdrückliche Auswahl gestalten

„Zurücksetzen“ öffnet einen nativen Browserdialog mit den Aktionen „Einstellungen beibehalten“ und „Zurücksetzen“. Abbrechen und Escape behalten beide aktuellen Auswahlmöglichkeiten bei. Nach Bestätigung des Zurücksetzens werden die helle Darstellung und die Standardgröße wiederhergestellt; anschließend kehrt der Fokus zu der Aktion zurück, die den Dialog geöffnet hat. Der vollständige Zustandsübergang ist im Quelltext enthalten und wird nicht als nicht näher beschriebener Handler dargestellt.

## Samsung One UI Designsystem Vollständige Browserstudie und nächste Schritte für native Apps

### Ohne erfundene One UI-Abhängigkeit ausführen

Das vollständige HTML-Dokument enthält alle Stile, Inhalte und JavaScript. Speichern Sie es als index.html und stellen Sie es lokal bereit. Es ruft weder externe Schriftarten noch Laufzeitumgebungen ab und benötigt kein Samsung SDK. Bei der Umsetzung als native App sollten die offiziellen One UI- und Android-Ressourcen für echte Plattformsteuerelemente, Dichteeinheiten, Bedienungshilfen und Konfigurationsänderungen verwendet werden.

1. Das bereitgestellte eigenständige HTML-Dokument speichern.

2. Das Verzeichnis lokal bereitstellen und die Vorschau öffnen.

3. Die Lesegröße von 200 Prozent und beide Darstellungsmodi testen.

4. Abbrechen, Escape und das bestätigte Zurücksetzen getrennt überprüfen.

### Die Reihenfolge testen, die Fehler sichtbar macht

Wählen Sie die dunkle Darstellung und eine Lesegröße von 200 Prozent, wenden Sie sie an und prüfen Sie die Bestätigung. Öffnen Sie „Zurücksetzen“, brechen Sie ab und vergewissern Sie sich, dass beide Auswahlmöglichkeiten erhalten bleiben. Wiederholen Sie den Vorgang mit Escape. Bestätigen Sie anschließend das Zurücksetzen und prüfen Sie, ob die Werte wiederhergestellt werden und der Fokus zurückkehrt. Prüfen Sie den vergrößerten Absatz auf Desktop- und Smartphone-Bildschirmbreiten und achten Sie darauf, dass keine Wörter oder Steuerelemente abgeschnitten werden.

## Samsung One UI Komponentenbeispiele des Designsystems

### index.html — vollständige Studie zu Leseeinstellungen

Das vollständige Layout, Rollen für helle und dunkle Darstellung, die Steuerung der Textgröße und der abbrechsichere Dialog zum Zurücksetzen.

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

Code-Referenz

- Farben und Abmessungen mit dem Präfix „Study“ sind eigens festgelegte Werte für das Web.

- Die Leseskala ändert den Beispielabsatz; Browser- oder Geräteeinstellungen werden nicht angepasst.

## Samsung One UI Einrichtung des Designsystem-Agenten

### Ausgangspunkt für die Implementierung

Hier wird die ursprüngliche Browserstudie ausgeführt. Dieses Beispiel enthält weder ein One UI-npm-Paket noch eine native Samsung-Laufzeitumgebung.

```
# Save the supplied complete example as index.html.
python3 -m http.server 8000
# Open http://localhost:8000/
```

### Ein Prompt für dein Projekt

```
Die bereitgestellte, von One UI inspirierte Lesestudie als ausdrücklich eigenständige Interpretation für den Browser umsetzen. Ansichts- und Interaktionsbereiche, responsiven Textumbruch bei 200 Prozent, einen expliziten Darstellungszustand, eine ausschließlich lokale Bestätigung, abbrechsicheres Zurücksetzen und die Rückkehr des Fokus beibehalten. Native dp-Anforderungen von den eigenständigen CSS-Pixelwerten trennen.
```

## Samsung One UI Quellen und Geltungsbereich des Designsystems

Eine eigenständige Browserinterpretation der One UI-Prinzipien unter Verwendung von OpenDesign. Sie ist keine native One UI-Laufzeitumgebung und ändert keine Geräteeinstellungen. Veröffentlichte Anforderungen und eigenständige Webwerte sind in der Referenz voneinander getrennt.

- One UI-Prinzipien Ansicht, Interaktion und Anpassungsfähigkeit.

- Rastersystem Ränder von 24 dp, Aussparungen und Gerätekontexte.

- Layout und Typografie Textskalierung auf 200 Prozent und getrennte Interaktionsziele.

- Interaktion und Steuerelemente Wiederherstellung, alternative Eingaben und explizite Navigation.

- Farbsystem Zurückhaltende Fokusflächen und bewusst zugewiesene Farbfunktionen.

## Samsung One UI Weitere Ressourcen zum Designsystem

### SAP Fiori

Verwende das Horizon-Theme von SAP Fiori über UI5 Web Components: echte Theme-Parameter, explizite Inhaltsdichte, semantische Wertzustände und eine Anordnung für eine Kaufanfrage mit lokaler Validierung.

### SEEK Braid

Lernen Sie Braid anhand einer eigens entwickelten Jobsuche kennen: themenspezifische Variablen, vier echte Breakpoints, kontextbezogener Text, klar unterscheidbare Schaltflächenstile und ein kontrolliertes Feld, das die Validierung erklärt, statt die Aktion zu deaktivieren.

### Segment Evergreen

Eine Evergreen-Referenz mit tatsächlichen Design-Token-Werten, kontrollierter Tag-Eingabe, Live-Regelabgleich, einem Wiederherstellungspfad für leere Zustände und einem nativen Prüfdialog.


- [Implementierungsreferenz](https://developer.samsung.com/one-ui/index.html)
- [Quelle](https://developer.samsung.com/one-ui/accessibility/layout-and-typo.html)
- [Quelle](https://developer.samsung.com/one-ui/accessibility/interaction-and-control.html)
- [Quelle](https://developer.samsung.com/one-ui/color/system.html)
- [Code-Referenz](https://developer.samsung.com/one-ui/accessibility/interaction-and-control.html)
- [One UI-Prinzipien Ansicht, Interaktion und Anpassungsfähigkeit.](https://developer.samsung.com/one-ui/index.html)
- [Rastersystem Ränder von 24 dp, Aussparungen und Gerätekontexte.](https://developer.samsung.com/one-ui/layout/grid.html)
- [Layout und Typografie Textskalierung auf 200 Prozent und getrennte Interaktionsziele.](https://developer.samsung.com/one-ui/accessibility/layout-and-typo.html)
- [Interaktion und Steuerelemente Wiederherstellung, alternative Eingaben und explizite Navigation.](https://developer.samsung.com/one-ui/accessibility/interaction-and-control.html)
- [Farbsystem Zurückhaltende Fokusflächen und bewusst zugewiesene Farbfunktionen.](https://developer.samsung.com/one-ui/color/system.html)