Порядок в дизайне — зачем нужен и как разрабатывается UI-kit

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

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

Готовый UI kit представляет собой PSD- или sketch-файл с компонентами дизайна интерфейса. Их можно массово редактировать и изменять, что ускоряет процесс сборки дизайна.

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

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

1. Унификации, чтобы все компоненты были одинаковы и интерфейс был в едином стиле.

2. Структурирования, чтобы разработчики и дизайнер всегда знали, где взять нужный элемент.

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

4. Согласованности, чтобы вся команда работала в рамках единой системы, в которой собраны все дизайнерские решения.

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

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

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

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

1. Экономия денег. Комплект элементов создается и согласовывается всего один раз.

2. Стандартизация дизайна продукта. Можно использовать на других проектах в рамках единой дизайн-системы.

3. Экономия времени на разработку. Верстка и внедрение пройдут гораздо быстрее, если у разработчиков будет под рукой UI kit.

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

5. Преемственность на длительных проектах. Если проект долго разрабатывается, то команда разработки может обновляться, и здесь UI kit поможет быстро ввести сотрудника в курс дела.

Таким образом, если речь идёт о длительном, крупном, постоянно развивающемся проекте, над которым работает много людей — нужен UI kit.

Можно купить готовый набор или разработать самостоятельно. Что же выбрать?

1. Необходимо соблюсти фирменный стиль бренда.

2. Все системы и продукты компании должны иметь единый вид, чтобы пользователи и сотрудники легко ориентировались в любой системе компании.

3. Купленный UI kit все равно придется дорабатывать под функции вашей системы.

4. При покупке UI kit вы будете ограничены технологиями, которые заложены в комплекте.

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

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

1. Собрать требования бизнеса. Понять, какие задачи нужно решить.

2. Собрать требования от пользователей. Проанализировать объективные данные, собрать отзывы и провести опросы.

3. Изучить текущие цифровые каналы. Понять, как они решают задачи потребителя.

4. Проанализировать референсы. Узнать, какими способами конкуренты решают задачи пользователя, выделить лучшие практики.

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

6. Объединить рекомендации. Составить общий список рекомендаций для проектирования функциональности и информационной структуры интерфейса.

7. Создать прототип и дизайн. Разработать ключевые интерфейсы на примере нескольких страниц.

8. Создать UI Kit. Декомпозировать макеты до деталей и оформить базу знаний с примечаниями и инструкциями.

Мы начинаем собирать UI kit после утверждения концепта: главной и 1–2 второстепенных страниц.

Концепт и UI kit разрабатывает дизайнер уровня middle или senior. Он подбирает шрифты, цвета и иконки, которые согласовывает с клиентом.

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

На всех проектах первая версия UI kit содержит:

Это база, с которой дальше работают другие дизайнеры, которые подключаются к проекту.

UI kit дорабатывается на протяжении всего процесса работы над проектом. Если какой-либо элемент повторяется более одного раза, то дизайнер:

Если нужно отрисовывать состояния компонента, то они переносятся UI kit по тому же принципу. Так все элементы, которые будут использоваться повторно, оказываются в UI kit.

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

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

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

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

Это дает возможность дизайнеру применить цветовой стиль для нового компонента, просто посмотрев на номер цветового стиля. Если стили не подписывать, то придется каждый раз прописывать HEX-код.

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

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

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

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

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

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

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

Обязательные элементы:

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

Для десктопа отрисовываем полный перечень состояний, а в мобильной версии не нужно отрисовывать состояния hover focus — они здесь не используются.

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

Все виды инпутов добавляются в UI kit.

Возможные состояния инпутов:

Все состояния инпутов используются во всех версиях интерфейса.

Каждый уникальный дропдаун становится отдельным компонентом.

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

Карточки — это сложносоставные компоненты.

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

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

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

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

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

Также важно оставлять комментарии к невидимому поведению компонентов. Например, чем больше текста в текстовом поле, тем больше оно растягивается. При этом если количество текста превысит 6 строк, он начнет скроллиться внутри текстового поля.

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

Эти советы серьезно облегчат жизнь дизайнерам.

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