Дизайнер продукта Г.
?.
Джефф Кроссман сказал в своем блоге на Medium о том, как компания создала новую систему дизайна, основанную на концепции «атомарного дизайна», какие уровни были добавлены и исключены и почему.
Редакция рубрики «Интерфейсы» публикует переводы материала.
завершенный Команда Скетчаппа.
Наша первая дизайн-система, разработанная в 2012 году, была очень похожа на современные.
Система была разработана для поддержки широкой аудитории GE и имела большой выбор общих шаблонов (я буду использовать этот термин как для элементов интерфейса, так и для элементов взаимодействия с пользователем), сгруппированных по функциям, которые они выполняют. Это было сделано для того, чтобы команда из 10 дизайнеров работала с 40 тысячами разработчиков со всего мира над созданием соответствующего программного обеспечения.
Он не мог обрабатывать более сложные модели, такие как визуализация и отображение данных.
Необходимость постоянного улучшения и расширения шаблонов проектирования мешала достижению общей цели системы, что приводило к несогласованности и напрасной трате усилий.
Кроме того, система дизайна имела набор частей, открытых для экспериментов.
Это породило множество вопросов и требований к дополнительному направлению проектирования.
Система оказалась неуправляемой и требовала более рационального подхода.
Система не должна быть просто хранилищем компонентов пользовательского интерфейса и теории.
Он должен ясно показывать, как шаблоны работают с конкретными продуктами, и сообщать, как другие команды расширили возможности шаблона для использования в конкретных средах.
Начало работы с атомарным дизайном
По определению Брэда Фроста, техника «атомарного дизайна» относится к методу иерархического формирования шаблонов.На самом базовом уровне находятся атомы — простые шаблоны, такие как текстовые поля, кнопки или значки.
А, например, форма поля электронной почты представляет собой набор текстовых полей, значков и кнопок и представляет собой более сложный шаблон — «молекулу».
Каждый последующий элемент иерархической структуры представляет собой совокупность более мелких (простых) элементов более низкого порядка.
Это дает двойную выгоду.
Во-первых, когда дизайнер описывает форму полей письма, ему не нужно заново описывать особенности кнопок и текстовых полей.
Во-вторых, форма электронной почты позволяет рассмотреть их практическое применение.
Атомарный дизайн облегчает изучение шаблонов в системе дизайна и упрощает их создание.
Атомный дизайн в GE
Predix Design System — это первая платформа, использующая структуру системы дизайна, предназначенную не только для одного продукта.Например, GE Healthcare использует аналогичную структуру для создания своей системы проектирования для внутреннего использования.
Мы не подвергали сомнению работу Брэда Фроста в этой области, а просто применили ее к нашей компании.
Мы хотели использовать лучшие практики, найденные в повествовательных документах и видеороликах, и рассказать о преимуществах этой системы нашим коллегам.
В процессе работы с «атомарным дизайном» мы столкнулись с двумя проблемами: систематичность и масштабируемость для нашего конкретного случая.
Выводы мы сделали не из интуиции наших дизайнеров, а из практики и результата многих итераций.
Проблемы с таксономией «атомарного дизайна»
Система, использующая «атомарный дизайн», привела наших коллег в замешательство.Они не понимали, почему веб-сайт, содержащий информацию о программном обеспечении для дизайна, изобилует терминами из химии, которые они в последний раз слышали в школе.
Эта метафора не вдохновила и не вдохновила наших пользователей.
Мы поняли, что систематику сложно передать и описать, и систему необходимо сделать более понятной.
Отказ от канонического понимания «атомарного дизайна» стал для нас большим шагом вперед. Конечно, мы потеряли обучающие материалы на основе этих формулировок, но это позволило построить все уровни структуры по нашим требованиям.
Мы ожидали, что это будет огромная система дизайна, охватывающая множество продуктов.
Масштабируемость концепции «атомарного дизайна»
Создание иерархии
Брэд Фрост открыл «атомный дизайн», который начинается на уровне «атомов».В то же время он описал, как «атомы» объединяются, образуя «молекулы».
Он начал с абстрактных вещей, а закончил максимально конкретным — создал полноценную веб-страницу.
Генератор веб-сайта Pattern Lab придерживается той же последовательности описания процесса.
Введя таким образом «атомарный дизайн», вы сможете легче научить людей процессу создания больших элементов из маленьких.
Однако мы поняли, что это не всегда так.
Важным моментом в нашей дизайн-системе является возможность обучения.
Мы хотим, чтобы дизайнеры обращались к системе не только для того, чтобы узнать о доступных шаблонах, но и научиться правильно и целесообразно их использовать.
Для этого дизайнеру нужна среда, в которой находится пользователь.
Тогда он поймет, какая задача перед ним стоит и как помочь пользователю решить ее с помощью наших шаблонов.
Такая среда существует только на самых конкретных уровнях «атомарного дизайна», где есть готовое описание полностью сформированных страниц и приложений.
Именно на этих уровнях мы приглашаем дизайнеров применить систему на практике.
Расширение системы
Мы добавили в иерархию еще два уровня: приложения и основы.Приложениям требуется информация о том, как и почему страница структурирована таким образом.
Основы были добавлены на уровне ниже атомов, чтобы обобщить шаблоны взаимодействия с пользователем.
Они помогают понять, как и зачем использовать анимированные элементы вместо текста.
Эти фундаментальные шаблоны должны использоваться дизайнерами при создании новых шаблонов.
Оба эти элемента будут подробно описаны ниже.
Структура новой дизайн-системы
Приложения
Уровень приложения является основным в дизайн-системе.Здесь мы описываем приложения и продукты, созданные с помощью нашей системы.
Можно сказать, что они жестко закреплены в иерархии системы.
Каждое приложение содержит необходимую среду, в которой становится понятно, что делает приложение, с какими проблемами оно сталкивается и как оно отражает потребности пользователя.
Приложения представляют собой уникальную коллекцию таких предметов.
Предметы
«Предметы» — это элементы интерфейса, которые помогают пользователю решить проблему.Это набор функций, которые ценны для пользователя, и они не обязательно должны быть очень привлекательными.
Тема управления учетными записями и правами, возможно, никогда не попадет в заголовки газет, но она невероятно важна для корпоративных приложений.
Он также должен быть универсальным для использования в различных предложениях компании.
В некоторой степени «элементы» похожи на «страницы» в Atomic Design. Мы заменили страницы объектами, понимая, что единый интерфейс в коммерческой программе не позволит пользователю полностью решить задачу.
Сосредоточив внимание на «вещах», а не на «страницах», мы можем создать среду, которая прояснит, как и почему пользователь приложения пролистывает экраны для выполнения задачи.
Шаблоны
Понятие «шаблоны» знакомо как дизайнерам, так и программистам.В Atomic Design «шаблоны» определяют внешний вид всей страницы.
Для нашей системы мы немного расширили это понятие, чтобы убрать необходимость использования уровня «организмы».
Исключение организмов
Самым большим отклонением от традиционной системы «атомарного дизайна» является то, что мы устранили уровень «организма».Однако в то же время мы обнаружили, что именно такой подход к структуре упрощает понимание как для создателя, так и для потребителя.
Мы обнаружили, что различие между «паттернами», «организмами» и «молекулами» затрудняет понимание системы потребителями.
Дизайнерам и разработчикам эти слова показались бессмысленными, ведь уже есть готовые шаблоны.
Простейшие элементы, такие как кнопки и текстовые блоки, определяются как «атомы».
Но более сложные элементы, такие как диаграммы временных интервалов, являются спорными и требуют детального рассмотрения.
При этом необходимо четкое понимание того, представлял ли тот или иной узор сочетание «атомов» и «молекул» или нет. Мы решили, что будет проще удалить слой «организмы» и разделить его содержимое на два соседних слоя.
Элементы, имеющие четкую структуру (шапка, подвал), стали уровнем «шаблона», а элементы со сложным взаимодействием с пользователем (визуализация данных) остались на уровне «молекулы» (хотя сами могут состоять из «молекул»).
Компоненты
Мы называем компонентом то, что в «атомном дизайне» называется «молекулами».Компоненты — более сложная часть интерфейса.
Это, например, шаблоны полей поиска, таблиц данных и диапазонов данных.
Компонент — самый популярный термин для большинства систем проектирования.
Забегая вперед, мы понимаем, что этот уровень будет чаще всего использоваться как дизайнерами, так и разработчиками.
Поэтому мы выбрали наиболее знакомый термин для обеих групп.
Основы
Основы, известные в атомном дизайне как «атомы», содержат паттерны низшего порядка, простейшие элементы.Здесь вы можете найти кнопки, флажки и ссылки.
Как и в «атомарном дизайне», «фундаменты» — это элементы структуры низшего порядка.
Их нельзя разделить на более мелкие части.
Они почти идентичны уровню «атомов», за исключением того, что мы решили исключить более теоретические элементы и поместить их в «принципы».
Принципы
Это элементы, которые дизайнер использует для создания шаблонов.Принципы — это базовый уровень системы проектирования, которая работает в соответствии с предсказуемой логикой.
Примером может служить прокрутка страницы или процесс выделения текста.
Принципы обеспечивают время выполнения процесса, но не являются примером кода.
Упражняться
Система дизайна Predix содержит созданные шаблоны и описание их использования.Работа множества команд позволила нам выстроить четкую и понятную иерархию дизайн-системы.
Команда разработчиков платформы обнаружила в системе фундаментальные элементы «принципов», «основ», «компонентов» и «паттернов».
Команда продукта создала шаблоны дизайна для наиболее востребованных уровней дизайн-системы.
Разработка шаблонов с участием разных команд помогла не только заполнить структуру, но и показать, как достичь общей цели, разделив обязанности и работая вместе.
Теперь на основе шаблонов, которые использовались в наших продуктах, мы с удовольствием демонстрируем готовую работу другим.
Основываясь на отзывах, полученных за несколько месяцев с момента запуска, команда Predix готова разработать и поделиться новыми шаблонами дизайна.
-
Охотники На Волков С Уолл-Стрит. Часть 3
19 Oct, 24 -
Твиттер Подвергает Цензуре Некоторые Страны
19 Oct, 24 -
Расширение Opera: Вконтакте Информер
19 Oct, 24 -
Google Earth Оскорбляет Израиль
19 Oct, 24 -
Пара Мыслей По Поводу Компоновки...
19 Oct, 24
