Компоненты — это строительные блоки интерфейса. Они включают кнопки, чекбоксы, Текстовые метки, поля ввода, карточки и многие другие элементы. Каждый из них обладает уникальной анатомией и выполняет определенную функцию, помогая пользователям достигать своих целей.
В чем разница между радиокнопками и чекбоксами? Карточками и контейнерами? Ссылками и гиперссылками? Понимание того, как работает каждый компонент и где его следует применять, — это мощный навык. Он не только облегчит общение с дизайнерами, но и повысит уверенность в профессиональных компетенциях.
Кнопки (Buttons)
В цифровых продуктах кнопки обозначают действия, которые могут выполнить пользователи. Обычно они имеют прямоугольную, квадратную или круглую форму с текстовой меткой или иконкой. Кнопки позволяют пользователям выполнять действия одним кликом или касанием.
Кнопка также может быть представлена только иконкой или текстовой меткой. Текстовые кнопки и ссылки могут выглядеть схоже, но выполняют разные функции. Нажатие кнопки изменяет состояние системы (на клиентской или серверной стороне), тогда как нажатие ссылки просто перенаправляет пользователя на другую страницу, не изменяя состояние системы. Кроме того, ссылки чаще встречаются в тексте и могут быть длиннее по содержанию.
Навигация (Navigation)
Навигация определяет, как пользователи перемещаются по приложению или веб-сайту. Она должна быть последовательной и единообразной на всех страницах продукта.
Навигация может включать различные навигационные компоненты, такие как:
- Навигационные панели
- Боковые панели (sidebars)
- Хлебные крошки (breadcrumbs)
- Меню
- Другие элементы, помогающие пользователям находить нужный контент
Бургер-меню (Hamburger menus)
Бургер-меню — это кнопка, часто встречающаяся на веб-сайтах и в мобильных приложениях. При нажатии или касании оно открывает боковую панель или выпадающее меню. Как правило, оно представлено тремя параллельными горизонтальными линиями, расположенными друг над другом. Иногда рядом с ним может находиться надпись «Меню» или дополнительная иконка, указывающая на возможность взаимодействия, например стрелка.
Такое меню получило свое название из-за схожести с упрощенным изображением гамбургера. Оно позволяет компактно скрывать навигационные ссылки, предлагая удобный способ доступа к разделам сайта или приложения. Этот дизайн особенно полезен в мобильных интерфейсах, где пространство на экране ограничено.
Хлебные крошки (Breadcrumbs)
Хлебные крошки (breadcrumbs) — это вспомогательный навигационный элемент, который отображается в виде последовательности ссылок, разделенных разделителями (обычно иконками >). Подобно сказке о Гензеле и Гретель, хлебные крошки создают путь, помогая пользователям ориентироваться и понимать, где они находятся.
Последний элемент в цепочке должен отличаться от остальных, так как он обозначает текущую страницу пользователя. Однако он не должен быть ссылкой.
Карточки (Cards)
Карточка (card) — это UI-компонент, содержащий информацию и действия, относящиеся к одной теме. В интерфейсе карточки напоминают коллекционные карточки в реальной жизни: они имеют прямоугольную форму и часто включают изображение и текст. В карточках также могут находиться интерактивные элементы, такие как кнопки «Подробнее» или «Читать далее».
Одним из ярких примеров сайта, активно использующего карточки, является Pinterest.
Чекбоксы (Checkboxes)
Чекбоксы — это элементы управления выбором, которые часто встречаются в формах. Отдельные чекбоксы часто используются для получения согласия пользователей на Условия использования и Политику конфиденциальности. При активации чекбокс отображает небольшую галочку внутри квадрата, а при отключении остается пустым.
В отличие от радиокнопок (radio buttons), чекбоксы позволяют пользователям выбирать сразу несколько вариантов и включать или отключать каждый из них.
Контейнеры (Containers)
Контейнер (container) — это компонент, который делит контент на логически значимые секции. Подобно тому, как контейнеры помогают организовать кухонные принадлежности, UI-контейнеры структурируют и группируют контент в интерфейсе.
Контейнеры могут содержать текст, изображения или интерактивные элементы. Жесткие контейнеры (rigid containers) ограничивают размер и обрезку элементов внутри себя, тогда как гибкие контейнеры (flexible containers) расширяются в зависимости от содержимого. Именно так работает адаптивный дизайн: все элементы размещаются в контейнерах, чтобы подстраиваться под размер экрана и ориентацию устройства, обеспечивая согласованность интерфейса.
Меню (Menus)
Меню — это функциональный элемент интерфейса, предоставляющий список различных действий, которые могут выполнить пользователи. Обычно оно появляется при взаимодействии с определенными элементами управления, такими как кнопки или вкладки. Большинство навигационных меню содержат текстовые команды с иконками, а иногда и вспомогательный текст для дополнительного контекста.
Преимущество меню заключается в их эффективности: они позволяют разместить множество опций в компактном пространстве, сохраняя интерфейс чистым и удобным для навигации. Это делает их незаменимыми как в настольных, так и в мобильных интерфейсах, где пространство на экране ограничено.
Переключатели (Toggles)
Переключатели (toggle buttons) объединяют две (иногда три) функции в одном элементе. В рекомендациях Apple Human Interface Guidelines аналогичный компонент называется сегментированными кнопками (segmented buttons).
Обычно все кнопки в группе имеют одинаковую ширину. Они ведут себя подобно радиокнопкам (radio buttons) — в каждой группе можно выбрать только одну опцию. Выбранный вариант обычно выделяется цветом или наложением. В отличие от переключателей, сегментированные кнопки позволяют выбирать несколько значений одновременно.
Поле ввода (Input)
Поля ввода (inputs) — это важные элементы интерфейса, позволяющие пользователям вводить различные данные, такие как имя, пароль, email, дату или время. Они чаще всего встречаются в формах и диалоговых окнах.
Их основная задача — собирать информацию максимально эффективно и удобно для пользователя. Поля ввода бывают разными в зависимости от типа данных и потребностей пользователей. Например, текстовые поля предназначены для ввода общего текста, поля пароля скрывают вводимые символы, а специализированные поля используются для ввода дат и чисел.
Ключевые факторы успешного использования полей ввода — это четкость и контекст. Текстовые метки, плейсхолдеры (placeholders) и визуальные подсказки, такие как иконки, помогают пользователям легко ориентироваться в интерфейсе и вводить данные без затруднений.
Текстовые метки (Labels)
Текстовые метки (label) — это статичный текст, который можно прочитать и скопировать, но нельзя изменить. Метки отображают текст по всему интерфейсу — в кнопках, пунктах меню и на экранах (views). Их цель — помочь пользователям понять текущий контекст и доступные действия.
Например, в кнопке метка обычно указывает, что произойдет при нажатии: «Редактировать», «Отмена», «Отправить».
Радиокнопки (Radio Buttons)
Радиокнопки (radio buttons) представляют собой круглые элементы управления с обводкой. При выборе одного из вариантов внутри него появляется точка или заполненный круг.
В отличие от чекбоксов, радиокнопки позволяют выбрать только один вариант из нескольких. После выбора опцию нельзя вернуть в невыбранное состояние. Чтобы избежать ситуации, когда пользователь не может отменить действие, рекомендуется добавлять вариант «Ничего из вышеперечисленного» или аналогичную опцию.
Гиперссылки (Hyperlinks)
Гиперссылка (hyperlink) — это слово, фраза или изображение, на которое можно кликнуть, чтобы перейти на другую страницу или в определенный раздел текущей страницы.
Текст, составляющий ссылку, называется ссылочным текстом (link text). Как правило, он выделяется цветом и/или подчеркиванием, что делает его легко узнаваемым.