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