UI
UI (User Interface) — визуальная и интерактивная часть интерфейса: типографика, цвет, иконки, кнопки, анимации. Переводит UX-логику в пиксели, с которыми взаимодействует пользователь.
Определение UI
UI (User Interface, «пользовательский интерфейс») — визуальная и интерактивная оболочка цифрового продукта: всё, что пользователь видит и с чем взаимодействует напрямую. Если UX — сценарий, то UI — его визуальный ряд. Качественный UI строится на Design System: библиотеке компонентов с жёсткими правилами. Google, Airbnb и Atlassian инвестируют в свои Design System 1–3 млн $ — ускорение разработки новых фич в 2–4 раза окупает вложения.
Что включает UI
| Компонент | Содержание | Типичный объём |
|---|---|---|
| Типографика | Гарнитуры, кегли, вес, интерлиньяж | 2–3 шрифта, 6–8 размеров |
| Цветовая палитра | Primary, secondary, нейтралы, семантические (success/error/warning) | 5–12 оттенков |
| Компоненты | Кнопки, поля ввода, карточки, модали, навигация | 30–150 элементов |
| Иконографика | Библиотека иконок, outline/filled, размеры grid | 50–300 иконок |
| Анимации | Transition-тайминги, easing-кривые, micro-interactions | 10–30 токенов |
Связанные концепции
- UX — логика и структура, которую UI визуализирует; UX первичен.
- Брендбук — источник цветов и типографики для UI-дизайнера.
- A/B-тест — инструмент проверки UI-гипотез: цвет кнопки, размер заголовка, позиция CTA.
- Design Tokens — переменные (HEX, rem, ms), хранящие стилевые константы; позволяют менять тему в одном файле.
Частые вопросы
Можно ли делать UI без UX?
Технически — да, практически — дорого исправлять. Правка навигационной ошибки на стадии UI — 15 000–30 000 ₽; та же правка на wireframe — 2 000–5 000 ₽. Правило десятикратной стоимости ошибки работает и в дизайне.
Чем UI-кит отличается от Design System?
UI-кит — набор Figma-компонентов без документации и кода, 5 000–50 000 ₽, годится для одного проекта. Design System — живая система с кодовой библиотекой и правилами поддержки, 150 000–1 500 000 ₽, масштабируется на весь портфель.
Сколько стоит разработка Design System?
Минимальная (40–60 компонентов, без Storybook) — 150 000–350 000 ₽, 4–8 недель. Корпоративная с тёмной темой и токенами — 600 000–1 500 000 ₽. Кастомизация готовой (MUI/Ant Design) — 60 000–150 000 ₽. Подробнее — в разделе «Брендинг и дизайн».
Влияет ли цвет кнопки на конверсию?
Да, но через контраст и иерархию. Смена цвета CTA без изменения окружения — ±5–12% конверсии. Эффект 15–35% достигается, когда кнопка остаётся единственным ярким акцентом на странице.
Какой базовый юнит сетки выбрать: 4px или 8px?
8px-сетка — стандарт де-факто (Google Material, Apple HIG). 4px применяют в плотных дашбордах. Главное: один юнит на весь продукт, все отступы кратны ему.