Share via

觸控目標的指導方針

  • 發行項

不論裝置類型或輸入方法為何，Windows 應用程式中的所有互動式 UI 元素都必須足夠大，以便使用者能夠準確地存取和使用。

支援觸控輸入 (和觸控接觸區域相對不精確的特性) 需要進一步最佳化目標大小和控制配置，因為由觸控數位板報告的更大、更複雜之輸入資料集可用來判斷使用者的預期 (或最可能的) 目標。

所有 UWP 控制項都採用預設的觸控目標大小和版面配置進行設計，使您能夠建立視覺平衡且有吸引力的應用程式，這些應用程式既舒適易用又能增強使用者的使用信心。

在本主題中，我們將介紹這些預設行為，以便您可以使用平台控制項和自訂控制項 (如果應用程式需要它們) 來設計應用程式以實現最大可用性。

重要 API：Windows.UI.Core、Windows.UI.Input、Windows.UI.Xaml.Input

Fluent 標準大小調整

「Fluent 標準大小調整」旨在提供資訊密度和使用者舒適度之間平衡。 實際上，畫面上所有的項目都會對齊 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.5 mm 正方形範圍 (1.0x 縮放倍數的 135 PPI 顯示器上為 40x40 像素)。 通常，UWP 控制與 7.5 mm 觸控目標保持一致 (這可能會因特定控制項和任何常見使用模式而有所不同)。 如需詳細資訊，請參閱控制項大小和密度。

可以根據您的特定案例需要調整這些目標大小建議。 以下是一些要考量的事項：

  • 觸控頻率 - 考慮使重複或頻繁按下的目標大於最小尺寸。
  • 錯誤後果 - 如果錯誤觸控會發生嚴重後果的目標應該有更大的邊框間距，並放置在距離內容區域邊緣較遠的位置。 尤其是經常觸控的目標更是如此。
  • 在內容區域中的位置。
  • 外形尺寸和螢幕尺寸。
  • 手指姿勢。
  • 觸控視覺效果。

範例

封存範例