UXPUB

UXPUB - сообщество из 3,059 дизайнеров и творческих людей

Место, где дизайнеры делятся опытом

Создать аккаунт Войти
Cover image for Создание иерархии контента при помощи разделительных линий
Редакция
Редакция

Опубликовано

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

#ux

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

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

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

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

[caption id="attachment_45259" align="aligncenter" width="1425"] Без разделителя, разделитель элементов и разделитель разделов[/caption]

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

Разделители увеличивают возможность восприятия списка, как кликабельного, потому что они создают визуальные контейнеры вокруг интерактивного текста относительно размера цели касания. Также на iOS часто используют шеврон для усиления призыва к действию, но не на Android. [caption id="attachment_45260" align="aligncenter" width="1000"] С разделителями vs Без разделителей[/caption]

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

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

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

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

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

И HIG от Apple и Material Design рекомендуют разделители элементов, которые совпадают с началом текста на начальной стороне (слева для языков чтения слева направо.) Я полагаю, что они делают это, чтобы создать визуальное пространство для изображений, но мне не нравится непоследовательность начала линии разделения элементов, когда отдельный экран состоит из иконок и обычного текста. Это заставляет группу элементов списка с иконками казаться более связанными, чем группа без них. Наличие разделителя элементов всегда начинается с одной и той же вставки, что создает иллюзию более последовательной компоновки. [caption id="attachment_45262" align="aligncenter" width="1000"] Контент vs Начало текста[/caption]

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

Для интерактивных элементов рекомендуются разделители элементов, которые идут к краю экрана на конечной стороне (справа для языков чтения слева направо). Рекомендуется для статических элементов Android. Я полагаю, что они делают это, чтобы четко разграничить статические и интерактивные элементы, но мне интересно, заметит ли пользователь такую маленькую разницу, в то время как это приводит к асимметрии на экране, которая может быть нежелательной. Добавление разделителей, как к интерактивным, так и статическим элементам создает более симметричную и согласованную компоновку. [caption id="attachment_45263" align="aligncenter" width="1000"] Контент vs Край экрана[/caption]

Исключения

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

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

[caption id="attachment_45264" align="aligncenter" width="1250"] Кнопки, связанные элементы списка, отдельные списки с изображениями[/caption]

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

Разделители разделов обычно имеют полную ширину и имеют больший визуальный вес, чтобы показать, что мысль закончилась. При разработке разделителей разделов учитывайте стиль верхних и нижних колонтитулов сгруппированных списков. Верхние и нижние колонтитулы сгруппированных списков, находящиеся за пределами содержимого списка на заднем плане, как рекомендует HIG, визуально разъединяют их. Я видела приложения, в которых нижний колонтитул первого списка путается с подзаголовком второго. Я настаиваю на том, чтобы сгруппированный верхний колонтитул был прикреплен к верхней части списка, а нижний колонтитул включался в соответствующий элемент списка или, как подробный текст в качестве части заголовка, если он относится ко всему списку. Это создаст «карточный» вид с четкой иерархией и группировкой контента. [caption id="attachment_45265" align="aligncenter" width="1250"] Сгруппированный верхний колонтитул и описание, внутри vs за пределами[/caption] Автор статьи – Линзи Берри, в настоящее время занимается разработкой систем дизайна в компании, развивающей потребительские технологии. А что вы думаете о разделителях?


Перевод статьи Linzi Berry

Обсуждение (0)