Наш канал в

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Исключения

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

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

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

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

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

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

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

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

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

Подпишитесь на рассылку

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

Похожие записи

5 UX способов начать разработку дизайна правильно

Проблема в том, что если вы работаете с не-дизайнерами, красивые экраны – то, что нужно. Вы сможете предоставить “вау-эффект” клиенту, а как этот вау-эффект будет реализовываться, уже значения не имеет. А мы все-таки предпочитаем создавать нечто в духе “Все довольны”.

OOUX: Основа дизайна взаимодействий

Свой подход “Объектно-ориентированного UX” (Object-Oriented UX – OOUX) я представил в прошлом году на A List Apart. Подход подразумевает дизайн объектов перед проработкой действий.

Полное руководство по процессу продукт-дизайна

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