Взаимодействие с сенсорным взаимодействием

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

Обзор

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

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

Используйте эти рекомендации при создании пользовательских элементов управления, интерфейсов и платформ для приложений Windows.

Принципы проектирования

Рассмотрим следующее, как вы разрабатываете сенсорный интерфейс в приложении Для Windows.

Оптимизировано для сенсорного ввода

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

Согласованность между позами

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

Оперативно

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

Соблюдение договоренностей о касании

Обратная связь

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

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

Делать

Не

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

Дополнительные сведения см. в Руководстве по визуальной обратной связи и Анимациях в Windows 11

Паттерны взаимодействия касанием

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

Распространенные взаимодействия

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

• Коснитесь чтобы активировать или выбрать элемент
• Короткое нажатие и перетаскивание для перемещения объекта
• Нажмите и удерживайте, чтобы получить доступ к меню дополнительных, контекстных команд
• Проводите пальцем (или перетащите и отпустите) для контекстных команд
• Поверните по часовой стрелке или против часовой стрелки, чтобы повернуть

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

Нажатие

Проведите пальцем (или перетащите и отпустите)

Короткое нажатие и перетаскивание

Вращение

Нажмите и удерживайте

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

Жесты

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

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

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

• Перетащите или проведите, чтобы перемещаться назад и вперед
• Перетащите, чтобы закрыть
• Потяните для обновления

Жесты

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

Потянуть для обновления

Перетащите, чтобы закрыть

Дополнительные сведения см. в разделе «Переходы страницы» и «Потянуть для обновления».

Пользовательские жесты

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

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

Избегайте случайной навигации

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

Замечание

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

Опыт работы с сенсорными клавиатурами

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

Вызов при касании текстового поля

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

Использование стандартных элементов управления вводом текста

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

Текстовые элементы управления, поддерживающие платформу текстовых служб (TSF), предоставляют возможности записи фигур (пальцем клавиатуры).

Сенсорные сигналы клавиатуры

Учёт ввода, положения тела, аппаратных сигналов, которые делают сенсорную клавиатуру основным режимом ввода (аппаратная клавиатура отсоединена, точки входа вызываются с помощью сенсора, явное намерение пользователя вводить текст).

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

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

Целевые объекты попадания

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

чувствительный к прикосновениям

Мы определяем нажимаемый элемент как минимум 40 x 40 epx, даже если визуальный элемент меньше, или 32 epx в высоту, если ширина не менее 120 epx.

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

Оптимизировано для сенсорного ввода

Для пользовательского интерфейса, оптимизированного для сенсорного ввода, рекомендуется увеличить целевой размер до 44 x 44 epx с по крайней мере 4 epx видимого пространства между целевыми объектами.

Рекомендуется использовать два поведения по умолчанию: всегда оптимизировано для сенсорного ввода или перехода на основе сигналов устройства.

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

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

Сопоставление визуальных элементов с целевым объектом сенсорного ввода

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

Оптимизация портрета

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

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