Material Design на русском. Часть 9 — Поведение компонентов
Привет. Меня зовут Руслан. Я UX/UI дизайнер в Siemens. У меня есть ютуб-канал, на котором записано несколько плейлистов по основам UX/UI дизайна. В этой серии постов однако я просто делюсь вольным переводом Material Design на русский язык. Оригинальный источник: здесь.
В этой статье описывается поведение компонентов как в сетке, так и их поведение между брейкпоинтами.
Терминология позиционирования
Элементы пользовательского интерфейса ведут себя по-разному в зависимости от брейкпоинта.
Термины
Положение элементов интерфейса, компонентов и поверхностей в сетке можно описать с помощью следующих терминов:
Оригинальная таблица терминов из Material Design
Это перевод, который соответствует таблице выше из оф. гайда
Ширина компонента
Ширина компонента может оставаться одинаковой на всех размерах экрана или изменяться в зависимости от макета. Ширина компонента может быть:
- Зафиксированной
- Резиновой
Поскольку элементы фиксированной ширины сохраняют её при изменении макета, их расположение может меняться, чтобы адаптироваться под макет. Их размещение может быть любым:
- Элементы могут выталкивать другие
- Элементы могут быть наложены друг на друге
Фиксированная ширина
Когда элемент зафиксирован по ширине, тогда его ширина остается неизменной даже при изменении размера экрана.
Компонент кнопки остается неизменным и расположен по правому краю сетки
Резиновая ширина
Если элемент тянется по ширине, то ширина компонента будет расширяться или сжиматься по мере увелеичения или уменьшения экрана.
На картинке кнопка плавно масштабируется в пределах двух колонок
Неправильно: не используй узкие контейнеры для резиновых элементов.
Использовать осторожно: при размещении резинового компонента на несколько колонок, потому что элементы по типу кнопки, могут брать на себя чересчур много внимания при большей ширине экрана.
Выталкивание
Когда макет иди размера экрана меняется, тогда компонент может быть сдвинут с исходной позиции. Ширина компонента остается прежней, но его позиция меняется по горизонтали, перемещаясь влево или вправо. Когда это происходит, он может быть частично закрыт экраном.
Обрати внимание: контентная область выталкивается за пределы экрана боковой панелью навигации (сайдбаром)
Наложение
Когда UI меняется, тогда компонент может быть перекрыт другими элементами, которые будут его закрывать. В этой ситуации его позиция и размеры остаются неизменными.
Обрати внимание: контентная область перекрывается боковой панелью навигации (сайдбаром), но сама область не сдвигается, а элементы остаются в исходных размерах.
Паттерны отзывчивости
Компоненты могут адаптироваться в зависимости от размера экрана и типа устройства, используя следующие шаблоны:
- Использование других компонентов, которые лучше вписываются в пространство
- Видоизменять как-нибудь компоненты, чтобы подстроить их для размещения в небольшом пространстве
- А еще можно изменить метод ввода
По мере увеличения пространства экрана могут применяться следующие шаблоны для адаптации макетов.
Раскрытие
Элементы интерфейса, которые спрятаны на мобильных устройствах, могут быть отображены тогда, когда в установленном брейкпоинте будет для этих элементов пространство.
Например, такие элементы как боковая панель навигации, можно показать на экранах больше чем смартфон (например на планшете).
При увеличении размеров экрана, можно раскрыть/показать больше вариантов/опция для взаимодействия с контентом.
Контент, который не умещается на маленьком устройстве, может быть показан полностью тогда, когда для этого хватает места на экране.
Трансформация
Компоненты могут меняться из одного в другой при определенном брейкпоинте.
На этом примере боковая навигация трансформируется в вкладки на большом экране.
Простой список может трансформироваться в список из изображений на большом экране.
Выпадающий список меню может трансформироваться в иконки на большем экране
Разделение
На мобильном устройстве много информации, которую плотно умещают это понятно. Но по мере того, как ширина экрана увеличивается, то интерфейс можно скомпоновать и распределить так, чтобы объединить в одном компоненте, когда для этого есть пространство.
Боковая навигация, список и его подробности (данные) разделены (список занимает всю ширину в виде таблицы), чтобы заполнить пространство на большом экране.
На большом экране нет нужды делать переключение между вкладками, так как для этого есть место.
Перестроение
Интерфейс может перестраиваться, чтобы перераспределить и заполнить доступное пространство.
На смартфонах обычно все располагается в колонку. При увеличении размера экрана ты можешь перестроить макет так, чтобы контент заполнял все доступное пространство.
Обрати внимание, что вкладки ты можешь перестроить в вертикальный список на большом экране.
Элементы можно перестроить внутри компонента в зависимости от соотношения сторон или ориентации устройства.
Расширение
Интерфейс может банально расширяться на всё доступное пространство.
Например карточки могут расширяться чтобы заполнить пространство.
Диалоги могут расширяться пропорционально контенту или с определенным шагом.
Позиция
Положение компонентов интерфейса может измениться на более подходящее.
Нижний список действий (bottom sheet) может переместиться в меню на большом экране
Плавающая кнопка (FAB) может перемещаться в более видное место относительно других элементов интерфейса на большом экране
Как следить за обновлениями гайдлайна и переводом?
- Структуированный документ в Notion
- Официальные обновления Google на странице what’s new