共用方式為


觸控目標指引

Windows 應用程式中的所有互動式 UI 元素都必須足夠大,讓使用者能夠準確存取並使用,無論裝置類型或輸入方式為何。

支援觸控輸入(以及觸控接觸區域相對不精確的特性)需要進一步優化目標大小與控制佈局的設計,因為觸控數位板報告的輸入資料量較大且複雜,用來判斷使用者的預期(或最可能)目標。

所有 UWP 控制項皆採用預設的觸控目標大小與版面設計,讓你打造視覺平衡且吸引人的應用程式,既舒適、易用又令人安心。

在本主題中,我們將說明這些預設行為,讓你能同時使用平台控制項和自訂控制項(若應用程式需要)來設計應用程式,達到最大可用性。

重要 APIWindows.UI.CoreWindows.UI.InputWindows.UI.Xaml.Input

Fluent 標準大小調整

「Fluent 標準大小調整」旨在提供資訊密度和使用者舒適度之間平衡。 實際上,畫面上所有的項目都會對齊 40x40 有效像素 (epx) 目標,其可讓 UI 元素貼齊格線並根據系統層級縮放適度調整。

備註

如需有效像素與縮放規模的詳細資訊,請參閱螢幕大小和中斷點

如需系統層級縮放的詳細資訊,請參閱對齊、邊界、邊框距離

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 正方形範圍(於 135 PPI 顯示器上 40x40 像素,縮放級數為 1.0x 水平)。 通常,UWP 控制會與 7.5mm 觸控目標對齊(這會依照特定控制方式及常見使用模式而異)。 詳情請參見 控制、大小與密度

這些目標尺寸建議可依照您的具體情況調整。 以下是一些需要考量的事項:

  • 觸碰頻率——考慮讓被反覆或頻繁按壓的目標比最小尺寸更大。
  • 錯誤後果——若誤觸會造成嚴重後果的目標,應當有更多的留白,並放置在遠離內容區域邊緣的位置。 這對於經常被觸碰的目標尤其如此。
  • 內容領域的位置。
  • 外型和螢幕尺寸。
  • 手指姿勢。
  • 觸覺視覺化。

Samples

存檔樣品