Ui компоненты что это

UI Kit — что это и зачем он нужен

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

Рассказываем, для чего нужен UI Kit ещё и что в него входит.

Чем полезен UI Kit

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

Помогает поддерживать единообразие

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

Ускоряет проектирование

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

Экономит деньги

Без UI Kit нужно с нуля создавать компоненты для каждого нового варианта дизайна. И каждый раз платить команде за дизайн и разработку элементов. Если этим занимаются разные команды, есть шанс, что элементы будут отличаться от предыдущих версий. С китом заплатить нужно один раз, а дизайн и код основных элементов всегда будут одинаковыми.

Что добавляют в UI-кит

Обычно интерфейс состоит из стандартных элементов:

Навигация

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

Какие состояния навигации отрисовывают:

• активный пункт меню;
• пункт при наведении;
• свернутые элементы навигации;
• скролл.

Кнопки

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

В UI Kit для кнопок добавляют состояния:

• стандартное;
• неактивная кнопка;
• наведение на кнопку;
• нажатие на кнопку.

Иконки

Иконки, которые встречаются на страницах, тоже собирают в кит, чтобы быстро их найти и добавить в дизайн или экспортировать.

Для иконок в UI Kit могут быть добавлены состояния:

• стандартное;
• активная;
• при наведении;
• иконка с информационным элементом, например, значком нового сообщения в личном кабинете.

Карточки

Карточки делают компонентом и обычно собирают в него несколько элементов. Например, текст, картинку и кнопку.

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

Формы с полями ввода

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

В UI Kit заносятся все возможные состояния:

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

Шрифты и цвета

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

Футеры

Содержат контакты для лендингов или дублируют меню для интернет-магазинов.

В чем отличие UI Kit и дизайн-системы

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

Создавать свой или купить готовый

Проектирование своего кита выгодно, когда нужно:

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

В интернете можно найти готовые UI Kit. Они подойдут, если:

• продукт небольшой и его не нужно будет масштабировать;
• готовый кит подходит под функционал и технологии продукта;
• нет потребности в уникальном дизайне продукта.

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

32 User interface элементов для UI дизайнеров

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

UI элементы:

1. Input Controls
2. Navigation Components
3. Informational Components
4. Containers

Input Controls

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

Navigation Components

Navigation Components помогают пользователям перемещаться по продукту или веб-сайту. Общие навигационные компоненты включают панели вкладок на устройстве iOS и меню гамбургеров на Android.

Informational Components

Informational Components делятся информацией с пользователями.

Containers

Containers содержат связанный контент вместе.

Словарь UI элементов:

Аккордеоны (Accordion)

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

Bento Menu, Döner Menu, Hamburger Menu, Kebab Menu, Alt-burger, meatball

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

Хлебные крошки (Breadcrumb)

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

Кнопка (Button)

Кнопки позволяют пользователю взаимодействовать с формами на сайте.

Карточка (Card)

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

Карусель (Carousel)

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

Checkbox

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

Комментарий (Comment)

Dropdown

Лента (Feed)

Сложно представить соц сети такие как Facebook, twitter и т.п без ленты. Содержание ленты варьируется от простого текста до изображений и видео.

Форма (Form)

Иконки (Icon)

Поле ввода (Input Field)

Loader

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

Модальное окно (popup)

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

Уведомления

Нотификации дают юзеру понять, что есть что-то новое, например, сообщение или какое-то системное уведомление.

Пагинация (Pagination)

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

Picker

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

Progress Bar

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

Radio Buttons

Radio Buttons похожи на чекбоксы, но отличаются тем, что можно 1 из нескольких вариантов.

Поле поиска (Search Field)

Боковая панель (Sidebar)

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

Ползунок (Slider Controls)

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

Stepper

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

Тэг (Tag)

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

Tab Bar

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

Tooltip

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

Toggle

Toggle это флаг который позволяет выбрать между Да или Нет.

Барабан

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

Cоветы по разработке UI-дизайна

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

Мы собрали несколько важных советов по разработке дизайна пользовательского интерфейса.

Что такое UI-дизайн?

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

Компоненты UI

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

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

• Кнопки;
• Ссылки;
• Иконки;
• Меню;
• Панели инструментов;
• Текстовые поля;
• Флажки;
• Радио-кнопки.

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

Инструменты для использования

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

Существует много полезных инструментов, вот некоторые из наиболее популярных:

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

ПО для графического дизайна, такое как Adobe XD, Adobe Photoshop или Illustrator. Adobe XD — одна из самых популярных программ, используемых UI-дизайнерами. Это векторный инструмент, помогающий создавать прототипы и мокапы.

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

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

Лучшие практики в разработке UI-дизайна

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

1. Убедитесь, что в вашем интерфейсе легко ориентироваться. Разместите наиболее важные компоненты в легкодоступных местах и ​​используйте четкие и лаконичные элементы.
2. Обратите внимание на детали. Элементы пользовательского интерфейса должны выглядеть понятно, а текст быть разборчивым.
3. Протестируйте свои проекты. Убедитесь, что вы тестируете свои дизайны на разных устройствах с разными экранами, чтобы убедиться в оптимизации дизайна для любого девайса.
4. Используйте шаблоны проектирования. Шаблоны проектирования — это элементы пользовательского интерфейса, эффективность которых уже доказана, поэтому рекомендуется придерживаться их там, где это возможно.
5. Используйте стандартные принципы дизайна. Применяйте принципы симметрии, контраста, выравнивания для создания визуально привлекательных интерфейсов, которые также будут просты в использовании.

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

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

Попробуйте no-code платформу AppMaster

AppMaster поможет создать любое веб, мобильное или серверное приложение в 10 раз быстрее и 3 раза дешевле

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

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

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

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

Обратная связь: настройка обратной связи может помочь пользователям продолжить взаимодействие с вашим интерфейсом и легко справиться с возникшими проблемами.

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

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

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

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

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

Как сделать дизайн интерфейса идеальным?

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

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

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

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

Дизайн для разных разрешений экрана и устройств. Люди используют разные устройства для взаимодействия с продуктом. Адаптивность дизайна под разные разрешения, экраны и размеры положительно скажется на пользовательском опыте.

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

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

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

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

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

Содержание

1. Что это такое
2. Зачем нужен
3. Плюсы для заказчика
4. Дорожная карта задач
5. Этапы работы над UI kit
6. Компоненты UI kit
7. Как передавать UI kit разработчику, дизайнеру, заказчику?
8. Резюмируем

Что это такое

UI kit — это набор готовых элементов пользовательского интерфейса.

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

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

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

• UI/UX guideline, или гайдлайн — это подробное текстовое руководство, документ, в котором изложена основная концепция дизайна: требования к интерфейсу, размещению компонентов, правила сочетания и взаимодействия элементов.

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

UI kit входит в дизайн-систему

Зачем нужен

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.

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

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

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

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

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

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

Дорожная карта задач

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

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

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

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

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

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

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

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

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

Этапы работы над UI kit

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

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

Первая итерация

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

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

• цвета;
• иконки;
• инпуты;
• шрифты;
• дропдауны;
• типографику;
• кнопки и контролы.

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

Доработка

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

• рисует элемент;
• делает его компонентом;
• собирает экран, используя элемент;
• переносит мастер-компонент в UI kit.

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

Компоненты UI kit

Цвета и стили

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

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

Градация серого

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

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

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

Темная тема

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

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

Типографика

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

Сетка

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

Иконки

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

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

Кнопки и контроллеры

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

• основная кнопка;
• второстепенная;
• текстовая;
• кнопка-иконка;
• радио баттон;
• чекбоксы;
• переключатели;
• табы;
• кликабельные ссылки.

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

1. Initial — начальное состояние кнопки.
2. Hover — состояние при наведении мыши.
3. Focus — при выборе кнопки с клавиши Tab.
4. Loading — состояние загрузки.
5. Disabled — кнопка неактивна.

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

Инпуты

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

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

1. Initial — начальное состояние.
2. Active — поле выбрано.
3. Typing — заполнение поля.
4. Filled — поле заполнено.
5. Disabled — поле неактивно.
6. Success — заполнено верно.
7. Error — ошибка.

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

Дропдауны

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

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

Карточки

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

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

Хедер

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

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

Как передавать UI kit разработчику, дизайнеру, заказчику?

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

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

Названия компонентов на английском поймет и дизайнер, и разработчик

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

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