Чипсы — это небольшие и, казалось бы, неприметные текстовые элементы, обладающие огромной силой в мире пользовательского интерфейса. Они играют многогранную роль, позволяя нам маркировать, категоризировать, выбирать, фильтровать и даже запускать действия. Тем самым они становятся ключевым инструментом для организации информации, направления действий пользователей и оптимизации общей удобства интерфейса. Изучение различных типов чипсов и умение внедрять их в дизайн может значительно улучшить пользовательский опыт.
Чипсы и кнопки (Chips vs buttons)
Вы можете задаться вопросом, чем отличаются чипсы от кнопок, ведь выглядят они почти одинаково. Несмотря на визуальную схожесть, чипсы и кнопки выполняют разные функции. Чипсы, такие как «Забронировать столик» или «Заказать доставку» в приложении ресторана, зависят от текущего контекста и помогают пользователю в рамках его текущей задачи. Обычно они представлены в виде группы интерактивных элементов.
В то же время кнопки, такие как «Сохранить» и «Отменить» в диалоговом окне, предлагают стандартные действия для важных шагов или продвижения вперёд. Кнопки необходимы для существенных переходов, таких как переход на следующий или предыдущий этап.
Главное правило — использовать чипсы для дополнительных опций и кнопки для важных действий, сохраняя сбалансированность и удобство интерфейса.
Чипс-действие (Action chip)
Также называемые вспомогательными или рекомендательными чипсами, чипсы-действия похожи на кнопки, поскольку нажатие на них запускает действие, обычно перенаправляющее пользователя на другую страницу или виджет. Чипсы-действия более компактны по сравнению с кнопками, благодаря чему их легко разместить в строку. Это компактное оформление полезно, когда нужно предложить пользователю сразу несколько кратких вариантов, не занимая при этом много места на экране.
Во время взаимодействия вспомогательные чипсы могут выполнять следующие функции:
- Трансформация: могут превращаться в модальные окна или переходить в полноэкранные режимы нового контента.
- Корректировка: могут менять свой вид для отображения дополнительных результатов непосредственно в интерфейсе.
- Запуск действия: могут запускать действия или показывать прогресс и подтверждение выполненного действия.
- Динамический текст: начинают с глагола и могут динамически менять текст в зависимости от состояния (например, с «Сохранить» на «Сохранено»).
- Размещение: появляются после основного контента, например под карточкой, или постоянно отображаются внизу экрана.
Чипсы ввода (Input chips)
Вы замечали, как при вводе адреса электронной почты контакта в Gmail появляется полная информация о нём, а при выборе адрес форматируется в аккуратное имя? Это и есть чипс ввода. Его задача — облегчать использование полей ввода, предлагая подсказки и проверяя известные данные.
Чипсы ввода поддерживают редактирование, позволяя пользователям изменять их содержание, например исправлять адрес электронной почты. В режиме редактирования чипс временно возвращается к виду текстовой строки. Редактирование начинается после взаимодействия с чипсом — либо при его выборе, либо при втором взаимодействии после первоначального выделения. Кроме того, такие чипсы могут расширяться при клике, отображая более подробную информацию.
Совет! Позвольте пользователям легко отменить выбор чипса ввода, добавив кликабельный значок крестика (x) в конце элемента.
Фильтрующие чипсы (Filter chips)
Фильтрующие чипсы позволяют пользователям уточнять и сужать контент по конкретным критериям или категориям. Они могут быть хорошей альтернативой сегментированным кнопкам или чекбоксам при просмотре списка или результатов поиска. Также может быть выбран и один чипс, что является альтернативой сегментированным кнопкам, радиокнопкам или выпадающим спискам с одиночным выбором.
Однако избегайте смешивания поведения разных наборов чипсов. Все наборы чипсов на одной странице должны быть либо с одиночным, либо с множественным выбором. Если фильтрующий чипс используется совместно с меню, то при нажатии на него раскрывается список доступных для выбора опций.
Например, на сайте онлайн-магазина фильтрующие чипсы могут включать такие категории, как «Ценовой диапазон», «Бренд» или «Размер». Пользователи могут нажимать на эти чипсы, чтобы отфильтровать товары и просматривать только те, которые соответствуют выбранным критериям.
Фильтрующие чипсы могут содержать иконку-крестик (x) для снятия выбора или стрелку, раскрывающую меню с дополнительными опциями. Они могут располагаться горизонтально и переноситься на несколько строк, что делает их подходящими для различных компоновок интерфейсов и улучшает пользовательский опыт, поддерживая интуитивность и организованность процесса фильтрации.
Совет! Вы можете дополнительно отображать в чипсах количество доступных элементов в каждой категории.
Неинтерактивные чипсы (Non-interactive chips)
Базовый неинтерактивный чипс представляет собой простую текстовую метку, предоставляющую информацию о категории или теме, к которой относится элемент. Он служит навигационным ориентиром в интерфейсах, особенно когда речь идёт о разнообразном контенте, который может перегружать пользователя.
Например, на новостном сайте статьи о технологиях могут быть отмечены базовым тегом «Технологии». Столкнувшись с таким чипсом, пользователи сразу понимают основную категорию контента.
Рекомендательные чипсы (Suggestion chips)
Рекомендательные чипсы полезны для направления пользователей, предлагая им динамически формируемые подсказки, такие как возможные варианты ответов или фильтры поиска. Эти чипсы помогают пользователям быстро и эффективно сформулировать свой запрос, улучшая их пользовательский опыт. Например, в почтовом приложении рекомендательные чипсы могут предлагать быстрые ответы, такие как «Спасибо за ответ», «Скоро свяжусь» или «Напиши мне срочно». Это позволяет пользователям отвечать быстро, не набирая текст полностью вручную.
При создании рекомендательных чипсов лучше всего использовать существительные или короткие, понятные фразы. Старайтесь, чтобы длина каждого чипса была не более 20 символов, обеспечивая лёгкость чтения и удобство взаимодействия. Краткость помогает поддерживать интерфейс чистым и удобным для пользователя.
Используйте лаконичные метки чипсов
При работе с текстовыми метками выбирайте существительные или короткие фразы в зависимости от контекста. Используйте метки, которые чётко отражают суть категории или действия, связанного с чипсом. Например, в интерфейсе блога выбирайте лаконичные метки, такие как «Технологии», «Здоровье» или «Путешествия». Для действий отдавайте предпочтение коротким формулировкам, например, вместо длинной фразы «Забронировать столик в ресторане» используйте «Забронировать столик».
Совет! Если сократить текст чипса не получается, установите максимальную ширину, сворачивая длинные тексты с многоточием, а полный текст раскрывайте при наведении курсора во всплывающей подсказке (tooltip).
Оформляйте чипсы удобно и понятно
Чтобы чипсы были визуально привлекательными и удобными в использовании:
- Используйте подходящие и понятные начальные иконки (leading) и конечные иконки (trailing). Например, звёздочка в начале чипса для обозначения «Избранное» и крестик в конце, чтобы удалить чипс.
- Рассмотрите закруглённые края для эстетически приятного вида — хотя это и не является обязательным правилом, большинство UI-элементов используют именно такую форму, поэтому пользователи интуитивно воспринимают её лучше.
- Создавайте чёткое различие между фоном чипса и цветом страницы. Используйте заметные рамки или тени, чтобы чипсы были достаточно заметными, но не слишком бросались в глаза. Помните, что чипсы предназначены только для второстепенных действий и должны быть стилизованы соответствующим образом.
- Убедитесь, что коэффициент контраста текста и фона чипса составляет не менее 3:1 для обеспечения хорошей читаемости.
Чётко отображайте изменения состояния чипсов
Основные состояния чипсов включают:
- Обычное состояние (по умолчанию)
- Состояние при наведении (hover)
- Активное состояние (при взаимодействии)
- Состояние фокуса (выбран для действия)
- Отключённое состояние (недоступен для взаимодействия)
Правильное отображение этих состояний крайне важно для удобства использования и доступности, обеспечивая удобство и отзывчивость интерфейса.
Эффективные способы демонстрации изменения состояния:
- Использование разных цветов или оттенков для разных состояний
- Микровзаимодействия в ответ на действия пользователей
- Небольшие изменения размера элемента
- Использование теней, создающих эффект приподнятости или нажатия
- Использование рамок или контуров для обозначения состояния фокуса или активности
Делайте чипсы удобными для сенсорных экранов
Согласно рекомендациям Material Design, минимальный рекомендуемый размер сенсорных элементов составляет 48×48 dp (48×48 пикселей при плотности экрана 1x). Убедитесь, что ваши чипсы соответствуют этому требованию. Для дополнительного удобства взаимодействия и предотвращения ошибочных нажатий обеспечивайте достаточные и одинаковые отступы не менее 8 dp (8 пикселей при плотности экрана 1x) между чипсами.
Совет! Соблюдайте минимальный отступ 8 dp между чипсами.