다음을 통해 공유

터치 대상에 대한 가이드라인

  • 아티클

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

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

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

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

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

Fluent Standard 크기 조정

Fluent Standard 크기 조정는 정보 밀도와 사용자 편의 간에 균형을 유지하기 위해 개발되었습니다. 화면에 있는 모든 항목을 40x40 유효 픽셀(epx) 대상에 정렬되기 때문에 UI 요소를 그리드에 맞추고 시스템 수준 스케일링에 따라 적절하게 크기를 조정할 수 있습니다.

참고 항목

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

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

Fluent 컴팩트 크기 조정

애플리케이션은 Fluent 컴팩트 크기 조정을 통해 더 높은 수준의 정보 밀도를 표시할 수 있습니다. 컴팩트 크기 조정은 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 크기 조정 수준에서 135 PPI 디스플레이의 40x40 픽셀)로 설정합니다. 일반적으로 UWP 컨트롤은 7.5mm 터치 대상에 맞춰집니다(특정 컨트롤 및 일반적인 사용 패턴에 따라 달라질 수 있음). 자세한 내용은 컨트롤 크기 및 밀도를 참조하세요.

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

  • 터치 빈도: 반복적으로 또는 자주 누르는 대상은 최소 크기보다 크게 지정하는 것이 좋습니다.
  • 오류 결과: 오류로 터치한 경우 심각한 결과가 발생하는 대상은 더 큰 안쪽 여백을 사용해야 하며 콘텐츠 영역의 가장자리에서 더 멀리 배치되어야 합니다. 이는 특히 자주 터치되는 대상에 적용됩니다.
  • 콘텐츠 영역의 위치
  • 폼 팩터 및 화면 크기
  • 손가락 모양
  • 터치 시각화

샘플

보관 샘플