Материальный дизайн — высота

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

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

  1. 16 dp
  2. 4 dp
  3. 1-8 dp
  4. 6 dp
  5. 2-8 dp
  6. 24 dp

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

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

Материальный дизайн — высота
  1. Вид спереди. Объекты занимают высоту 1dp и 8dp.
  2. Вид сбоку. Разница в высоте между объектами 7dp.
Материальный дизайн — высота

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

  1. Обе поверхности A и B находятся на высоте 8dp. Они отбрасывают разные тени, потому что перед поверхностью B находится другая поверхностью — C, которая уже имеет высоту 4dp.
  2. Вид сбоку.

Система

В Material Design любая поверхность или объект имеет высоту и обладает следующим поведением:

  • указывает на пространственное отношение;
  • акцентирует внимание на самом высоком элементе интерфейса;
  • допускает перемещение или прокрутку перед или позади других объектов.

Высоту можно показать с помощью теней, заливки или прозрачности.

По умолчанию Material Design отображает высоту с помощью теней.

Показать разную высоту можно цветом, вместо теней.

Или использовать вместо теней прозрачность материала.

Начальная высота

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

  1. Вид спереди. Панель приложения (A), карточки (B) и кнопка действия (C).
  2. Вид сбоку.
  1. Вид спереди. Панель приложения (A), кнопка действия (B) и карточки (C).
  2. Вид сбоку.

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

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

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

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

  1. При взаимодействии с кнопкой она увеличивает свою высоту с 2dp до 8dp.
  2. Вид сбоку.

Интерференция высоты

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

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

На видео показано как исчезает кнопка действия при поднятии карточки.

Заранее исправленная проблема с изменением высоты карточки.

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

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

  1. Контрастирующие края.
  2. Перекрытие с другими поверхностями в любом состоянии компонента.
  3. Расстояние от других поверхностей.

Контрастирующие края

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

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

  • Окрашивание поверхностей разными цветами.
  • Изменение прозрачности на разных поверхностях.

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

Это одна поверхность или несколько? На изображении не ясно.

Контрастные цвета явно указывают, что это две разных поверхности.

Поверхностное перекрытие

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

  1. Тени показывают края поверхности, перекрытие поверхности и степень возвышения.
  2. Различные цвета поверхности показывают края поверхности и перекрытие, но не степень возвышения.
  3. Прозрачность показывает края поверхности и перекрытие, но не степень возвышения.

Верхняя панель приложения перекрывает карточки, указывая, что она находится перед ними. Поверхность не выражает степень возвышения.

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

Расстояние

Разницу высоты между объектами можно выразить с помощью фоновой закраски или теней.

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

Фоновая закраска указывает на перекрытие поверхности, но не степень возвышения.

Отсутствие теней или фоновой закраски затрудняет выделение диалогового окна.

Тени

Тени выражают степень возвышения между объектами способами, которые не доступны другим методам.

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

Размер тени и диффузии показывает:

  • Расстояние между двумя поверхностями.
  • Перепад высоты между не перекрывающимися поверхностями.

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

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

Отсутствие теней или других визуальных подсказок для указания краев и перекрытия поверхностей создает недостаточный контраст между объектами.

Не используйте тени для декорации.

Движение и высота

Движение может подчеркнуть высоту, используя:

  • Тени.
  • Перекрытие.
  • Перемещение.
  • Масштабирование.
  • Параллакс.

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

Поверхность перекрывает другую, показывая, какой объект находится над другим.

Поверхность отталкивает окружающие элементы.

Масштабирование объектов подчёркивает изменение высоты.

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

Иерархия

Высота задаёт отношение между блоками контента.

Обычно объект занимающий большую высоту указывает на…

  • … более важный контент.
  • … акцентирование внимания.
  • … управление поверхностью позади.

Вид спереди (1) и вид сбоку (2). Интерфейс демонстрируют, как более важный контент, который имеет основной фокус (B), появляется перед контентом, который имеет вторичный фокус, например сноски (A).

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

Вид спереди (1) и вид сбоку (2). Мобильный интерфейс демонстрирует, как навигация (B), управляет контентом на объекте (A).

Компланарные поверхности

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

  1. Объекты (A и B) одинаковой высоты и перемещаются вместе, подтверждая, что их содержимое имеет одинаковое по важности содержимое.
  2. Вид сбоку.

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

  1. Интерфейс демонстрирует, как расположение поверхностей слева на право на одной и той же высоте (A, B, C) связывает иерархию на основе содержимого.
  2. Вид сбоку.

Значения по умолчанию

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

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

КомпонентЗначение высоты (dp)
Диалоговое окно
24
Модальное окно
16
Навигационный ящик
16
Кнопка действия (активное состояние)
12
Меню или навигация
8
Активная карточка
8
Активная кнопка в объекте
8
Кнопка действия
6
Верхняя панель управления
4
Кнопка в объекте
2
Карточка
1
Текстовая кнопка
0.