Глава 2: Методология атомарного дизайна (часть 1)

Атомы, молекулы, организмы, шаблоны, страницы

← Предыдущая глава| Следующая часть →

Перед вами перевод книги Atomic Design Брэда Фроста, разработчика интерфейсов, поклонника мобильного интернета и создателя методики «Атомарный дизайн».
Если вы здесь впервые, то лучше начните сначала.

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


Интересуетесь свежими статьями по дизайну? Вступайте в группу на Facebook.

Все 557+ статей по дизайну читайте на сайте ux-journal.ru

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

Используем подсказки из химии

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

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

Пример химического уравнения, в котором атомы водорода объединяются с кислородом и образуют молекулы воды.

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

В природе атомы объединяются для образования молекул. Молекулы в дальнейшем могут объединиться и образовать относительно сложные организмы. Давайте рассмотрим это подробнее:

Атомы — это основной строительный материал, из которого состоят все существующие вещества в природе. Каждому химическому элементу присущ свой набор характеристик, и их нельзя разделить на более мелкие частицы, не нарушив этот набор. (Да, на самом деле атомы состоят из еще более мелких частиц: протонов, электронов и нейтронов, но атомы являются наименьшей функциональной единицей).
Молекулы — это группы из двух и более атомов, соединенные химическими связями. Молекулам атомов присущи свои уникальные свойства, и они уже более осязаемы и функциональны по сравнению с атомами.
Организмы — это совокупность молекул, функционирующих как единое целое. Это относительно сложные структуры, которые могут варьируются от одноклеточных до невероятно сложных организмов, вплоть до человека.

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

Периодическая таблица химических элементов.

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

Методология атомарного дизайна

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

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

Периодическая таблица HTML-элементов Джоша Дака.

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

Да здравствует атомарный дизайн!

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

  1. Атомы
  2. Молекулы
  3. Организмы
  4. Шаблоны
  5. Страницы
Атомарный дизайн состоит из атомов, молекул, организмов, шаблонов и страниц, которые вместе создают эффективные системы проектирования интерфейсов.

Атомарный дизайн — это нелинейный процесс. Он похож на ментальную модель, которая помогает нам относиться к пользовательским интерфейсам как к единому целому, но в то же время не забывать о деталях. Каждый из пяти этапов играет важную роль в иерархии систем проектирования интерфейсов. Давайте рассмотрим их подробнее.

Атомы

Если атомы в химии — это базовые строительные частицы материи, то атомы интерфейсов служат фундаментом, на котором держатся все пользовательские интерфейсы. К атомам интерфейсов относятся веб-формы, поля ввода, кнопки и другие базовые элементы HTML, которые нельзя разделить на более мелкие части, не потеряв при этом их функциональность.

К атомам интерфейсов относятся веб-формы, поля ввода и кнопки.

В природе каждый атом обладает своими уникальными свойствами. Атом водорода содержит один электрон, а атом гелия — два. Присущие атомам химические свойства оказывают огромное влияние на способ их применения (взрыв дирижабля Гинденбург был настолько мощным из-за того, что его отсеки были заполнены чрезвычайно огнеопасным водородом, а не более инертным гелием).

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

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

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

Молекулы

В химии молекулами называют группы атомов, связанных друг с другом и таким образом приобретающими определенные свойства. Молекулы воды и молекулы пероксида водорода состоят из одних и тех же атомов: водорода и кислорода. Однако, они обладают разными свойствами и ведут себя тоже по-разному.

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

Молекула формы поиска состоит из поля поиска, формы ввода и кнопки Search.

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

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

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

Теперь, когда у нас есть простые, функциональные и многоразовые компоненты, которые мы можем системно использовать, встречайте организмы!

Организмы

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

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

Организм хедера состоит из молекулы формы поиска, атома логотипа и молекулы навигации.

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

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

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

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

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

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

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

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

Шаблоны

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

Шаблоны — это объекты уровня страницы, которые объединяют компоненты в макет и формируют базовую структуру оформления содержимого. Давайте возьмем наш предыдущий пример с хедером, и используем его вместе с шаблоном домашней страницы.

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

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

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

Марк Боултон о важности разработки базовой структуры контента страницы:

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

Разобравшись со скелетом страницы, мы сможем создать систему, которая учитывает разные типы контента и задает необходимые рамки. Шаблон домашней страницы Time Inc. демонстрирует несколько ключевых компонентов в действии и показывает структуру контента относительно размеров изображений и длины текста:

Базовая структура контента Time Inc.

Теперь, когда мы создали скелет для наших страниц, давайте нарастим на него мясца!

Страницы

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

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

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

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

Наполнив макет домашней страницы Time Inc. реальным контентом, мы видим, что все базовые шаблоны эффективно работают.

Добавив реальный контент, мы видим, правильно ли компоненты пользовательского интерфейса демонстрируют содержимое.

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

  • Пользователь Миша добавил в корзину один товар, а Петя — десять.
  • Панель администратора веб-приложения обычно показывает недавнюю активность, но для пользователей, которые впервые используют эту функцию, таких данных пока нет.
  • Заголовок одной статьи содержит 40 символов, а другой — 340.
  • Пользователи с правами администратора, в отличие от рядовых пользователей, могут видеть дополнительные кнопки и опции панели управления.

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

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

  • Атомы — это минимальные частицы пользовательского интерфейса, которые служат базовыми кирпичиками интерфейса.
  • Молекулы — это совокупности атомов, которые образуют относительно простые компоненты пользовательского интерфейса.
  • Организмы — это относительно сложные компоненты, которые образуют независимые участки интерфейса.
  • Шаблоны — это макеты, в которых присутствуют все компоненты, чтобы продемонстрировать базовую структуру контента.
  • Страницы — это шаблоны вкупе с реальным контентом. Кроме того, на этом этапе создаются варианты страниц, чтобы продемонстрировать итоговый интерфейс и проверить устойчивость системы проектирования.

Над переводом работают Ольга Кокоулина и Ринат Шайхутдинов.
Если вам понравился перевод, дайте нам знать — нажмите кнопку Recommend.

← Предыдущая глава| Следующая часть →