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

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

Принципы

Альтернативное взаимодействие

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

Простота в использовании

Помни, что пальцы — это не точный способ ввода.

Тактильное управление

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

Свойства

Предлагай реалистичную обратную связь

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

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

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

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

Неправильно: не искажай скорость анимации. Анимация должна соответствовать скорости пользователя.

Показывай жесты

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

Зеленый край как бы намекает пользователю потянуть за него на экран.

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

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

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

Показывай что жест делает

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

Элементы должны незамедлительно реагировать при использовании жестов.

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

Жесты, которые что-то делают, то есть выполняют какие-то функции, должны сопровождаться какой-нибудь объясняющей графикой или иконкой, чтобы предположить то, что делает жест.

Во время свайпа появляется иконка, которая намекает на цель этого жеста. Когда фон под карточке закрашивается, то это индикатор того, что после завершения жеста пользователем, действие будет завершено.

Типы жестов

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

Типы жестов:

• Жесты для навигации
• Жесты для действий
• Жесты для транформации

Жесты для навигации

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

Типы навигационных жестов:

• Тап (или нажатие)
• Скрол (или прокручивание) и панорамирование
• Перетаскивание
• Свайп (или смахивание)
• Сжатие и растягивание (или пинч)

Нажатие (тап)

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

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

Скрол и панорамирование

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

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

Панорамирование позволяет пользователям перемещаться в любом направлении.

Перетаскивание

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

Пользователи могут перетаскивать контент. Например, нижние списки действий.

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

Свайп (или смахивание)

Пользователи могут перемещаться по однородному контенту горизонтально. Например, по вкладкам.

Смахивая пальцем, можно перемещаться по вкладкам.

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

Сжимание и растягивание

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

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

Жесты действия

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

Типы жестов действия:

• Тап
• Длинное нажатие
• Свайп

Тап или длинное нажатие

Жест тап и жест длинного нажатия позволяют пользователям взаимодействовать с элементами и получать доступ к дополнительным функциям.

Тап позволяет пользователям выполнять действия и взаимодействовать с элементами.

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

Свайп

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

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

Жесты для трансформации

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

Типы жестов трансформации:

• Двойной тап
• Сжимание и растягивание
• Сложные жесты
• Схватить и передвинуть

Двойной тап или сжимание/растягивание

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

Жесты сжимание и растягивание позволяют пользователям увеличивать и уменьшать масштаб контента.

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

Сложные жесты

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

Правильно: обрати внимание как свободно используются жесты масштабирование, поворот и панорамирование.

Неправильно: не ограничивай свободу в переключении между жестами

Схватить и передвинуть

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

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

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

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