Windows 應用程式的內容設計基本知識

本文提供一些實用的秘訣和範例，可協助您設計應用程式的內容: Windows 間距理由、使用斜坡來示範階層、清單和格線，以及如何將控制項分組。

間距和裝訂邊

使用大小一致的間距和裝訂邊，會以語意方式將體驗分組為不同的元件。這些值會對應至我們的圓角邏輯，以共同協助建立連貫且可用的版面配置。

以 8 像素分隔的兩個按鈕。

按鈕間距為 8epx

按鈕和飛出視窗以 8 像素分隔。

按鈕與飛出視窗的間距為 8epx

以 8 像素分隔的控件和標頭。

控制項與標頭的間距為 8epx

控件和以 12 像素分隔的標籤

控制項和標籤的間距為 12epx

以 12 像素分隔的兩個內容區域。

內容區域的間距為 12epx

表面，包含兩側有 12 像素排水溝的文字。

表面與邊緣文字的間距為 16epx

字體坡形 (連結) 旨在提供一系列字體大小，有助於在應用程式內傳達階層關係。

有足夠空間時，使用標題、副標題和本文樣式的文字範例。

使用標題、子標題和本文搭配 12epx 間距。

在限制的空間中使用主體強式而非 Title 的範例。

需要在有限的 UI 空間中區分標題時，請將標題設為 Body Strong (本文強式)，且文字區塊之間不需要額外間距。

在受限空間中使用 Caption 樣式的範例。

針對極度受限、但需要容納文字的空間 (例如命令按鈕)，請使用標題大小。

您可以建立各種清單和格線樣式。以下列出 Windows 使用的各種組合方式。

具有多重元素清單專案的範例清單。

針對多行清單，請使用字體坡形中的 Body (本文) 和 Caption (標題)，搭配 32epx 的圖示。

將區段標頭設為 Body Strong (本文強式)。

水平清單的範例。

使用圖示或個人圖片元素做為格線項目時，請使用置中對齊的 Caption (標題) 文字。

包含大型清單專案的範例清單。

如果清單包含大型圖像元素和文字，請將主要文字設為 Body (本文) 樣式，並靠左對齊至影像。

在常見配置中，控制項如何相互關聯的一些範例。

具有子控件的展開器範例。

示範如何將展開器控制項 (連結) 與清單樣式和通用控制項搭配使用的範例。控制項應靠右對齊，並與展開器按鈕保持 16epx 的間距。

展開器內的控件如何對齊的範例。

此範例顯示置於展開器內部的控制項對齊方式。 Indent the controls 48epx. 將控制項縮排 48epx。