Что такое UI-kit

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

В каждой команде есть UX/UI-дизайнер. Все они проводили исследования и делали дизайн-концепции. И отдельные разделы вроде выглядят хорошо. Однако с продуктом всё равно что-то не так.

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

Вопрос: хорошо ли для бизнеса, если его продукт вызывает такие чувства? Привлекает ли это пользователей или, наоборот, отталкивает?

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

<<event-designconcept>>

Что такое UI-kit

UI-kit (user interface kit) — набор готовых элементов для создания интерфейсов. Он включает кнопки, формы, иконки, карточки, шрифты, цвета и другие элементы, которые используются в продукте.

Когда продукт собран по UI-киту, удобно обеим сторонам: и команде, которая работает над продуктом, и пользователю.

• Удобно продуктовой команде. У дизайнеров, разработчиков и тестировщиков есть готовый набор «кирпичиков», из которых они строят единообразные конструкции в продукте. Ничего не нужно изобретать с нуля, все нужные элементы уже есть в наборе, бери и делай. А когда в команду приходят новые люди, они быстро и легко начинают работать с продуктом, также используя UI-kit.
• Удобно пользователю. В UI-ките ограниченное количество элементов. Новые страницы собираются из элементов, которые есть в старых разделах. Благодаря этому страницы предсказуемы для пользователя: если в одном месте элемент имеет одно значение, значит, и в другом будет так же. Например, будут одинаково выглядеть карточки товаров или пользователей.

[example]

Обычно UI-kit выглядит как библиотека в Figma или Sketch, где собраны десятки готовых компонентов для лендинга, сайта или приложения в самых разных состояниях. Когда дизайнеру нужно собрать макет, он копирует нужные компоненты из файла и вставляет в своё рабочее пространство. В крупных проектах компоненты подтягиваются через панель Assets из глобальной библиотеки.

[/example]

Наш UI-kit небольшой. Однако сложным продуктам, например сервисам вроде «Госуслуг» и мобильным приложениям, нужны более детальные UI-киты. Так, Browk UI KIT из Figma Community включает очень много элементов:

Таких страниц в документе много — для всех элементов, которые используются в продукте.

Для чего нужен UI-kit

UI-kit позволяет решить несколько важных задач.

Поддерживает единый стиль интерфейса. Если пролистать сайт WANNABE, обращая внимания только на один элемент, например на кнопку «Записаться», вы увидите, что у неё везде один и тот же цвет и шрифт. При наведении она тоже ведёт себя одинаково.

То же самое с цветами, заголовками, отступами. Благодаря UI-киту все они выглядят одинаково, какую бы страницу вы ни открыли. 

[card]

Единообразный дизайн важен для пользователей

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

На стене висит зелёный указатель: кабинеты 101–113 — налево, 113–124 — направо. Схема нумерации понятна: вероятно, кабинет 202 на втором этаже. Человек поднимается и глазами ищет такой же указатель, но его нет. А коридоры расположены не так, как на первом этаже. 

По логике указателя с первого этажа кабинеты 201–213 расположены по левому коридору. Человек идёт туда, но видит кабинет 138. Кажется, здесь всё устроено по-другому. Наконец на глаза попадает лист А4, который висит на стене. На нём написано от руки: «Слева расположены кабинеты от 125 до 138. Справа — от 139 до 159. Прямо — от 160 до 162».

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

[/card]

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

Есть целые экосистемы продуктов. Взять, к примеру, приложение «Т-Банка». У него десяток сервисов и сотни дизайнеров, которые работают над ними. Все эти дизайнеры разные, со своим представлением о прекрасном. Без UI-кита они делали бы части продукта по-своему. Вот почему это было бы плохо для бизнеса:

1. Пользователям было бы сложно ориентироваться в разнородном дизайне. Из-за этого они часто не выполняли бы целевые действия, например не могли открыть вклад в «Т-Банке» или торговать ценными бумагами в «Т-Инвестициях». Из-за этого бизнес терял бы деньги.
2. Командам приходилось бы долго договариваться, как в итоге должен выглядеть конечный продукт. Из-за этого компания не могла бы быстро поставлять на рынок обновления продукта.
3. Разработчики тратили бы больше времени разработку каждого элемента. Это тоже делало бы каждое обновление на рынок дольше.

С UI-китом этих проблем нет. 

[example]

В компаниях уровня «Т-Банка» используют UI-киты, но одних их недостаточно для слаженной работы корпорации. В крупной компании обязательно есть полноценная дизайн-система — сборник правил и гайдлайнов по тому, как устроен дизайн в продукте, с кодом для каждого элемента. Про различия UI-кита и дизайн-системы расскажем чуть позже, в следующем разделе.

[/example]

Ускоряет создание дизайна и разработку. Допустим, продуктовая команда внедряет в приложение новый раздел. 

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

Например, как кнопка выглядит:

• в обычном состоянии;
• при наведении;
• при нажатии;
• если она загружается;
• если она недоступна. 

[card]

При такой кропотливой работе возможны два варианта:

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

2. Раздел получился непохожим на остальное приложение. Дизайнер успел в оговорённые сроки, но вопрос: насколько в этом разделе удобно ориентироваться пользователям?

[/card]

Когда дизайнер согласовал макеты в Figma и передал их разработчикам, те начали писать код. Каждая карточка, блок текста, меню, кнопка были новыми, поэтому для каждого элемента нужно было писать код с нуля — это тоже заняло много времени. Когда код был готов, дизайнер стал сверять, всё ли правильно реализовали разработчики. Если что-то оказалось не так, нужно было потратить время на правки и новые согласования.

Как видите, процесс долгий и непредсказуемый.

А теперь сравните — вот как внедрение нового раздела идёт с UI-китом:

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

2. Разработчики уже использовали элементы UI-кита в других частях приложения, поэтому у них есть код для этих элементов. Благодаря этому они не создают новый код, а используют уже написанный и проверенный. Плюс у дизайнера нет правок, связанных с состояниями компонентов.

С UI-китом работа над продуктом становится быстрее и качественнее. К этому результату стремится любая продуктовая команда, поэтому важно, чтобы UX/UI-дизайнер умел создавать UI-kit и использовать его.

‍Снижает вероятность ошибок. Давайте на примере кнопки. Если во всех разделах приложения кнопка «Отправить» использована одна и та же, она работает одинаково. Тестировщику нужно проверить её только один раз — во всех остальных местах она будет работать аналогично. Если бы команда каждый раз использовала разные элементы, то велика вероятность, что в какой-то момент разработчик бы ошибся — например, при сборке страницы поставил не ту ссылку. Тестировщик, скорее всего, нашёл бы эту ошибку, но на проверку абсолютно всех элементов он бы тратил намного больше времени.

[quote]

‍Дима Исаев

Арт-директор в WANNABE, Product Design Lead. Работал в «Яндекс Практикуме», «Авито», делал спецпроекты в Skyeng

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

Если человек ничего не завершил на таком уровне, чтобы сделать хотя бы UI-kit, то, на мой взгляд, доверять ему что-то крупнее лендинга стоит с опасением.

[/quote]

Отличия дизайн-системы от UI-kit

UI-kit и дизайн-система — это не одно и то же, хотя они тесно связаны. Можно сказать, что дизайн-система — это книга правил и стандартов, а UI-kit — набор шаблонов, которые нужно использовать по этим правилам. UI-kit — часть дизайн-системы.

Давайте сразу на примерах. 

‍Дизайн-система. Компания Google создала одну из самых популярных дизайн-систем — Material Design. Внутри неё есть множество гайдлайнов и материалов — от цветов и типографии до анимации и кода. Она нужна, чтобы дизайнеры могли изучить опыт корпорации и подсмотреть удачные решения.

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

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

В дизайн-системе могут быть и сами компоненты, но в Material Design они только для ознакомления: технически дизайнер не может скопировать их и использовать в макетах, так как вся дизайн-система располагается на сайте, а не в Figma.

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

Все элементы построены на компонентах в Figma. Если изменить компонент в родительском наборе, он автоматически поменяется во всех макетах, где он используется. 

Обобщим — вот основные различия между дизайн-системой и UI-китом.

Как используют UI-kit

Применение UI-кита зависит от задач, но чаще всего его используют в трёх сценариях:

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

О таком способе тестирования писали в статьях:

• Простые исследования: юзабилити-тестирование с прототипом
• Как и в каких ситуациях использовать UX-исследование с прототипом

Создание макетов. Если дизайнеру нужно сделать макет, он подбирает компоненты из UI-кита. Это здорово упрощает и ускоряет работу: не нужно рисовать заново, можно взять готовые элементы. Например, он добавляет поле ввода для регистрации, кнопку «Продолжить» и логотип компании.

Разработка. Разработчики используют UI-kit, чтобы сверстать дизайн быстрее. Например, если в UI-ките есть стили для кнопок, разработчик просто копирует их код. 

<<designery-otzyvy-video-valya-osokina>>

Что входит в UI-kit

Как правило, дизайнеры создают UI-kit по принципам атомарного дизайна. Атомарный дизайн подразумевает, что элементы делятся на пять уровней:

1. Атомы.
2. Молекулы.
3. Организмы.
4. Шаблоны.
5. Страницы.

Покажем на примере UI-кита от Microsoft: UI-kit Fluent 2 iOS.

Атомы — элементы, которые нельзя разбить на более мелкие части, например чекбоксы, кнопки, иконки. 

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

Организмы. Более сложные элементы, которые объединяют атомы и молекулы. Для маркетплейса одним из организмов может быть карточка товара в разделе поиска: есть фотография, название, рейтинг, цена, кнопка «Добавить в корзину».

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

[card]

Держите в голове главный принцип атомарного дизайна — вложенность

Концепция атомарного дизайна не строгая. Вам не обязательно досконально знать термины и использовать концепцию в UI-китах. Достаточно понимать главный принцип — что элементы в UI-ките словно растут друг из друга. 

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

Добавили ещё один пункт и заголовок — получился раздел настроек.

Добавили ещё, ещё, ещё элементов — готов шаблон для всего первого экрана основных настроек.

UI-kit, сделанный по такой системе, максимально удобно использовать в работе: дизайнеры и разработчики смогут брать не только отдельные кнопки и иконки, но и целые разделы и шаблоны экранов.

[/card]

Страницы. Чтобы в UI-ките было удобно ориентироваться, элементы делят между страницами по смыслу. Страницы — это Pages в Figma или Sketch. В основном делают так: на одной странице контент по одному типу элемента.

Что ещё есть в UI-kit Fluent 2 iOS:

• Шрифты и текстовые стили: например, заголовки, подзаголовки, основной текст, дополнительный текст, текст на кнопках.

• Цветовые палитры: основные и дополнительные цвета, акцентные оттенки.

В UI-киты часто добавляют сеточные системы: например, 12-колоночную сетку для веб-дизайна. Это тоже нужно, чтобы дизайн всех экранов выглядел однородным, а отступы по краям экрана — одинаковыми.

Во Fluent 2 iOS сеток нет, но вот, например, несколько вариантов для разных устройств в Carbon Design System:

Где можно взять UI-kit

Когда планируешь создать собственный UI-kit, полезно изучить чужие. Можно обнаружить интересные решения — например, как распределить элементы по страницам, какие комментарии к элементам добавить. 

[quote]

Дима Исаев

Арт-директор в WANNABE, Product Design Lead. Работал в «Яндекс Практикуме», «Авито», делал спецпроекты в Skyeng

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

[/quote]

UI-киты можно найти на таких платформах:

1. Figma Community. Здесь есть платные и бесплатные наборы для веб- и мобильных интерфейсов. Например, UI-kit для e-commerce. Свои страницы на платформе есть у некоторых крупных компаний, например у VK.

2. UI8. Бесплатные киты находятся в разделе Design Freebies. А в категории UI Kits можно найти платные премиум-киты для сложных продуктов. 

3. Dribbble. Дизайнеры часто выкладывают свои UI-kits, доступные для скачивания.

4. UIBundle. На этом ресурсе есть шаблоны для лендингов, дашбордов, портфолио. Чтобы найти именно UI-киты, перейдите в раздел UI Kits. Здесь есть сотни бесплатных и платных наборов. В карточках прописано, доступен ли UI-kit для коммерческого использования или только для личного.

Также полезно посмотреть, как UI-киты и дизайн-системы устроены в крупных компаниях: как специалисты используют дизайн-токены, как описывают элементы в коде, как формируют компоненты в библиотеки вроде Storybook. 

В случае с мобильными приложениями дизайнеры особенно завязаны на двух крупных дизайн-системах: 

• Material Design — для Android;
• Human Interface Guidelines — для iOS.

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

[card]

Примеры дизайн-систем и UI-китов крупных компаний

1. Google — Material 3 Design Kit
2. Apple — дизайн-система Human Interface Guidelines и различные киты
3. IBM — Carbon Design System, внутри которой есть киты
4. Microsoft — киты по самым разным темам (и есть дизайн-система Fluent)
5. VK — UI Libraries 
6. Госуслуги — гайд по UI-элементам и UI-kit в Figma
7. Мегафон — дизайн-система, в которой есть киты с типографикой, иконками, цветами и компонентами  

[/card]

Создание UI-kit

Определить, нужен в вашем проекте UI-kit или нет, легко. Сверяйтесь:

Если в вашем случае создать UI-kit нужно, вот пошаговый план, как это сделать. Считаем, что вы уже посмотрели чужие UI-киты и понимаете, как они должны выглядеть.

1. Определите цели и аудиторию UI-кита: 

• Будет ли он использоваться для внутреннего проекта или его масштабируют для сторонних команд?
• Какие платформы охватывает проект (веб, мобильные приложения, мультиплатформенность)?
• На какие стили и принципы взаимодействия ориентируется дизайн (минимализм, сложные анимации, брендовые особенности)?

2. Составьте список компонентов. Перечислите все элементы, которые вам понадобятся для проекта. Это могут быть:

• Атомы: кнопки, чекбоксы, переключатели, поля ввода.
• Молекулы: поля для поиска, чекбоксы с текстом, тултипы с иконками.
• Организмы: карточки пользователей, навигационное меню, хлебные крошки.
• Шаблоны: главный экран, экран регистрации, результаты поиска.

3. Разработайте визуальную систему. На этом этапе создаются единые принципы дизайна. 

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

4. Создайте прототипы в Figma или Sketch. Используйте автолейауты и компоненты. Добавьте состояния для интерактивных элементов: hover, active, disabled и другие, которые принято использовать, — мы показывали их в этой статье. Убедитесь, что компоненты поддерживают разные разрешения экранов.

5. Протестируйте UI-kit. Проверьте, насколько легко разработчикам и другим дизайнерам использовать ваш набор. Для этого пусть команда разработчиков попробует сделать несколько экранов приложения, используя только ваш UI-kit. Потом попросите у них обратную связь и доработайте UI-kit по ней. 

Здесь могут быть такие ситуации:

• У разработчиков не получилось сделать полноценные экраны, так как они не нашли некоторые компоненты. Если этих компонентов правда нет, соберите их и добавьте. А возможно, компоненты есть, но расположены так, что их трудно найти. Тогда стоит пересмотреть структуру UI-кита, например по-другому сгруппировать элементы или разбить на страницы. 
• Разработчики сверстали экраны, но говорят, что процесс был неудобным. Например, в UI-ките были прописаны все нужные размеры текста, но разработчики не смогли определить, когда какой размер использовать. Подумайте, как решить проблему: возможно, добавить гайдлайн по использованию размеров текста с шаблонами.
• Разработчики увидели ошибки. Например, цветовой код основной кнопки указан один, а в шаблонах у этой кнопки цвет другой. Исправьте и посмотрите другие кнопки: не ошиблись ли и там?

Точно так же поступите с другими дизайнерами, если они есть: дайте паре человек UI-kit и попросите их собрать несколько макетов, а затем доработайте по обратной связи.

6. Подготовьте UI-kit к распространению. Если UI-kit предназначен для широкой аудитории, создайте репозиторий с файлами на GitHub или ресурс на платформе вроде Zeplin, Zeroheight или Storybook.

После создания остаётся внедрить UI-kit в работу: составлять дизайн только из тех элементов, которые есть в UI-ките. Новые элементы стоит добавлять в крайнем случае, если нельзя обойтись существующими. При этом важно продумать наперёд, где ещё можно будет использовать новый элемент. Если он годен только для одного экрана, это неоптимальное решение.

<<designers-value-guide>>