Руководство по UI Kit Insight: как делать качественные проекты без дизайнера

28.11.2024
Руководство по UI Kit Insight: как делать качественные проекты без дизайнера
Для удобства пользователей платформы Insight наша команда разработала User Interface Kit (UI Kit). Это библиотека готовых компонентов, с помощью которых можно создать графический мобильный или веб-интерфейс. Он состоит из цветов, шрифтов, стилей, сеток, тем, иконок и т.д. Этот инструмент поможет пользователям упорядочить используемые в веб-проекте элементы, цвета и типографику, а также привести интерфейс к единому стилю, благодаря чему проект в конечном итоге будет лучше восприниматься. 

Вы можете использовать UI Kit Insight, если:

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

UI Kit разработан в графических редакторе Figma. Он доступен для всех пользователей. Найти его можно здесь.

Давайте подробно пройдемся по его основным инструментам для дизайна и визуализации приложений. К ним относятся: 

  • Стили: шрифты и палитра цветов.
  • Объекты проектов: виджеты, таблицы, сетки, примеры приложений, темы проект.
  • Прочие компоненты: иконки, атомы.

Стили 

В данном разделе представлены рекомендации по оформлению текстовых

элементов и использованию цветов в проектах.

Шрифт

Руководство по UI Kit Insight: как делать качественные проекты без дизайнера

Рекомендуемые стили параграфов (жирность, размер, межстрочный интервал, цвет):

  • Заголовки (H1, H2, H3).
  • Основной текст (body, small, xsmall).

Цветовая палитра

1. Рекомендации по выбору цветов для темного режима

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

Например, если цвет кнопки равен 700 в светлой теме, то в темной теме он будет равен 400. Если фоновый цвет секции сообщения равен 100 в светлой теме, то в темной теме он будет равен 1000.

Руководство по UI Kit Insight: как делать качественные проекты без дизайнера
Есть светлая нейтральная шкала и эквивалентная ей темная нейтральная шкала. Значение Neutral100 в светлой нейтральной шкале должно соответствовать значению DarkNeutral100 в темной нейтральной шкале.
Руководство по UI Kit Insight: как делать качественные проекты без дизайнера
2. Палитра - цвета для использования при настройке виджетов (столбцы, линии, доли, точки, плитки и пр. в диаграммах)
Руководство по UI Kit Insight: как делать качественные проекты без дизайнера
3. Примеры нейтральных светлых и темных цветов:
Руководство по UI Kit Insight: как делать качественные проекты без дизайнера

Объекты проектов

В данном разделе представлены виджеты, таблицы, сетки, примеры приложений (в том числе в разных темах).

Виджеты

На вкладке “Виджеты” вы можете найти все виджеты Insight, стилизованные по правилам Цветовой палитры и Типографики в двух темах - тёмная и светлая. Пример:
Руководство по UI Kit Insight: как делать качественные проекты без дизайнера
Порядок работы с данным разделом:

  1. Ознакомиться с содержимым - узнать, какие вариации настройки виджетов существуют в Insight. Например, комбинированная диаграмма может выполнять роль сразу нескольких визуализаций:
    1. Линейная диаграмма
    2. Линейная диаграмма с заливкой
    3. Столбчатая диаграмма
    4. Столбиковая диаграмма
    5. Пирамидка
  2. При подготовке макетов и прототипов для проектов использовать виджеты из данного раздела - для сокращения времени на изображение наиболее популярных визуализаций данных.
  3. 3. На основе данного раздела разработать собственный UI Kit - с применением брендбука своей компании.
Совет: Все визуализации из раздела “Виджеты” предварительно настроены на демо-данных в Редакторе Insight. Вы можете воспользоваться ими, перейдя в проект “Виджеты Insight”, и скопировав нужный виджет в свой проект.

Таблицы

На вкладке “Таблицы” вы можете найти варианты табличных форм представления данных в Insight, содержащие различные компоненты - значения, прогресс бары, бейджи, чек-боксы, картинки и пр.

Примеры:
Руководство по UI Kit Insight: как делать качественные проекты без дизайнера
Руководство по UI Kit Insight: как делать качественные проекты без дизайнера
Руководство по UI Kit Insight: как делать качественные проекты без дизайнера
Порядок работы с данным разделом:

  1. Ознакомиться с содержимым - узнать, как могут выглядеть таблицы в Insight. Важно помнить, что благодаря существованию виджета “Конструктор таблиц”, который предлагает неограниченную свободу действий в вопросах разметки таблицы (например, в одной ячейке могут содержаться картинка, несколько подписей, прогресс бар и кнопка), невозможно показать все многообразие вариантов табличных визуализаций - все ограничивается лишь вашей фантазией.
  2. При подготовке макетов и прототипов для проектов использовать таблицы из данного раздела - для сокращения времени на изображение наиболее популярных визуализаций данных.
  3. На основе данного раздела разработать собственный UI Kit - с применением брендбука своей компании.
Совет: Все визуализации из раздела “Таблицы” уже предварительно настроены на демо-данных в Редакторе Insight. Вы можете воспользоваться ими, перейдя в проект “Таблицы Insight”, и скопировав нужный виджет в свой проект.

Сетки


На вкладке “Сетки” вы можете найти примеры конструирования Сетки страницы - как с помощью Контейнеров в Простом режиме, так и с помощью слотов Разметки в режиме Эксперт.

Примеры:
Руководство по UI Kit Insight: как делать качественные проекты без дизайнера
Совет:
Все примеры Сеток уже предварительно настроены в Редакторе Insight. Вы можете воспользоваться ими, перейдя в настройки макета сетки в виджете “Разметка” и выбрав соответствующий шаблон:
Руководство по UI Kit Insight: как делать качественные проекты без дизайнера

Примеры приложений


На вкладке “Примеры приложений” расположены примеры одностраничных приложений, собранных в стилистике UI Kit Insight.
Руководство по UI Kit Insight: как делать качественные проекты без дизайнера
Совет:
Все приложения из раздела “Примеры приложений” уже предварительно настроены в Редакторе Insight. Вы можете воспользоваться ими, перейдя в раздел “Шаблоны”, выбрав соответствующий шаблон и на уровне Конструктора приложений, импортировав шаблон в своей проект.

Темы проекта

На вкладке “Темы проекта” вы можете увидеть реализацию одного и того же приложения, выполненного в разных тональностях Цветовой палитры.
Руководство по UI Kit Insight: как делать качественные проекты без дизайнера

Прочие компоненты

Раздел содержит две вкладки - “Иконки” и “Атомы”. Они агрегируют в себе как рекомендованные к использованию иконки (состав которых вы, разумеется, можете расширять под свои задачи), так и компоненты, из которых состоят виджеты:

Табличные компоненты:

  • Значения
  • Заголовки
  • Пагинация
  • Кнопки
  • Иконки
  • Аватары
  • Бейджи
  • Чекбоксы и радио-кнопки
  • Прогресс бары
Цветовую индикацию действий:

  • Наведение
  • Нажатие
  • Элементы графиков:
  • Столбцы
  • Линии осей
  • Подписи

Организация пространства с UI Kit


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

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

Пример организованного пространства с использование UI Kit Insight:
Руководство по UI Kit Insight: как делать качественные проекты без дизайнера
Уже сейчас вы можете пользоваться BI-системой Insight 30 дней бесплатно. Для этого необходимо зарегистрироваться на сайте

И мы всегда будем рады вас проконсультировать - заявка на консультацию.
Goodt. Современные HR Tech и BI-решения.
Подписаться на рассылку
Подписываясь на рассылку, вы даете согласие на обработку персональных данных. Рассылка осуществляется один раз в квартал.
Спасибо за подписку!
© Goodt 2016 – 2024.