Зарегистрируйтесь и оплатите любой тариф LPgenerator
Получите в подарок 3 бонуса на 9 470 руб.

Визуальные разделители на лендингах: виды и советы по дизайну

Визуальные разделители на лендингах: виды и советы по дизайну

Правильное отображение контента на лендинге имеет большое значение для восприятия оффера. Данная статья посвящена визуальным разделителям (visual dividers) — элементам макета, помогающим организовать контент на экране, разделив его части.

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

Содержание статьи

Что такое визуальный разделитель?

Виды разделителей по дизайну

1. Линии
2. Негативное пространство
3. Цветовой контраст
4. Тени и объем
5. Изображения

Виды разделителей по функциям

1. Разделители без полей
2. Вложенные разделители
3. Разделители с подзаголовками
4. Промежуточные разделители

Добавляем разделители на лендинг

Вместо заключения

Что такое визуальный разделитель?

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

Наряду с другими элементами разделители играют большую роль в создании четкой визуальной иерархии (visual hierarchy). Например, с ними легче определить отношение частей контента между собой: сходство, близость, порядок и т. д.

Также разделители важны для UX: часто они формируют визуальные контейнеры (visual containers), выглядящие кликабельными, что особенно важно для мобильных интерфейсов.

Виды разделителей по дизайну

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

  • линии
  • цвет
  • негативное пространство (negative space)
  • тени/объем
  • изображения

1. Линии

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

Пример разделительной линии на странице поиска Гугл
Пример разделительной линии на странице поиска Гугл

С другой стороны, этот вид разделителей представляется весьма простым и далеким от оригинальности. Довольно часто дизайнеры стремятся найти другие способы разделения контента. Рекомендуется использовать линии только в том случае, если другие способы разделения контента оказываются неэффективными. Слишком большое количество линий способно создать на экране визуальный шум (visual noise) и ненужное визуальное напряжение.

Главная страница сервиса использует в качестве визуальных разделителей едва заметные горизонтальные линии для отделения блоков контента и облегчения «сканируемости» их структуры
Главная страница сервиса использует в качестве визуальных разделителей едва заметные горизонтальные линии для отделения блоков контента и облегчения «сканируемости» их структуры

2. Негативное пространство

Негативное пространство (или пустое, белое пространство, white space) — это пространство на экране вокруг и (часто) внутри элементов. При этом пустой не значит пассивный или потраченный впустую: как и любой другой элемент экрана, он поддерживает положительный пользовательский опыт (user experience).

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

Элементы сайта разделяются без каких-либо дополнительных визуальных элементов, с помощью одного лишь пустого пространства
Элементы сайта разделяются без каких-либо дополнительных визуальных элементов, с помощью одного лишь пустого пространства

3. Цветовой контраст

Еще одним эффективным видом визуального разделителя является цветовой контраст. Цвета и их сочетания несут большой психологический потенциал в дизайне: они способны усиливать оффер, создавая соответствующее настроение. Контраст является одним из ключевых факторов, влияющих на сканируемость (scannability) и визуальную иерархию страницы или экрана. Цветовой контраст способен эффективно разделять различные опции, элементы или интерактивные зоны, выполняя таким образом функцию визуального разделителя. Вот почему в последние годы так популярны разделенные экраны (split screens). И это объясняет популярный подход к организации лендингов и одностраничных сайтов в виде блоков контента на контрастном цветном фоне.

Цветовой контраст в качестве разделителя
Цветовой контраст в качестве разделителя

4. Тени и объем

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

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

5. Изображения

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

Использование изображений в качестве разделителей
Использование изображений в качестве разделителей

Виды разделителей по функциям

Функциональные виды разделителей определяются уровнем иерархии, на котором они работают.

1. Разделители без полей

Разделители без полей (full bleed dividers) отделяют разделы и охватывают всю длину экрана.

2. Вложенные разделители

Вложенные разделители (inset dividers) отделяют части связанного контента с помощью элементов, располагающихся на одной линии с заголовком, меню или подстраивающихся под конкретный вид текстового контента на странице. 

Вложенные разделители

3. Разделители с подзаголовками

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

4. Промежуточные разделители

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

Промежуточные разделители

Добавляем разделители на лендинг

Все описанные виды разделителей можно реализовать в конструкторе лендингов LPgenerator. Горизонтальные линии можно вставить при помощи инструмента «Блок» и его свойства «Изображение» — у блока ставится нужная ширина при минимальной высоте, например 800*2 пикселя, а далее в него добавляется линия из встроенного банка картинок:

Добавляем разделители на лендинг

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

Либо вы можете выбрать любой бесплатный шаблон с уже готовыми разделителями и просто переделать дизайн под себя.

Вместо заключения

При выборе типа визуального разделителя для вашего макета следует учитывать два важных фактора:

  1. Ненавязчивость: разделители не должны отвлекать внимание пользователей от контента. Их цель — поддерживать визуальную «чистоту» макета. Таким образом, разделитель должен быть заметным, но не кричащим.
  2. Умеренная частота: слишком большое количество визуальных разделителей, особенно если они представляют дополнительный элемент макета, как это делают линии, могут создавать визуальный шум и делать дизайн утомительным для глаз пользователей. При возможности отдавайте предпочтение негативному пространству вместо линий. Не переусердствуйте с цветами. Стремитесь к гармонии и последовательности (consistency).

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

Высоких вам конверсий! 

По материалам: tubikstudio.com

blog comments powered by Disqus
Зарегистрируйтесь и оплатите любой тариф LPgenerator
Получите в подарок 3 бонуса на 9 470 руб.
copyright © 2011–2019 by LPgenerator LLC. Все права защищены
Запрещено любое копирование материалов ресурса без письменного согласия владельца — ООО "ЛПгенератор".
animation-santa
Новый год на LPgenerator:

50% скидка на любой тариф по промокоду LPGNY2020