UX/UI дизайн для создания идеального продукта. Полный и исчерпывающий гид - Ярослав Александрович Шуваев

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

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

Также программируемые прототипы позволяют генерировать уникальное поведение, которое сложно создавать посредством 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] и добавляют жизни рутинным операциям.