Material Design на русском. Часть 2 — Поверхность «Material»

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

Поверхность «Material»

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

Физический мир

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

Материал дизайн опирается на наш реальный мир, то есть он демонстрирует как поверхность отображается и перемещается внутри интерфейса согласно правилам реального мира. Поэтому и способы для отображения и анимации в рамках дизайн-системы Material повторяют поведение реального мира. Этот принцип применен во всех приложениях.

Глубина

Все элементы находятся в трехмерном пространстве (3D), которое использует свет, поверхность и тени. Все элементы перемещаются горизонтально (X), вертикально (Y), а также могут иметь разную глубину, то есть перемещаться вдоль оси Z. Глубина описывается так: элементы размещаются на оси z, а точнее на разных уровнях (грубо говоря ближе, дальше).

В веб-пространстве трехмерность в интерфейсе можно воссоздать, манипулируя осью Y.

3D-пространство с осями x, y и z

Свойства

Все поверхности в этой системе имеют консистентные, неизменные характеристики и поведение.

Измерение

Элементы могут иметь разные размеры по осям x, y (измеряется в dp) и равномерную толщину (1dp). Толщина не может быть равной 0.

Правильно: Элементы могут быть разной ширины и высоту, но одинаковой толщины (толщина элементов всегда 1dp)

Не правильно: Элементы разной толщины.

Тени

Поверхности располагаются на разной высоте и отбрасывают тени

Правильно

Правильно: Тени демонстрируют высоту, на которой находится Material поверхность

Вид сверху
Изометрический 3D вид, показывающий тень, отбрасываемую светом при движении поверхности вверх

Неправильно

Неправильно: Не задавай тень без изменения высоты поверхности

Вид сверху
Изометрический 3D вид, показывающий тень, без изменения света и высоты

Разрешение

Материал имеет бесконечное разрешение.

Контент

Контент отображается в любой форме и цвете на поверхности. Контент не добавляет поверхности толщины. Контент не является отдельным слоем.

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

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

Поведение контента может зависеть от поведения поверхности.

Физические свойства

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

Правильно: Ввод влияют только на поверхность материала.

Неправильно: События ввода не могут проходить через поверхность/материал

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

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

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

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

Неправильно: Поверхность не может пройти через другую поверхность.

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

Неправильно: материал— это не газ :D

Правильно: материал может появляться или исчезать посредством изменением прозрачности, размера или позиции

Материал не является текучим, как жидкость или гель веществом, хотя внутри элемента может находиться контент с этими свойствами.

Неправильно: Материал не ведет себя как жидкость или гель.

Неправильно: Материал не ведет себя как жидкость.

Трансформация материала

Материал может менять форму.

У материала можно менять прозрачность.

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

Правильно: материалы растягиваются и сжимаются только вдоль своей плоскости

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

Элементы могут соединяться вместе, чтобы стать единым элементом.

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

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

Материал может делиться и в последствии снова стать целым.

Движение

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

Материал может перемещаться по различным осям.

Анимация материала вдоль оси Z является результатом взаимодействия с пользователя.

Анимацию по оси Z вызывается взаимодействием пользователя с элеменатми интерфейса.

Атрибуты

Прородитель любого материала — белая плашка толщиной 1dp, которая отбрасывает тень. Все остальные элементы пользовательского интерфейса в этой дизайн-системе созданы на основе этого материала.

Поведение

Материл может вести себя определенным образом:

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

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

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

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

Составные поверхности

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

На одной поверхности может находиться например встроенная карта (1), которая перемещается независимо от прокручиваемого списка (2).

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

Растягивающиеся поверхности

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

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

Раскрытие/растягивание элемента может быть по вертикали

Раскрытие/растягивание элемента может быть по горизонтали

Материал может растягиваться/раскрываться как по горизонтали, так и по вертикали (одновременно или независимо от оси, то есть сперва по горизонтали, а затем по вертикали и наоборот)

Перемещение и позиционирование по осям x/y

Элементы могут оставаться в фиксированном положении по осям x и y или быть подвижными в любом направлении.

Поверхности могут оставаться в фиксированном положении. Верхняя панель (1) остается в фиксированном положении, в то время как список карточек (2) скролится по вертикали.

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

Поверхности могут также двигаться в любом направлении

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

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

Элементы двигаются независимо друг от друга

Одно движение (скрол) может зависеть от другого (нижняя панель прячется при скроле)

Прозрачность поверхности

Материал элементы могут быть прозрачными, полупрозрачными или непрозрачными.

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

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

Использовать с осторожностью!

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

Неправильно

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

Scrim — фоновое затемнение

Scrims — это временное затемнение контент, которое используется чтобы приглушить контент на фоне и выделить какой-то элемент или действие сверху. Затемнение помогает пользователям сфокусироваться на какой-то части интерфейса.

Так называемые «scrims» могут быть применены для разных вещей, например:

Затемнение или наоборот осветление поверхности и ее контента
Уменьшение непрозрачности поверхности и ее контента

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

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

Обрати внимание как выделяется элемент переднем плане, но в тоже самое время scrim как бы «осветляет» контент позади. То есть как бы не теряется контекст.