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

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

«Дизайн система не должна быть просто хранилищем компонентов пользовательских интерфейсов наряду с теорией».

Учитывая наш неудачный опыт, мы спланировали следующее поколение дизайн систем в GE, делая упор на обучение и обмен опытом. Система не должна быть просто хранилищем компонентов пользовательских интерфейсов наряду с теорией. Она должна наглядно показать, как шаблоны работают на конкретных продуктах, и информировать, как другие команды смогли расширить возможности шаблона для использования в определенных условиях. Цель такой системы – своевременное реагирование команд, разрабатывающих продукт, на изменяющиеся потребности конечного пользователя. А также, передача данного опыта всей компании.

Atomic Design с использованием Sketch – это будущее разработки продуктового дизайна

Начало «Атомного» Дизайна

Начало «Атомного» Дизайна

По определению Брэда Фроста, под методикой атомного дизайна имеется ввиду способ иерархического формирования шаблонов. На базовом уровне находятся Атомы, это простые шаблоны типа текстовых полей, кнопок или значков. Форма полей e-mail, например, представляет собой совокупность текстовых полей, значков и кнопок, и является более сложным шаблоном (Молекулой). Каждый последующий элемент в иерархической структуре является совокупностью более мелких (простых) элементов низшего порядка. В этом имеется двойное преимущество. Во-первых, описывая форму полей e-mail, дизайнеру нет необходимости повторно описывать особенности работы кнопок, текстовых полей, и т.д. Во-вторых, форма e-mail позволяет рассмотреть практическое применение работы кнопок, текстовых полей, и т.д. Атомный дизайн упрощает изучение шаблонов в системе дизайна, в тоже время, упрощая их создание.

Атомный Дизайн в GE

Атомный Дизайн в GE

Predix Design System – первая платформа, которая использует структуру дизайн системы, которая была разработана не только для одного продукта. Например, GE Healthcare использует подобную структуру для создания своей дизайн системы для внутреннего использования. Мы не стали менять и ставить под сомнение работу, проделанную Брэдом Фростом в этом направлении и просто применили это в своей компании. Наша цель состояла в том, чтобы перенять лучший опыт, который можно найти в описательных документах, видео в Интернете и донести нашим коллегам преимущества этой системы.

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

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

Проблемы с систематикой Атомного дизайна

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

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

Масштабируемость концепции Атомного дизайна

Создание иерархии

Брэд Фрост открыл Атомный дизайн, который начинается с уровня Атомов. В то же время, он описал, как Атомы соединяются и создают Молекулы. Он начал с самого абстрактного, а закончил максимально конкретно – созданием полноценной WEB страницы. Генератор сайтов Pattern Lab, в описании процесса также придерживается такой последовательности. Представляя Атомный дизайн именно таким образом, вам проще обучить людей процессу создания крупных элементов, состоящих, в свою очередь, из мелких. Однако мы поняли, что это не всегда так.

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

Расширяя систему

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

Структура новой дизайн системы.

Структура новой дизайн системы.

Приложения

Уровень приложений – основной в дизайн системе

Уровень приложений – основной в дизайн системе. Здесь мы описываем созданные приложения и продукты используя нашу систему. Можно сказать, что они жестко закреплены в иерархии дизайн системы. Каждое приложение содержит в себе необходимую среду, в которой становится понятно, что делает приложение, с какими проблемами оно сталкивается, как в нем отражаются нужды пользователя. Приложения являются уникальным собранием таких Предметов.

Предметы

Предметы – это элементы интерфейса

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

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

Шаблоны

В Атомном дизайне, Шаблоны играют роль внешнего вида всей страницы

Понятие Шаблонов знакомо как дизайнерам, так и программистам. В Атомном дизайне, Шаблоны играют роль внешнего вида всей страницы. В нашей системе, мы немного расширили это понятие, чтобы убрать необходимость использовать уровень Организмов

Исключая Организмы

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

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

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

Компоненты

Компонентом мы называем то, что в Атомном дизайне зовется Молекулами

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

Основа

Основа, известная как Атом (в Атомном дизайне), содержит в себе шаблоны низшего порядка, иначе говоря, самые простые элементы

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

Принципы

Принципы – это базовый уровень дизайн системы

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


1-XfjNWl8yvIadY6S5Je-DmQ

Практика

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

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

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