Material Design на русском. Часть 36 — Взаимодействие: Выделение

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

Выделение это состояние, которое связано с конкретным элементом, который был выделен пользователем для какого-либо действия.

Свойства

Для чего

Выделенное состояние даёт пользователю понять, что он может совершить определенные действия именно с выделенным элементом.

Взаимодействия

На сенсорных устройствахНа сенсорных устройствах выделение элементов происходит с помощью:

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

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

• При наведении курсора на элемент (строку) можно показать чекбокс
• Когда пользователь кликнул, тогда чекбокс переключается в состояние «выбран» и чекбокс, соответственно, отображается

Выделение элемента

Выделение на мобильных устройствах

На сенсорных устройствах выбери элемент, тапнув и удерживая палец на нем.

Переход к режиму выбора

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

Выход из режима выбора

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

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

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

Если хотя бы один элемент будет выбран, то можно выделять другие или снимать выделение повторно нажав на элементы.

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

Выделение на настольных устройствах

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

В настольных системах клик на чекбокс выделяет элемент.

Отображение выделения у элементов

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

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

Неправильно: Выбранные элементы должны отличаться от невыбранных. Затемнение и/или какой-то визуальный элемент (например, галочка) будут лучшим выбором, чтобы помочь пользователю определить какой элемент выделен, а какой нет. Тут непонятно что выбрано, а что нет.

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

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