Материальный дизайн — Макет: Метрики и контуры

Перевод раздела Metrics & keylines официальной документации Google: http://www.google.com/design/spec/material-design/.

Основная сетка

Все компоненты выравниваются по основной сетке, состоящей из квадратов со стороной 8 dp. Шрифт и иконки на панели инструментов выравниваются по сетке, состоящей из квадратов со стороной 4 dp. Эти правила применимы для приложений для мобильных устройств, планшетов и ПК.

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

layout_metrics_baseline1.png

Пример основной сетки

layout_metrics_baseline2.png

Пример основной сетки

layout_metrics_baseline3.png

Пример основной сетки

layout_metrics_baseline4.png

Пример основной сетки

layout_metrics_baseline5.png

Пример использования типографики на основной сетке

Подробная информация представлена в разделе типографика.

Контуры и пространство

Мобильные устройства

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

2.57 МБ (.ai)

Список

layout_metrics_keyline_mobile1.png
Макет

Две колонки, список выровнен по левой стороне, использована плавающая кнопка действия размером 56 dp.

layout_metrics_keyline_mobile2.png
Контуры и отступы

Отступы от края экрана слева и справа: 16 dp
Отступ слева для контента, имеющего отношение к иконке или аватарке: 72 dp
Горизонтальные отступы на мобильных устройствах: 16 dp.

layout_metrics_keyline_mobile3.png
Вертикальное пространство
  1. Панель состояния: 24 dp
  2. Панель инструментов: 56 dp
  3. Подзаголовок: 48 dp
  4. Элемент списка: 72 dp

Список с подзаголовками

layout_metrics_keyline_mobile4.png
Макет

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

layout_metrics_keyline_mobile5.png
Контуры и отступы

Отступы от края экрана слева и справа: 16 dp.

layout_metrics_keyline_mobile6.png
Вертикальное пространство
  1. Панель состояния: 24 dp
  2. Панель инструментов: 56 dp
  3. Заголовок и элементы списка: 72 dp
  4. Подзаголовок: 48 dp
  5. Пространство между участками контента: 8 dp

Страница дополнительной информации

layout_metrics_keyline_mobile7.png
Макет

Карточка с дополнительной информацией, использована плавающая кнопка действия размером 56 dp.

  1. Панель состояния
  2. Панель инструментов
  3. Пространство между участками контента
  4. Элемент списка
layout_metrics_keyline_mobile8.png
Контуры и отступы

Отступы от края экрана слева и справа: 16 dp
Отступ слева от края экрана для контента: 72 dp
Иконки, расположенные справа, выровнены на расстоянии 32 dp от правого края, чтобы располагаться на одном уровне с плавающей кнопкой действия.

layout_metrics_keyline_mobile9.png
Вертикальное пространство
  1. Панель состояния: 24 dp
  2. Панель инструментов: 56 dp
  3. Пространство между участками контента: 8 dp
  4. Элемент списка: 72 dp

Смешанный контент

layout_metrics_keyline_mobile10.png
Макет

Иконки, аватарки и текст выровнены по левому краю. Плавающая кнопка действия, иконки и текст выровнены по правому краю.

layout_metrics_keyline_mobile11.png
Контуры и отступы

Отступы иконок от края экрана слева и справа: 16 dp
Отступ слева для контента, имеющего отношение к иконке или аватарке: 72 dp

layout_metrics_keyline_mobile12.png
Вертикальное пространство
  1. Панель состояния: 24 dp
  2. Элементы списка: 56 dp
  3. Подзаголовки и элементы списка: 48 dp
  4. Пространство между участками контента: 8 dp

Выпадающее меню навигации

layout_metrics_keyline_mobile13.png
Макет

Боковое меню навигации с иконками, аватарками и текстом, выровненными по левому краю. Остальные иконки выровнены по правому краю.

layout_metrics_keyline_mobile14.png
Контуры и отступы

Отступы от края экрана слева и справа: 16 dp
Отступ слева для контента, имеющего отношение к иконке или аватарке: 72 dp
Ширина бокового меню навигации: Ширина экрана минус высота панели действия. В данном примере, 56 dp от правого края экрана.

layout_metrics_keyline_mobile15.png
Вертикальное пространство
  1. Меню учетной записи и элементы списка: 48 dp
  2. Пространство между участками контента: 8 dp
  3. Отступ меню навигации справа: 56 dp

Планшет

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

Шаблон макета для планшетов

2.57 МБ (.ai)

Список с демонстрацией дополнительной информации

layout_metrics_keyline_tablet1.png

Пример макета планшета

layout_metrics_keyline_tablet2.png

Контуры и отступы

layout_metrics_keyline_tablet3.png

Вертикальное пространство

  1. Панель состояние и пространство над списком: 24 dp
  2. Элемент списка: 64 dp
  3. Пространство между участками контента: 8 dp
  4. Элемент списка: 72 dp

Список с демонстрацией дополнительной информации

layout_metrics_keyline_tablet3.png

Пример макета планшета

layout_metrics_keyline_tablet3.png
Контуры и отступы
  1. Отступы от края экрана слева и справа: 24 dp
  2. Отступ слева от края экрана для контента: 80 dp
layout_metrics_keyline_tablet3.png
Вертикальное пространство
  1. Панель состояния: 24 dp
  2. Панель инструментов и элементы списка: 64 dp
  3. Пространство между участками контента: 8 dp
  4. Подзаголовок, элемент списка и слайдер: 48 dp
  5. Заголовок: 80 dp

ПК

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

Шаблон макета для ПК

89.40 МБ (.ai)

layout_metrics_keylines_desktop1.png

Экран ПК целиком

layout_metrics_keylines_desktop2.png

Окна с измененным размером

layout_metrics_keylines_desktop3.png
layout_metrics_keylines_desktop4.png

Пропорции в контурах

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

  • 16:9
  • 3:2
  • 4:3
  • 1:1
  • 3:4
  • 2:3

Применимо для приложений для мобильных устройств, планшетов и ПК.

К примеру:

  • При соотношении сторон 1:1 высота и ширина элемента равны.
  • При соотношении сторон 2:3 изображение шириной 360 dp (полный размер экрана) будет иметь высоту 540.

Для определения соответствующего значения ширины или высота вашего элемента используйте соотношения сторон, представленные выше:

Ширина = Соотношение сторон * Высота

Высота = Ширина / Соотношение сторон

(В обеих формулах соотношение сторон выражается в виде дроби. К примеру, 3:2 становится 3/2, а 16:9 — 16/9).

layout_metrics_ratiokeylines1.png

Ширина экрана

layout_metrics_ratiokeylines2.png

Пример ширины экрана на  мобильном устройстве

layout_metrics_ratiokeylines3.png

Ширина элемента

layout_metrics_ratiokeylines4.png

Пример ширины элемента на  мобильном устройстве

Контуры с заданным шагом

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

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

layout_metrics_incremental1.png
layout_metrics_incremental2.png
layout_metrics_incremental3.png
layout_metrics_incremental4.png

Размер активной области касания

Для обеспечения юзабилити приложений активная область касания должна иметь размеры не менее 48 x 48 dp. В большинстве случае расстояние между двумя областями касания должно быть не меньше 8 dp.

Помните об этом, располагая иконки (24 dp) или аватарки (40 dp) на макете. Области касания не должны накладываться друг на друга.

В среднем, 48 dp в физическом измерении составляют около 9 мм (значение может колебаться). Это вписывается в диапазон рекомендованных размеров области касания (7-10 мм) для объектов сенсорных экранов и гарантирует, что пользователи смогут уверенно и точно попасть по ним своими пальцами.

Если вы проектируете свои элементы, задавая им высоту и ширину не менее 48 dp, вы можете быть в этом уверены:

  • Ваши области касания не будут иметь размеры меньше минимального рекомендованного размера в 7 мм, вне зависимости от того, на каком экране они будут отображаться.
  • Таким образом вы достигнете отличного компромисса между общей плотностью размещения информации и доступностью элементов UI.
layout_metrics_ratiokeylines1.png

Сверху: Элемент шириной 48 dp и аватар шириной 40 dp. 
Снизу: Элемент шириной 48 dp и иконка шириной 24 dp.

layout_metrics_ratiokeylines1.png

Пример области касания

layout_metrics_ratiokeylines1.png

Высота области касания: 48 dp 
Высота кнопки: 36 dp

layout_metrics_ratiokeylines1.png

Примеры областей касания и кнопок

Следующая: «Объекты в трехмерном пространстве» >>
<< Предыдущая: «Единицы измерения и размеры»

P.S. Это тоже может быть интересно:

1 Комментарий

  1. Инна

    Большое спасибо, за перевод. Вы мне очень помогли. Надеюсь будет продолжение.

Оставить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

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