Дизайн-система Samsung One UI.

Дизайн-система Samsung One UI: рекомендации по дизайну One UI и область применения в браузере

Рассматривайте One UI как рекомендации для платформы

One UI описывает взаимодействие на устройствах Samsung, включая телефоны, устройства с большими экранами и складные устройства. Это не универсальный пакет веб-компонентов. Представленный пример — оригинальное исследование настроек чтения в браузере. В нём показаны область просмотра, нижняя область взаимодействия и явные способы восстановления. При этом он не заявляет об использовании компонентов Samsung или изменении настроек устройства.

Указывайте значения реализации точно

В справочнике опубликованные требования отделены от авторских значений для браузера. Поле нативного интерфейса с отступом 24dp записано в исходной единице измерения; отступ 24px в предварительном просмотре — намеренная интерпретация для веба. Синий цвет, серые поверхности и радиус карточки 24px — оригинальные значения, выбранные для исследования. Это различие не позволяет агенту принять внешне правдоподобную переменную CSS за проверенный токен Samsung.

• Не смешивайте dp и CSS px.
• Обозначайте оригинальные решения для палитры и радиуса как оригинальные.
• Не описывайте предварительный просмотр в браузере как системную настройку Samsung.

Дизайн-система Samsung One UI: область просмотра и доступные действия

Продумайте назначение верхней области

В верхней области указано название «Настройки чтения» и приведена краткая контекстная строка. Ниже расположены сгруппированные настройки и образец текста для чтения. После них находятся кнопки применения и сброса. Такая структура упрощает чтение заголовка и объединяет важные действия, не распределяя несвязанные элементы управления по декоративной рамке устройства.

Адаптируйте структуру, а не имитируйте устройство

В исследовании для браузера нет строки состояния операционной системы, выреза камеры или разрешений устройства. В узком макете все настройки остаются доступными, а строка действий может переноситься. При нативной реализации необходимо учитывать реальные безопасные области, вырезы, ориентацию и изменения при складывании устройства. По адаптивному снимку экрана браузера нельзя проверить поведение, зависящее от устройства.

Дизайн-система Samsung One UI: сдержанные поверхности и явная настройка внешнего вида

Группируйте связанные элементы с помощью фоновых блоков

Каждая настройка и образец текста для чтения размещены на карточке со сдержанной фоновой поверхностью. Цвет действий обозначает интерактивные элементы, а для описательного текста используется отдельная приглушённая роль. При переключении тёмного оформления меняются те же роли, а не накладывается тёмный слой поверх светлого интерфейса. Все эти цвета CSS — авторские значения-интерпретации, и в загружаемом исходном коде они обозначены соответствующим образом.

Сохраняйте настройки при смене оформления

Флажок оформления влияет только на тему предварительного просмотра. Он не очищает выбранный размер текста и не означает, что системные настройки Samsung изменились. При изменении параметра приложение удаляет предыдущее подтверждение применения, чтобы сообщение о состоянии не описывало уже неактуальное состояние.

Дизайн-система Samsung One UI: масштаб текста и перестроение макета

Наглядно покажите режим масштаба 200%

Элемент управления размером текста позволяет выбрать масштаб 100, 150 и 200%. При его изменении меняется размер шрифта абзаца-образца, а карточка естественно увеличивается. Текст не обрезается, не перекрывает соседние элементы управления и не требует второй области с фиксированной высотой. Этот элемент управляет только образцом текста для чтения и не предназначен для изменения всех настроек шрифтов браузера или операционной системы.

Показывайте текст целиком

Дизайн-система Samsung One UI: применение, сброс и фокус диалогового окна

Формулируйте подтверждение в соответствии с действием

Действие «Применить к этому предварительному просмотру» сообщает о выбранном оформлении и масштабе текста. В сообщении явно указано, что на устройство ничего не отправлялось. Это постоянное сообщение о состоянии, а не быстро исчезающее уведомление; читатель может спокойно ознакомиться с результатом. При изменении любой из настроек предыдущее подтверждение удаляется.

Сделайте сброс осознанным выбором

Кнопка «Сбросить» открывает нативное диалоговое окно браузера с действиями «Оставить настройки» и «Сбросить». Отмена и нажатие Escape сохраняют оба текущих параметра. После подтверждения сброса восстанавливаются светлое оформление и стандартный размер, а фокус возвращается к кнопке, открывшей диалоговое окно. Полный переход состояния приведён в исходном коде, а не описан как неопределённый обработчик.

Дизайн-система Samsung One UI: полное исследование для браузера и дальнейшие шаги для нативной разработки

Запускается без выдуманной зависимости от One UI

Полный документ HTML содержит все стили, содержимое и JavaScript. Сохраните его как index.html и запустите локальный сервер. Документ не загружает внешние шрифты и не требует среды выполнения или SDK Samsung. При переходе к нативному приложению используйте официальные материалы One UI и Android, чтобы реализовать платформенные элементы управления, единицы плотности, службы доступности и обработку изменений конфигурации.

1. Сохраните предоставленный автономный документ HTML.
2. Запустите локальный сервер в этой директории и откройте предварительный просмотр.
3. Проверьте размер текста 200% и оба режима оформления.
4. Отдельно проверьте отмену, нажатие Escape и подтверждённый сброс.

Проверьте последовательность действий, которая выявляет ошибки

Выберите тёмное оформление и размер текста 200%, примените настройки и проверьте подтверждение. Откройте сброс, отмените его и убедитесь, что оба параметра сохранились. Повторите проверку с клавишей Escape, затем подтвердите сброс и убедитесь, что значения сброшены, а фокус возвращён. Проверьте увеличенный абзац на экранах настольного компьютера и телефона: текст и элементы управления не должны обрезаться.

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>