Material Design на русском. Часть 10 — Плотность информации в макете

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

Material design даёт рекомендации по улучшению пользовательского опыта при работе с большим объемом информации. Для этого Material design предоставляет это руководство для работы с плотностью информации.

Это руководство в бета-версии и отражает последние идеи Material Design на момент его публикации. Руководство может измениться в будущем.

Использование

Эти рекомендации описывают, как и когда работать с плотностью.

Принципы

Сканируемость. Интерфейс, где всё плотно скомпоновано может улучшать сканирование информации и навигацию по ней при большом объеме контента.

Приоритезация. Если информация плотно расположена, то это может помочь пользователям лучше фокусироваться на своих задачах. За счет сокращения пространства между элементами.

Видимость. Когда всё располагается плотно, тогда, что логично, помещается больше контента и ключевых действий на одном экране.

Руководство по плотности

Как применять

Для улучшения опыта пользователей у вас есть возможность скорректировать плотность компонентов по определенной шкале, которая уже поддерживается дизайн-системой в коде. Это объясняется в разделе плотность компонентов далее по статье, а информацию про поддержку платформ можно найти в разделе «Реализация».

Когда применять

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

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

1 — Повышение плотности у таблицы. 2 — Повышение плотности формы

Когда не надо работать с плотностью

Задачи и компоненты, которые сообщают о каких-то оповещениях, не должны увеличивать плотность.

Фокус на задаче

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

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

Предупреждения и системные сообщения

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

Не увеличивай плотность компонентов у оповещений и сообщений.

Макет

Поддерживайте баланс между плотностью компонентов и сеткой.

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

Сетка и плотность компонентов

Правильно: Компоненты с высокой плотностью должны иметь большие поля и межколонники.

Не правильно: не используйте одновременно плотную сетку и компоненты в макете.

Компоненты

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

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

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

Интерактивное демо

По ссылке ниже можно посмотреть компоненты с разной плотностью.

[## Glitch: The friendly community where everyone builds the web

Simple, powerful, free tools to create and use millions of apps.

glitch.com](https://glitch.com/~material-density?source=post_page-----d6922c9c7cec---------------------------------------)

Шкала плотности

Шкала плотности позволяет контролировать плотность отдельных компонентов.

Шкала плотности нумеруется, начиная с 0. Это значение по умолчанию. Она также может сдвигаться и к отрицательным числам (-1, -2, -3) по мере уменьшения пространства, создавая более высокую плотность. Каждое увеличение представляет собой уменьшение высоты компонента с шагом 4dps.

Плотность применяется к кнопке

Не извращайся над компонентами, чрезмерно увеличивая плотность. Плотность при -4 разрушает компонент.

Методы по работе с пространством

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

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

Размер. На картинке показано то, как меняется высота при увеличении плотности компонентов.

Выравнивание. Используй выравнивание по центру. Просто выравнивая по центру, ты уже регулируешь высоту у компонента без дополнительной работы над выравниванием.

Работа над пространством у нескольких элементов

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

1 — Элементы находятся на расстоянии 20dp друг от друа. 2 — Сгруппированные элементы отцентрированны внутри контейнера по вертикали.

Доступность

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

Область срабатывания есть у любого устройства, которое имеет сенсорный ввод. Чтобы регулировать плотность и юзабилити (степень удобства использования), область срабатывания для компонентов по умолчанию должна быть не менее 48 x 48 dp, и отступом не менее 8dp между каждым элементом. Примечание: на iOS рекомендуемая область срабатывания 44 х 44 dp.

Минимальная область срабатывания/взаимодействия — 48x48dp.

40dp элемент, 48dp область его срабатывания.
24dp элемент, 48dp область его срабатывания.
36dp элемент, 48dp область его срабатывания.

Минимальная область для взаимодействия в Material составляет 48 на 48 dp — это стандарт в любом продукте, за исключением iOS. У пользователей может быть возможность самостоятельно изменить плотность по желанию.

Здесь показано решение по настройке плотности информации в приложении.

Типографика

Высота строки

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

Имплементация (где реализовано)

Ниже таблица, на которой указаны платформы и поддержка плотности в кодовой базе дизайн-системы.

Как видно из таблицы: только в вебе доступна кодовая база по работе над плотностью компонентов. Остальные платформы только в планах.

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

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