Material Design на русском. Часть 7 — Адаптивные сетки

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

Колонки, межколонники и отступы

Сетка состоит из 3 элементов: колонок, межколонников и отступов.

1 — Колонка. 2 — Межколлоник. 3 — Отступ

Колонки

Контент размещать надо в колонках.

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

На смартфонах сетка будет иметь 4 колонки прибрейкпоинте равном 360dp

На планшетах сетка будет иметь 8 колонок при брейкпоинте равном 600dp

Межколонники

Межколонники— это пространство между колонками. Они помогают отделить контент.

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

На смартфонах, размер межколонника равен 16dp при брейкпоинте равном 360 dp

На планшетах, размер межколонника равен 24dp при брейкпоинте равном 600 dp

Отступы

Отступы или внешние поля у сетки— это пространство от контента сетки до левого и правого края экрана устройства.

Ширина полей — это фиксированные значения, которое отличается в зависимости от текущего брейкпоинта. Более широкие поля больше подходят для больших экранов, так как они создают больше «воздумах» вокруг контента (сетки).

На смартфонах, размер отступов равен 16dp при брейкпоинте равном 360 dp

На планшетах, размер отступов равен 24dp при брейкпоинте равном 600 dp

Кастомизация сеток

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

Настройка межколонников

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

На данном макете задан 8dp межколонник. Такое тесное пространство говорит о том, что изображения связаны друг с другом, чтобы восприниматься как единая часть по смыслу.

На данном макете задан 32dp межколонник. Здесь так много «воздуха», чтобы разделить контент и явно указать на то, что каждый альбом это отдельная друг от друга коллекция изображений.

Неправильно: не делай межколонник слишком большим или такой же ширины как ширина колонки. Большой межколонник не оставляет места для контента и не воспринимается как единое целое.

Настройка отступов

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

Идеальная длина для разборчивости текста — 40–60 символов в строке (примечание: русские буквы шире, поэтому количество символов можно увеличить 45–75)

На этом примере поля равны 8dp, чтобы изображение занимали больше места в макете.

В этом макете поля равны 64dp чтобы ограничить ширину контента.

Неправильно: не делай поля настолько большими, чтобы не хватало место контенту.

Межколонники и отступы

В одном и том же брейкпойнте ширина межколонника и отступов могут отличаться.

1 — 32dp отступы. 2–8dp межколонник

Горизонтальные сетки

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

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

1 — колонки. 2 — Межколонник. 3 — Поля

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

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

Брейкпоинт или контрольная точка

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

Система брейкпоинтов

Дизайн-система предоставляет брейкпоинты и структуру сеток для каждого устройства и его ориентации. В целом.ю макеты по колонкам делятся на 4, 8 и 12 колонок.

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

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

Порядок колонок в таблице выше

1. Breakpoint Range (dp) — колонка с диапазоном значений брейкпоинта.
2. Портретная ориентация
3. Альбомная ориентация
4. Размер
5. Количество колонок
6. Поля и межколонники

Пример 4й строчки из таблицы: На устройствах, у которых диапазон значений по ширине от 480dp до 599dp у которого 4 колонки, а поля и межколонник 16dp.

iOS брейкпоинты при использовании Material Design

Далее ниже таблица, в которой указано количество колонок, а также значения для полей и межколонников, которые применяются для брейкпоинтов для устройств на iOS

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

Поведение сетки

Резиновая сетка

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

При таком типе поведения колонки расширяются с контентом

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

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

Обрати внимание что поля хотя и резиновые (тянуться), однако при минимальной ширине (брейкпоинте) у них фиксированое значение.

Про UI области

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

Чтобы повысить степень удобство использования (юзабилити), элементы интерфейса для десктопа должны быть консистентны с мобильным устройством. Кардинальных изменений не должно быть.

Обрати внимание на то как перестраивается макет. Я про красную зону.

Постоянные области интерфейса

Фиксированные или постоянные области в интерфейсе — это области, которые закреплены и расположены за пределами сетки. Например боквая панель навигации ниже на картинке находится за пределами сетки. Такие области нельзя свернуть/закрыть. Пример ниже.

Когда на экране хватает места, то это место резервируется для какого-то компонента (прим. сайдбар на картинке)

Отключаемые постоянные области интерфейса

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

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

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

Временные области интерфейса

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

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

Вайрфреймы

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

1 — Мобильный вайрфрейм. 2 — Десктопный.

1 — Мобильный вайрфрейм. 2 — Десктопный.

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

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