Знакомимся с новым компонентом.
Чекбоксы и радиобаттоны — привычные компоненты, которые мы постоянно встречаем на сайтах и в приложениях. Однако у них есть ряд недостатков. Но как же найти альтернативное, более удобное и функциональное решение? На помощь приходят чипы.
Из статьи вы узнаете:
- что такое чипы,
- какими преимуществами они обладают,
- как разместить их в интерфейсе,
- какие варианты оформления чипов существуют и т.д.
А здесь вы можете почитать, что эффективнее: радиобаттоны или слайдер с ползунком.
Стандартные чекбоксы и радиобаттоны ушли в прошлое. Они устарели и являются не слишком удобными в использовании. Попасть курсором или пальцем по таким интерактивным элементам довольно трудно, поскольку они, как правило, не отличаются большим размером.
Люди, которые не разбираются в технологиях, путаются, поскольку им сложно разобраться, в чем разница между точками и галочками. Именно поэтому на смену чекбоксам и радиобаттонам приходит новое более удачное решение — чипы (chips).
Проще нажать и курсором, и пальцем
Радиобаттоны и чекбоксы имеют небольшую область нажатия без видимых границ. Взаимодействовать с ними не так просто, поскольку наши пальцы намного больше указанной цели и не помещаются внутри нее.
Чипы же, в свою очередь, могут похвастаться довольно большой областью нажатия с четкими границами, поэтому нажимать их проще как пользователям компьютеров, так и мобильных устройств. В этом случае человек отлично видит цель и поэтому способен с большой вероятностью попасть по ней.
Когда пользователь нажимает на чип или касается его, появляется визуальный индикатор выбора. Галочка — в случае множественного выбора, более толстый контур, если можно отдать предпочтение лишь одному варианту ответа. Таким образом, стиль подсказок отражает разные возможности.
Проще дифференцировать
Вместо того чтобы использовать туманные термины "радиобаттон" и "чекбокс", лучше разграничивать "одиночный выбор" и "множественный выбор".
В первом случае речь идет о взаимоисключающих элементах (по аналогии с радиобаттонами), а во втором — о ситуациях, когда ответы дополняют друг друга (по аналогии с чекбоксами).
Гибкое расположение
Вы можете расположить чипы как по вертикали, так и по горизонтали. В первом случае у вас получится простой список, а во втором — одна или несколько строк.
Чекбоксы и радиобаттоны практически всегда представляют собой списки. Строки же позволяют разместить и отобразить множество опций, не занимая слишком большое пространство по вертикали.
Кроме того, такой интерфейс выглядит менее перегруженными, поскольку вокруг каждой текстовой метки есть достаточно свободного места, что облегчает восприятие контента.
Варианты оформления
Вы можете выбрать один из следующих вариантов оформления для ваших чипов.
Падающая тень помогает показать визуальную глубину, это наиболее деликатное решение. Контурные чипы имеют более заметную границу. Последний вариант — сплошная заливка, которая становится контрастной, когда элемент выбран.
Используйте пользовательские компоненты
Чипы не являются нативным компонентом интерфейса, поэтому вам придется самостоятельно разрабатывать их дизайн, что даже к лучшему.
Это позволит вам создать собственную UI-библиотеку для вашего бренда, а также выделиться на фоне приложений конкурентов и обеспечить единообразный целостный опыт взаимодействия на всех экранах и платформах.
.webp)
.svg)
