Главная / Система дизайна / Подсказка
Подсказка Система дизайна
Добавьте объяснение, не скрывая необходимую информацию.
Пунктов проверки: 6 · Групп: 2 Сохранить чек-лист Скопировать ссылку
Контрольный список Пример
Содержание чек-листа Структура и значение Взаимодействие и удобство использования
Прогресс проверки
Сбросить
Прогресс автоматически сохраняется в этом браузере.
Включите JavaScript для отметки пунктов, сохранения и экспорта чек-листа.
РЕКОМЕНДАЦИИ
Как проверять 01 Проверка аннотаций без использования мыши Перейдите к значку с помощью клавиатуры и попробуйте на сенсорном экране. Подписи должны открываться соответствующим образом; Информация, необходимая для принятия решения, должна появиться непосредственно в интерфейсе.
ПРИМЕРЫ
Примеры использования Интерпретация индекса Значок рядом с «Процент выполнения» открывает краткое пояснение при фокусировке; Метка индекса и значение остаются читаемыми, когда заголовок закрыт.
Варианты и сценарии использования Открытие подсказки Дополнительная информация Удобная ширина Положение относительно элемента Подходящие случаи Открытие подсказки При необходимости открывайте подсказку наведением и фокусом; обязательную информацию показывайте сразу.
Проверьте управление только клавиатурой и только касаниями: смысл действия должен оставаться понятным.
Пример У кнопки со значком есть доступное имя; подсказка добавляет сочетание клавиш, а не заменяет название.
Дополнительная информация Объясняйте действие, не перекрывая содержимое. Дополнительная информация Подсказка кратко объясняет деталь, не повторяя подпись и не размещая внутри сложные действия.
Прочитайте подпись и подсказку: дополнение должно отвечать на ещё неясный вопрос.
Пример Подсказка показателя сообщает время обновления, а не повторяет слово «Выручка».
Дополнительная информация Объясняйте действие, не перекрывая содержимое. Объясняйте действие, не перекрывая содержимое. Удобная ширина Выбирайте ширину по длине текста и разрешайте переносы, не превращая подсказку в слишком узкий столбец.
Проверьте длинный перевод и маленький экран: подсказка не должна выходить за горизонтальные границы.
Пример Краткая инструкция может занимать две строки в компактном блоке.
Дополнительная информация Объясняйте действие, не перекрывая содержимое. Объясняйте действие, не перекрывая содержимое. Положение относительно элемента Размещайте подсказку рядом с поясняемым элементом, меняйте сторону у края и не перекрывайте нужный текст.
Сфокусируйте значок у края окна: подсказка должна целиком помещаться в видимой области.
Пример У правого края подсказка перемещается влево от кнопки.
Подходящие случаи Используйте подсказки для дополнительной помощи; ошибки, требования к вводу и важные предупреждения размещайте иначе.
Отключите подсказки: пользователь должен завершить задачу, не пропустив обязательные условия.
Пример Требования к паролю показаны под полем, а сочетание клавиш кнопки можно разместить в подсказке.
Включить уведомления Дополнительная информация Объясняйте действие, не перекрывая содержимое.