(Перед вами перевод курса Atomic Design Брэда Фроста, разработчика интерфейсов, поклонника мобильного интернета и создателя методики «Атомарный дизайн». Если вы здесь впервые, то лучше начните сначала)
В поисках методологии для создания системы проектирования интерфейсов я решил почерпнуть вдохновение в других сферах. Человек создал удивительно сложный мир, и мне казалось логичным, что в других областях похожая проблема могла бы уже быть решена. Нам оставалось лишь изучить и применить этот опыт.
Содержание:
- Используем подсказки из химии
- Методология атомарного дизайна
- Преимущества атомарного дизайна
- Атомарный дизайн в UI
- Атомарный дизайн в теории и на практике
Оказалось, во многих сферах деятельности, таких как промышленный дизайн и архитектура, гибкие модулярные системы использовались для производства очень сложных объектов: самолетов, кораблей и небоскребов. Однако, в своих изысканиях я то и дело возвращался к миру природы… И это напомнило мне, как я сидел за шатающейся партой на уроке химии в школе.
Используем подсказки из химии
Химию в моей школе преподавал строгий учитель, ветеран войны во Вьетаме, с необычайно роскошными усами. Уроки мистера Рея пользовались репутацией одних из самых сложных в школе из-за домашних заданий, которые требовали решать сотни химических уравнений.
Возможно, вам (как и мне) нужно напомнить, как выглядит химическое уравнение. Вот оно:
Химические уравнения демонстрируют химические реакции. Часто такой реакцией становится объединение атомов элементов для образования молекул. В приведенном выше примере мы видим, как водород и кислород объединяются и образуют молекулы воды.
В природе атомы объединяются для образования молекул. Молекулы в дальнейшем могут объединиться и образовать относительно сложные организмы. Давайте рассмотрим это подробнее:
Атомы — это основной строительный материал, из которого состоят все существующие вещества в природе. Каждому химическому элементу присущ свой набор характеристик, и их нельзя разделить на более мелкие частицы, не нарушив этот набор. (Да, на самом деле атомы состоят из еще более мелких частиц: протонов, электронов и нейтронов, но атомы являются наименьшей функциональной единицей).
Молекулы — это группы из двух и более атомов, соединенные химическими связями. Молекулам атомов присущи свои уникальные свойства, и они уже более осязаемы и функциональны по сравнению с атомами.
Организмы — это совокупность молекул, функционирующих как единое целое. Это относительно сложные структуры, которые могут варьируются от одноклеточных до невероятно сложных организмов, вплоть до человека.
Конечно, я сильно упрощаю невообразимо богатое строение Вселенной. Однако, смысл такой: атомы объединяются и образуют молекулы, которые в свою очередь объединяются и формируют организмы. Атомная теория гласит, что вся материя известной нам Вселенной может быть разбита до конечного набора атомных элементов:
По-видимому, план мистера Рея, заключавшийся в том, чтобы заставить школьников щелкать химические уравнения, как орешки, в итоге сработал: я возвращаюсь к этому спустя столько лет, чтобы черпать вдохновение для проектирования интерфейсов.
Методология атомарного дизайна
Вам должно быть интересно, с чего вдруг мы заговорили о теории атомов. Или, возможно, вы даже немного злитесь на меня за напоминание о школьных уроках химии. Но сейчас я все объясню, обещаю.
Мы остановились на том, что всю материю во Вселенной можно разбить до конечного набора элементов. Интерфейсы можно разобрать до похожего конечного набора минимальных единиц. Джош Дак создал периодическую таблицу HTML-элементов, которая иллюстрирует, что любые веб-сайты, приложения, интранеты и прочие свистелки-дуделки состоят из одних и тех же элементов.
И раз мы начинаем с аналогичного ограниченного набора строительных компонентов, то можем использовать те же процессы, которые протекают в химии, для проектирования и разработки пользовательских интерфейсов.
Да здравствует атомарный дизайн!
Атомарный дизайн — это методология, состоящая из пяти независимых этапов, которые направлены на создание более продуманных и последовательных систем проектирования интерфейсов. Вот эти пять этапов атомарного дизайна:
- Атомы
- Молекулы
- Организмы
- Шаблоны
- Страницы
Атомарный дизайн — это нелинейный процесс. Он похож на ментальную модель, которая помогает нам относиться к пользовательским интерфейсам как к единому целому, но в то же время не забывать о деталях. Каждый из пяти этапов играет важную роль в иерархии систем проектирования интерфейсов. Давайте рассмотрим их подробнее.
Атомы
Если атомы в химии — это базовые строительные частицы материи, то атомы интерфейсов служат фундаментом, на котором держатся все пользовательские интерфейсы. К атомам интерфейсов относятся веб-формы, поля ввода, кнопки и другие базовые элементы HTML, которые нельзя разделить на более мелкие части, не потеряв при этом их функциональность.
В природе каждый атом обладает своими уникальными свойствами. Атом водорода содержит один электрон, а атом гелия — два. Присущие атомам химические свойства оказывают огромное влияние на способ их применения (взрыв дирижабля Гинденбург был настолько мощным из-за того, что его отсеки были заполнены чрезвычайно огнеопасным водородом, а не более инертным гелием).
Таким же образом каждому атому интерфейса присущи свои уникальные свойства, например, размер главного изображения или размер шрифта заголовка. Эти свойства влияют на то, как каждый атом следует применять в комплексной системе пользовательского интерфейса.
В вашей библиотеке паттернов должны содержаться все атомы, которые демонстрируют ваши базовые стили. Тогда она станет полезным ресурсом, к которому будет смысл обращаться при разработке и поддержке собственной системы проектирования.
Но, подобно атомам в природе, атомы интерфейса не существуют в вакууме и приходят в движение лишь после применения.
Молекулы
В химии молекулами называют группы атомов, связанных друг с другом и таким образом приобретающими определенные свойства. Молекулы воды и молекулы пероксида водорода состоят из одних и тех же атомов: водорода и кислорода. Однако, они обладают разными свойствами и ведут себя тоже по-разному.
В области интерфейсов молекулами являются относительно простые группы элементов, функционирующие вместе, как единое целое. Например, поле поиска, строка ввода и кнопка могут объединиться и создать молекулу формы поиска для сайта.
В сочетании атомы внезапно обретают цель. Атом поля поиска теперь определяет смысл атома строки ввода. А нажатие на атом кнопки отправляет форму и запускает поиск. В результате у нас есть простой и универсальный компонент, который мы можем использовать везде, где нужна функция поиска.
Сборка элементов в простые функциональные группы — это то, что мы и так делали при создании интерфейсов. Но уделив внимание этому этапу методологии атомарного проектирования, мы пришли к нескольким ключевым идеям.
Создание подобных простых компонентов помогает UI-дизайнерам и разработчикам придерживаться принципа единой ответственности — устоявшейся концепции компьютерной науки, которая поощряет философию «делать что-то одно и делать это хорошо». Обременение одного шаблона излишней сложностью лишает программное обеспечение гибкости. Зато создание простых молекул пользовательского интерфейса облегчает тестирование, упрощает повторное использование компонентов и способствует общей согласованности интерфейса.
Теперь, когда у нас есть простые, функциональные и многоразовые компоненты, которые мы можем системно использовать, встречайте организмы!
Организмы
Организмы — это относительно сложные компоненты UI, которые состоят из групп молекул и/или атомов и/или других организмов. Организмы образуют отдельные участки интерфейса.
Давайте еще раз взглянем на молекулу формы поиска. Такая форма часто располагается в верхней части страницы большинства веб-сайтов, поэтому давайте поместим ее в организм хедера сайта.
Хедер образует независимый компонент интерфейса, хотя сам состоит из нескольких более мелких элементов с собственными уникальными свойствами и функциями.
Организмы могут состоять из одинаковых или разных типов молекул. Организм хедера состоит из разнородных элементов: логотип, базовая навигация и форма поиска. Мы встречаем этот тип организма практически на каждом веб-сайте.
Одни организмы состоят из разных молекул, другие состоят из одной и той же молекулы, повторяемой снова и снова. Зайдите на страницу каталога любого интернет-магазина, и вы увидите список товаров, представленных в виде сетки.
Возможность проектировать от молекулы до более сложных организмов дает разработчикам важное понимание контекста.
Организмы показывают более мелкие и простые компоненты в действии и сами служат самостоятельными компонентами, которые можно использовать повторно. Организм товарной сетки можно использовать везде, где нужно показать группу товаров: от меню выбора категории каталога до вывода результатов поиска соответствующих товаров.
Теперь, когда мы определили место организмов в нашей системе проектирования, мы можем не развивать химическую метафору далее, а использовать все эти компоненты для создания веб-страниц.
Шаблоны
Сейчас, друзья, настало время попрощаться с химией. Метафоры атомов, молекул и организмов содержат в себе полезную иерархию, которая помогла нам начать сознательно использовать компоненты систем проектирования. Теперь самое время перейти на язык, который более подобает нашей конечной продукции и имеет больше смысла для клиентов, начальников и коллег. Попытка искусственно продолжать использование химических метафор может запутать окружающих и натолкнуть их на мысль, будто вы сошли с ума. Так что просто доверьтесь мне.
Шаблоны — это объекты уровня страницы, которые объединяют компоненты в макет и формируют базовую структуру оформления содержимого. Давайте возьмем наш предыдущий пример с хедером, и используем его вместе с шаблоном домашней страницы.
Этот шаблон содержит все необходимые компоненты, которые работают вместе. В результате относительно абстрактные молекулы и организмы получают определенный контекст. При создании эффективной системы проектирования важно показывать, как компоненты смотрятся и работают вместе в контексте. Создайте макет и убедитесь, что все части добавляют ценность в уже хорошо работающее целое (к этому вопросу мы еще вернемся).
Еще одна важная особенность шаблонов заключается в том, что они фокусируются на базовой структуре оформления страницы, а не на ее финальном содержимом. Системы проектирования должны учитывать способность контента изменяться, поэтому крайне полезно установить основные характеристики компонентов: размеры изображений, длину заголовков, объем текста и т.п.
Марк Боултон о важности разработки базовой структуры контента страницы:
Вы можете создать хороший пользовательский опыт, не зная, что за контент будет на сайте. То, чего вы сделать не в силах, так это создать хороший опыт, не зная структуру этого контента. То, из чего он состоит, а не то, какой он будет в итоге.
Марк Боултон, design leader. I have over 20 years experience building and leading design teams of various sizes across a broad range of digital product.
Разобравшись со скелетом страницы, мы сможем создать систему, которая учитывает разные типы контента и задает необходимые рамки. Шаблон домашней страницы Time Inc. демонстрирует несколько ключевых компонентов в действии и показывает структуру контента относительно размеров изображений и длины текста:
Разобравшись со скелетом страницы, мы сможем создать систему, которая учитывает разные типы контента и задает необходимые рамки. Шаблон домашней страницы Time Inc. демонстрирует несколько ключевых компонентов в действии и показывает структуру контента относительно размеров изображений и длины текста:
Теперь, когда мы создали скелет для наших страниц, давайте нарастим на него мясца!
Страницы
Страницы — это конкретные примеры применения шаблонов. Они показывают, как выглядит UI в сочетании с реальным контентом. Давайте снова возьмем пример с хедером и шаблоном домашней страницы и добавим туда текст, изображения и мультимедиа, чтобы показать реальный контент в действии.
Этап страницы — самый прикладной и самый важный этап атомарного дизайна, и этому есть очевидное объяснение. В конце концов, именно со страницами пользователи будут взаимодействовать, когда откроют ваш сайт или приложение. Это то, на чем поставит подпись ваш заказчик или начальник. И это то, что вы увидите, когда соберете все компоненты вместе — красивый и функциональный пользовательский интерфейс. Восхитительно!
Но страницы нужны не только, чтобы демонстрировать окончательный вариант интерфейса таким, каким его увидят пользователи. Страницы необходимы для проверки эффективности базовой системы проектирования. Именно на этапе страницы мы можем увидеть, как работают все шаблоны, когда появляется реальный контент. Все отлично выглядит и работает так, как задумывалось? Если нет, то мы можем сделать шаг назад и изменить молекулы, организмы и шаблоны, чтобы лучше отвечать требованиям контента.
Наполнив макет домашней страницы Time Inc. реальным контентом, мы видим, что все базовые шаблоны эффективно работают.
Вы можете создавать разные варианты шаблонов страниц, что тоже важно для создания функциональных и надежных систем дизайна. Вот лишь несколько примеров вариантов шаблонов:
- Пользователь Миша добавил в корзину один товар, а Петя — десять.
- Панель администратора веб-приложения обычно показывает недавнюю активность, но для пользователей, которые впервые используют эту функцию, таких данных пока нет.
- Заголовок одной статьи содержит 40 символов, а другой — 340.
- Пользователи с правами администратора, в отличие от рядовых пользователей, могут видеть дополнительные кнопки и опции панели управления.
Во всех этих примерах базовые шаблоны одинаковы, но пользовательский интерфейс меняется, чтобы отражать динамику контента. Эти вариации непосредственно влияют на принцип работы с основными молекулами, организмами и шаблонами. Создание страниц, которые учитывают вариативность, помогает создавать более устойчивые системы проектирования.
В этом и заключается атомарный дизайн. Пять самостоятельных этапов, которые работают вместе для создания эффективной системы проектирования пользовательского интерфейса. Краткое резюме атомарного дизайна:
- Атомы — это минимальные частицы пользовательского интерфейса, которые служат базовыми кирпичиками интерфейса.
- Молекулы — это совокупности атомов, которые образуют относительно простые компоненты пользовательского интерфейса.
- Организмы — это относительно сложные компоненты, которые образуют независимые участки интерфейса.
- Шаблоны — это макеты, в которых присутствуют все компоненты, чтобы продемонстрировать базовую структуру контента.
- Страницы — это шаблоны вкупе с реальным контентом. Кроме того, на этом этапе создаются варианты страниц, чтобы продемонстрировать итоговый интерфейс и проверить устойчивость системы проектирования.
Преимущества атомарного дизайна
Итак, зачем нам вся эта канитель с химией? Для чего нужен атомарный дизайн? Это хорошие вопросы, учитывая то, что мы долго проектировали интерфейсы и без этого пятиэтапного метода. Однако, атомарный дизайн дает нам несколько ключевых концепций, которые помогают создавать более эффективные и последовательные системы проектирования UI.
Часть и целое
Одним из главных преимуществ атомарного дизайна является возможность быстрого переключения между абстракциями и конкретикой. Мы можем одновременно видеть наши интерфейсы, расщепленные на составные элементы, и наблюдать, как эти элементы объединяются, чтобы принять итоговую форму.
Фрэнк Чимеро в своей книге The Shape of Design описывает, какую силу дает возможность такого переключения:
Только находясь на расстоянии от мольберта, художник способен оценить и проанализировать работу целиком. Он тщательно осматривает и изучает ее, обдумывает следующий мазок, затем подходит к холсту и делает его. А после — снова отступает, чтобы посмотреть, как изменилась картина в целом.
Этот ритмичный танец переключения контекстов в мастерской создает устойчивый цикл обратной связи между работой над картиной и оценкой работы.
Фрэнк Чимеро
Атомарный дизайн позволяет нам переключаться между контекстами также, как это красноречиво описал художник Фрэнк. Атомы, молекулы и организмы, из которых состоят интерфейсы, не висят в вакууме. Интерфейсы и страницы в самом деле состоят из маленьких частей. Маленькие части влияют на всю конструкцию в целом, а целое влияет на более мелкие части. Эти два контекста переплетены, и атомарный дизайн признает этот факт.
Когда мы разрабатываем какой-то компонент, мы похожи на художника, который делает мазки кистью по холсту. Когда мы отсматриваем эти компоненты в виде макетов с реальным контентом, мы похожи на художника, который отошел от холста и оценивает, как каждый штрих влияет на композицию целиком.
Нужно сосредоточиться на одном конкретном компоненте, чтобы сделать его функциональным, удобным и красивым. Но также необходимо обеспечить, чтобы этот компонент был функциональным, удобным и красивым в контексте конечного пользовательского интерфейса.
Атомарный дизайн предоставляет нам схему для переключения между частями и целым, однако крайне важно повторить, что атомарный дизайн не является линейным процессом. Было бы глупо проектировать кнопки и другие элементы в изоляции, а затем, скрестив пальцы, надеяться, что все сойдется, и получится единое целое. Именно по этой причине пять этапов атомарного проектирования не должны звучать в вашей голове так: «Шаг 1: атомы; Шаг 2: молекулы; Шаг 3: организмы; Шаг 4: шаблоны; Шаг 5: страницы».
Вместо этого относитесь к этапам атомарного проектирования как к ментальной модели, которая позволяет одновременно создавать итоговый интерфейс и систему проектирования, лежащую в его основе.
Четкая граница между структурой и контентом
Обсуждение дизайна и контента немного схоже со спором про курицу и яйцо. Марк Боултон объясняет:
У контента должна быть структура, а структура, как и дизайн, влияет на контент. Неправильно говорить «сперва контент, потом дизайн» и «или контент, или дизайн». Они равноценны, поэтому: «И контент, и дизайн».
Марк Боултон, designer from the UK.
Продуманная система проектирования отвечает своему содержанию, а качественный контент соответствует своему представлению в интерфейсе. Утвержденные нами паттерны интерфейса должны точно отражать характер текста, изображений и другого контента, который в них содержится. Точно так же при создании контента необходимо учитывать то, как он будет представлен. Тесная связь между контентом и дизайном требует принимать в расчет оба компонента при проектировании UI.
Атомарный дизайн дает нам язык для обсуждения структуры паттернов UI и контента, который будет в них содержаться. Несмотря на четкое разграничение между структурой контента (шаблонами, паттернами) и самим контентом (страницами), в атомарном дизайне учитывается их влияние друг на друга. Для примера, давайте рассмотрим эту схему:
Слева мы видим структуру контента. Она состоит из одной той же повторяющейся молекулы профайла пользователя. Справа мы видим, что происходит, когда мы заполняем каждую молекулу профайла релевантным контентом. Прием визуализации структуры контента и ее представление с итоговым содержимым позволяет создавать шаблоны, которые точно соответствуют собственному содержанию. Если бы имя пользователя заняло пять строчек, нам пришлось бы исправлять это не на уровне молекул, а на уровне атомов.
Содержание, которым мы наполняем интерфейсы на этапе страниц, будет влиять на характеристики и параметры базовых паттернов проектирования.
Что в имени?
На страницах этой книги я уже говорил, что идея модулярности в дизайне и разработке не является чем-то новым. Тогда зачем мы вводим новые термины, такие как атомы, молекулы и организмы, когда можно придерживаться уже установленных: модули, компоненты, элементы, разделы и области?
Столько, сколько я рассказываю об атомарном дизайне, всегда были люди, которые предлагали альтернативные названия для этапов проектирования. Один предлагает: «Почему бы просто не назвать их элементами, модулями и компонентами?», другой: «Почему бы просто не назвать их базой, компонентами и модулями?» Проблема с терминами вроде «компонент» и «модуль» заключается в том, что из одних только названий нельзя понять их иерархию. Атомы, молекулы и организмы подразумевают иерархию, так что любой, у кого есть базовые знания химии, догадается, о чем идет речь.
Давать названия трудно. Те, что я выбрал для этапов атомарного дизайна, отлично сработали для меня и команд, с которыми я работал при разработке UI. Но, возможно, они не сработают для вас и вашей компании. Это нормально. Вот вам подтверждение от команды разработчиков в GE:
При представлении концепций системы проектирования коллегам мы первоначально использовали терминологию атомарного дизайна. Однако, это вызвало недоуменные взгляды. […] Стало очевидно, что для успешной работы в нашей компании мы должны подобрать более подходящую таксономию.
Джефф Кроссман, GE Design
В систему таксономии, к которой в итоге пришли ребята, вошли термины: «Принципы», «Основы», «Компоненты», «Шаблоны», «Характеристики» и «Приложения». Имеют ли эти названия для вас больший смысл? Это не важно. Они установили таксономию, которая имела смысл в их компании, но каждый, кто знает принципы атомарного дизайна смог бы эффективно работать с ними.
Термин «атомарный дизайн» воплощает идеи модулярного дизайна и разработки, что делает его полезным и емким словечком для убеждения заинтересованных сторон и общения с коллегами. Но атомарный дизайн не является жесткой догмой. В конечном итоге, любая таксономия, которую вы выберете, должна помочь вам и сотрудникам вашей компании более эффективно общаться для создания отличной системы проектирования UI.
Атомарный дизайн в UI
Концепция атомарного дизайна родилась в интернете. В конце концов, скромный автор этой книги — веб-дизайнер, именно поэтому в ней основное внимание уделяется веб-интерфейсам. Но важно понимать, что атомарный дизайн применим вообще к любым интерфейсам.
Вы можете использовать методологию атомарного проектирования при разработке интерфейса любого программного обеспечения: Microsoft Word, Keynote, Photoshop, интерфейса банкомата вашего банка, — чего угодно. Чтобы это доказать, давайте применим атомарный дизайн к нативному приложению Instagram.
Давайте расщепим интерфейс Instagram на атомы:
- Атомы. Этот экран пользовательского интерфейса Instagram состоит из нескольких иконок, нескольких текстовых блоков и двух типов изображений: главного изображения и аватара пользователя.
- Молекулы. Несколько иконок образуют простые утилитарные компоненты: нижнюю панель навигации и панель действий с фотографиями, где пользователи могут лайкнуть или оставить комментарии. В дополнение, простые комбинации из текста и/или изображений образуют относительно простые компоненты.
- Организмы. Здесь мы видим, как формируется организм фотографии. Он состоит из информации о пользователе, времени публикации, самой фотографии, действий с этой фотографией и информации о ней, в том числе количество лайков и подпись. Этот организм — основа Instagram, поскольку многократно повторяется в нескончаемом потоке сделанных пользователем фотографий.
- Шаблоны. Мы видим, как компоненты работают вместе в контексте макета. Кроме того, здесь перед нами обнажается структура контента Instagram, в которой особенно выделяется динамический контент: никнейм пользователя, аватар, фотография, лайки и подпись.
- Страницы. И, наконец, мы видим конечный продукт, наполненный контентом. Это помогает убедиться, чтобы основная система дизайна сложилась и формирует красивый и функциональный интерфейс.
Я нарочно выбрал в качестве примера не сайт, потому что есть тенденция ошибочно относиться к атомарному дизайну, как к подходу при работе с веб-технологиям: CSS, JavaScript и т.п. Позвольте внести ясность: атомарный дизайн не имеет ничего общего с такими узкими веб-темами, как CSS или JavaScript. В первой главе мы говорили о тенденции к модульности во всех аспектах проектирования и разработки. Это фантастическая тенденция, в том числе для CSS и JavaScript, но атомарный дизайн связан с созданием систем проектирования UI, независимо от того, какая технология используется.
Атомарный дизайн в теории и на практике
В этой главе мы говорили о методологии атомарного проектирования и увидели, как атомы, молекулы, организмы, шаблоны и страницы объединяются, чтобы создавать качественные, продуманные системы проектирования интерфейсов.
Атомарный дизайн позволяет нам расщеплять интерфейсы на атомы и одновременно наблюдать, как эти элементы объединяются для формирования итоговых интерфейсов.
Мы узнали о тесной связи между контентом и дизайном и о том, как атомарный дизайн позволяет нам создавать структуру, адаптированную к содержанию.
И, наконец, мы узнали, как язык атомарного дизайна дает нам возможность для обсуждения модулярности с коллегами и обеспечивает столь важное понимание иерархии в наших системах проектирования.
Атомарный дизайн — полезная методология проектирования и разработки, но это лишь ментальная модель для создания UI. Возможно, вам уже не терпится узнать, как делать атомарный дизайн на практике. Не волнуйтесь, дорогие читатели — оставшаяся часть книги посвящена инструментам и процессам для претворения атомарного дизайна в жизнь.