Material Design на русском. Часть 29 — Применение формы в UI

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

Система Material даёт возможность задавать уникальные формы компонентам.

Схема формы

Категории форм

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

Маленькие компоненты
Средние компоненты
Большие компоненты

Компоненты, которые могут быть кастомизированы

Нижу список категорий компонентов, которым можно задать уникальные формы углов:

Маленькие компоненты

Кнопки
Чипсы
Нижний список (свернутый)*
Плавающая кнопка действия (Fab)
Текстовое поле с заливкой
Текстовое поле с обводкой
Снэкбар
Тултип

Средние компоненты

Карточки
Диалоги
Картинка
Меню

Большие компоненты

Бэкдроп *
Таблица
Нижний список (раскрытый и в режиме «на весь экран») *
Модальный нижний список (свернутый)
Модальный нижний список (состояние по умолчанию и в режиме «на весь экран») *
Меню навигации (снизу, нераскрытое)
Меню навигации (снизу, раскрыто или в режиме «на весь экран») *
Навигация (сбоку)
Список действий (сбоку)
Стандартный нижний список (свернутый)
Стандартный нижний список (состояние по умолчанию и в режиме «на весь экран») *

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

Атрибуты формы

Категории атрибутов

Формам можно задать следующие атрибуты:

Семейство форм
Размер формы
Симметрия

Кнопка, отображаемая выше, имеет следующие атрибуты:

Компонент: Кнопка
Элемент: Контейнер
Категория: Маленький размер
Атрибут: семейство форм и размер
Значения: семейство — закругленный угол, 4dp по по углам

Модальный нижний список выше имеет следующие атрибуты:

Компонент: Модальный нижний список
Элемент: Контейнер
Категория: Средний размер
Атрибут: семейство форм и размер
Значения: семейство — закругленный угол, 4dp;4dp;нету;нету

*В нижних списках можно кастомизировать только верхний левый и правый углы.

Семейство форм

Можно применить один из двух стилей на углы компонентов:

Закругленный угол
Скошенный угол

Скругленный угол

Скошенный угол

Размер форм

Размер формы можно задать с помощью конкретного значения в dp либо в процентах.

Конкретный размер
Абсолютный размер — это конкретные значения, например 2dp. Когда радиус угла или скос имеют абсолютный размер, тогда значение не меняется в зависимости от высоты компонента. Например, если компонент динамически меняет высоту, форма угла сохраняет абсолютный радиус или длину скоса.

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

На примере размеры и форма остаются такими же, несмотря на то, что кнопка становится выше.

На примере форма использует процентное значение, поэтому форма углов становится больше по мере увеличения кнопки по высоте

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

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

Симметрия

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

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

В RTL-языках (те, что читаются справа налево) придется зеркально отразить формы в макете, если это влияет на удобство использования.

Симметричная форма у компонента

Ассиметричная форма компонента

Углы компонентов, которые прилеплены к краям экрана, не могут быть кастомизированы.

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

Неправильно: не меняй углы, которые прилеплены к краям экрана.

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

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

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

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

Тема Material по умолчанию включает в себя несколько форм компонентов с возможностью кастомизации.

Чипс и FAB кнопка с базовыми значениями семейства форм и размеров
Чипс и FAB кнопка с кастомными значениями семейства форм и размеров

Выбор форм

Бренд и иерархия

Изменение формы у компонентов может отражать бренд и иерархию в интерфейсе.

Бренд
Используя форму в интерфейсе, можно отразить бренд. Например, можно использовать органическую или геометрическую форму, которая отражает какую-то идею бренда.

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

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

Неправильно: смешивание форм может затруднить понимание бренда.

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

Правильно: FAB кнопка выделяется на фоне прямых линий других элементов в этом UI

Неправильно: на этом примере трудно найти FAB кнопку (плавающая кнопка)

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

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

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

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

Трансормация

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

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

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

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

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

Изогнутая форма убирается с нижнего списка, когда он расширяется до полноэкранного режима.

Как контент и форма влияют друг на друга

На форму компонента может влиять его контент или системные настройки.

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

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

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

Выбор формы
Изменение стиля формы может повлиять на контент компонента. Например, большой срезанный угол на карточке будет заходить в область контента сильнее, чем закругленный угол того же размера. Это может привести к непониманию контента пользователем или обрезке изображений. Чтобы избежать подобных ситуаций, попробуй выбрать другую форму и размер в тандеме с другой композицией контента.

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

Базовые значения формы

Диапазоны значений

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

Как читать таблицуКаждый компонент имеет два значения: одно для размера и одно для семейства. Значения применяются к компоненту по часовой стрелке (порядок схож на синтаксис, используемый в css):

Верхний левый угол; верхний правый угол; нижний правый угол; нижний левый угол

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

Формы углов имеют размер до 50% от высоты компонента. Для некоторых компонентов не рекомендуется делать скошенные углы, так как такая форма может привести к обрезке контента.

Категория: маленькие компоненты

* указывает на перезаписываемое значение

Категория: средние компоненты

* указывает на перезаписываемое значение

Категория: большие компоненты

* указывает на перезаписываемое значение

* указывает на перезаписываемое значение

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

Панель приложений: нижняя
Панель приложений: верхняя
Баннер
Чекбокс
Разделитель (или дивайдер)
Раскрытый нижний список (в режиме «на весь экран»)
Модальный вид нижнего списка (в режиме «на весь экран»)
Свитчер (тумблер/переключатель)
Стандартный нижний список (в режиме «на весь экран»)
Табы

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

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