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