Material Design на русском. Часть 8 — Отступы

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

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

Базовая сетка

8dp сетка

Все компоненты выравниваются по квадратной базовой сетке 8dp/8px для мобильных устройств, планшетов и настольных компьютеров.

Панель приложения, плавающая кнопка — выравниваются по 8dp сетке

4dp сетка = 4px сетка

Иконки, типографика и некоторые элементы внутри компонентов могут выравниваться по 4dp/4px сетке

Элементы нижней панели навигации (таббар) выравниваются по 4dp сетке

4dp сетка = 4px — сетка базовой линии

Типографика выравнивается по базовой линии 4dp/4px

4dp базовая сетка для типографики. Выравнивание по базовой линии.

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

Текст выравнен вертикально по центру элемента списка, хотя смещен за пределы 4dp сетки.

Работа с пространством

Методы

Работа с пространством более тонкая работа, чем работа над адаптивной сеткой. Методы работы с пространством — это набор правил по размещению элементов в компонентах и макете.

Отступы — это работа с пространством между элементами и внутри компонента.

Размеры — это работа с шириной и высотой у составных элементов.

Выравнивание — это работа по размещению элементов внутри компонента.

Отступы

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

Макет с отступами между компонентами равный 24pd

Размеры

1 — Высота status bar (панели состояния): 24pd. 2- Высота панели приложения: 56dp. 3 — Высота элемента у списка: 88dp

Выравнивание

Выравнивание — это работа над размещением элементов внутри компонента.

1 — Сетка макета. 2 — Выравнивание

Направляющие

Направляющие — это инструмент для выравнивания, который позволяет консистентно размещать элементы за пределами сетки. Это вертикальные линии, которые позволяют ровно располагать элементы, которые не выровнены по сетке. Направляющие размещаются с шагом 8dp.

1 — Сетка макета. 2 — Направляющая.

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

Направляющие могут регулировать пространство между элементами.

Контейнеры и соотношения сторон

Контейнеры

Контейнер — это форма, которая используется, чтобы задать границы какому-нибудь элементу. Контейнеры могут содержать другие элементы интерфейса: изображения, иконки и прочее.

1 — Контейнер для изображения. 2 — Контейнер для иконки. 3 — Контейнер кнопки.

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

1 — Фиксированный контейнер, который обрезает оригинальный контент внутри. 2 — Гибкий контейнер, который масштабируется вместе с контентом.

Соотношения сторон

Соотношение сторон — это отношение ширины элемента к его высоте. Пропорции записываются как ширина:высота в формате коэффициента.

Чтобы поддержать консистентность в макете, тебе нужно использовать какое-то соотношение сторон для следующих элементов: размер экрана, изображения и отдельно для каких-то поверхностей.

16:9, 3:2, 4:3, 1:1, 3:4, 2:3 — это рекомендованные соотношения сторон, которые ты можешь использовать в интерфейсе.

Гибкие соотношения сторон

Гибкое соотношение сторон трактует сетка макета:

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

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

Ширина контейнера определяется шириной колонки в сетке, а высота высчитывается автоматически.

Автоматическая обрезка контента

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

• Фиксироваться в одном типе соотношении сторон
• Адаптироваться к разным соотношениям сторон
• Фиксироваться по высоте картинки

Фиксация в одном типе соотношения сторон

Картинка адаптирует в рамках одного соотношения сторон от брейкпоинта к брейкпоинту.

Изображение в интерфейсе всегда имеет 3:2 между двумя контрольными точками

Адаптироваться к разным соотношениям сторон

Картинка адаптируется и может менять соотношения сторон от брейкпоинта к брейкпоинту.

Изображение в интерфейсе меняется от соотношения 1:1 до 16:9 между двумя контрольными точками

Фиксироваться по высоте картинки

Картинка может иметь фиксированную высоту, но ширина будет адаптироваться от брейкпоинта к брейкпоинту.

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

Область взаимодействия

Область взаимодействия есть у каждого элемента и устройства, у которого есть сенсорный ввод (тач-жесты). Чтобы балансировать между плотностью информации и удобством использования, в material design размер области для взаимодействия с элементом должен быть не менее 48 x 48 dp и отступом между элементами не менее 8dp.

Минимальная область для взаимодействия (тача/нажатия) — 48x48dp

Как следить за обновлениями гайдлайна и переводом?

• Структуированный документ в Notion
• Официальные обновления Google на странице what’s new