Material Design на русском. Часть 25 — О форме

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

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

Формирование материала

О материале

Элементы material по умолчанию имеют прямоугольную форму с закругленными углами 4dp. Форму можно настраиваться с помощью:

• Изменения углов
• Изменения граней

То как ты будешь менять формы зависит только от тебя.

Элемент Material по умолчанию можно менять как угодно

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

Акцент

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

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

Идентификация

Форма позволяет пользователям распознавать какие-то компоненты и различать material элементы лучше.

Эти чипсы можно отличить по форме.

Состояние

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

Карточка при выборе меняет форму уголка, чтобы показать то, что она была выбрана

Брендинг

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

Консистентное использование определенной формы в этом приложении помогает отразить бренд

Отображение формы

Форма видна тогда, когда элемент имеет достаточный контраст на фоне. По умолчанию в Material Design фигуры заметны за счет использования теней для явного обозначения граней у поверхностей. Можно использовать другие методы в сочетании с тенями или отдельно от них, например заливку и прозрачность .

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

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

Форма и значение

Передача смысла

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

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

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

Компоненты и форма

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

• Если компонент полагается на форму для распознавания
• Если это обосновано какими-то требованиями, например минимальная область для нажатия.

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

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

Неправильно: не используйте формы, которые могут путать пользователя. Эти кнопки («Add contacts», «Attach files», «Send») очень похожи на чипсы выше, что затрудняет распознавание компонентов.

Инструмент кастомизации формы

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

Компоненты деляться на три категории, в зависимости от размера (small — маленький, medium — средний и large — большой). Компоненты, которые относятся к одной из перечисленных категорий, наследуют значения формы (угол или скруление, размер скругления и т.д.) относительно той, что задана в категории. Но так или иначе, любой компонент может быть изменен.

По этой ссылке можно посмотреть этот инструмент

На какой платформе это всё доступно?

Изменения формы доступны везде: Android, iOS, Web, Flutter

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

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