Атомарный дизайн: атомы, молекулы, компоненты и их состояния

Атомарный дизайн — сборка интерфейса из пяти уровней: атомы, молекулы, организмы, шаблоны, страницы. Компонент — деталь с названием, составом и состояниями.

Страница из деталей

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

Эту мысль в 2013 году сформулировал Брэд Фрост (Brad Frost) и назвал её атомарным дизайном, по аналогии с химией: из атомов складываются молекулы, из молекул организмы. У него пять уровней.

1. Атомы. Дальше не разобрать, не потеряв смысл: заголовок, абзац, ссылка, кнопка, метка, поле.
2. Молекулы. Несколько атомов, работающих как одно целое: карточка пункта (заголовок, описание, ссылка), поле с подписью и подсказкой.
3. Организмы. Самостоятельная часть страницы из молекул и атомов: шапка с меню, секция с сеткой карточек, подвал.
4. Шаблоны. Скелет страницы из организмов, без настоящих слов. Так видно структуру отдельно от содержимого.
5. Страницы. Шаблон с настоящим содержимым вашего проекта. Здесь выясняется, подходят ли детали к жизни: длинные названия, отсутствие картинки, пустой раздел.

Выберите уровень на схеме: нужные части обведены. А ниже на той же схеме состояния кнопки, о них мы поговорим через минуту.

АтомыМолекулыОрганизмыШаблонСтраница

Ваш проект Меню

Что мы делаем

Первый пункт Описание в одну строку Подробнее

Второй пункт Описание в одну строку Подробнее

Третий пункт Описание в одну строку Подробнее

Главное действие

Атомы. Нельзя разобрать дальше, не потеряв смысл: заголовок, абзац, ссылка, кнопка, метка, поле. На схеме выделены обведённым.

Состояния одной кнопки

ОбычноеНаведениеФокусНажатиеНедоступноЗагрузка

Главное действие

Как кнопка выглядит, пока с ней ничего не делают.

Не стоит принимать уровни слишком буквально. Иногда непонятно, молекула это или организм, и это нормально: главное, что у детали есть название и вы знаете, где она живёт. Польза атомарного дизайна не в таксономии, а в привычке думать частями.

Проверьте себя: чем молекула отличается от организма?

Молекула это несколько атомов, работающих вместе (карточка). Организм самостоятельная часть страницы из молекул и атомов (секция с карточками, шапка).

Что такое компонент

Компонент это деталь интерфейса с названием, составом и правилами. У настоящего компонента описаны:

• название и назначение: что это и когда его брать;
• анатомия: из каких частей состоит (у карточки это рамка, заголовок, описание, ссылка);
• варианты: основной и второстепенный, большой и малый;
• состояния: как выглядит в каждый момент (ниже);
• содержимое: сколько слов вмещает, что будет при пустом поле;
• доступность: как с ним работать клавиатурой и диктору;
• токены: какие значения оно использует (цвет, отступ, радиус).

Такая карточка из шести-семи строк уже система. Именно её вы найдёте на страницах компонентов в Material, GOV.UK, Carbon и других системах: анатомия, варианты, состояния, правила, код.

Состояния: самое забываемое

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

• Обычное. Состояние покоя.
• Наведение (hover). Подсказывает, что деталь нажимается. На телефоне наведения нет, поэтому смысл не должен держаться только на нём.
• Фокус (focus). Видно, когда на деталь перешли клавишей Tab. Убирать контур фокуса нельзя: без него клавиатурный пользователь не видит, где он. Если контур по умолчанию не нравится, замените своим заметным правилом :focus-visible: он включается только при управлении клавиатурой.
• Нажатие (active). Короткая реакция, пока кнопка нажата.
• Недоступно (disabled). Действие сейчас невозможно. Объясните рядом почему: серая кнопка без пояснения раздражает.
• Загрузка (busy). Идёт работа. Подпись меняется («Отправляем…»), а повторное нажатие блокируется.
• Ошибка, выбрано, пусто: по смыслу компонента.

.btn:hover { filter: brightness(1.15); }
.btn:focus-visible { outline: 3px solid #ffdd00; outline-offset: 2px; }
.btn:active { transform: translateY(1px); }
.btn[disabled] { opacity: 0.5; cursor: not-allowed; }
.btn[aria-busy="true"] { cursor: progress; }

Проверка не умеет «навести» мышь или «нажать» Tab, поэтому статичные состояния (недоступно, загрузка) она проверяет, а наведение, фокус и нажатие остаются на вашей совести. Нажмите Tab на предпросмотре и посмотрите, виден ли фокус.

Проверьте себя: почему нельзя убрать контур фокуса?

Человек, который ходит по странице клавишей Tab, перестанет видеть, где находится. Если контур мешает, замените его своим заметным.

Компонент в одном месте

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

Чтобы названия классов не путались, договариваются об именах. Известный способ, БЭМ (блок, элемент, модификатор), придумали в Яндексе: card это блок, card__title его элемент, card--featured его вариант. По имени класса видно, что это за деталь и какая её часть.

Командам, у которых компонентов много, нужна витрина: страница, где все они показаны в каждом состоянии. Популярный инструмент для этого называется Storybook. Для вашего маленького проекта такой витриной служит обычная страница «Состояния» на сайте, какую вы делаете в практике.

Практика

Оформите две детали вашего проекта как компоненты. Карточка пункта: одно правило на все карточки. Кнопка: три состояния рядом, обычная, недоступная и в загрузке. Остальные состояния опишите правилами и проверьте руками.

И запишите в «Мои компоненты» по одному примеру на каждом из трёх уровней, чтобы привыкнуть называть части.

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

В 2014 году кнопки и карточки часто рисовали картинками или делали отдельным правилом на каждую страницу. Состояния (кроме наведения) забывали, а контур фокуса убирали, потому что он «портил вид». Привычка описывать состояния заранее пришла вместе с дизайн-системами.