Рекомендации для целевых объектов сенсорного ввода

  • Статья

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

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

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

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

Важные API-интерфейсы: Windows.UI.Core, Windows.UI.Input, Windows.UI.Xaml.Input

Размеры Fluent Standard

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

Примечание

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

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

Размеры Fluent Compact

Приложения могут отображать более высокий уровень плотности информации с помощью размера Fluent Compact. Компактный размер выравнивает элементы пользовательского интерфейса по целевому объекту 32 x 32 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 мм (40 x 40 пикселей на дисплее с 135 PPI на плато масштабирования 1,0x). Как правило, элементы управления UWP соответствуют целевому объекту сенсорного ввода 7,5 мм (это может отличаться в зависимости от конкретного элемента управления и любых распространенных шаблонов использования). Дополнительные сведения см. в разделе Размер и плотность элементов управления .

Эти рекомендации по размеру цели можно скорректировать для конкретного сценария. Следует учесть ряд факторов:

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

Примеры

Примеры архива