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

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

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

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

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

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

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

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

2.57 МБ (.ai)

Список

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

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

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

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

Планшет

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

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

2.57 МБ (.ai)

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

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

ПК

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

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

89.40 МБ (.ai)

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

В элементах 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).

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

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

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

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

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

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

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

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

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