Необходимость разработки продуманных дизайн-систем, а не простых наборов веб-страниц возникает когда стоит задача создать интерфейсы для большого количества пользователей в большем количестве контекстов.
Давайте разберемся из чего состоят наши интерфейсы и как можно методично выстраивать дизайн-системы.
В качестве аналогии обратимся к химии. Суть заключается в том, что вся материя (твердая, жидкая, газообразная и т.д.) состоит из атомов. Эти атомы соединяются вместе, образуют молекулы, которые затем объединяются в сложные организмы, чтобы в конечном итоге создать всю материю в нашей Вселенной.
Точно так же интерфейсы состоят из более мелких компонентов. Это означает, что можно разбить интерфейсы на фундаментальные строительные блоки и работать с ними дальше.
Что такое атомарный дизайн?
Атомарный дизайн — это методология создания дизайн-систем, в которой существует пять различных уровней:
1. Атомы
Атомы — это ключевые строительные блоки материи. В применении к интерфейсам атомы — это HTML-теги, такие как ярлык формы, поле ввода или кнопка.
Атомы могут также включать в себя и абстрактные элементы, такие как цветовая палитра, шрифты и даже такие невидимые аспекты интерфейса, как анимация.
Как и атомы в природе, они абстрактны и часто не слишком полезны сами по себе. Однако они используются в качестве справочника в библиотеке шаблонов и помогают увидеть глобальные стили, применяемые в интерфейсе.
2. Молекулы
Элементы становятся более сложными и ощутимыми, когда атомы начинают объединяться. Молекулы — это группы атомов, соединенных вместе, и самые маленькие фундаментальные единицы соединения. Эти молекулы приобретают собственные свойства и служат основой наших дизайн-систем.
Например, ярлык формы, поле ввода или кнопка не слишком полезны сами по себе, но если объединить их вместе в форму, они приобретают дополнительное полезное свойство.
3. Организмы
Молекулы представляют собой готовые строительные блоки для работы, которые можно объединить вместе, чтобы сформировать организмы. Организмы — это группы молекул, соединенных вместе для формирования относительно сложного, отдельного участка интерфейса.
Примеры организмов.
Здесь картина становится более предметной. Клиента обычно не интересуют молекулы дизайн-системы, но с помощью организмов видно, как начинает формироваться окончательный интерфейс.
Организмы состоят из схожих или отличных типов молекул. Например, организм главной страницы может состоять из различных компонентов, таких как логотип, меню, поля поиска и иконок социальных сетей. А организм каталога продуктов может состоять из одной и той же молекулы содержащей изображение продукта, название и цену, которая повторяется снова и снова.
Построение от молекул к организмам помогает создавать автономные, переносимые и многократно используемые компоненты.
4. Шаблоны
На этапе создания шаблона мы прерываем нашу аналогию с химией, чтобы перейти на язык, который имеет больше смысла для понимания клиентов и конечного результата. Шаблоны состоят из групп организмов, соединенных вместе, чтобы сформировать страницы. Здесь уже видна верстка элементов, где дизайн собирается в единую композицию.
Шаблоны предельно конкретны и формируют восприятие всех относительно абстрактных молекул и организмов. Шаблоны также являются тем местом, где начинает проявляться окончательный дизайн.
5. Страницы
Страницы — это конкретные варианты шаблонов. Здесь содержимое заполнителя заменяется реальным контентом, чтобы дать точное представление о том, что в конечном итоге увидит пользователь.
Страницы представляют собой самый высокий уровень наглядности, и поскольку они наиболее реалистичные, именно на них большинство людей проводит большую часть своего времени и вокруг них возникает большинство обратной связи.
Этап страницы важен, потому что на нем проверяется эффективность дизайн-системы. Рассмотрение всех элементов в контексте позволяет нам вернуться назад и изменить наши молекулы, организмы или атомы для лучшего соответствия реальному контексту дизайна.
Страницы также становятся местом для проверки вариантов паттернов. Например, можно спроектировать, как выглядит заголовок из 40 символов, и показать, как выглядит заголовок из 340 символов. Или как выглядит один товар в корзине у пользователя и как будет выглядеть страница с 10 товарами с отображением скидки. Опять же, эти конкретные случаи влияют на то, как будет строиться наша дизайн-система.
Преимущества методологии атомарного дизайна в разработке продукта
Атомарный дизайн предоставляет четкую методологию для создания дизайн-систем. Клиенты и члены команды могут лучше понять концепцию дизайн-систем, видя перед собой все уровни.
Как правило, мы оцениваем дизайн на уровне страниц, внося в него корректировки не принимая во внимание структуру и логику его создания.
Например, если только на одной странице изменить размеры шрифтов или цвета кнопок, это приводит к тому, что элементы начнут выбиваться из общей логики и визуального восприятия интерфейса и к усложнению реализации согласно заданным стилям. Продолжая вносить правки на уровне страниц, изменяя и добавляя инородные элементы можно прийти к полному разрушению дизайн-системы с точки зрения визуального восприятия.
Понимание сути атомарного дизайна позволяет переходить от абстрактного к конкретному. Благодаря этому можно создавать системы, которые поддерживают согласованность и масштабируемость, и при этом показывают вещи в их конечном виде. Собирая, а не разрушая элементы, мы создаем устойчивую систему с самого начала, а не подбираем шаблоны уже потом.
В сложных продуктах с большим количеством экранов использование методологии проектирования атомарного дизайна экономит нашей студии до 40% времени и существенно снижает бюджет на разработку продукта.
Источник: https://atomicdesign.bradfrost.com/
