Материальный дизайн — Макет: Метрики и контуры
Перевод раздела Metrics & keylines официальной документации Google: http://www.google.com/design/spec/material-design/.
Основная сетка
Все компоненты выравниваются по основной сетке, состоящей из квадратов со стороной 8 dp. Шрифт и иконки на панели инструментов выравниваются по сетке, состоящей из квадратов со стороной 4 dp. Эти правила применимы для приложений для мобильных устройств, планшетов и ПК.
Подробная информация о компонентах представлена здесь.
Пример основной сетки
Пример основной сетки
Пример основной сетки
Пример основной сетки
Пример использования типографики на основной сетке
Подробная информация представлена в разделе типографика.
Контуры и пространство
Мобильные устройства
Макет разметки для мобильных устройств включает множество экранов различного размера и содержит информацию о том, как следует использовать контуры и свободное пространство при работе с различными экранами и элементами. Перед вами один из примеров экранов, включенных в файл, прикрепленный для загрузки.
Список
Две колонки, список выровнен по левой стороне, использована плавающая кнопка действия размером 56 dp.
Отступы от края экрана слева и справа: 16 dp
Отступ слева для контента, имеющего отношение к иконке или аватарке: 72 dp
Горизонтальные отступы на мобильных устройствах: 16 dp.
- Панель состояния: 24 dp
- Панель инструментов: 56 dp
- Подзаголовок: 48 dp
- Элемент списка: 72 dp
Список с подзаголовками
Список, расположенный в две колонки, подзаголовок, иконки выровнены по правой стороне, использована плавающая кнопка действия размером 40 dp.
Отступы от края экрана слева и справа: 16 dp.
- Панель состояния: 24 dp
- Панель инструментов: 56 dp
- Заголовок и элементы списка: 72 dp
- Подзаголовок: 48 dp
- Пространство между участками контента: 8 dp
Страница дополнительной информации
Карточка с дополнительной информацией, использована плавающая кнопка действия размером 56 dp.
- Панель состояния
- Панель инструментов
- Пространство между участками контента
- Элемент списка
Отступы от края экрана слева и справа: 16 dp
Отступ слева от края экрана для контента: 72 dp
Иконки, расположенные справа, выровнены на расстоянии 32 dp от правого края, чтобы располагаться на одном уровне с плавающей кнопкой действия.
- Панель состояния: 24 dp
- Панель инструментов: 56 dp
- Пространство между участками контента: 8 dp
- Элемент списка: 72 dp
Смешанный контент
Иконки, аватарки и текст выровнены по левому краю. Плавающая кнопка действия, иконки и текст выровнены по правому краю.
Отступы иконок от края экрана слева и справа: 16 dp
Отступ слева для контента, имеющего отношение к иконке или аватарке: 72 dp
- Панель состояния: 24 dp
- Элементы списка: 56 dp
- Подзаголовки и элементы списка: 48 dp
- Пространство между участками контента: 8 dp
Выпадающее меню навигации
Боковое меню навигации с иконками, аватарками и текстом, выровненными по левому краю. Остальные иконки выровнены по правому краю.
Отступы от края экрана слева и справа: 16 dp
Отступ слева для контента, имеющего отношение к иконке или аватарке: 72 dp
Ширина бокового меню навигации: Ширина экрана минус высота панели действия. В данном примере, 56 dp от правого края экрана.
- Меню учетной записи и элементы списка: 48 dp
- Пространство между участками контента: 8 dp
- Отступ меню навигации справа: 56 dp
Планшет
Макет разметки для планшетов включает 14 экранов различного размера и демонстрирует, как следует использовать контуры и свободное пространство при работе с различными экранами и элементами. Ниже представлен один из 14 примеров экранов, включенных в файл, прикрепленный для загрузки.
Список с демонстрацией дополнительной информации
Пример макета планшета
Контуры и отступы
Вертикальное пространство
- Панель состояние и пространство над списком: 24 dp
- Элемент списка: 64 dp
- Пространство между участками контента: 8 dp
- Элемент списка: 72 dp
Список с демонстрацией дополнительной информации
Пример макета планшета
- Отступы от края экрана слева и справа: 24 dp
- Отступ слева от края экрана для контента: 80 dp
- Панель состояния: 24 dp
- Панель инструментов и элементы списка: 64 dp
- Пространство между участками контента: 8 dp
- Подзаголовок, элемент списка и слайдер: 48 dp
- Заголовок: 80 dp
ПК
Макет разметки для ПК содержит 4 различных экрана, каждый из которых включает в себя четыре окна различного размера и демонстрирует, как следует использовать контуры и свободное пространство при работе с различными окнами и элементами. В зависимости от размера окна, контуры и блоки свободного пространства будут наследовать масштабы сетки от планшетов и мобильных устройств. Перед вами пример макета экрана, доступного для загрузки.
Экран ПК целиком
Окна с измененным размером
Пропорции в контурах
В элементах 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.
Сверху: Элемент шириной 48 dp и аватар шириной 40 dp.
Снизу: Элемент шириной 48 dp и иконка шириной 24 dp.
Пример области касания
Высота области касания: 48 dp
Высота кнопки: 36 dp
Примеры областей касания и кнопок
P.S. Это тоже может быть интересно:
Большое спасибо, за перевод. Вы мне очень помогли. Надеюсь будет продолжение.