Scott
Что такое теги
Тег — это короткая метка, связывающая объект с темой, признаком или категорией. Как часть метаданных он помогает классифицировать контент. В интерфейсе тег может быть просто подписью, а может открывать связанную подборку или включать фильтр. От этого зависит, должен ли он выглядеть как интерактивный элемент.
Категории часто задают общую структуру сайта, а теги позволяют описывать материал по нескольким признакам. В некоторых продуктах пользователи создают теги сами; в других выбирают их из готового набора. Это помогает находить собственные материалы и делиться понятным способом классификации с коллегами.
Что такое дизайн пользовательского интерфейса с тегами
Дизайн тегов включает их внешний вид и поведение: как они обозначают объекты, помогают фильтровать содержимое и показывают выбранные условия. Хорошо оформленная метка легко читается и не маскирует действие. Например, информационный статус не должен выглядеть как фильтр, если нажатие на него ничего не меняет.
Основные принципы создания пользовательского интерфейса с тегами
При проектировании тегов согласуйте текст, состав элемента, размеры и состояния. Следующие принципы помогают сохранить читаемость и порядок, когда меток становится больше или названия оказываются длиннее ожидаемого.
Небольшая длина
Используйте короткие, понятные названия. Тег должен обозначать один полезный признак, а не пересказывать весь материал. Кавычки сами по себе не делают его понятнее: важнее единое написание и отсутствие дублирующих синонимов. Не добавляйте метку только потому, что для неё есть место; она должна помогать пользователю находить или различать контент.
Состав компонентов
Обычно тег содержит текст, а при необходимости — значок перед ним и кнопку удаления. Первый значок может обозначать категорию или тип объекта; его смысл должен быть связан с подписью. Крестик у выбранного фильтра, в свою очередь, снимает это условие. Разведите действия «открыть подборку» и «убрать фильтр», если они встречаются рядом, и дайте кнопке удаления понятное имя, например «Убрать фильтр “Дизайн”».
Размеры и отступы
Задайте единые размеры текста, значков и внутренних отступов. Метки одной группы должны восприниматься как связанный набор, даже если подписи различаются по длине. У интерактивных тегов проверьте также область нажатия: маленький значок удаления не должен требовать точного попадания.
Скругление углов
Скруглённые углы — один из вариантов оформления, а не обязательное условие хорошего тега. Прямоугольная форма тоже уместна, если она согласуется с остальными компонентами. Важнее последовательно отличать метки от кнопок и полей, а не выбирать форму только ради декоративного эффекта.
Цвет и границы
Тег должен различаться на фоне страницы. Для этого можно использовать заливку, границу или умеренную тень. Проверьте читаемость текста и заметность выбранного состояния: одна тень или едва отличающийся оттенок не должны быть единственным способом понять, включён ли фильтр.
Длинный текст
Краткость полезна, пока она не скрывает смысл. Иногда название проекта, категории или документа нельзя сократить без потери информации. Для таких случаев заранее определите поведение длинной подписи.
Можно ограничить ширину тега и показать многоточие, но полный текст должен оставаться доступным. Подсказка только при наведении не решает задачу для клавиатуры и сенсорного экрана: предусмотрите раскрытие при фокусе и доступный способ прочитать название без наведения либо разрешите перенос текста. После удаления выбранного фильтра переводите фокус к следующему логичному элементу — соседнему фильтру или полю выбора, если меток больше нет. Основу клавиатурного поведения описывает руководство MDN (на английском).
Отступы между тегами
Определите и внешние отступы между тегами. Без них соседние подписи сливаются, а интерактивные элементы сложнее различать и нажимать. Используйте согласованные интервалы внутри группы и между строками, когда теги переносятся.
На примере ниже можно оценить, как расстояние между метками влияет на восприятие группы.
Как подготовить теги в Pixso
Принципы проще проверить на небольшом наборе реальных меток: короткой, длинной, выбранной и доступной для удаления. Такой набор покажет, сохраняется ли ясность компонента при изменении содержимого.
В Pixso можно подготовить варианты тега и согласовать их оформление на общем холсте. Соберите подпись, значок и элемент удаления в компонент, а рядом покажите состояния, которые нужны вашему фильтру. Так обсуждение будет опираться на конкретное поведение, а не только на цвет.
Настройте палитру и значения цветов, подберите значки и задайте отступы. Готовые ресурсы сообщества могут послужить исходным материалом, но их нужно адаптировать к вашим названиям и состояниям. Проверьте, не пропадает ли значок удаления и не нарушаются ли интервалы при длинной подписи.
Пять примеров дизайна тегов
Теги без значков
В первом примере используются теги без значков: синий текст размещён на светло-голубом фоне. Внутренние и внешние отступы отделяют подписи друг от друга. Такой вариант полезен для сравнения с более сложными тегами, когда одной текстовой метки достаточно.
Интерфейс проверки качества от Usrnk1
В интерфейсе проверки качества представлены два вида меток. Статусы различаются зелёной, синей и красной заливкой, а теги категорий используют белый или прозрачный фон, тёмную границу и значки перед текстом. При использовании такого подхода сохраняйте текстовое обозначение статуса: цвет не должен быть единственным носителем смысла.
Интернет-магазин Дианы Палавандишвили
В чёрно-белом интерфейсе магазина Дианы Палавандишвили теги-фильтры расположены горизонтально. Невыбранный вариант имеет светлый фон, чёрный текст и серую границу; выбранный — чёрный фон и белую подпись. Контраст состояний помогает показать активный фильтр. Отдельно проверьте, как пользователь снимает выбор и видит результат фильтрации.
Приложение для управления закладками от Гани Прадиты (Ghani Pradita)
В приложении для управления закладками Гани Прадиты используются цветные теги: фон выполнен в более светлом оттенке, чем текст. Это помогает визуально объединить метки с их категориями. При адаптации такого решения проверьте каждую пару текста и фона, а не только общий вид палитры.
Сообщество Rarible на Status
В примере сообщества Rarible на Status розовые теги и разные значки обозначают категории. Внутренние отступы отделяют значок от текста, а внешние — одну метку от другой. Этот пример полезен для сравнения тегов с иконками и первого, текстового варианта.
Бонус: Расширенные ресурсы пользовательского интерфейса тегов в сообществе Pixso
Ресурсы сообщества Pixso позволяют изучать разные способы оформления тегов и использовать подходящий пример как отправную точку. Выбирайте не самый яркий вариант, а тот, чья структура соответствует вашей задаче: категория, статус или выбранный фильтр.
Перед использованием проверьте доступность конкретного ресурса и условия его автора. Наличие бесплатного плана у редактора не означает, что любой материал можно использовать без ограничений. После переноса образца в свой проект замените демонстрационные подписи и проверьте нужные состояния.
Помимо тегов, в сообществе можно искать шаблоны других компонентов. Для текущей задачи достаточно собрать согласованный набор меток и проверить его на содержимом своего продукта, прежде чем распространять выбранный стиль на остальные экраны.
