Samsung One UI-Designsystem.

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

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

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