다음을 통해 공유

터치 대상에 대한 지침

Windows 애플리케이션의 모든 대화형 UI 요소는 디바이스 유형이나 입력 방법에 관계없이 사용자가 정확하게 액세스하고 사용할 수 있을 만큼 충분히 커야 합니다.

터치 입력(및 터치 접촉 영역의 상대적으로 부정확한 특성)을 지원하려면 터치 디지타이저에서 보고하는 더 크고 복잡한 입력 데이터 집합이 사용자의 의도된 대상(또는 가장 가능성이 높음)을 결정하는 데 사용되므로 대상 크기 및 컨트롤 레이아웃과 관련하여 추가 최적화가 필요합니다.

모든 UWP 컨트롤은 편안하고 사용하기 쉽고 자신감을 주는 시각적으로 균형 잡힌 매력적인 앱을 빌드할 수 있는 기본 터치 대상 크기 및 레이아웃으로 설계되었습니다.

이 항목에서는 플랫폼 컨트롤과 사용자 지정 컨트롤(앱에 필요한 경우)을 모두 사용하여 최대한 유용하도록 앱을 디자인할 수 있도록 이러한 기본 동작에 대해 설명합니다.

중요 API: Windows.UI.Core, Windows.UI.Input, Windows.UI.Xaml.Input

Fluent Standard 사이즈 설정

Fluent Standard 크기는 정보 밀도와 사용자 편의성 간의 균형을 제공하기 위해 만들어졌습니다. 실제로 화면의 모든 항목은 40x40 유효 픽셀(epx) 기준에 맞춰져 있으며, UI 요소들이 그리드에 정렬되고 시스템 수준의 크기 조정에 따라 적절하게 크기를 조정할 수 있습니다.

비고

유효 픽셀 및 크기 조정에 대한 자세한 내용은 화면 크기 및 중단점 참조하세요.

시스템 수준에서의 크기 조정에 대한 자세한 내용은 맞춤, 여백, 안쪽 여백을 참조하세요.

Fluent Compact 크기 조정

애플리케이션은 Fluent Compact 크기 조정사용하여 더 높은 수준의 정보 밀도를 표시할 수 있습니다. 컴팩트한 크기 조정은 UI 요소를 32x32 epx 대상으로 맞춰, 이를 통해 UI 요소가 더 치밀한 그리드에 맞춰지고 시스템 수준 크기 조정에 따라 적절하게 조정될 수 있게 합니다.

예시

페이지 또는 그리드 수준에서 압축 크기 조정을 적용할 수 있습니다.

페이지 수준

<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.5mm 제곱 범위(1.0x 배율 고원에서 135PPI 디스플레이의 40x40 픽셀)로 설정합니다. 일반적으로 UWP 컨트롤은 7.5 mm 터치 대상을 기준으로 설계되어 있습니다(이는 특정 컨트롤 및 일반적인 사용 패턴에 따라 다를 수 있습니다). 자세한 내용은 컨트롤 크기 및 밀도 참조하세요.

이러한 대상 크기 권장 사항은 특정 시나리오에서 필요에 따라 조정할 수 있습니다. 다음은 고려해야 할 몇 가지 사항입니다.

  • 터치 빈도 - 반복하거나 자주 누르는 대상을 최소 크기보다 크게 만드는 것이 좋습니다.
  • 오류 결과 - 오류 발생 시 심각한 결과를 초래하는 대상은 더 많은 여유 공간을 확보하고 콘텐츠 영역의 가장자리로부터 더 멀리 배치되어야 합니다. 이는 자주 터치되는 대상에 특히 해당합니다.
  • 콘텐츠 영역에서의 위치
  • 폼 팩터 및 화면 크기
  • 손가락 자세.
  • 터치 시각화.

샘플

샘플 보관