Гайд по пользовательскому интерфейсу: виды, элементы и примеры 

Что такое пользовательский интерфейс 

UI (User Interface) — пользовательский интерфейс. Он отвечает за то, чтобы сайты и приложения были привлекательными и удобными. Добиться этого помогают элементы интерфейса: кнопки, текстовые поля, таблицы и формы — все то, с помощью чего люди взаимодействуют с продуктом. 

Однако в общем процессе создания приложения или сайта разработка UI — только второй этап работы. До этого нужно пройти UX-разработку — продумать логику и маршрут пользователя на основе аналитики, а после этого создать прототип, на который уже будет накладываться визуал. 

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

• Задавать общий стиль. Дизайнер подбирает цвета, шрифты, иллюстрации и отступы так, чтобы они создавали нужное настроение и выделяли продукт среди конкурентов.
• Управлять вниманием. С помощью визуальных приемов специалисты подсказывают, куда именно нажать, выделяют главное и скрывают второстепенное, чтобы не перегружать экран.
• Выстраивать единую систему. Дизайнер собирает интерфейс не из случайных деталей, а из дизайн-системы, где есть все ключевые элементы. Это помогает проекту выглядеть целостно на всех страницах.

Основные отличия UX и UI

	UX (User Experience)	UI (User Interface)
Значение	Пользовательский опыт	Пользовательский интерфейс
Суть работы	Логика, структура, удобство и аналитика	Внешний вид, эстетика, визуальный отклик
Инструменты	Исследования аудитории, схемы пути клиента, прототипы	Типографика, цветовые палитры, иконки, сетки, анимации
Главный вопрос	Как пользователю быстро и удобно дойти до своей цели?	Как этот путь будет выглядеть и ощущаться визуально?

Из чего состоит пользовательский интерфейс

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

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

Элементы ввода. Текстовые поля, галочки, выпадающие списки и ползунки. С их помощью пользователь передает системе свои данные.

Элементы действия. Кнопки, текстовые ссылки и иконки-действия. Это главные триггеры, которые запускают процессы.

Элементы обратной связи. Всплывающие уведомления, индикаторы загрузки, статусы и сообщения об ошибках. Они показывают, что система приняла команду и обрабатывает её.

Визуальные элементы. Цвета, типографика, отступы и иллюстрации — то есть наполнение сайта. Они выстраивают иерархию и делают продукт эстетичным.

Футер — нижний блок со служебными ссылками и контактами.

ЧИТАЙТЕ ТАКЖЕ:

Законы восприятия и когнитивные искажения в интерфейсах

Какими бывают пользовательские интерфейсы

Мы привыкли, что интерфейс — это картинка на мониторе. Но на самом деле это любой способ передать команду системе. Вы можете кликнуть мышкой, сказать фразу вслух или просто взмахнуть рукой — и программа вас поймет.

В зависимости от того, как именно человек отдает эти команды, интерфейсы делят на несколько видов:

• Графический (GUI). Это привычные нам сайты, приложения и операционные системы, где мы кликаем курсором или пальцем по окнам, кнопкам и иконкам.
• Командный (CLI). Работа идет через ввод текстовых команд с клавиатуры. Такой подход в основном используют разработчики. 
• Голосовой (VUI). Управление техникой с помощью речи. Сюда относятся умные колонки и виртуальные помощники — Алиса или Siri. 
• Сенсорный и жестовый. Это наши свайпы и движения, а используется такой подход в телефонах, планшетах и шлемах виртуальной реальности. 
• Мультимодальный. Объединяет сразу несколько способов. Например, при управлении телевизором: можно листать каналы кнопками на пульте, а можно сказать название в микрофон.

Чем занимается UI-дизайнер

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

Ищет визуальные решения и работает с референсами

У UI-дизайнера на этапе создания сайта есть два пути: придумать визуальный концепт самостоятельно или собрать актуальные тенденции и адаптировать их под свой проект. 

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

Но чаще всего специалисты идут по второму пути: изучают профильные площадки, например Behance, Dribbble или Pinterest, и собирают удачные референсы. Здесь дизайнеры смотрят, как конкуренты работают с цветом, какую типографику используют, как располагают текст и изображения. В общем ищут всё, что может им помочь в будущем. Из этих находок дизайнеры собирают мудборд — примеры готовых проектов, картинки, которые передают атмосферу, цвета и другие элементы. 

Разрабатывает дизайн-концепции

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

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

Прорабатывает графические элементы и композицию

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

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

Создание дизайн-систем (UI-китов)

Чтобы в будущем было проще создавать новые страницы или править старые, дизайнер собирает единую библиотеку компонентов. Иногда ее называют дизайн-системой, иногда — UI-китом. 

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

ЧИТАЙТЕ ТАКЖЕ:

Как разработать удобный интерфейс: рекомендации для дизайнеров

5 правил хорошего интерфейса

Создание UI — точная наука. Вот несколько правил, которые нельзя нарушать.

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

Сохраняйте единообразие. Если на первом экране кнопка «Далее» была синей и прямоугольной, то она не должна стать круглой и оранжевой на пятом. Резкая смена элементов и хаос путают человека и заставляют думать и заново учиться пользоваться сайтом. 

Давайте обратную связь. По возможности система должна реагировать на действия человека. Например, если у вас есть кнопка скачивания, то на экране должен появиться индикатор загрузки или плашка, сообщающая о том, что загрузка началась. Если этого не произойдет, пользователь либо начнет бесконтрольно кликать по странице, либо уйдет. 

Делайте дизайн для всех. Хороший интерфейс учитывает разные особенности восприятия. Так, ошибку при вводе пароля нельзя показывать только красным контуром — обязательно нужен поясняющий текст. Кажется, что это мелочь, но текст поможет людям с дальтонизмом понять, что именно пошло не так.

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

Какие программы нужны для UI-дизайна

Чтобы качественно выполнять свою работу, специалисту желательно освоить несколько основных программ. 

• Figma. База любого дизайнера. Именно здесь создают экраны, собирают кликабельные прототипы и хранят дизайн-системы. Программа работает прямо в браузере и позволяет работать со всей командой одновременно. 
• Adobe Illustrator. Инструмент для векторной графики. Здесь дизайнер с нуля отрисовывает уникальные иконки, сложные иллюстрации и логотипы, которые потом можно перенести в интерфейс без потери качества.
• Adobe Photoshop. Нужен для растровой графики. В нем обрабатывают фотографии для карточек, вырезают объекты с фона и создают сложные визуальные композиции. 

Главное о пользовательском интерфейсе

1. Интерфейс — это способ для человека взаимодействовать с приложением или сайтом. Хороший интерфейс всегда продуман: он не заставляет пользователя ломать голову и сам ведет его к цели. 
2. В основе любого макета лежат строгие правила: единообразие, простота, доступность для всех и постоянная обратная связь с пользователем.
3. UI-дизайнер ищет визуальные решения, разрабатывает концепции, прорабатывает графические элементы и создает дизайн-системы. 
4. Интерфейс собирается не хаотично, а из единой библиотеки, чтобы продукт выглядел одинаково на любых устройствах.
5. Для UI-дизайна нужно освоить Figma, Adobe Illustrator и Photoshop. 

FAQ