Что такое UI
UI (User Interface, пользовательский интерфейс) - визуальная часть сайта, с которой взаимодействует пользователь. Кнопки, формы, иконки, шрифты, цвета, отступы, изображения. То, что человек видит и нажимает на экране.
UI простыми словами
UI - это "лицо" сайта. Как сайт выглядит. Если UX - это "удобно ли", то UI - это "красиво ли". Хороший UI не только эстетичен, но и помогает пользователю: понятные кнопки, читаемые шрифты, чёткая иерархия информации.
Что включает UI
- Типографика (шрифты, размеры, межстрочные интервалы)
- Цветовая палитра
- Кнопки (размер, форма, состояния hover и active)
- Формы (поля ввода, валидация, подсказки)
- Иконки (стиль, размер, использование)
- Сетка раскладки (расположение элементов)
- Изображения и иллюстрации
- Анимации и микровзаимодействия
Принципы хорошего UI
- Консистентность. Одинаковые элементы выглядят одинаково на разных страницах.
- Иерархия. Главное - крупно и заметно, второстепенное - меньше.
- Контрастность. Достаточный контраст для читаемости, особенно для людей с нарушением зрения.
- Простота. Минимум визуального шума, фокус на важном.
- Узнаваемость. Использование привычных пользователю паттернов (корзина = иконка корзины, поиск = лупа).
UI и фирменный стиль
UI обычно опирается на фирменный стиль компании: использует корпоративные цвета, шрифты, логотип. Если фирменного стиля нет - дизайнер разрабатывает его параллельно с UI сайта.
Чем UI отличается от UX
| UI | UX |
|---|---|
| Как выглядит | Как ощущается |
| Визуальный дизайн | Логика и удобство |
| Кнопки, цвета, шрифты | Структура, навигация, поток |
| "Красиво" | "Удобно" |
Хороший продукт - тот, где UI и UX в гармонии. Красивый сайт с плохим UX - люди уйдут. Удобный сайт с плохим UI - не вызовет доверия.