UI/UX · Гид
Что такое дизайн-система
Библиотека компонентов — не дизайн-система. Разбираем, из чего она состоит на самом деле, когда её стоит заводить и почему большинство систем умирает через год.
UI/UX
Дизайн, который не нужно объяснять
Проектирование интерфейсов и пользовательского опыта: паттерны, дизайн-системы, мобильные приложения, доступность, исследования и метрики.
Темы рубрики
Главное в рубрике
Свежие материалы
Мобильная навигация
Сколько разделов помещается в нижнюю панель, когда оправдано боковое меню и почему скрытая навигация снижает использование функций.
Токены дизайн-системы
Именование определяет живучесть системы. Разбираем схемы наименования, уровни абстракции и типичные ошибки, из-за которых токены становятся бесполезными.
Тач-интерфейсы
Палец — не курсор. Разбираем реальную точность касания, минимальные размеры целей, зазоры и то, почему промахи возникают даже при формально достаточных размерах.
Состояния компонентов
Загрузка, ошибка, пустота, отключено, фокус с клавиатуры. Разбираем полный набор состояний и то, почему интерфейс разваливается именно на них.
Онбординг в приложении
Три слайда с иллюстрациями почти не работают. Разбираем подходы к первому знакомству, которые действительно доводят до первого полезного действия.
Доступность интерфейса
Контраст, размеры целей, клавиатурная навигация, альтернативный текст. Разбираем базовые требования и то, как проверить их без специальных знаний.
Две разные профессии в одном названии
UX — это про то, работает ли решение: понятен ли путь, сколько шагов до цели, что происходит при ошибке, откуда человек вообще пришёл. UI — про то, как это выражено: размеры, состояния, компоненты, типографика, отзывчивость интерфейса. Сильный UI не спасает неверный сценарий, а хороший сценарий в неряшливом интерфейсе теряет доверие.
На практике обе части упираются в одно: интерфейс не должен требовать объяснений. Если функцию приходится описывать в подсказке, обычно проблема не в подсказке.
Проверяемые вещи
О чём материалы рубрики
Дизайн-системы и компоненты, мобильные паттерны, формы и ввод данных, состояния и обратная связь, доступность как часть работы, а не как галочка в конце.
Мы избегаем разговоров о «психологии пользователя» без опоры и предпочитаем то, что можно проверить: соотношения, стандарты, наблюдаемое поведение.
Коротко о рубрике
- В чём разница между UX и UI простыми словами?
- UX отвечает на вопрос «получится ли у человека сделать то, зачем он пришёл», UI — «понятно ли, куда нажимать, и приятно ли этим пользоваться». Первое проектируется сценариями и структурой, второе — компонентами и визуальным языком.
- Нужно ли дизайнеру уметь программировать?
- Писать продакшен-код — нет. Понимать, из чего состоит вёрстка, что дорого в реализации и как ведут себя компоненты — да. Это меняет решения на этапе макета и убирает половину споров с разработкой.
- Как проверить интерфейс без исследований и бюджета?
- Показать пятерым людям вне команды и попросить выполнить конкретную задачу вслух, не помогая. Большинство серьёзных проблем обнаруживается на первых трёх. Это не заменяет исследование, но радикально лучше, чем ничего.
- Что такое дизайн-система?
- Набор повторно используемых компонентов и правил их применения: токены цвета и типографики, состояния, отступы, поведение. Смысл не в библиотеке файлов, а в том, что одинаковые задачи решаются одинаково — и продукт перестаёт расползаться при росте команды.
