Page cover

UI Components

Весь UI дизайн - это составляющие его компоненты, воплощающие в себе логику приложения, UX исследования, информационную архитектуру, пути пользователей и т.д.

UI - это цвета, типографика, кнопки, формы, чекбоксы, списки, радиокнопки, иконки, карточки и множество других элементов, которые и составляют финальный результат того, что все мы видим на экране своих смартфонов и компьютеров много раз, каждый день.

Правильно выполненные UI элементы значительно облегчают и делают приятным выполнение пользовательских сценариев. Не зря говорят: лучший интерфейс - это его отсутствие. Под этим выражением подразумевают то, что лучший интерфейс - это тот интерфейс, который пользователь и не замечает вовсе, настолько он прост и понятен, что пользователь интуитивно движется по нему, словно скользит, не замечая препятствий или недопонимания.

У пользователей уже сложились в голове определенные поведенческие паттерны (из-за использования десятков и сотен приложений) - нам не стоит обманывать ожидания пользователей, а потому яркая большая кнопка брендового цвета - это кнопка CTA (Call To Action - призыв к действию), т.е. кнопка целевого действия, ради которой и задумывался весь дизайн (чтобы пользователь нажал ее и перешел к нужному нам действию.

CTA кнопка не должна быть бледно серой (словно она выключена) или ярко-красной (предупреждение об опасном или необратимом действии - типа удаление аккаунта). Пользователи уже интуитивно понимают, что и как будет работать - не нужны разочаровывать их.

А если пользователи впервые видят не только наш UI дизайн, но и приложение вообще (что редкость), бы должны сделать такой дизайн, который опирается на поведенческие паттерны из жизни, подсказывающие человеку, что и как ему необходимо сделать.

В этом разделе вы узнаете обо всех компонентах UI дизайна, увидите их правильные и неправильные реализации, чтобы значительно сократить время на набивание шишек, улучшить свое знания и опыт, а также натренировать насмотренность на правильном визуальном дизайне UI элементов. Удачи!

Обширная библиотека UI компонентов по ссылке

Last updated

Was this helpful?