Рабочий подход
Visual Hierarchy описывает порядок, в котором интерфейс привлекает внимание. Он сочетает размер, насыщенность, контраст, свободное пространство, расположение и плотность, а не опирается на один огромный заголовок или яркую кнопку. В источнике различаются основная, второстепенная, третичная и фоновая информация.
Это руководство по композиции для новых работ, а не замена тестирования существующего экрана. Типичные схемы сканирования и рекомендуемые различия в размерах — эвристики. Реальную иерархию нужно проверять с учётом задачи и аудитории, включая макеты, направление чтения в которых отличается от примеров «слева направо» в источнике.
Ожидаемые результаты
- Приоритизированная иерархия контента для одного экрана.
- Обоснование композиции с использованием нескольких сигналов внимания.
- Краткий чек-лист визуальной проверки и тестирования задач.
От брифа до проверки
- 01Ранжируйте контент
Выберите главное действие или сообщение и определите, что должно просматриваться следом или читаться по запросу.
- 02Назначьте визуальный вес
Согласованно меняйте размер, отступы, контраст и группировку, а не делайте заметным каждый элемент.
- 03Проверьте порядок чтения
Используйте тест с прищуриванием и наблюдение за реальными задачами, чтобы увидеть, следует ли внимание задуманной последовательности.