interfaces.prjctr | tykhonko week | Badges, Pills, Chips, Tags — у чому різниця і як їх використовувати?Га...

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.