Как обыграть международную компанию на местном рынке при помощи интернет-маркетинга
Previous
выбрать за меня
Стоимость регистрации доменов .ru и .рф вырастет на 70%
Next
дизайн, веб дизайн, юзабилити, интерфейс, удобство пользования интерфейсом, web-дизайн, ui, атомный дизайн, веб-дизайн, тренды юзабилити
Юзабилити

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

Автор: Ия Пфанштиль17.05.2017

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

Атомный дизайн – это новая методология построения эффективных UI снизу вверх, построенная на аналогии с химией.

Вместо разработки коллекции веб-страниц, в концепции атомного дизайна сначала создаются простейшие компоненты интерфейса – атомы (кнопки, пункты меню и т.д.). Дополняется UI на четырех последующих этапах: молекулы, организмы, шаблоны и страницы.

Методология была разработана дизайнером Брэдом Фростом для создания успешных UI систем. Ей посвящена книга автора.

Атомный дизайн предлагает совершенно новый взгляд на дизайн интерфейса. В сегодняшней статье мы рассмотрим основы этой интересной концепции, чтобы вы могли составить о ней общее представление.

Иерархия атомного дизайна

Атомный дизайн – это ментальная модель восприятия веб-страниц как иерархии многократно используемых компонентов.

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

дизайн, веб дизайн, юзабилити, интерфейс, удобство пользования интерфейсом, web-дизайн, ui, атомный дизайн, веб-дизайн, тренды юзабилити

Ниже мы рассмотрим каждую из стадий более подробно.

1. Атомы

Так же как и в химии, атомы – наименьшие неделимые частицы дизайна. Это базовые HTML элементы: кнопки, ярлыки, поля форм.

Конечно, не все HTML элементы являются атомами. Например, article и section не могут быть мельчайшими элементами веб-страницы.К атомам относятся и такие элементы, как шрифты, цвета, разрешения и другие CSS правила. По словам автора концепции “атомы наглядно демонстрируют все базовые стили”.

Пример

дизайн, веб дизайн, юзабилити, интерфейс, удобство пользования интерфейсом, web-дизайн, ui, атомный дизайн, веб-дизайн, тренды юзабилити

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

2. Молекулы

Молекулы состоят из группы атомов. Это следующая стадия иерархии атомного дизайна.

К молекулам относятся простейшие UI элементы, которые состоят из нескольких HTML компонентов: строка поиска или рекомендованные посты в правой панели.

Организация в молекулы дает атомам определенную цель. В группе они поддерживают и дополняют друг друга.

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

Пример

дизайн, веб дизайн, юзабилити, интерфейс, удобство пользования интерфейсом, web-дизайн, ui, атомный дизайн, веб-дизайн, тренды юзабилити

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

3. Организмы

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

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

Пример

дизайн, веб дизайн, юзабилити, интерфейс, удобство пользования интерфейсом, web-дизайн, ui, атомный дизайн, веб-дизайн, тренды юзабилити

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

4. Шаблоны

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

Шаблоны состоят из организмов. Это элементы страницы без финального контента. Цель шаблона – представить структуру будущего контента.

Шаблоны отражают взаимодействие атомов, молекул и организмов в контексте разметки. Это своеобразный скелет страницы.

Пример

дизайн, веб дизайн, юзабилити, интерфейс, удобство пользования интерфейсом, web-дизайн, ui, атомный дизайн, веб-дизайн, тренды юзабилити

Пример шаблона – дизайн домашней страницы со стандартными изображениями и блоками текста lorem ipsum. Атомы, молекулы и организмы находятся на своих местах, но со схематическим контентом.

5. Страницы

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

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

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

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

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

Пример

дизайн, веб дизайн, юзабилити, интерфейс, удобство пользования интерфейсом, web-дизайн, ui, атомный дизайн, веб-дизайн, тренды юзабилити

Ниже представлен пример стадии страницы для сайта из предыдущего пункта. Выглядит совсем по-другому.

Чтобы создать эффективный UI, дизайнеры должны продумать все возможные изменения в реальном сайте. Также необходимо протестировать дизайн по разным вариантам шаблона.

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

Реакция на статью
поделюсь
0%
интересно
300%
полезно
100%
не уверен
200%
скучно
300%
где автор?
0%
Ия Пфанштиль

Перевожу и адаптирую лучшие статьи для любимых читателей.

Комментарии
Оставить отзыв

    You must log in to post a comment

    ПОДПИСЫВАЙТЕСЬ НА НАС!
    ПОДПИШИТЕСЬ НА НАШУ РАССЫЛКУ!
    Уведомления о новостях, статьях и инфографике будут приходить раз в неделю.
    ПОДПИШИТЕСЬ НА НАШУ РАССЫЛКУ!
    Позвольте нам обновлять ваши знания раз в неделю.