Sistema di progettazione Samsung One UI.

Indicazioni di progettazione One UI e ambito del browser del sistema di progettazione sistema di design Samsung One UI

Considera One UI come un insieme di indicazioni per la piattaforma

One UI descrive le interazioni sui dispositivi Samsung, inclusi telefoni, schermi più grandi e dispositivi pieghevoli. Non è un pacchetto generico di componenti web. L’esempio fornito è uno studio originale nel browser sulle preferenze di lettura. Mostra un’area di visualizzazione, un’area inferiore per le interazioni e opzioni esplicite di ripristino, senza affermare di eseguire componenti Samsung o modificare un’impostazione del dispositivo.

Usa valori di implementazione corretti

Il riferimento distingue i requisiti pubblicati dai valori creati per il browser. Un margine nativo di 24dp è riportato nella sua unità originale; l’inserto di 24px dell’anteprima è un’interpretazione intenzionale per il web. Il blu, le superfici grigie e il raggio della scheda di 24px sono valori originali dello studio. Questa distinzione evita che un agente consideri variabile CSS visivamente plausibile come token Samsung verificato.

• Mantieni distinti dp e px CSS.
• Indica come originali la palette e le scelte del raggio create appositamente.
• Non descrivere un’anteprima nel browser come un’impostazione di sistema Samsung.

Area di visualizzazione e azioni accessibili del sistema di progettazione sistema di design Samsung One UI

Assegna una funzione utile all’area iniziale

La regione superiore indica le preferenze di lettura e fornisce una breve riga di contesto. Sotto, le impostazioni raggruppate e un esempio di lettura svolgono il compito. Applica e Ripristina compaiono dopo questi gruppi. La struttura rende il titolo facile da leggere e mantiene vicine le azioni rilevanti, invece di distribuire controlli non correlati intorno a una cornice decorativa di dispositivo.

Adatta la struttura invece di simulare un dispositivo

Lo studio nel browser non ha barra di stato del sistema operativo, ritaglio della fotocamera o autorizzazioni del dispositivo. Il layout stretto mantiene disponibili tutte le impostazioni e consente di disporre su più righe la fila di azioni. Le implementazioni native devono comunque tenere conto delle aree di sicurezza effettive, dei ritagli, dell’orientamento e dei cambiamenti dei dispositivi pieghevoli. Uno screenshot responsive nel browser non può verificare questi comportamenti specifici del dispositivo.

Superfici sobrie e aspetto esplicito del sistema di progettazione sistema di design Samsung One UI

Usa blocchi di sfondo per raggruppare i contenuti correlati

Ogni impostazione e l’esempio di lettura sono collocati su una superficie di scheda sobria. Il colore delle azioni identifica le scelte interattive, mentre il testo descrittivo usa un ruolo attenuato distinto. L’aspetto scuro modifica gli stessi ruoli anziché sovrapporre un velo scuro a un’interfaccia chiara. Tutti questi colori CSS sono valori interpretativi creati appositamente e il sorgente scaricabile li indica come tali.

Mantieni le impostazioni quando cambia l’aspetto

La casella di controllo dell’aspetto modifica solo il tema dell’anteprima. Non cancella la dimensione di lettura selezionata né implica che sia stata modificata una preferenza di sistema Samsung. Quando cambia una scelta, l’applicazione cancella ogni conferma applicata in precedenza, così il messaggio di stato non descrive uno stato non più attuale.

Scala di lettura e ridisposizione del testo del sistema di progettazione sistema di design Samsung One UI

Mostra esplicitamente il caso al 200 percento

Il controllo della dimensione di lettura offre le opzioni 100, 150 e 200 percento. Modifica la dimensione del carattere del paragrafo di esempio e lascia che la relativa scheda si espanda naturalmente. Il testo non viene troncato, non si sovrappone ai controlli adiacenti e non richiede una seconda area ad altezza fissa. Il controllo riguarda specificamente un esempio di lettura: non pretende di modificare tutte le impostazioni dei font del browser o del sistema operativo.

Mantieni disponibili tutte le parole

Applica, ripristina e focus della finestra di dialogo del sistema di progettazione sistema di design Samsung One UI

Usa una formulazione di conferma coerente con l’azione

Applica a questa anteprima mostra l’aspetto e la percentuale di lettura scelti. Il messaggio specifica che non è stato inviato nulla a un dispositivo. È un messaggio di stato persistente, anziché un toast che scompare rapidamente, così chi legge ha il tempo di esaminare il risultato. La modifica di una delle due impostazioni cancella la conferma precedente.

Rendi esplicita la scelta di ripristino

Ripristina apre una finestra di dialogo nativa del browser con le azioni Mantieni preferenze e Ripristina. Annulla ed Esc conservano entrambe le scelte correnti. La conferma del ripristino ripristina l’aspetto chiaro e la dimensione standard, quindi riporta il focus all’azione che ha aperto la finestra di dialogo. La transizione completa dello stato è inclusa nel sorgente, invece di essere descritta come un gestore non specificato.

Studio completo nel browser e passaggi successivi per il nativo del sistema di progettazione sistema di design Samsung One UI

Esegui senza introdurre una dipendenza da One UI

Il documento HTML completo include tutti gli stili, i contenuti e JavaScript. Salvalo come index.html e avvialo localmente. Non richiede font o runtime esterni né un SDK Samsung. Per passare a un’app nativa, usa le risorse ufficiali One UI e Android per i controlli della piattaforma, le unità di densità, i servizi di accessibilità e le modifiche di configurazione effettivi.

1. Salva il documento HTML autonomo fornito.
2. Avvia localmente la directory e apri l’anteprima.
3. Prova la dimensione di lettura al 200% e entrambe le modalità di aspetto.
4. Verifica separatamente l’annullamento, Esc e il ripristino confermato.

Prova la sequenza che permette di individuare gli errori

Scegli l’aspetto scuro e una dimensione di lettura del 200%, applicali e controlla la conferma. Apri il ripristino, annulla e verifica che entrambe le scelte siano rimaste invariate. Ripeti usando Esc, quindi conferma il ripristino e verifica che i valori e il focus tornino allo stato iniziale. Esamina il paragrafo ingrandito alle larghezze desktop e telefono, controllando che nessuna parola o controllo venga tagliato.

Esempi di componenti del sistema di progettazione sistema di design Samsung One UI

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