Если в разработке продукта участвует более чем одна команда разработчиков (актуально для банковских приложений, крупных интернет-магазинов, приложений такси, доставки), возникает необходимость в унификации общих элементов и процессов для дальнейшего переиспользования.
Дизайн-система – это общедоступное хранилище артефактов и стандартов их использования, созданное с целью оптимизации дизайн-процесса.
Дизайн-системы появляются вместе с продуктом и развиваются параллельно с ним, постепенно принося пользу все большему количеству участников.
На старте хранилище может представлять собой один файл, лежащий в облаке и доступный всем участникам, а затем превратиться в специфичную библиотеку, организованную при помощи инструментов Figma Community или UXPin Design System Tool.
На следующем этапе развития в библиотеку, помимо руководства по оформлению, входят образцы кода и компоненты для разработчиков, для этого часто используются инструменты типа Storybook. Через некоторое время дизайн-система может стать публичной, доступной для внешних подрядчиков по дизайну и разработке, а также для участников хакатонов.[60]
Очень часто дизайн-системы начинаются с общего файла UI kit с набором элементов интерфейса и разрастаются, встраиваясь в продукт на всех этапах производства, от первичного проектирования до разработки текущего оформления и управления им.
Одна из ранних версий UI kit, который использовали несколько команд для нескольких продуктов «Ак Барс Банка»
Постепенно простейшие элементы дизайн-систем могут объединяться в группы, которые, в свою очередь, тоже становятся элементами дизайн-систем. Это похоже на эволюционный процесс: атомы объединяются в молекулы, молекулы однажды превратились в одноклеточные организмы, а те – в многоклеточные и т. д.
Веб-дизайнер Брэд Фрост популяризировал аналогию эволюционного усложнения – подход Atomic Design{7} для организации дизайн-процесса
Так атом «кнопка» может объединиться с атомом «поле ввода», чтобы стать элементом «поисковая строка».
Атомы и составленная из них молекула дизайн-системы
С древнегреческого «атом» означает «неделимый», но современные ученые опровергли представления древних греков о мире, «раздробив» атом на элементарные частицы.
Так и создатели дизайн-систем пришли к выводу, что необходимо выделить составляющие элементов интерфейса – дизайн-токены (Design Tokens).
Кнопка, кажущаяся в примере выше «неделимым атомом», может быть разложена на составные части, определяющие ее стиль, такие как отступы между краями и текстом, цвет, внешние отступы, размер шрифта и т. д.
Дизайн-токены компании Salesforce – базовые элементы дизайн-системы
Несмотря на то что токены – самые базовые элементы, создание дизайн-системы не всегда стоит начинать с их разработки. Дизайн-система – продукт для внутреннего использования, и тут работают те же принципы, что относятся к дизайну продукта, то есть сначала разрабатывается то, что дает максимальный эффект.
Подробнее о дизайн-системах можно узнать в интеграторе Adele{8} от UX-Pin – это самое большое собрание дизайн-систем.
Существует множество дизайн-систем, и их состав элементов может значительно варьироваться. Ниже перечислим основополагающие элементы.
UI kit
UI kit – это набор элементов и компонентов (состоящих из нескольких элементов) пользовательского интерфейса.
Раздел компонентов «Альфа-Банка»
Начинающим я рекомендую не изобретать велосипед, а создавать UI kit на основе уже существующих наборов, обратившись, например, к Pinterest.
Модульные сетки
Современные цифровые продукты создаются, как правило, сразу под несколько экранных разрешений.
Соответственно, очень важно для всех элементов выработать правила поведения при адаптации к разным размерам.
При разных шагах адаптивности для каждого элемента выделяются разные доли экрана (модули).
Модульная сетка определяет принцип выравнивания элементов, горизонтальные и вертикальные отступы и поведение при адаптации под разные экранные разрешения.
Paradigm – дизайн-система Mail.ru Group, раздел с модульными сетками
Для старта советую обратить внимание на уже обкатанные дизайн-системы вроде Bootstrap или Google Material Design и строить модульную систему на их основе.
Bootstrap grid – проверенная временем «резиновая», адаптивная модульная сетка
Их модульные сетки и используемые в них принципы адаптивности прошли проверку на огромном количестве экранов, и их внедрение несет минимальный риск с точки зрения качества пользовательского опыта и количества потенциальных проблем, связанных с масштабированием.
Типографика
За свою жизнь я встречал только один интерфейс совсем без текста – это был сайт, посвященный аудионавигации. На нынешнем этапе своего развития интерфейсы тесно связаны с текстом, поэтому шрифтовые композиции, то есть типографика, играют важную роль.
Раздел с типографикой дизайн-системы iOS, помимо самих правил построения, содержит подраздел для разработчиков, где описывается правильная организация кода
Шрифтовые сочетания, контраст размеров, отступы, межстрочные расстояния, а также поведение шрифта на разных устройствах и в контексте для слабовидящих – краеугольный камень дизайн-систем.
Для быстрого погружения в основы типографики рекомендую книгу «Основы стиля в типографике» Роберта Брингхерста[61]. Лучше читайте бумажную версию на английском языке, в обложке, как на иллюстрации ниже. Это издание сверстано по всем описанным внутри правилам, что добавляет ему ценности.
The Elements of Typographic Style
Для тренировки визуального восприятия с точки зрения актуальной эстетики рекомендую начать с агрегаторов типа siteinspire.com.
Пример агрегатора сайтов с качественной типографикой, к которому обращаются дизайнеры для поиска вдохновения и анализа актуальных трендов в типографике
Пиктограммы
Библиотеки готовых пиктограмм стремительно множатся, и создать уникальный по стилю набор становится очень сложно. Уникальные наборы разрабатываются, как правило, для продуктов с большим MAU (Monthly Active Users, количество активных пользователей в месяц).
Если вы все же решили создать собственный набор и не знаете, с чего начать, настоятельно рекомендую изучить большие библиотеки, например:
• https://materialdesignicons.com/
• https://thenounproject.com/
• https://www.flaticon.com/
• https://www.iconfinder.com/
и адаптировать уже существующие визуальные метафоры, которыми востребованные авторы передают смысл в пиктограмме, под новый уникальный стиль.
Пиктограммы Tilda – часть открытой дизайн-системы, на основе которой любой желающий может создать собственный адаптивный сайт, используя не только готовые «атомы» и «молекулы», но даже целые «организмы» и «шаблоны»
Иллюстрации
В мире, где интерфейсы стремительно унифицируются, ничто так не придает характер продукту, как интерфейсные иллюстрации. Иллюстрации создают первое впечатление на посадочных страницах продукта, украшают пустые страницы tabula rasa[62] и добавляют жизни рутинным операциям.
Tabula Rasa – страница отображения списка, в котором ноль элементов. Пример эмоциональных иллюстраций для состояния tabula rasa в «Ак Барс Онлайн».
Иллюстрации – фактор, очень сильно влияющий на опыт. Для их создания нужен профессионализм рисовальщика и натренированный глаз. Так что быстрых способов улучшить опыт, используя иллюстрации, скорее всего, нет. Это практическое ремесло.
В дизайн-системе Atlassian (известный производитель цифровых продуктов для автоматизации разработки) описана роль иллюстраций и цель их применения
Чтобы получить актуальные навыки, я рекомендую пройти курсы создания иллюстраций. Их существует огромное множество, офлайн и онлайн, разной продолжительности, на русском и на английском. Вы без труда найдете то, что подойдет вам.
Если вы или член вашей команды имеете художественное образование, знаете теорию композиции, владеете техникой светотени и т. д., для быстрого погружения в визуальную культуру можно прибегнуть к агрегаторам, например Pinterest, введя запрос «interface illustrations».
Анимация элементов
В дизайн-системе Google Material Design раздел, посвященный движению, можно назвать, помимо прочего, потрясающей поэмой об анимации интерфейсов. Своим студентам я рекомендую начинать развиваться в этом направлении как раз с него.
Раздел Easing («Замедление») в дизайн-системе Google Material Design содержит прекрасный дидактический материал. В жизни мы практически не сталкиваемся с равномерным движением; объекты материального мира, имеющие инерцию, ускоряющиеся в начале пути и замедляющиеся в конце, преодолевающие силы притяжения, гораздо комфортнее для восприятия
• Анимация – эффективный инструмент управления точкой фокуса. Мы можем привлечь внимание пользователя при помощи движущегося объекта.
• Анимация помогает ориентироваться в маршруте следования. Благодаря анимации мы понимаем, что вошли внутрь элемента списка, гораздо лучше, чем при резком переходе в формате обычной склейки.
• Анимация придает характер и вызывает восторг. Поведение элементов отражает особые моменты в путешествии пользователя и «оживляет» бренд.
Код
Современная дизайн-система – это уже нечто больше, чем просто руководство по оформлению интерфейсов. Это инфраструктура, направленная на повышение эффективности не только дизайн-процесса, но и всего производства. Недаром в последнее время набирает популярность термин DesignOps.
DesignOps (калька с DevOps) – совокупность инженерных практик и инструментов, призванных оптимизировать процессы производства программного обеспечения.
Практики DesignOps направлены на сокращение перечисленных ниже издержек, которые так хорошо были сформулированы в концепции бережливого производства.
• Потери из-за перепроизводства – вид потерь в разработке ПО, связанный с производством избыточных артефактов. Есть французская пословица – натирайте пармезан перед обедом. Каждый лишний макет, интеллектуальная карта или вайрфрейм, который не был «утилизирован» в релизе, представляет собой законсервированные затраты рабочего времени. Ретроспективно оценив суммарные затраты на артефакты, которые были произведены, но до сих пор не пригодились, можно представить, сколько времени освободилось бы для правильных дел.
• Потери времени из-за ожидания – в производственном процессе образуются «бутылочные горлышки», часто связанные с избыточными согласованиями артефактов. Некоторые люди боятся брать на себя ответственность за результат и запускают «механизм комитета», что отдаляет время поставки и отвлекает участников от работы.
• Потери при ненужной транспортировке – это касается широковещательной рассылки по почте. Помимо засорения папки с входящими письмами, они просто отвлекают участников.
• Потери из-за лишних этапов обработки – во многих компаниях многочисленные экспертные сферы объединяют в одном человеке, чтобы устранить эффект микроводопада. В частности, должности UX- и UI-дизайнера сливаются в одну – Product Designer. В результате прекращается игра в пинг-понг артефактами между этими ролями.
• Потери из-за лишних запасов – для большого склада неизбежно потребуется внутренняя система учета и навигации. Чем «старше» артефакт, тем сложнее его найти, в частности поэтому иногда команды делают выбор в пользу коротких итераций, они позволяют не «захламлять» склады артефактов.
• Потери из-за выпуска дефектной продукции – в производстве цифровых продуктов это потери, связанные со складированием, логистикой и утилизацией записей bug issues, описаний багов в системах отслеживания багов.
Современные дизайн-системы глубоко интегрированы в производственный процесс и включают в себя не только описания стилей или анимации в формате CSS[63], но и непосредственно код интерфейсных компонентов.
Дизайн-система Audi содержит не только описание анимации эффекта от нажатия на кнопку, но и код – пример использования этого объекта
На высокой стадии организации дизайн-систем вводится фаза разработки и внедрения инструментов для автоматизации процесса дизайна и программирования.
В своей лондонской штаб-квартире дизайн-команда Badoo показала инструменты для автоматизации конвейера между дизайнерами и разработчиками. Плагин для Sketch позволяет выбирать готовые компоненты из коллекции и кастомизировать их. Соответствующие элементы уже реализованы в коде и могут быть бесшовно интегрированы разработчиками