×
Дизайнерская система GE’s Predix

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

 

 

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

 

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

 

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

 

Основы атомарного дизайна

 

Атомарный дизайн

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

GE's Predix Design System

 

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

 

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

 

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

 

Инвертируем иерархию

 

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

 

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

 

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

 

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

 

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

 

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

 

Функции

 

Функции

 

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

 

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

 

Шаблоны

 

Примеры Шаблонов

 

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

 

Доводы против уровня организмов

 

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

 

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

 

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

 

Компоненты

 

Примеры Компонент

 

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

 

Основы

 

Уровень Основ

 

Основы, также известные как атомы в атомарном дизайне, включают в себя достаточно простые дизайнерские элементы. Элементы управления пользовательским интерфейсом, у которых есть свой html-тег, являются наиболее очевидными примерами элементов уровня основ. Кнопки, флажки, ссылки – это пример дизайнерских элементов, которые можно найти на этом уровне. Так же, как и аналогичный уровень в стандартном атомарном дизайне, основы содержат наименьшие элементы пользовательского интерфейса. Разбить их на еще какие-то части невозможно. Уровень основ практически полностью идентичен уровню атомов, за исключением того факта, что мы решили исключить отсюда описание теоретического устройства системы и сдвинули его на уровень ниже, который получил название «Уровень принципов».

 

Принципы

 

Уровень Принципов

 

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

 

На практике

 

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

 

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

 

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

 

Перевод: Вячеслав Гладков

 

Оригинал фото: medium