Принцип визуальной иерархии

Визуальная иерархия помогает человеку быстро ориентироваться на странице и отделять важное от второстепенного.

Когда страница следует принипу визуальной иерархии, внешний вид элементов отражает взаимоотношения между этими элементами:

Чем важнее вещь, тем она заметнее

Крупнее кегль, жирное начертание, выделено цветом, пустым пространством, близостью к верху страницы.

Визуальная иерархия: чем важнее вещь, тем она заметнее
Заголовок сайта доминирует над содержимым
PR·CY
Визуальная иерархия: чем важнее вещь, тем она заметнее
На карточке товара выделено основное: название, фотография, цена
Мишутка

Вещи, связанные логически, также связаны и визуально

Общий заголовок, схожие стили, отдельная область страницы.

Визуальная иерархия: логическая группировка
Фичи в списке оформлены одинаково: черное контурное изображение + серая надпись по центру
PR·CY
Визуальная иерархия: логическая группировка
Категории товаров сгруппированы в отдельной области слева
Мишутка

Визуальная «вложенность» показывает отношение «целое-часть»

Визуальная иерархия: вложенность
Секции подчинены заголовку, а категории — секциям
Яндекс.Маркет

Если нет иерархии

Когда принцип визуальной иерархии нарушен, страница разваливается. Второстепенное начинает доминировать над главным, целое распадается на части, логически различные элементы смешиваются между собой. Чтобы увидеть эти проблемы, посмотрите на страницу целиком в мелком масштабе.

Нарушена визуальная иерархия
Без иерархии страница превращается в простыню с цветными пятнами

См. также:

Назойливый попап →

Рассылка об интерфейсах без шелухи. Для дизайнеров, разработчиков и продуктоводов.