Material Design на русском. Часть 26 — Форма и иерархия

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

Разрабатывая иерархию

Уникальные формы

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

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

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

Взаимосвязь элементов

Взаимосвязь элементов и формы

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

Похожие элементыЭто те формы, которые равнозначны по какому-либо атрибуту. Например, карточки в списке, которые схожи по размеру и, например, скруглению.

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

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

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

Правильно: Скругленная форма помогает подчеркнуть то, что элемент в правом нижнем углу отделен от фона.

Правильно: Схожая форма и размеры карточек в этом списке указывают на то, что они являются однородными и равноправными по важности.

Правильно: акцент на острый уголок в этом всплывающем элементе усиливает связь между ним и боковой навигацией

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

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

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