Material Design на русском. Часть 3 — Высота у элементов

Привет. Меня зовут Руслан. Я UX/UI дизайнер в Siemens. У меня есть ютуб-канал, на котором записано несколько плейлистов по основам UX/UI дизайна. В этой серии постов однако я просто делюсь вольным переводом Material Design на русский язык. Оригинальный источник: здесь

Высота

Высота — это расстояние между двумя поверхностями, которые расположены на оси Z.

Обрати внимание на вертикальное расстояние между компонентами

Значения высот у компонентов:

Navigation drawer (боковая панель навигации): 16dp
App bar (панель приложения): 4dp
Card (карточка): 1dp to 8dp
FAB (плавающая кнопка): 6dp
Button (кнопка): 2dp to 8dp
Dialog (диалоговое окно): 24dp

Высота в дизайн-системе Material Design

Измерение высоты

Высота измеряется от передней части одной поверхности до передней части другой поверхности по оси Z. Измеряется она в независящих от плотности пикселях (density independent pixels или сокращенно DP) и отображается по умолчанию с помощью теней.

Стандартная толщина материала составляет 1dp, поэтому все высоты рассчитываются, как разность расстояний от одной верхней плоскости до другой. Примеры ниже:

Видно, что сверху поверхность в 1dp (тень меньше), а чуть ниже поверхность уже на высоте 8dp (тень больше).
Однако разница в высоте между двумя поверхностями составляет 7dp, если смотреть сбоку.

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

Оба элемента А и B находятся на одной и той же высоте — 8dp. Однако, они отбрасывают разные тени, потому что B находится над другим элементом (c), который тоже имеет высоту. Совсем как в реальном мире.
Показана разница в высоте между элементами A, B и C, если смотреть сбоку.

Система измерения высоты

Все элементы в дизайн-системе, а также ее компоненты имеют высоту.

Элементы на разной высоте могут выполнять следующие действия:

Позволять одним элементам перемещаться над другими элементами или же под ними. Например, когда контент скролится, а верхняя панель приложения над контентом строго зафиксирована поверх или же FAB кнопка, которая также зафиксирована поверх контента.
Указывать на взаимосвязь между элементами. Например, у той же FAB кнопки тень указывает на то, что она отделена от списка.
Фокусировать внимание пользователя на самой высокой точке в интерфейсе. Например, на диалоговом окне, которое временно появляется над другими элементами.

В Material Design системе высота задаётся за счет использования теней.

Использовать осторожно: вместо тени, можно использовать заливку, чтобы задать элементу высоту

Использовать осторожно: прозрачность может использоваться для высоты вместо теней.

Высота в состоянии покоя

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

Высота по умолчанию на мобильном устройстве для панели приложения (А), карточек (B) и плавающей кнопки (C), если смотреть спереди
Те же компоненты, если смотреть сбоку

Высота по умолчанию на десктопном устройстве для панели приложения (А), плавающей кнопки (В) и карточек (С), если смотреть спереди
Те же компоненты, если смотреть сбоку

Изменение высоты

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

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

Если пользовательские действия (или системное событие) завершаются или отмененяются, то компонент быстро возвращается на свое исходное положение (состояние покоя).

Некоторые компоненты реагируют на взаимодействия и меняют высоту.

После тапа на кнопку (тап от англ. tap — нажатие), эта кнопка увеличивает высоту с 2dp до 8dp
Тот же компонент, если смотреть со стороны

Столкновения элементов в интерфейсе

Когда пользователь перемещает какой-либо элемент по поверхности (например, карточку), то последний в свою очередь не должен сталкиваться, пересекаться или пересекать насквозь с другими элементами.

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

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

Совет: перемести за пределы экрана или убери вовсе те компоненты, что могут столкнуться с другими по высоте. На переднем плане (1) и сбоку (2) отображены карточки на мобильном устройстве и то, как плавающая кнопка (B) исчезает, когда карточка (A) поднимается.

Совет: проектируй таким образом, чтобы свести к минимуму перекрытие элементов по высоте. Обрати внимание: плавающая кнопка сбоку.

Отображение высоты

Чтобы успешно отобразить высоту, элемент должен иметь:

Границы, которые будут контрастировать с окружением
Элемент должен быть сверху, т.е. над другими элементами, как в состоянии покоя, так и в движении
Расстояние от других элементов

Про границы элементов

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

По умолчанию у элемента есть тени, чтобы задать границы. Но также можно использовать и другие способы:

Задать элементу другой цвет
Задать элементупрозрачность

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

Без границ неясно, содержит ли это изображение один или несколько элементов.

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

Перекрытие элементов

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

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

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

Тени на этом примере указывают на границы элементов и то перекрывается ли элемент другим элементом, а также в этом примере явно показано то на каком уровене высоты находятся элементы по отношению друг к другу.
Контрастные цвета указывают на границы элементов, а также и на то перекрывается ли элемент другим элементом. Но цвета не говорят о том как высоко элемент находится по отношению к другому.
Прозрачность показывает границы элементов и то перекрывается ли элемент другим элементом, но это ничего не говорит о том насколько высоко элемент находится по отношению к другому.

Правильно: Верхняя панель приложения перекрывает карточки (используется цвет), указывая на то, что она находится над карточками. Однако такое перекрытие не указывает на то как высоко находится панель приложения по отношению к другим элементам.

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

Дистанция

Уровень высоты между элементами можно показать засчет фонового затемнения или теней.

Затемненный фон (Scrim)

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

Правильно: затемненный фон может указывать на перекрытие элемента, но не на степень высоты.

Неправильно: Диалоговое окно теряется из-за того, что отсутствует тень или затемненный фон.

Тени

Тени могут показывать высоту между элементами.

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

Различия в тенях говорит о:

Расстоянии между двумя поверхностями
Разнице между не перекрывающими друг друга элементами

Тени указывают на границы элементов и на уровень высоты элементов относительно фона.

Правильно: Тени явно сообщают о различиях по высоте у элементов. Меньшая, более резкая тень у панели приложений (1) указывает на то, что она находится на более низкой высоте, чем меню (2), которое имеет большую и более мягкую тень.

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

Неправильно: не используй тени ради красоты!

Анимация и высота

Анимация может подчеркнуть высоту с помощью следующих методов:

Изменения в тенях
Перекрытие
Выталкивание / вытеснение
Масштабирование
Параллакс

Изменения в тенях

Изменения размера тени и ее мягкости подчеркивают изменения высоты.

Тень становится больше, чтобы подчеркнуть, что карточка поднимается.

Показ перекрытия

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

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

Выталкивание / вытеснение

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

Обрати внимание на то как выбранный элемент выталкивает остальные элементы за пределы экрана устройства

Масштабирование

Масштабирование размера поверхности может подчеркнуть изменения высоты.

Обрати внимание как карточка масштабируется и сужается. Этим приёмом подчеркивается то, как карточка меняет высоту по отношению к другим элементам.

Параллакс

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

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

И все эти приёмы можно комбинировать

Высоту можно подчеркнуть, комбинируя разные анимационные приёмы.

Параллакс и масштабирование подчеркивают то, какие элементы находятся сверху, а какие снизу

Иерархия высоты

Контент может по смыслу относится к другому контенту в зависимости от того, находятся ли они на одинаковых или разных высотах.

Про контент на разных высотах

Элементы, которые расположены поверх других, как правило,:

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

На картинке показано десктопное приложение. На переднем плане (1) и виде сбоку (2), показано как более важный контент, то есть основной текст (B), расположен выше контента, который имеет второстепенное значение, например сноски (A).

На переднем плане (1) и виде сбоку (2) показан мобильный интерфейс. Обрати внимание как размещение списка из действий (А) выше по высоте, может фокусировать внимание при сохранении контекста.

На переднем плане (1) и виде сбоку (2) показан моб. интерфейс. Обрати внимание как контент снизу (А) подконтролен элементом сверху. В этом примере верхний элемент — это боковая панель (В).

Контент на ровной поверхности

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

Карточки (А, Б), если смотреть спереди, имеют одинаковую высоту и скролятся вместе, усиливая то факт, что их контент имеет одинаковую иерархию
Те же компоненты, если смотреть сбоку

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

На картинке десктопный интерфейс, если смотреть сверху. В общем, тут показано положение элементов относительно друг друга на одной и той же высоте слева направо (A, B, C), что в свою очередь создаёт иерархию, основанную на контенте.
Те же компоненты, если смотреть со стороны

Значения высот по умолчанию

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

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

Таблица значений высот по умолчанию

График со значениями высот по умолчанию

Вид сбоку, который показывает высоту покоя (resting state), смещение (path of travel) и конечную высоту (raised state) для некоторых компонентов

Как следить за обновлениями гайдлайна и переводом?

Структуированный документ в Notion
Официальные обновления Google на странице what’s new