Поделиться через

Рекомендации по использованию сенсорных целей

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

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

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

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

Важные API: Windows.UI.Core, Windows.UI.Input, Windows.UI.Xaml.Input

Размер Fluent Standard

Размерная система Fluent Standard была создана для обеспечения баланса между информационной плотностью и комфортом пользователя. Фактически все элементы на экране выравниваются к цели 40x40 эффективных пикселей (epx), что позволяет элементам пользовательского интерфейса выравниваться по сетке и масштабироваться соответствующим образом с учётом масштабирования уровня системы.

Замечание

Дополнительные сведения об эффективных пикселях и масштабировании см. в разделе Размеры экрана и точки останова

Дополнительные сведения о масштабировании уровня системы см. в разделе Выравнивание, поле и заполнение.

Размер версии Fluent Compact

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

Примеры

Компактный размер можно применить на уровне страницы или сетки.

Уровень страницы

<Page.Resources>
    <ResourceDictionary Source="ms-appx:///Microsoft.UI.Xaml/DensityStyles/Compact.xaml" />
</Page.Resources>

Уровень сетки

<Grid>
    <Grid.Resources>
        <ResourceDictionary Source="ms-appx:///Microsoft.UI.Xaml/DensityStyles/Compact.xaml" />
    </Grid.Resources>
</Grid>

Размер целевого объекта

Как правило, установите размер целевого объекта сенсорного ввода в диапазоне квадрата 7,5 мм (40x40 пикселей на дисплее 135 PPI при коэффициенте масштабирования 1.0x). Как правило, управляющие элементы UWP соответствуют целевому размеру сенсорного ввода 7,5 мм (это может отличаться в зависимости от конкретного элемента управления и любых распространенных шаблонов использования). Дополнительные сведения см. в разделе Размер элемента управления и плотность.

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

  • Частота касаний — рассмотрите возможность создания целевых объектов, которые многократно или часто нажимаются больше минимального размера.
  • Последствия ошибки — целевые объекты, которые имеют серьезные последствия при случайном касании, должны иметь большой отступ и быть расположены дальше от края области содержимого. Это особенно верно для целевых объектов, которые часто касаются.
  • Положение в области содержимого.
  • Форм-фактор и размер экрана.
  • Положение пальцев.
  • Визуализации касаний.

Образцы

Архивные примеры