Данная статья является переводом оригинальной - "Chapter 2. Atomic Design Methodology" автора Бреда Фроста (Brad Frost)
От дизайнера Айрата Хабибрахманова
Также перед продолжением изучения этой статьи рекомендую (но не настоятельно) ознакомиться с предыдущей: Что такое Дизайн-системы?
Рекомендуемый порядок изучения:
- Методология атомарного дизайна (текущая статья)
Атомы, молекулы, организмы, шаблоны и страницы в дизайн-системах
Поиск методологии создания систем проектирования интерфейсов заставил меня искать вдохновение в других областях и отраслях. Учитывая удивительно сложный мир, который мы создали, казалось вполне естественным, что другие области могли решать аналогичные проблемы, которые мы могли бы изучить и использовать. Оказалось, что в таких областях, как промышленный дизайн и архитектура, разработаны интеллектуальные модульные системы для производства таких сложных объектов, как самолеты, корабли и небоскребы.
Однако мои первоначальные исследования постоянно возвращались к миру природы, что вызвало воспоминания о том, как я сидел за шатким столом в школьной химической лаборатории.
Черпая вдохновение из химии
Мой школьный курс химии вел бескомпромиссный ветеран Вьетнама с необычайно впечатляющими усами. Уроки мистера Рэя славились как одни из самых трудных в школе, в основном из-за задания, требующего балансировки сотен химических уравнений в огромной рабочей тетради.
Если вы, как и я, нуждаетесь в небольшом напоминании о том, как выглядит химическое уравнение, вот оно:
Химические реакции представлены химическими уравнениями, которые часто показывают, как атомарные элементы соединяются вместе, образуя молекулы. В приведенном выше примере мы видим, как водород и кислород соединяются вместе, образуя молекулы воды.
В природе атомарные элементы соединяются между собой, образуя молекулы. В дальнейшем эти молекулы могут объединяться в относительно сложные организмы. Немного подробнее:
- Атомы - это основные строительные блоки всей материи. У каждого химического элемента есть свои уникальные свойства, и их нельзя разложить на более мелкие без потери их значения. (Да, это правда, что атомы состоят из еще более мелких частиц, таких как протоны, электроны и нейтроны, но атомы являются самой маленькой функциональной единицей.)
- Молекулы - это группы из двух или более атомов, связанные химическими связями. Эти комбинации атомов обладают собственными уникальными свойствами и становятся более осязаемыми и функциональными, чем атомы.
- Организмы - это сборки молекул, функционирующие вместе как единое целое. Эти относительно сложные структуры могут быть представлены одноклеточными организмами или крайне сложными организмами, такими как человек.
Конечно, я упрощаю невероятно богатый состав Вселенной, но основная идея остается неизменной: атомы соединяются вместе, образуя молекулы, которые далее соединяются, образуя организмы. Эта атомная теория означает, что вся материя в известной нам Вселенной может быть разложена на конечный набор атомных элементов:
Очевидно, стратегия господина Рэя, заключающаяся в том, чтобы студенты безраздельно балансировали тонны химических уравнений, сработала, потому что я возвращаюсь к этому всему спустя многие годы в поисках вдохновения для подхода к проектированию интерфейсов.
Методология атомарного дизайна
К этому моменту вы, возможно, уже задаетесь вопросом, почему мы говорим об атомной теории, и, может быть, даже немного сердитесь на меня за то, что я заставляю вас заново вспоминать школьные уроки химии. Но мы вспоминаем это не просто так, обещаю.
Ранее мы обсуждали, что вся материя во Вселенной может быть разложена на конечный набор атомных элементов. Как оказалось, наши интерфейсы можно разбить на аналогичный конечный набор элементов.
В "Периодической таблице элементов HTML" Джоша Дака прекрасно показано, как все наши сайты, приложения, интрасети, хубадибупы и прочее состоят из одних и тех же элементов HTML.
Поскольку мы начинаем с аналогичного конечного набора строительных блоков, мы можем применить тот же процесс, который происходит в мире природы, для проектирования и разработки пользовательских интерфейсов.
Вводим атомарный дизайн.
Атомарный дизайн - это методология, состоящая из пяти отдельных этапов, позволяющих создавать системы проектирования интерфейсов в более продуманной и иерархической манере. Пять этапов атомарного проектирования включают в себя:
- Атомы
- Молекулы
- Организмы
- Шаблоны
- Страницы
Атомарный дизайн - это не линейный процесс, а скорее ментальная модель, помогающая воспринимать пользовательские интерфейсы как единое целое и одновременно как набор частей. Каждый из пяти этапов играет ключевую роль в иерархии наших систем проектирования интерфейсов. Давайте рассмотрим каждый этап более подробно.
Атомы
Если атомы являются основными элементами материи, то атомы наших интерфейсов служат основополагающими элементами, из которых состоят все наши пользовательские интерфейсы. Эти атомы включают в себя базовые элементы HTML, такие как инпуты, метки, кнопки и другие элементы, которые невозможно разложить на части, не утратив при этом функциональности.
Каждый атом в природе обладает своими уникальными свойствами. Атом водорода содержит один электрон, а атом гелия - два. Эти присущие атому химические свойства оказывают глубокое влияние на его применение (например, взрыв "Гинденбурга" был столь катастрофичен потому, что дирижабль был заполнен чрезвычайно огнеопасным газом водородом, а не инертным газом гелием). Точно так же каждый атом интерфейса обладает своими уникальными свойствами, например, размером шрифта основного заголовка и размером шрифта контента для чтения. Эти свойства влияют на то, как каждый атом должен быть применен в более широкой системе пользовательского интерфейса.
В контексте библиотеки шаблонов атомы демонстрируют все базовые стили с одного взгляда, что может стать полезным справочным материалом, к которому можно постоянно возвращаться в процессе проектирования макетов и поддержки системы дизайна. Но, как и атомы в природе, атомы интерфейса не существуют в вакууме и по-настоящему оживают только при применении.
Молекулы
В химии молекулы - это группы атомов, соединенных между собой, которые приобретают новые ярко выраженные свойства. Например, молекулы воды и перекиси водорода обладают своими уникальными свойствами и ведут себя совершенно по-разному, хотя состоят из одних и тех же атомных элементов (водорода и кислорода).
В интерфейсах молекулы представляют собой относительно простые группы элементов пользовательского интерфейса, функционирующие как единое целое. Например, метка формы, поисковый ввод и кнопка могут объединяться в молекулу формы поиска.
При объединении эти абстрактные атомы неожиданно обретают смысл. Атом текстовой метки теперь определяет атом инпут. Нажатие атома кнопки теперь приводит к отправке формы. В результате получился простой, переносимый, многократно используемый компонент, который можно бросить в любое место, где нужна поисковая функциональность.
Сборка элементов в простые функционирующие группы - это то, что мы всегда делали для построения пользовательских интерфейсов. Но выделение отдельного этапа в методологии атомарного проектирования для этих относительно простых компонентов позволяет нам сделать несколько ключевых выводов.
Создание простых компонентов помогает дизайнерам и разработчикам пользовательских интерфейсов придерживаться принципа единой ответственности - вековой заповеди компьютерных наук, которая поощряет менталитет "делай одно дело и делай его хорошо". Нагружая один паттерн излишней сложностью, вы делаете программное обеспечение громоздким. Поэтому создание простых молекул пользовательского интерфейса облегчает тестирование, стимулирует повторное использование и обеспечивает согласованность всего интерфейса.
Теперь у нас есть простые, функциональные, многократно используемые компоненты, которые мы можем рассматривать в более широком контексте. Вводим понятие организмов!
Организмы
Организмы - это относительно сложные компоненты пользовательского интерфейса, состоящие из групп молекул и/или атомов и/или других организмов. Эти организмы образуют отдельные участки интерфейса.
Давайте вернемся к молекуле формы поиска. Форму поиска часто можно найти в заголовке многих веб-ресурсов, поэтому давайте поместим молекулу формы поиска в контекст организма заголовка.
Шапка сайта является самостоятельным разделом интерфейса, хотя он содержит несколько более мелких частей интерфейса со своими уникальными свойствами и функциональностью. Организмы могут состоять как из одинаковых, так и из разных типов молекул. Подобные организмы мы видим практически на каждом посещаемом нами сайте.
Развитие от молекул к более сложным организмам дает дизайнерам и разработчикам возможность почувствовать контекст. Организмы демонстрируют в действии более мелкие и простые компоненты и служат своеобразными шаблонами, которые можно использовать снова и снова. Организм сетки продуктов может быть использован везде, где необходимо отобразить группу продуктов: в списках категорий, результатах поиска и сопутствующих товарах.
Теперь, когда мы определили организмы в нашей системе дизайна, мы можем прервать нашу химическую аналогию и применить все эти компоненты к чему-то, напоминающему веб-страницу!
Шаблоны
Итак, друзья, пришло время распрощаться с нашей химической аналогией. Язык атомов, молекул и организмов несет в себе полезную иерархию, позволяющую нам осознанно выстраивать компоненты наших проектных систем. Но в конечном итоге мы должны перейти на язык, более подходящий для нашего конечного результата и более понятный нашим клиентам, начальникам и коллегам. Попытка зайти слишком далеко в химической аналогии может запутать заинтересованные стороны и заставить их думать, что вы немного сумасшедший. Поверьте мне, я знаю о чем говорю :)
Шаблоны - это объекты на уровне страницы, которые помещают компоненты в макет и определяют структуру содержимого дизайна. Чтобы продолжить наш предыдущий пример, мы можем взять организм заголовка и применить его к шаблону главной страницы.
Шаблон этой домашней страницы отображает все необходимые компоненты страницы, функционирующие вместе, что обеспечивает контекст для относительно абстрактных молекул и организмов. При создании эффективной системы дизайна критически важно продемонстрировать, как компоненты выглядят и функционируют вместе в контексте макета, чтобы подтвердить, что части составляют хорошо функционирующее целое. Подробнее об этом мы поговорим чуть позже.
Еще одной важной особенностью шаблонов является то, что они фокусируются на базовой структуре содержимого страницы, а не на ее конечном содержимом. Системы дизайна должны учитывать динамическую природу контента, поэтому очень полезно определить важные свойства компонентов, такие как размеры изображений и длина символов для заголовков и фрагментов текста.
Марк Бултон обсуждает важность определения основной структуры контента страницы:
Вы можете создавать хороший пользовательский опыт, даже не зная контента. Но вы не сможете создать хороший пользовательский опыт, не зная структуру вашего контента. Важно знать, из чего состоит ваш контент, а не то, что ваш контент из себя представляет - Марк Боултон
Определив "скелет" страницы, мы можем создать систему, учитывающую разнообразный динамический контент и в то же время обеспечивающую необходимые ограждения для типов контента, используемых в определенных шаблонах. Например, шаблон домашней страницы для Time Inc. демонстрирует несколько ключевых компонентов в действии, а также структуру контента в отношении размеров изображений и длины символов:
Теперь, когда мы создали скелет нашей страницы, давайте добавим к нему немного "мяса"!
Страницы
Страницы являются конкретными экземплярами шаблонов, которые показывают, как выглядит пользовательский интерфейс с реальным представительным контентом. На основе нашего предыдущего примера мы можем взять шаблон главной страницы и заполнить его реальным текстом, изображениями и медиафайлами, чтобы показать реальный контент в действии.
Этап страницы - это наиболее конкретный этап атомарного дизайна, и он важен по вполне очевидным причинам. В конце концов, это то, что увидят и с чем будут взаимодействовать пользователи при посещении вашего сайта. Это то, что подтвердят ваши стейкхолдеры. И именно здесь вы видите, как все эти компоненты собираются вместе, образуя красивый и функциональный пользовательский интерфейс. Захватывающе!
Помимо демонстрации конечного интерфейса в том виде, в котором его увидят пользователи, страницы необходимы для проверки эффективности системы, лежащей в основе дизайна. Именно на этапе создания страницы мы можем посмотреть, как все эти шаблоны работают, когда на систему дизайна накладывается реальный контент. Все ли выглядит прекрасно и функционирует так, как нужно? Если ответ отрицательный, то мы можем вернуться назад и изменить наши молекулы, организмы и шаблоны, чтобы они лучше соответствовали потребностям контента.
Когда мы помещаем реальный репрезентативный контент в шаблон домашней страницы Time Inc., мы можем увидеть, как работают все эти базовые шаблоны дизайна.
Нам необходимо создавать системы, которые устанавливают многоразовые дизайн-паттерны и точно отражают реальность контента, который мы помещаем в эти паттерны.
Страницы также обеспечивают место для описания вариаций в шаблонах, что очень важно для создания надежных и устойчивых дизайн-систем. Вот лишь несколько примеров вариаций шаблонов:
- У одного пользователя в корзине находится один товар, а у другого - десять;
- На дашборде веб-приложения обычно отображается информация о последних действиях, но для пользователей, впервые обратившихся к нему, этот раздел закрыт;
- Заголовок одной статьи может быть длиной 40 символов, а другой - 340 символов;
- Пользователи с правами администратора могут видеть на своей панели дополнительные кнопки и опции по сравнению с пользователями, не являющимися администраторами.
Во всех этих примерах основные шаблоны одинаковы, но пользовательский интерфейс меняется, чтобы отражать динамическую природу контента. Эти вариации прямо влияют на то, как строятся основные молекулы, организмы и шаблоны. Поэтому создание страниц, учитывающих эти вариации, помогает нам создавать более устойчивые дизайн-системы.
Вот и всё, что касается атомного дизайна! Эти пять отдельных этапов работают параллельно, чтобы создавать эффективные системы дизайна пользовательского интерфейса. Вкратце, атомный дизайн можно охарактеризовать так:
- Атомы - это элементы пользовательского интерфейса, которые не поддаются дальнейшему делению и служат элементарными строительными блоками интерфейса.
- Молекулы - это наборы атомов, образующие относительно простые компоненты пользовательского интерфейса.
- Организмы - относительно сложные компоненты, образующие отдельные участки интерфейса.
- Шаблоны размещают компоненты в макете и демонстрируют структуру содержимого, лежащую в основе дизайна.
- Страницы накладывают реальный контент на шаблоны и формулируют вариации для демонстрации конечного пользовательского интерфейса и проверки устойчивости системы проектирования.
Преимущества атомарного дизайна
Так зачем же затевать всю эту волокиту? Какая польза от атомарного дизайна? Вопросы эти вполне обоснованы, учитывая, что мы уже долгое время создаём пользовательские интерфейсы без четкой пятиступенчатой методологии. Однако атомарный дизайн позволяет нам понять несколько ключевых моментов, которые помогают создавать более эффективные и целенаправленные дизайн-системы пользовательских интерфейсов.
Часть и целое
Одно из главных преимуществ атомарного дизайна - возможность быстро переходить от абстрактного к конкретному. Мы можем одновременно видеть наши интерфейсы, разложенные на атомарные элементы, а также наблюдать, как эти элементы соединяются вместе, формируя конечный опыт.
В своей книге "Форма дизайна" Фрэнк Чимеро красноречиво описывает силу такого путешествия:
Художник, находясь на расстоянии от мольберта, может с этой точки зрения оценить и проанализировать всю работу. Он внимательно смотрит и слушает, выбирает следующий мазок, подходит к холсту и выполняет его. Затем он снова отходит назад, чтобы посмотреть, что он сделал по отношению к целому. Это танец смены контекстов, пусть и плавный; перебежка по студийному полу, создающая плотный цикл обратной связи между созданием меток и их оценкой.
Атомарный дизайн позволяет нам танцевать между контекстами, как это красноречиво описал художник Франк. Атомы, молекулы и организмы, из которых состоят наши интерфейсы, не живут в вакууме. А шаблоны и страницы наших интерфейсов действительно состоят из более мелких частей. Части нашего дизайна влияют на целое, а целое - на части. Они взаимосвязаны, и атомарный дизайн учитывает этот факт.
Когда дизайнеры и разработчики создают тот или иной компонент, мы подобны художнику на холсте, наносящему подробные мазки. Когда же мы рассматриваем эти компоненты в контексте макета с реальным репрезентативным контентом, мы подобны художнику, находящемуся в нескольких метрах от холста и оценивающему, как его детальные мазки влияют на всю композицию. Необходимо сосредоточиться на конкретном компоненте, чтобы убедиться в его функциональности, удобстве и красоте. Но также необходимо убедиться, что этот компонент будет функциональным, удобным и красивым в контексте конечного пользовательского интерфейса.
Атомарный дизайн предоставляет нам структуру, позволяющую перемещаться между частями и целым нашего пользовательского интерфейса, поэтому очень важно еще раз подчеркнуть, что атомарный дизайн - это не линейный процесс. Было бы глупо разрабатывать кнопки и другие элементы по отдельности, а затем скрестить пальцы и надеяться, что все сложится в единое целое. Поэтому не стоит интерпретировать пять этапов атомного дизайна как "Шаг 1: атомы; Шаг 2: молекулы; Шаг 3: организмы; Шаг 4: шаблоны; Шаг 5: страницы". Вместо этого воспринимайте этапы атомарного дизайна как ментальную модель, позволяющую одновременно создавать конечные пользовательские интерфейсы и лежащие в их основе дизайн-системы.
Четкое разделение структуры и содержания
Хорошо продуманная система дизайна ориентирована на содержимое, которое в ней живет, а хорошо продуманное содержимое знает, как оно представлено в контексте пользовательского интерфейса. Создаваемые нами шаблоны интерфейса должны точно отражать характер текста, изображений и другого контента, который в них содержится. Аналогичным образом, наш контент должен знать, каким образом он будет представлен. Тесная взаимосвязь между содержанием и дизайном требует от нас учета обоих факторов при создании пользовательского интерфейса.
Атомарный дизайн дает нам язык для обсуждения структуры наших паттернов пользовательского интерфейса, а также содержания, которое находится внутри этих паттернов. Хотя существует четкое разделение между скелетом структуры контента (шаблоны) и конечным контентом (страницы), атомарный дизайн признает, что эти два понятия очень сильно влияют друг на друга. В качестве примера можно привести следующий пример:
Слева мы видим скелет содержимого пользовательского интерфейса, который состоит из одной и той же молекулы блока person, повторяющейся снова и снова. Справа мы видим, что происходит, когда мы заполняем каждый экземпляр молекулы блока person репрезентативным контентом. Визуализация скелета контента и репрезентативного конечного контента позволяет нам создавать шаблоны, которые точно отражают контент, находящийся в них. Если бы в паттерне имя человека растягивалось на пять строк, нам пришлось бы устранять это нарушение на более атомарном уровне.
Содержание, которое мы закладываем в пользовательский интерфейс на этапе создания страницы, влияет на характеристики и параметры базовых паттернов проектирования.
Атомарный дизайн предназначен для пользовательских интерфейсов
Атомарный дизайн - это концепция, рожденная вебом. В конце концов, ваш скромный автор - веб-дизайнер, и именно поэтому данная книга посвящена в основном веб-интерфейсам. Однако важно понимать, что атомарный дизайн применим ко всем пользовательским интерфейсам, а не только к веб-интерфейсам.
Методологию атомарного дизайна можно применить к пользовательскому интерфейсу любого программного обеспечения: Microsoft Word, Keynote, Photoshop, да чего угодно. Для наглядности давайте применим атомарный дизайн к нативному мобильному приложению Instagram.
Давайте пройдемся по этому атомарному интерфейсу Instagram:
- Атомы: Этот экран пользовательского интерфейса Instagram состоит из нескольких иконок, некоторых элементов на уровне текста и двух типов изображений: основного и аватарки пользователя.
- Молекулы: Несколько пиктограмм образуют простые компоненты, такие как нижняя панель навигации и панель действий с фотографиями, где пользователь может поставить лайк или прокомментировать фотографию. Кроме того, простые комбинации текста и/или изображений образуют относительно простые компоненты.
- Организмы: Здесь мы видим, как формируется организм фотографии, который состоит из информации о пользователе, метки времени, самой фотографии, действий вокруг нее, а также информации о фотографии, включая количество лайков и подписи. Этот организм становится краеугольным камнем всего опыта Instagram, поскольку он многократно складывается в бесконечный поток фотографий, созданных пользователями.
- Шаблоны: Мы видим, как наши компоненты собираются вместе в контексте макета. Кроме того, именно здесь мы видим открытый контентный скелет опыта Instagram, выделяя динамический контент, такой как ручка пользователя, аватар, фотография, количество лайков и подпись.
- Страницы: И наконец, мы видим конечный продукт, наполненный реальным контентом, который помогает обеспечить единство базовой системы дизайна для формирования красивого и функционального пользовательского интерфейса.
Я привожу этот пример не связанный с вебом, потому что подход атомарного дизайна часто неправильно трактуется как подход к веб-специфичным технологиям, таким как CSS и JavaScript. Позвольте мне внести ясность: атомарный дизайн не имеет ничего общего с веб-специфичными темами, такими как архитектура CSS или JavaScript. В предыдущей статье мы обсуждали тенденцию к модульности во всех аспектах дизайна и разработки, которая включает в себя CSS и JavaScript. Это фантастические тенденции в CSS и JavaScript, но атомарный дизайн занимается созданием дизайн-систем пользовательского интерфейса, независимо от используемой технологии.
Заключение
В этой статье была представлена методология атомарного проектирования и показано, как атомы, молекулы, организмы, шаблоны и страницы работают вместе для создания продуманных, взвешенных дизайн-систем интерфейсов. Атомарный дизайн позволяет нам увидеть наши пользовательские интерфейсы, разложенные на атомарные элементы, а также одновременно проследить, как эти элементы соединяются между собой, образуя конечный пользовательский интерфейс. Мы узнали о тесной связи между содержанием и дизайном, а также о том, как атомарный дизайн позволяет создавать системы дизайна, адаптированные к контенту, который в них живет. И наконец, мы узнали, что язык атомарного дизайна дает нам возможность обсуждать модульность с нашими коллегами и обеспечивает столь необходимое чувство иерархии в наших дизайн-системах.
Всем спасибо за внимание!
Данная статья была подготовлена специально для телеграм-канала "Айрат о дизайне"