Neat UI-kit
От vuetify к своим компонентам
В поисках баланса между пользователем и бизнес-целями
Neat UI
фреймворк для реализации учётных систем без программирования
О продукте
Neat UI — это внутренний продукт компании. С помощью этого фреймворка аналитики могут самостоятельно создавать информационную архитектуру учетных систем, привязывать ее к БД, настраивать доступ к данным и собирать динамический интерфейс для конечного пользователя — оператора системы. То есть у продукта две группы пользователей: админы (преимущественно коллеги, но и со стороны заказчика тоже могут быть) и операторы приема — сотрудники госучреждений, которые работают с обращениями граждан.
Neat UI — это внутренний продукт компании. С помощью этого фреймворка аналитики могут самостоятельно создавать информационную архитектуру учетных систем, привязывать ее к БД, настраивать доступ к данным и собирать динамический интерфейс для конечного пользователя — оператора системы. То есть у продукта две группы пользователей: админы (преимущественно коллеги, но и со стороны заказчика тоже могут быть) и операторы приема — сотрудники госучреждений, которые работают с обращениями граждан.
Моя роль
Я проектировала этот фреймворк с нуля: суммарно 30+ различных конструкторов в админке, интерфейс динамических форм, а так же кастомные решения для узких случаев — например, электронная очередь или пошаговая форма создания заявлений с дополнительными фичами.
Я разработала UI-kit и дизайн-систему для этого продукта, а так же задокументировала базовые функциональные блоки и проводила онбординги для новых ребят в команде.
Я проектировала этот фреймворк с нуля: суммарно 30+ различных конструкторов в админке, интерфейс динамических форм, а так же кастомные решения для узких случаев — например, электронная очередь или пошаговая форма создания заявлений с дополнительными фичами.
Я разработала UI-kit и дизайн-систему для этого продукта, а так же задокументировала базовые функциональные блоки и проводила онбординги для новых ребят в команде.
Задача
Когда я как первый дизайнер появилась в компании, в Neat UI уже была реализована пара блоков на vuetify (и нуждалась в рефакторинге), но отсутствовало описание и точное понимание вектора развития продукта. Поэтому только через несколько месяцев разработки у нас появилась возможность выявить основные паттерны и требования к дизайн системе. В этой работе я описала базовые компоненты и то, как мы их внедряли в существующий неконсистентный интерфейс.
Когда я как первый дизайнер появилась в компании, в Neat UI уже была реализована пара блоков на vuetify (и нуждалась в рефакторинге), но отсутствовало описание и точное понимание вектора развития продукта. Поэтому только через несколько месяцев разработки у нас появилась возможность выявить основные паттерны и требования к дизайн системе. В этой работе я описала базовые компоненты и то, как мы их внедряли в существующий неконсистентный интерфейс.
Color themes
12 pairs of light&dark modes
Neat UI поддерживает 24 цветовых темы:
12 пар из светлого и темного мода.
Технически это 18 семантических переменных, в которых выражены все компоненты интерфейса. Добавление новых переменных предусмотрено и не вызывает проблем.
Новые цветовые темы так же продолжают пополняться, как правило при разработке новых проектов на базе фреймворка.
12 пар из светлого и темного мода.
Технически это 18 семантических переменных, в которых выражены все компоненты интерфейса. Добавление новых переменных предусмотрено и не вызывает проблем.
Новые цветовые темы так же продолжают пополняться, как правило при разработке новых проектов на базе фреймворка.
Изначально требование было в том, чтобы проекты визуально отличались с первого взгляда, поэтому у каждого из них есть своя тема по умолчанию.
В рамках одной системы обычно доступно несколько тем. Как минимум светлый и темный моды. Темы применяются в системе мгновенно при клике на превью.
Фича оказалась популярной как у админов, так и у конечных пользователей, поэтому по возможности даем как можно больше тем для выбора.
В рамках одной системы обычно доступно несколько тем. Как минимум светлый и темный моды. Темы применяются в системе мгновенно при клике на превью.
Фича оказалась популярной как у админов, так и у конечных пользователей, поэтому по возможности даем как можно больше тем для выбора.
В интерфейсе Neat UI встречаются svg-иллюстрации — например, для маскота «Совушки».
Все иллюстрации и иконки умеют работать с цветовыми переменными.
Иконки шрифтовые, а иллюстрации — sprite.
Все иллюстрации и иконки умеют работать с цветовыми переменными.
Иконки шрифтовые, а иллюстрации — sprite.
Buttons
4 types for any case
Основные: для важных одноразовых событий, например, сохранение, актуализация.
Второстепенные: кнопки регулярного взаимодействия с интерфейсом, например, добавление поля при сборке формы в конструкторе.
Кнопки-ссылки: кнопки без тела для редких действий, которые необходимо выразить текстом.
Кнопки-иконки: для регулярных действий или для повторяющихся паттернов .
Второстепенные: кнопки регулярного взаимодействия с интерфейсом, например, добавление поля при сборке формы в конструкторе.
Кнопки-ссылки: кнопки без тела для редких действий, которые необходимо выразить текстом.
Кнопки-иконки: для регулярных действий или для повторяющихся паттернов .
При создании компонентов мы договорились с разработчиками о необходимом количестве пропсов и пресетов для каждого вида кнопки.
Для всех компонентов свойства называются одинаково, чтобы разработчик мог быстро ориентироваться в макете.
Описание компонентов для каждого состояния и пресета задокументировано в текстовом виде с пояснениями о точках использования.
Для всех компонентов свойства называются одинаково, чтобы разработчик мог быстро ориентироваться в макете.
Описание компонентов для каждого состояния и пресета задокументировано в текстовом виде с пояснениями о точках использования.
Пример интерфейса, в котором уживаются все виды кнопок вместе: конструктор документов.
Здесь администратор системы собирает экранную форму для заполнения документа: он выбирает необходимые поля, расставляет их по карточкам, добавляет визуальные элементы.
Здесь администратор системы собирает экранную форму для заполнения документа: он выбирает необходимые поля, расставляет их по карточкам, добавляет визуальные элементы.
Text styles
2 fonts with a range of sizes
Имена текстовых стилей отражают их семантику и визуал.
Набор стилей heading — для основных заголовков.
Набор стилей text — для всего остального.
Преффикс xs, s, m, l — отражает высоту текста (12, 14, 16, 18).
Преффикс 1,2,3,4 — отражает вес (300, 400, 500, 700)
В итоге все названия легко формулируются и запоминаются. При необходимости линейка стилей легко расширяется и без проблем укладывается в нейминговый паттерн. Например:
text-xl-3 ________ Roboto, 20/500
heading-xs-1 ____Montserrat 12/300
Набор стилей heading — для основных заголовков.
Набор стилей text — для всего остального.
Преффикс xs, s, m, l — отражает высоту текста (12, 14, 16, 18).
Преффикс 1,2,3,4 — отражает вес (300, 400, 500, 700)
В итоге все названия легко формулируются и запоминаются. При необходимости линейка стилей легко расширяется и без проблем укладывается в нейминговый паттерн. Например:
text-xl-3 ________ Roboto, 20/500
heading-xs-1 ____Montserrat 12/300
Все компоненты форм используют один из классов текстового паттерна:
— кнопки
— инпуты
— статичный текст
— динамический текст
— контекстные компоненты форм
— кнопки
— инпуты
— статичный текст
— динамический текст
— контекстные компоненты форм
Когда мы решили внедрить текстовые классы, интерфейс уже существовал. При анализе интерфейса были выявлены наиболее популярные стили, на основе которых мы создали нейминговый паттерн. Все, что было мимо, нуждалось в рефакторинге.
Вместе с новыми текстовыми классами были описаны и правила замены. Большая часть экранных форм была отрефакторена автозаменой, а для неохваченных участков есть правило среди разработчиков: увидел кривые стили — исправь на класс по правилам замены.
Вместе с новыми текстовыми классами были описаны и правила замены. Большая часть экранных форм была отрефакторена автозаменой, а для неохваченных участков есть правило среди разработчиков: увидел кривые стили — исправь на класс по правилам замены.
Inputs
all variables for one prors panel
Контролы ввода в Neat UI — самые переиспользуемые компоненты. Большая часть админского интерфейса — это наборы настроек для проектных задач.
При проектировании новых конструкторов дизайнеру нужно иметь возможность быстро накидать любые инпуты и безболезненно менять их пропсы. Поэтому все поля включены в один компонент (см. вкладку props)
Мое главное достижение в этом ките — свой подход к обозначению обязательных полей. Об этом я оформила отдельную работу:
При проектировании новых конструкторов дизайнеру нужно иметь возможность быстро накидать любые инпуты и безболезненно менять их пропсы. Поэтому все поля включены в один компонент (см. вкладку props)
Мое главное достижение в этом ките — свой подход к обозначению обязательных полей. Об этом я оформила отдельную работу:
Для быстрого переключения все поля ввода объединены в один компонент:
— однострочное поле
— многострочное поле
— селект
— дата-пикер
— тайм-пикер
— поле с серверным поиском
Поля так же поддерживают свойства обязательности и наличия плейсхолдера. Все организовано в одной панели свойств.
— однострочное поле
— многострочное поле
— селект
— дата-пикер
— тайм-пикер
— поле с серверным поиском
Поля так же поддерживают свойства обязательности и наличия плейсхолдера. Все организовано в одной панели свойств.
Это пример админской панели настроек в одном из конструкторов. Это тоже один из самых популярных компонетов.
Благодаря хорошо описанной компонентной базе и простому паттерну применения первичные прототипы новых конструкторов очень быстро превращаются в ready to dev макеты.
Дизайнер может уделять больше времени исследованию новой функциональности за счет сокращения затрат на технические работы.
Благодаря хорошо описанной компонентной базе и простому паттерну применения первичные прототипы новых конструкторов очень быстро превращаются в ready to dev макеты.
Дизайнер может уделять больше времени исследованию новой функциональности за счет сокращения затрат на технические работы.