Material design. Макет. (Перевод)

Принципы создания макета приложения.

Material design использует фундаментальные инструменты, которые пришли из печатного (полиграфического) дизайна, например, как базовые линии сетки и разметки структуры страницы. Макет создается под разные размеры разных устройств, что способствует созданию единого пользовательского интерфейса. И в конечном счете поможет создавать вам адаптивные, масштабируемые приложения.

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

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

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

Разграничение бумаги.
Швы создаются, когда два листа бумаги примыкают друг к другу по все длине. Или когда мы сгибаем лист бумаги. Соединенные швы обычно перемещаются вместе.

material design layout 1

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

material design layout 2

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

material design layout 3

Левую и правую сторону тулбара никогда не делит еще один лист бумаги.

material design layout 4

Тем не менее лист бумаги можно прижать к одной из сторон.

material design layout 5

Тулбар может всегда находится выше любых элементов на экране.

material design layout 6

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

material design layout 7

Между тем, тулбар может поддерживать эффект шва и двигаться вместе с нижним листом бумаги.

material design layout 8

И наконец тулбар может уходить ниже второго листа бумаги.

material design layout 9

Тулбар имеет стандартную высоту в 56 dp на мобильных девайсах и 64 на десктопных, но они могут быть выше, когда активные кнопки прикреплены к нижней их части.

material design layout 10

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

material design layout 11

Плавающая кнопка может расположится на шве между двумя листами, если ее действие связанно с ними обоими.

material design layout 12


comments powered by Disqus