Вышли: 8-й тираж "Тексты, которым верят"
2-й тираж "Копирайтинг: сила убеждения"
Расчетное время чтения: 1 мин.

Визуальная иерархия на сайте

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

Визуальная иерархия включает в себя: 

  • Размер элементов 
  • Цвет
  • Контрастность блоков
  • Пустое пространство
  • Расстояние между элементами

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

Сталкиваясь с интерфейсом, пользователи реагируют очень быстро (в миллисекунды), интуитивно чувствуя, оставаться им или уйти. Если страница напоминает доску объявлений, мотивация разбираться в ней и искать необходимое снижается.

Как расположить элементы сайта правильно

  • Дайте странице дышать. Пустое пространство — ключ к минималистичному дизайну; используйте его, чтобы направить внимание на важные элементы.
  • Делайте равные расстояния между блоками. Пустое пространство должно иметь под собой какую-то логику и правила. Не допускайте, чтобы между одинаковыми элементами были разные расстояния — так сайт выглядит небрежно.
  • Придерживайтесь схемы F. Учитывайте, как и в каком порядке люди просматривают страницу. В языках, где читают слева направо, взгляд при чтении скользит по траектории, напоминающей букву F. Если блоки расположены не линейно, шаблон нарушается и пользователь рискует упустить часть информации.

Вывод

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

Теги:
Предыдущий урок: Когда можно дать покупателю совет?
Следующий урок: Почему лучше не использовать много столбцов?
В мае-июне 2022г. в издательстве "АСТ" выйдет 6-я книга 📕 П. Панды. Подробности чуть позже :)
This is default text for notification bar