Визуальные разделители - элементы макета, которые помогают организовать контент на экране, разделив его части.
В статье рассказывается о самых популярных видах визуальных разделителей и о том, как они работают.
Подписывайся на наш Телеграм канал и паблик ВК и узнавай первым о новых событиях!
Что такое визуальный разделитель?
Визуальные разделители — это элементы макета, которые помогают разделить контент на группы, разделы или части. С их помощью дизайнер может организовать страницу в соответствии с типичными паттернами визуального восприятия (visual perception) и сделать ее понятной и удобной для пользователей.
Наряду с другими элементами разделители играют большую роль в создании четкой визуальной иерархии (visual hierarchy). Например, с ними легче определить отношение частей контента между собой: сходство, близость, порядок и т. д.
Также разделители важны для UX: часто они формируют визуальные контейнеры (visual containers), выглядящие кликабельными, что особенно важно для мобильных интерфейсов.
Виды разделителей по дизайну
Говоря о разделителях, мы можем проанализировать их с точки зрения двух аспектов: их внешнего вида и функции. Если говорить о визуальной стороне, существует пять основных и широко используемых способов разделения контента в пользовательских интерфейсах:
С незапамятных времен линии — один из самых распространенных методов разделения частей контента как в печатной продукции, так и в цифровых интерфейсах. Они легко распознаются пользователями в этой роли.
Пример разделительной линии на странице поиска Гугл
С другой стороны, этот вид разделителей представляется весьма простым и далеким от оригинальности. Довольно часто дизайнеры стремятся найти другие способы разделения контента. Рекомендуется использовать линии только в том случае, если другие способы разделения контента оказываются неэффективными. Слишком большое количество линий способно создать на экране визуальный шум (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).
Либо вы можете выбрать любой бесплатный шаблон с уже готовыми разделителями и просто переделать дизайн под себя.
Вместо заключения
При выборе типа визуального разделителя для вашего макета следует учитывать два важных фактора:
Высоких вам конверсий!
Источник
В статье рассказывается о самых популярных видах визуальных разделителей и о том, как они работают.
Подписывайся на наш Телеграм канал и паблик ВК и узнавай первым о новых событиях!
Что такое визуальный разделитель?
Визуальные разделители — это элементы макета, которые помогают разделить контент на группы, разделы или части. С их помощью дизайнер может организовать страницу в соответствии с типичными паттернами визуального восприятия (visual perception) и сделать ее понятной и удобной для пользователей.
Наряду с другими элементами разделители играют большую роль в создании четкой визуальной иерархии (visual hierarchy). Например, с ними легче определить отношение частей контента между собой: сходство, близость, порядок и т. д.
Также разделители важны для UX: часто они формируют визуальные контейнеры (visual containers), выглядящие кликабельными, что особенно важно для мобильных интерфейсов.
Виды разделителей по дизайну
Говоря о разделителях, мы можем проанализировать их с точки зрения двух аспектов: их внешнего вида и функции. Если говорить о визуальной стороне, существует пять основных и широко используемых способов разделения контента в пользовательских интерфейсах:
- линии
- цвет
- негативное пространство (negative space)
- тени/объем
- изображения
С незапамятных времен линии — один из самых распространенных методов разделения частей контента как в печатной продукции, так и в цифровых интерфейсах. Они легко распознаются пользователями в этой роли.
Пример разделительной линии на странице поиска Гугл
С другой стороны, этот вид разделителей представляется весьма простым и далеким от оригинальности. Довольно часто дизайнеры стремятся найти другие способы разделения контента. Рекомендуется использовать линии только в том случае, если другие способы разделения контента оказываются неэффективными. Слишком большое количество линий способно создать на экране визуальный шум (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).
Либо вы можете выбрать любой бесплатный шаблон с уже готовыми разделителями и просто переделать дизайн под себя.
Вместо заключения
При выборе типа визуального разделителя для вашего макета следует учитывать два важных фактора:
- Ненавязчивость: разделители не должны отвлекать внимание пользователей от контента. Их цель — поддерживать визуальную «чистоту» макета. Таким образом, разделитель должен быть заметным, но не кричащим.
- Умеренная частота: слишком большое количество визуальных разделителей, особенно если они представляют дополнительный элемент макета, как это делают линии, могут создавать визуальный шум и делать дизайн утомительным для глаз пользователей. При возможности отдавайте предпочтение негативному пространству вместо линий. Не переусердствуйте с цветами. Стремитесь к гармонии и последовательности (consistency).
Высоких вам конверсий!
Источник
