Badges, Pills, Chips, Tags — у чому різниця і як їх використовувати?

Гайд від Віталія Фрідмана, засновника та креативного ліда у Smashing Media.🔹

UI компоненти бувають статичні та інтерактивні

Badges — завжди статичні, використовуються для статусу та оновлень. Наприклад, draft, new, pending, -7%↘. Tags — можуть бути і статичними, і інтерактивними. Статичні — для тем, ключових слів, інтерактивні — для посилань, фільтрів, вибору, дій. Tags часто називають chips або pills.🔹

Види тегів

Display tags показують дані. Наприклад, ключові слова, мітки, деталі. Data tags відображають числові дані. Наприклад, PDF 262 KB. Filter tags — це активні фільтри з опцією видалення. Selection tags для фільтрації або введення інформації.🔹

Основна різниця

Badges — для статусу, оновлень, лічильників. Tags/chips/pills — для інтерактивних фільтрів, вибору, дій. Щоб уникнути плутанини, використовуйте чіткі назви: «Filter tags» — краще, ніж просто «Tags», а «Status badges» зрозуміліше, ніж «Badges» чи «Pills».🔹

Дизайн правила

Статичні елементи не повинні виглядати як кнопки, а інтерактивні — як мітки. Мінімальний розмір інтерактивного елемента — 48×48px на мобільних. Відстань між інтерактивними елементами — щонайменше 8px. Це полегшить життя як дизайнерам і розробникам, так і кінцевим користувачам. За експертизою та фідбеком Віталія приходьте на UX Strategy Workshop. Старт — 27 листопада. Повний текст допису Віталія на LinkedIn.