Силовые линии в дизайне

Диаграмма Гутенберга

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

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

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

F-паттерн

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

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

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

Z-паттерн

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

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

1. Круг между оптическим и геометрическим центром

Объект в таком положении внимательно считывается пользователем. Это акцентное положение.

2. Круг начинает двигаться по диагонали вправо вверх

Любой контент, размещенный в этой точке силовой линии, будет считываться гораздо быстрее, чем в положении 1.

3. Объект находится в правом верхнем углу

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

Однако человек всегда обращает внимание на правую верхнюю часть экрана, поэтому информация будет точно считана.

4. Круг в левом верхнем углу

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

Контент, расположенный в этой точке, считывается в первую очередь и очень быстро.

5. Круг двигается по диагонали слева вниз

Объект находится на нисходящей диагонали, на него уже не оказывают давление края макета, но положение неустойчивое из-за движения вниз (кажется, что объект падает, а силовые линии его не держат).

Уровень восприятия информации в этой точке низкий.

6. Два равнозначных объекта на одной и той же диагонали, но в верхней и нижней частях

При наличии второго объекта того же рода самым логичным решением будет размещение второго круга на той же диагонали, но внизу страницы. Однако на практике второй элемент не только не уравновешивает первый, но и создает дополнительные напряженные связи внутри структуры. Глаз не воспринимает такую композицию как целостную.

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

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

Таким образом, два объекта разного размера создали на странице иерархическое взаимодействие, необходимое для композиционной гармонии.

8. Оба круга сдвигаются в сторону от силовых линий, сохранив взаимное расположение и размеры

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

Важно! Не стоит увлекаться использованием силовых линий. Выберите 2,3,4 на весь макет: главная страница, внутренняя и страницы 3 уровня. Все должно быть простой и понятной системой, потому что когда силовых линий много, расположение контента кажется ошибкой дизайнера. К тому же его сложно воспринимать.

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