Введение в атомный дизайн для веб-дизайнеров

Атомы не просто элементы HTML, но также принадлежащие им стили: шрифты, цвета, размеры и другие правила стиля CSS. С собственными словами Брэда, атомы “продемонстрировать все ваши основные стили с первого взгляда”.

Атомы - Пример

Вот пример с нашего сайта. Заголовки рекомендуемых постов могут составлять один тип атома; они используют тот же код HTML и CSS и может быть легко различим из остального содержимого.

Обратите внимание, что Hongkiat.com не был разработан с атомарным дизайном, здесь он используется только в демонстрационных целях.

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

2. Молекулы

молекула сформирован группой атомов. Молекулы составляют следующий этап в иерархии атомного дизайна. Подумайте о более простых элементах пользовательского интерфейса, которые уже состоит из нескольких элементов HTML, например, форму поиска или рекомендуемый пост на боковой панели.

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

Например, заголовок (один атом) должен получить больше внимания (большие шрифты, больший вес и т. д.), чем имя автора (другой атом) в рекомендуемом пост-блоке. Таким образом, два атома “означало” в работать в команде чтобы получить лучший результат.

Молекулы - Пример

Используя наш предыдущий пример, вы можете видеть, что на боковой панели Hongkiat один блок рекомендованного поста можно рассматривать как молекулу. Рекомендуемая почтовая молекула состоит из трех атомов: миниатюра, заголовок и атом имени автора.

3. Организмы

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

Организмы могут быть составлены из разные типы молекул, например, боковая панель может состоять из панели поиска и различного вида виджетов, или из одна и та же молекула повторяется несколько раз, например, несколько связанных почтовых блоков друг под другом. И это может быть сочетание этих двух.

Организмы - Пример

На сайте Hongkiat боковой панелью может быть организм. Он состоит из панель поиска (один тип молекулы, отображается только один раз) и несколько рекомендуемых постов (другой тип молекулы, отображается много раз).

Тем не менее, организм боковой панели также может рассматриваться как состав молекула (панель поиска) и другой организм (рекомендуемый виджет постов с несколькими рекомендованными постами). Атомный дизайн является гибкая модель, правила не очень строгие, поэтому в этом случае мы можем определить один и тот же строительный блок как молекулу, так и организм..

4. Шаблоны

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

Шаблоны построены из организмов. Они есть объекты уровня страницы но без окончательного содержания. Целью шаблонов является представлять структуру основного контента.

Шаблоны показывают, как разные атомы, молекулы, организмы “функционировать вместе в контексте макета”. Они в основном представляют скелет страницы.

Шаблоны - Пример

Например, подумайте о шаблон домашней страницы с изображениями-заполнителями и текстовыми блоками lorem ipsum.

Ниже вы можете увидеть пример из книги по атомному дизайну. Это шаблон домашней страницы журнала TimeInc. Атомы, молекулы и организмы все на своем месте, но только с схематическим содержанием.

5. Страницы

страницы представляют последний этап иерархии атомного дизайна. Страницы являются “конкретные экземпляры шаблонов”. На этапе страницы шаблоны получают наполнен реальным контентом (копирование, микроскопия, изображения, видео и т. д.) так же, как они будут отображаться в реальном интерфейсе.

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

Страницы и варианты шаблона

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

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

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

Страницы - Пример

Ниже вы можете увидеть этап страницы предыдущего шаблона домашней страницы TimeInc. Выглядит иначе, а? Это просто один вариант шаблона, хоть. Чтобы иметь эффективный пользовательский интерфейс, команда разработчиков должна тщательно продумать что может измениться на реальном сайте. Затем они должны проверить дизайн для этого варианта шаблона (страница) тоже.