Как читать чужую дизайн-систему: Material, Apple, Fluent

Material 3, Apple HIG и Fluent 2 — дизайн-системы Google, Apple и Microsoft. Из них берут решения и правила (шаг, роли цвета, состояния), а не внешний вид.

Зачем читать чужие системы

Лучшие уроки по дизайну лежат в открытом доступе: это документация больших дизайн-систем. За ними стоят годы исследований, тысячи проверенных решений и команды, которые поддерживают их ежедневно. Но читать их надо с правильным вопросом. Не «как сделать так же красиво», а «какое решение они приняли и почему, и подходит ли оно мне».

Опасная ошибка: брать у системы вид. Он принадлежит продукту, для которого создан, и часто защищён правилами бренда. Берите правила: размер цели нажатия, шаг отступов, порядок состояний, названия токенов.

Проверьте себя: что заимствовать из чужой системы?

Решения и правила, а не внешний вид: они переносятся на любой проект.

Читаем за двадцать минут: семь вопросов

Любая система читается одинаково. Задайте ей семь вопросов, и за двадцать минут вы поймёте главное.

1. Для кого и для чего? Для приложений Android, для государственных услуг, для рабочих панелей? От этого зависит всё остальное.
2. Основы. Какие в ней цвета, шрифты, отступы, сетка? Есть ли шаг отступов и шкала шрифтов, как у вас?
3. Токены. Как названы значения: по виду (blue-500) или по роли (color.text.primary)? Сколько уровней?
4. Страница одного компонента. Откройте кнопку: есть ли анатомия, варианты, состояния, правила «когда использовать, когда нет», заметки о доступности, пример кода?
5. Доступность. Заявлена ли, как проверена, есть ли минимальные размеры целей нажатия?
6. Открытость. Можно ли взять код? Какая лицензия? Что разрешено делать с оформлением?
7. Здоровье. Когда обновлялась? Есть ли версии и список изменений? Живо ли сообщество?

Одна оговорка: системы меняются. Всё, что написано ниже, рассказывает о положении на конец 2026 года, и единственный надёжный источник это сама документация, ссылки на которую вы найдёте на каждой карточке.

Три системы крупнейших платформ

Откройте карточки: они устроены одинаково, поэтому системы удобно сравнивать.

Material Design 3Human Interface Guidelines (Apple)Fluent 2 (Microsoft)

Google

Идея

Общая грамматика приложений Android и веба: слои «бумаги», крупные скругления, выразительный цвет.

Токены

Три уровня: reference (сырая палитра), system (роли вроде primary, surface) и component (значения конкретной детали). Цветовая схема строится из пяти ключевых цветов, каждый из которых даёт тональную палитру из 13 тонов; все пять можно получить из одной исходной краски, а на Android 12 и новее её берут из обоев (динамический цвет).

Компоненты

Очень полный набор: от кнопок и полей до навигации и диалогов; у каждого описаны состояния и анатомия.

Доступность

Рекомендация Android для цели нажатия: не меньше 48 × 48 dp, и Material её придерживается; в веб-библиотеке есть кольцо фокуса для клавиатуры.

Открытость

Документация публична. Библиотека веб-компонентов Material (material-web.dev) по её README находится в режиме поддержки в ожидании новых сопровождающих: перед выбором проверьте её состояние.

Что взять себе

Идею ролей цвета («на что» используется цвет), состояния компонентов и подробные страницы анатомии.

Когда не брать

Если нужен свой характер: узнаваемый вид Material быстро делает сайт «одним из многих».

Открыть документацию системы (откроется сайт системы)

Material Design 3 (Google). Material родился в 2014 году как язык «листов бумаги»; третья версия (2021, «Material You») сделала цвет выразительным: цветовая схема строится из пяти ключевых цветов (каждый даёт тональную палитру из 13 тонов), все пять можно получить из одной исходной краски, а на Android 12 и новее эту краску берут из обоев. Роли называются так: основной, «на основном», контейнер и так далее. Токены разделены на три слоя: reference (сырая палитра), system (роли) и component (значения конкретной детали). Состояния кнопки задаются как «слой состояния»: полупрозрачный слой поверх детали. В 2025 году Google представил Material 3 Expressive, более выразительное крыло системы. Для нас самое ценное: роли цвета и порядок документирования компонента.

Human Interface Guidelines (Apple). Это правила для приложений на устройствах Apple, а не библиотека. Они учат уважать платформу и человека: область нажатия кнопки не меньше 44 на 44 пункта (60 на 60 в visionOS), размер шрифта подстраивается под настройку человека (Dynamic Type), цвета называются ролями («фон», «текст») и сами меняются в тёмной теме. В 2025 году Apple обновила платформы стеклянной манерой Liquid Glass. Для сайта брать оттуда нужно уважение к настройкам человека, а не вид.

Fluent 2 (Microsoft). Единый язык продуктов Microsoft (Windows, Teams, Outlook) и веба. Токены у Fluent делятся на глобальные и «алиасы»: смысловые имена, которые ссылаются на глобальные. Благодаря слою алиасов можно сменить тему, не трогая компоненты. Компоненты есть для Web (открытая библиотека React), iOS, Android и Windows. Полезно взять идею слоя алиасов: мы вернёмся к ней в уроке про токены.

Проверьте себя: какие три уровня токенов в Material 3?

Reference (сырые значения палитры), system (роли вроде primary и surface) и component (значения конкретной детали).

Что общего у больших систем

Если сложить три системы вместе, видно, что они спорят о вкусе, но сходятся в главном:

• у каждой есть шаг (4 или 8) и шкала размеров;
• цвет определяется ролью, а не названием;
• у цели нажатия есть минимальный размер: 44 пункта у Apple и 48 dp в рекомендации Android, которой следует Material (а в WCAG 2.2 минимум для критерия 2.5.8 это 24 на 24 пикселя);
• у каждого компонента есть явный список состояний;
• пользовательские настройки (размер текста, тема, сокращение движения) уважаются.

Эти пять вещей вы можете взять в свой проект прямо сейчас, не заимствуя чужого вида.

Практика

Откройте две системы из тех, что мы разобрали (можно любые другие из списка в уроке) и выпишите по три решения: радиус скругления, шаг отступов, как выглядит фокус. Не копируйте число: поймите, зачем оно такое. Потом объясните, чем выбор связан с тоном и аудиторией вашего проекта (вы помните «тёплый» или «деловой» из брифа), и примените решения к кнопке главного действия.

Кнопка, которую легко нажать, это не мелочь: на телефоне палец не мышь, и цель меньше 44 пикселей приводит к промахам. Если ваша аудитория пожилая, смело делайте больше.

Что было не так с 2014 годом

Material Design появился в 2014 году, и вокруг него за год выросли веб-библиотеки вроде Material Design Lite и Angular Material. Но токенов как отдельного слоя тогда не было почти ни у кого, а доступность чаще оставалась на совести разработчика. Системы с токенами, подробной документацией и проверкой доступности стали стандартом позже.