Material Design на русском. Часть 37 — Взаимодействие: Состояния

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

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

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

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

Аффорданс — это свойство или функция объекта, которая подсказывает, что с ним можно сделать.

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

Принципы

Четкость

Каждое состояние должно иметь четкий аффорданс, которое будет отличаться от других состояний и макета.

Смешивание

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

Консистентность

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

Типы состояний

Включенное (Enabled): состояние показывает то, что компонент или элемент интерактивен и доступен.

Отключенное (Disabled): состояние показывает то, что компонент не интерактивен, отключен, заблокирован или недоступен.

Наведение (Hover или Ховер): состояние показывается тогда, когда пользователь навел курсор на интерактивный компонент

В фокусе (Focused): состояние показывается тогда, когда пользователь выделил элемент с помощью клавиатуры или голосом.

Выделено (Selected): состояние показывается тогда, когда пользователь выбрал что-то в интерфейсе.

Активировано (Activated): состояние видно тогда, когда пользователь перешел в какой-либо пункт меню самостоятельно или экран был открыт по умолчанию.

Нажато (Pressed): состояние показывается тогда, когда пользователь тапнул.

Перетаскивание (Dragged): состояние показывается тогда, когда пользователь зажал и перетаскивает элемент.

Включено (On): булево (то есть есть всего 2 варианта — true/false, on/off) состояние, которое есть при переключении двух опций.

Выключено: булево (то есть есть всего 2 варианта — true/false, on/off) состояние, которое есть при переключении двух опций.

Состояние ошибки (error): появляется тогда, когда произошла ошибка после действий пользователя или системы.

Анатомия

Наложение (Overlay — оверлэй)

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

Цвет наложения совпадает с цветом текста или иконки на элементе, к которому он применяется. Если текст или иконка изменяют цвет во время смены состояния, наложение должно соответствовать этому цвету.

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

1 — Оверлэй у элементов списка. 2 — Оверлэй на чипсе. 3 — Оверлэй на контролах выбора (радио-кнопка и чекбокс).

(1) Высота в сочетании с наложением может подчеркнуть какое-нибудь из состояний.

(1) Смена цвета означает состояние.

(1) Иконки в сочетании с наложением может обозначать какое-либо состояние.

(1) Сообщения об ошибках могут быть дополнительными сигналами для состояний.

Значения прозрачности для наложения

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

(1) На белой поверхности используются значения как на картинке выше. (2) На #6200EE фоне использованы значения как на картинке выше, а дополнительно использован основной цвет как цвет наложения.

Отключено, недоступно или заблокировано (Disabled)

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

Отключенное состояние — это когда компонент или элемент не является интерактивным. Отключенные состояния рисуются с прозрачностью 38% от включенного состояния.

Отключенные состояния также могут указывать на то, что они не являются интерактивными из-за смены цвета и уменьшения высоты.

(1) Включенные и (2) отключенные кнопки различаются по цвету и высоте.

Наследование у состояния «Недоступно»

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

1 — Кнопки, переключающие режим. 2 — Контролы для выбора. 3 — Текстовые поля. 4 — Элемент списка.

Этого состояния нет у следующих компонентов: FAB кнопка, нижние и боковые списки, диалоговые окна, меню, всплывающие подсказки и предупреждения, а также этого состояния нет у навигационных компонентов (панели приложений, вкладки, нижняя навигация и степперы). Если действие, представленное в FAB, недоступно, FAB не должен появляться в макете.

Неправильно: у кнопки FAB (1), нижнего списка действий (2) и панели приложения (3) — не может быть отключенного состояния.

Поведение

У этого состояния ничего не происходит при нажатии или наведении курсора.

При наведении ничего не происходит. При клике тоже ничего не происходит.

Аналогичная ситуация, если попытаться тапнуть на компонент.

Неправильно: компоненты в состоянии «недоступно» не могут иметь состояния наведения (1), фокуса (2), перетаскивания (3), или нажатия (4).

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

1 — Отключена кнопка переключения. 2 — Отключена кнопка в макете.

Наведение (Hover)

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

1 — Наложение применено к элементу в компоненте. 2- К целому компоненту. 3 — В форме круга.

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

По наведению на элемент, может появляться дополнительные элементы или контролы.

Наследование у состояния «Наведение»

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

У иконок (1), текстовых полей (2), карточек (3) и кнопок (4) могут быть состояния наведения.

Определенные части интерфейса также могут иметь это состояние. Например у иконок в панели приложения (1), действия в списках (2), конкретная вкладка (3), элементы списка (4).

Этого состояния нет у следующих компонентов: панели приложений, вкладки, нижняя навигация, списки, диалоги, оповещения, меню и степперы.

Неправильно: Списки (1), диалоги (2), панель приложения (3) — не имеют состояния наведения.

Поведение

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

Состояния наведения можно комбинировать с другими состояниями: в фокусе, активировано, выбрано или нажатия.

Комбинация состояния наведения с состояниями: в фокусе (1), активировано (2), выбрано (3), нажато (4).

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

Значения прозрачности для наложения

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

1. На белой поверхности: слой наложения должен иметь черный цвет (#000000) с 4% прозрачностью
2. На цветной поверхности: слой наложения должен иметь белый цвет (#FFFFFF) с 8% прозрачностью
3. На изображениях: слой наложения должен иметь черный цвет (#000000) с 12% прозрачностью

В фокусе (Focus)

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

Это состояние появляется тогда, когда пользователь выделил элемент с помощью клавиатуры или голоса. Состояние применяется ко всем интерактивным компонентам.

Также следует уделять особое внимание этому состоянию, потому что кроме выделения элемента с помощью клавиатуры или голосом — ничего нет.

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

1 — Наложение применено к элементу в компоненте. 2- К целому компоненту. 3 — В форме круга.

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

1 — В состоянии фокуса элементы и контролы могут отображаться.

Наследование у состояния «В фокусе»

Компоненты могут наследовать состояние «в фокусе», например FAB кнопки, свитчеры и кнопки для переключения чего-нибудь, контролы для выбора, текстовые поля, иконки, элементы списков, карточки, чипсы и кнопки.

У иконок (1), текстовых полей (2), карточек (3) и кнопок (4) могут быть состояния фокуса.

Определенные части интерфейса также могут иметь это состояние. Например у иконок в панели приложения (1), действия в списках (2), конкретная вкладка (3), элементы списка (4).

Неправильно: Списки (1), диалоги (2), панель приложения (3) — не имеют состояния наведения.

Поведение

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

Состояние фокуса появляется за счет использования затухающей (fade) анимации.

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

Это состояние может присутствовать одновременно с состояниями: наведения, активации или выбора.

1 — Фокус + Наведение. 2 — Фокус + Активное состояние. 3 — Фокус и выбраное состояние.

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

Значения прозрачности для наложения

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

1. На белой поверхности: слой наложения должен иметь черный цвет (#000000) с 12% прозрачностью
2. На цветной поверхности: слой наложения должен иметь белый цвет (#FFFFFF) с 24% прозрачностью
3. На изображениях: слой наложения должен иметь черный цвет (#000000) с 36% прозрачностью

Selected (выбрано)

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

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

Слой наложения должен применяться либо ко всему компоненту, либо для элементов внутри компонента.

Наследование у состояния «выбрано»

Следующие компоненты могут наследовать состояние «выбрано»: изображения, элементы списка, карточки, чипсы, строки в таблицах, пункты меню и элементы выбора в определенных диалогах (например в диалоге с выбором даты или времени).

Эти компоненты не имеют состояния «выбрано»: панель приложения, бэкдроп, нижняя панель навигации, список, кнопки, диалоги, разделители, раскрывающиеся панели, предупреждения, снэкбары, вкладки, текстовые поля, всплывающие подсказки (тултипы).

Неправильно: у кнопок (1), текстовых полей (2), панелей приложений (3) и диалогов (4) — не может быть состояния «выбрано»

Поведение

Это состояние видно тогда, когда пользователь выбрал одну или более опций (т.е. компонентов и элементов).

Для этого состояния характерна анимация типа затухания (fade).

Выбранное состояние появляется в произвольном порядке (зависит от пользователя).

Состояние может быть скомбинировано с наведением, фокусом, нажатым состояниями, а также с состоянием перетаскивания.

1 — Комбинация с наведением. 2 — Комбинация с фокусом.

Множественный выбор элементов может присуствовать на макете и ничем не ограничен.

Множественный выбор.

Значения прозрачности для наложения

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

1. На белой поверхности: слой наложения должен иметь цвет из основной темы с 8% прозрачностью
2. На цветной поверхности: слой наложения должен иметь белый цвет (#FFFFFF) с 16% прозрачностью
3. На изображениях: слой наложения должен иметь черный цвет (#000000) с 24% прозрачностью

Activated (активировано)

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

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

Слой наложения должен применяться либо ко всему компоненту, либо для элементов внутри компонента.

1 — Активное состояние у чипса. 2 — Нижнее подчеркивание у активной вкладки.

Наследование у состояния «активировано»

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

Следующие компоненты могут наследовать состояние «активировано»: элементы в навигации, вкладки, нижние элементы навигации, элементы степпера, чипсы и кнопки для переключения чего-либо.

Неправильно: кнопки-переключатели (1), нижние элементы навигации (2), чипсы (3), элементы вкладок (4).

Эти компоненты не имеют состояния «активировано»: кнопки, FAB кнопка, слайдеры, панели приложения, нижние и боковые спииски, диалоги, предупреждения и элементы выбора.

У кнопок (1) и диалогов (2) нет активированного состояния.

Поведение

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

Используется анимация затухания (fade).

Активированное состояние появляется от действий пользователя.

Это состояние может быть одновременно с состояниями наведения и фокуса.

1 — Активировано + Наведение. 2 — Активировано + Фокус.

В ряде опций у компонента может быть только один активный элемент.

В списке меню есть только один активный элемент. В списке из чипсов активным может быть только один.

Значения прозрачности для наложения

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

1. На белой поверхности: слой наложения должен иметь цвет из основной темы с 12% прозрачностью
2. На цветной поверхности: слой наложения должен иметь белый цвет (#FFFFFF) с 24% прозрачностью
3. На изображениях: слой наложения должен иметь черный цвет (#000000) с 36% прозрачностью

Pressed (нажато)

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

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

Нажатые состояния вызывают изменения и должны быть с большим акцентом.

Наложение поверх компонентов и элементов рипл-анимации (ripple animation) означает нажатое состояние. Применимо для всего компонента или элемента, их части или в форме круга.

Наложение анимации ряби на элемент компонента (1), к компоненту целиком (2) или в форме круга (3).

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

Высота у нажатой кнопки (1) и карточки (2).

Наследование у состояния «нажато»

Нажатые состояния есть у следующих компонентов: кнопки, FAB кнопки, кнопки-переключатели, элементами выбора, элементы списка, карточки, чипсы, текстовые поля и иконки.

Иконки (1), текстовые поля (2), карточки (3) и кнопки (4) — имеют нажатое состояние.

У любого интерактивного элемента может быть нажатое состояние.

Интерактивные элементы или их части имеют нажатое состояние: иконки в панели приложения (1), действия в списках (2), элемент вкладок (3), элемент списка (4).

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

Неправильно: списки (1), панель приложения (2), диалоги (3) не могут быть нажаты.

Поведение

Состояние появляется в результате действий пользователя.

Нажатое состояние сопровождается ripple-анимацией (анимация ряби или пульсирующая анимация по-русски).

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

1 — Нажатие + наведение. 2 — Нажатие + фокус. 3 — Нажатие + выбранное состояние. 4 — Нажатие + активированное состояние.

В момент нажатия на элемент состояние воспроизводится только один раз.

Значения прозрачности для наложения

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

1. На белой поверхности: слой наложения должен иметь черный цвет с 16% прозрачностью
2. На цветной поверхности: слой наложения должен иметь белый цвет (#FFFFFF) с 32% прозрачностью
3. На изображениях: слой наложения должен иметь черный цвет (#000000) с 48% прозрачностью

Dragged (перетаскивание)

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

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

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

Слой наложения применен к элементу компонента (1) и на целый компонент (2).

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

1 — Перетаскивание карточки. 2 — Перетаскивание элемента списка.

Наследование у состояния «перетаскивание»

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

1 — Элемент списка. 2 — Изображение. 3 — Карточка. 4 — Чипс.

Состояния «перетаскивание» нет у следующих элементов: панель приложения, кнопки, нижняя навигация, диалоги, предупреждения, меню и степперы.

Неправильно: у кнопок (1), диалогов (2), панелей приложения (3), текстовых полей (4) нет состояния «перетаскивание».

Поведение

Состояние «перетаскивания» происходит когда пользователь зажимает и перетаскивает элемент, используя какой-либо метод ввода. Например, тап или клик мышки.

Используется анимация затухания (fade).

Пользователь должен иметь полный контроль при перетаскивании элементов.

Перетаскивать можно только один элемент в момент времени.

Значения прозрачности для наложения

Используются следующие значения прозрачности для обеспечения высокого контраста и видимости состояния «перетаскивание». Состояние «перетаскивание» должно быть с сильным акцентом.

1. На белой поверхности: слой наложения должен иметь черный цвет с 8% прозрачностью
2. На цветной поверхности: слой наложения должен иметь белый цвет (#FFFFFF) с 16% прозрачностью
3. На изображениях: слой наложения должен иметь черный цвет (#000000) с 32% прозрачностью

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

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