Создание иерархии контента при помощи разделительных линий

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

Типы контента

Начнем с трех степеней разделения простого статического контента:

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

Интерактивность

Разделители увеличивают возможность восприятия списка, как кликабельного, потому что они создают визуальные контейнеры вокруг интерактивного текста относительно размера цели касания. Также на iOS часто используют шеврон для усиления призыва к действию, но не на Android.

Создание иерархии контента при помощи разделительных линий
С разделителями vs Без разделителей

Визуальный дизайн

У вас есть больше вариантов, чем просто, утилитарные линии. Современная мебельная компания может использовать изменение цвета фона, в то время, как производитель роскошных часов может использовать больше украшений и филигранности. Что подходит вашему бренду?

Создание иерархии контента при помощи разделительных линий

Если вы используете линии (как и мы), вот некоторые факторы, которые следует иметь в виду:

Разделители элементов

Разделители элементов обычно вставляются, чтобы визуально указать, что мысль все еще связана.

Начало вставки

И HIG от Apple и Material Design рекомендуют разделители элементов, которые совпадают с началом текста на начальной стороне (слева для языков чтения слева направо.) Я полагаю, что они делают это, чтобы создать визуальное пространство для изображений, но мне не нравится непоследовательность начала линии разделения элементов, когда отдельный экран состоит из иконок и обычного текста. Это заставляет группу элементов списка с иконками казаться более связанными, чем группа без них.

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

Создание иерархии контента при помощи разделительных линий
Контент vs Начало текста

Конец вставки

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

Добавление разделителей, как к интерактивным, так и статическим элементам создает более симметричную и согласованную компоновку.

Создание иерархии контента при помощи разделительных линий
Контент vs Край экрана

Исключения

Есть несколько исключений для вставок разделителя элементов:

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

Разделители разделов

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

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

Я настаиваю на том, чтобы сгруппированный верхний колонтитул был прикреплен к верхней части списка, а нижний колонтитул включался в соответствующий элемент списка или, как подробный текст в качестве части заголовка, если он относится ко всему списку. Это создаст «карточный» вид с четкой иерархией и группировкой контента.

Создание иерархии контента при помощи разделительных линий
Сгруппированный верхний колонтитул и описание, внутри vs за пределами

Автор статьи – Линзи Берри, в настоящее время занимается разработкой систем дизайна в компании, развивающей потребительские технологии.

А что вы думаете о разделителях?

Total
12
Shares
Похожие статьи
Дизайн умных уведомлений в мобильных и веб-интерфейсах
Подробнее

Дизайн умных уведомлений в мобильных и веб-интерфейсах

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

Еженедельная рассылка

Одно письмо с лучшими записями за неделю

Total
12
Share