и вайрфрейме виден достаточно четко, – там понятно, что должно вести себя как настоящий элемент продукта, а что играет роль заглушки, то в ситуации с детально проработанными прототипами люди не всегда понимают грани условности и начинают показывать сложное поведение, например, пытаться занести информацию в поле ввода, или ожидают увидеть реальные данные в приложении.
Последнее – очень распространенная проблема при тестировании прототипов. Для пользователя номер его телефона в адресной книге, ФИО родственника в списке транзакций служат сильными триггерами, за которыми он двигается в своем путешествии. Когда я вижу в адресной книге «Константин Константинопольский», я не могу в одночасье идентифицировать себя с этим персонажем. Для таких случаев уже используют программируемые прототипы, куда подгружаются данные о пользователях.
Также программируемые прототипы позволяют генерировать уникальное поведение, которое сложно создавать посредством WYSIWYG-редакторов.[59]
Персонализированные и программируемые прототипы
Характерные черты
Высокая детализация и низкая-средняя интерактивность
Программируемые прототипы могут быть такого высокого качества, что перестают отличаться от реального продукта. У этого артефакта практически нет изъянов, за исключением цены. Почему бы сразу не внедрить функцию и не протестировать ее на реальных пользователях?
Примеры программируемых прототипов, созданных при помощи Framer. Слева пример подгрузки транзакций пользователя, справа – подгруженной адресной книги
Дизайн-системы
Если в разработке продукта участвует более чем одна команда разработчиков (актуально для банковских приложений, крупных интернет-магазинов, приложений такси, доставки), возникает необходимость в унификации общих элементов и процессов для дальнейшего переиспользования.
Дизайн-система – это общедоступное хранилище артефактов и стандартов их использования, созданное с целью оптимизации дизайн-процесса.
Дизайн-системы появляются вместе с продуктом и развиваются параллельно с ним, постепенно принося пользу все большему количеству участников.
На старте хранилище может представлять собой один файл, лежащий в облаке и доступный всем участникам, а затем превратиться в специфичную библиотеку, организованную при помощи инструментов 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] и добавляют жизни рутинным операциям.
