Windows 應用程式中的所有互動式 UI 元素都必須足夠大,讓使用者能夠準確存取並使用,無論裝置類型或輸入方式為何。
支援觸控輸入(以及觸控接觸區域相對不精確的特性)需要進一步優化目標大小與控制佈局的設計,因為觸控數位板報告的輸入資料量較大且複雜,用來判斷使用者的預期(或最可能)目標。
所有 UWP 控制項皆採用預設的觸控目標大小與版面設計,讓你打造視覺平衡且吸引人的應用程式,既舒適、易用又令人安心。
在本主題中,我們將說明這些預設行為,讓你能同時使用平台控制項和自訂控制項(若應用程式需要)來設計應用程式,達到最大可用性。
重要 API: Windows.UI.Core、 Windows.UI.Input、 Windows.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 觸控目標對齊(這會依照特定控制方式及常見使用模式而異)。 詳情請參見 控制、大小與密度 。
這些目標尺寸建議可依照您的具體情況調整。 以下是一些需要考量的事項:
- 觸碰頻率——考慮讓被反覆或頻繁按壓的目標比最小尺寸更大。
- 錯誤後果——若誤觸會造成嚴重後果的目標,應當有更多的留白,並放置在遠離內容區域邊緣的位置。 這對於經常被觸碰的目標尤其如此。
- 內容領域的位置。
- 外型和螢幕尺寸。
- 手指姿勢。
- 觸覺視覺化。