Комплексная дизайн-система

UI-методологии вроде Atomic Design привносят логику и структуру в отдельные экраны. Пришло время распространить аналогичный подход на все аспекты вашего продукта.

Вот небольшая загадка. Почему — почти как похмелье и попса — продукты с годами становятся все хуже?
Вы подумаете — должно быть наоборот: крутая команда потратила годы на многочисленные итерации, что в конечном счете должно привести к некоему безупречно совершенному продукту. А вместо этого десять лет спустя вы вдруг не можете разблокировать телефон. Какого черта?
Длинный, да и болезненный ответ — плохая дисциплина. Продукты развиваются долго. Присоединяется больше новых людей, некоторые старички-инициаторы уходят, и — ясность дизайнерского видения ухудшается. Бизнес решает, что нужно захватывать новые рынки, и новые функции и фичи прикрепляют одну за другой, как рождественские украшения. Внутреннее взаимодействие команды усложняется, а подгруппы разрабатывают свои собственные концепции дизайна и философию. Команду атакуют бесконечные запросы от неоднородной аудитории. Конкурентов же нужно держать в страхе, добавляя еще больше всяких штучек. Сущности множатся. Вскоре чувствуешь, что небезопасно заходить на некоторые экраны после наступления темноты в одиночку. Хорошие продукты ухудшаются. И это случается с лучшими из нас.
Ответ покороче — большинство продуктовых команд не придерживается четкой дизайн-системы, которая объединяет и направляет все аспекты пользовательского опыта, начиная с концептуальных строительных блоков продукта и заканчивая мельчайшими деталями пользовательского интерфейса и тем, как называются элементы.
Поэтому, если вы страдаете от достойной проблемы — желания создать успешный, развивающийся продукт, здесь описано, как восприятие всех аспектов вашего дизайна в качестве единой системы, может спасти вас от тенденции постепенного ухудшения.

150500 слов, чтобы объяснить

Учитывая, что это интернет, и вы, возможно, хотите посмотреть смешные ролики с животными, я буду краток:

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

ПО со структурной целостностью

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

Краткая история дизайн-систем

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

Ограничения библиотеки паттернов

Возможно, это не новость для вас. Возможно, кто-то в вашей команде уже поддерживает небольшую библиотеку шаблонов и паттернов. (Если вы не уверены, кто именно, просто найдите человека, который не может избежать постоянных аналогий с Lego)

От Atomic Design к комплексным дизайн-системам

Этот подход мало чем отличается от подхода Atomic Design, который я упоминал ранее. Atomic Design предложит вам взять некоторые из ваших основных элементов (ярлык, ввод, кнопку), склеить их и назвать молекулой. Затем вы можете использовать эту молекулу снова и снова. Кроме того, вы можете склеить молекулы вместе, чтобы сформировать целый организм.

  • Общий язык, который все в вашей команде используют для названия компонентов продукта. Помните, слова важны. Если дизайнеры, инженеры и люди из службы поддержки используют одни и те же слова, то организационная туманность рассеивается.
  • Общие ресурсы для проектирования и дизайна позволяют быстро создавать макеты, которые точно отражают нашу дизайн-систему. Зачастую это один файл в Sketch, к которому у всех есть доступ. Файл содержит Символ каждого объекта и часто несколько вариантов отображения одного и того же объекта в разных размерах или в разных контекстах.
  • Общие компоненты кода, которые позволяют инженерам создавать все элементы и их вариации часто лишь одной строкой кода. Соответствие объектов в Sketch и в нашей кодовой базе должно быть 1: 1.
  • Airbnb: список, хозяин, гость, поездка, опыт.
  • Slack: команда, участник, канал, сообщение, реакция, поток.
  • Intercom: клиент, коллега, сообщение, беседа, статья.

Пример из реальной жизни

Чтобы проиллюстрировать мысль, давайте посмотрим, как мы используем объект “Диалог” в создании Intercom.

Почему это работает для Intercom

Эта идея занимает центральное место в успехе дизайна Intercom. Мы все еще довольно небольшая компания, но создаем целый ряд продуктов, которые используются разными способами и имеют огромный потенциал. Мы могли бы легко свалиться в «Яму Сложности». Тем не менее, мы стремимся плыть против течения и создавать простые и элегантные решения для наших продуктов, несмотря на всю сложность и множественность функций.

Система работает

Так как предотвратить усложнение вашего продукта с течением времени? Подумайте о том, что вы проектируете, не как о серии экранов, а как о системе объектов, а затем реализуете эти объекты на всех уровнях: концепция, дизайн, реализация, маркетинг, поддержка.
Я буду честен: я не уверен, будет ли это работать на 100%. Я пробовал, и честно говоря, я не могу представить продукт, обладающий функциональной гибкостью и мощностью, но при этом до элегантности простой. Ваши предложения приветствуются! Возможно, так не получится, и «Яма Сложности» ждет нас всех. Но эта не та мысль, которой следует заканчивать пост в блоге.

Идеи, которые нас вдохновляют, видео-интервью и переводы исследований, которые были нам полезны в процессе работы. http://blog.aic.ru/

Идеи, которые нас вдохновляют, видео-интервью и переводы исследований, которые были нам полезны в процессе работы. http://blog.aic.ru/