10 основных компонентов системы проектирования

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

Однако создание этих элементов интерфейса — не случайный процесс. Команда, ответственная за разработку дизайн-системы, должна предварительно создать фундамент для этих компонентов, включая основополагающие принципы дизайна и руководящие указания, которые помогают различным группам разработчиков формировать согласованную и гармоничную компонентную библиотеку. Узнать цену юзабилити-аудита сайта и заказать исследование вы можете в сервисе AskUsers.

Что такое компоненты системы дизайна?

Элементы интерфейса пользователя служат краеугольным камнем для любой системы проектирования. Front-end разработчики используют эти компоненты кода для создания пользовательских интерфейсов и цифровых продуктов.

Элементы интерфейса обладают двойственной природой:

• Они представляют собой аспект визуального проектирования;
• Они включают в себя часть кода, обеспечивающую стилизацию и интерактивность компонента.

Большинство дизайн-систем предлагают два типа таких библиотек для работы с интерфейсом:

• Визуальный набор элементов интерфейса или стилевое руководство, предназначенное для дизайнеров;
• Библиотека компонентов кода (компонентов пользовательского интерфейса) для разработчиков.

Понимание свойств компонента пользовательского интерфейса

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

Поскольку многие системы дизайна используют React, давайте рассмотрим его в качестве примера для понимания работы свойств элементов.

В React мы называем свойства «реквизитами». Реквизит содержит стиль, интерактивность и контент. Для иллюстрации приведем пример реквизитов React на основе кнопки из библиотеки MUI.

• Реквизит children определяет содержимое кнопки, обычно это надпись типа "Купить сейчас" или "Отправить".
• Реквизит color определяет цвет кнопки. Каждый тип («наследовать», «первичный», «вторичный» и т. д.) представляет цвет из темы системы дизайна. Инженеры определяют их с помощью токенов дизайна или переменных в файле CSS библиотеки.
• Отключенная опора — это логическое значение (логическое значение), которое имеет значение true или false. Инженеры могут использовать этот реквизит, чтобы сделать кнопку отключенной до тех пор, пока пользователь не выполнит задачу или действие, например заполнит все обязательные поля в форме.

Как видно из этих трех примеров, свойства компонента могут определять многие характеристики, функциональность и содержимое.

Библиотека компонентов против библиотеки шаблонов

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

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

Структура компонентов пользовательского интерфейса и атомарный дизайн

Компоненты пользовательского интерфейса и шаблоны проектирования состоят из множества более мелких элементов пользовательского интерфейса. «Атомный дизайн» Брэда Фроста — лучший способ объяснить эту структуру и то, как эти более мелкие части объединяются, образуя компоненты, которые мы видим и с которыми взаимодействуем.

Атомы

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

• Ярлыки
• Поля ввода
• Кнопки
• Цветовые палитры
• Шрифты
• Иконки
• Анимации
• Дизайнерские маркеры

Молекулы

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

Организмы

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

10 основных компонентов системы проектирования

Данный перечень элементов дизайн-системы не претендует на полноту. Мы отобрали эти десять элементов как пример, чтобы показать, как они могут быть использованы и как они вписываются в экосистему системы проектирования.

Кнопки

Элементы управления, такие как кнопки, являются ключевыми в любой дизайн-системе. Они дают возможность пользователю взаимодействовать с интерфейсом: отправлять данные форм, переходить на другие страницы или добавлять продукты в корзину покупок.

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

Текстовый ввод

Текстовые поля представляют собой широко используемый элемент в дизайнерских системах. Они дают возможность пользователю вносить текстовую и числовую информацию (как, например, личные данные) и осуществлять поиск. Как правило, у текстовых полей выделяют три основные характеристики.

• Ярлык
• Вспомогательный текст (для доступности)
• Заполнитель

Дизайнеры также используют префиксы и суффиксы, чтобы сделать ввод более очевидным. Например, символ $ в качестве префикса для долларов США или фунты/кг в качестве суффикса для веса. В обоих этих примерах пользователи знают, что нужно указывать цифры, а не буквы.

Чекбоксы и радиокнопки

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

Тумблеры (переключатели)

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

Выпадающие списки

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

Карты

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

Диалоговые окна

Диалоги — это модальные окна, которые создают моменты трения для подтверждения критических или необратимых действий, таких как удаление чего-либо. Внешний вид этих интерактивных окон может отличаться в зависимости от операционной системы или платформы, будь то iOS, Android, веб-интерфейс, Windows и другие, что вынуждает разработчиков интерфейсов адаптировать их под каждую из них отдельно.

Индикаторы выполнения

Индикаторы выполнения — это жизненно важные компоненты обратной связи, которые дизайнеры используют для информирования пользователей о ходе выполнения многоэтапной задачи. Эта обратная связь помогает управлять ожиданиями пользователей и ограничивать разочарование, например, «сколько времени это займет!»

Подсказки

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

Для сложных корпоративных систем с разветвленными интерфейсами всплывающие окна с подсказками становятся особенно важными. Они позволяют осветить функционал без необходимости отвлекать пользователя от работы с интерфейсом и искать ответы в сопроводительной документации к продукту.

Оповещения и cнэкбары

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

Примеры компонентов системы проектирования

Вот лучшие примеры ведущих систем проектирования и их библиотек компонентов:

• Shopify Polaris
• Salesforce Lightning
• Atlassian Design System
• Google’s Material Design
• Система IBM Carbon Design
• Система Microsoft Fluent Design

Переход Johnson & Johnson к прототипированию на основе компонентов

Команды дизайнеров Johnson & Johnson (J&J) использовали наборы пользовательского интерфейса на основе изображений с отдельными руководствами по стилю в формате PDF и печати. Основное затруднение заключалась в том, что...

«…вы никогда не сможете узнать, обновили ли вы все из них в соответствии с текущими стандартами предприятия. Вы можете проводить сколько угодно совещаний, но устаревшее руководство по стилю так и будет лежать в ящике чьего-то стола, ожидая, что через год или два оно усложнит вам жизнь». Бен Шектман, руководитель экспертной службы по дизайну опыта в Johnson & Johnson.

J&J применяет Storybook для координации разработки своей дизайн-системы и UXPin Merge для работы дизайнеров. Слияние этих инструментов дает возможность синхронизировать обе платформы, благодаря чему дизайнеры и разработчики пользуются единой UI-библиотекой из одного источника.

«Эти компоненты сохраняют всю интерактивность и при этом готовы к производству, что избавляет от множества проблем, связанных с передачей данных. Это ускоряет создание цифровых продуктов, как процесс проектирования, так и процесс разработки». Бен Шектман, руководитель экспертной службы по дизайну опыта в Johnson & Johnson.