Windows 應用程式中的印刷樣式
作為語言的視覺表示,印刷格式的主要工作是溝通資訊。 其樣式絕對不能阻礙這項目標。 在這篇文章中,我們將會討論如何在您的 Windows 應用程式中設定印刷樣式,以協助使用者輕鬆且有效地了解內容。
字型
您應該在整個應用程式 UI 中使用單一字型,我們建議您維持 Windows 應用程式的預設字型 Segoe UI Variable。 它設計成可維持不同大小和像素密度的最佳可讀性,並能提供輔助系統內容的乾淨、明亮、開放審美觀。
若要顯示非英文語言或為應用程式選取不同字型,請參閱語言和字型以了解我們對 Windows 應用程式的建議使用字型。
為 UI 選擇一種字型。
請勿混合使用多個字型。
可變字型軸
The Segoe UI Variable 字型包含兩個座標軸,可更精細地控制文字。 這個字型具有一個粗細軸 (wght
),其粗細範圍從 Thin (100) 到 Bold (700)。 它還具有一個光學尺寸軸 (opsz
),用於光學縮放,範圍從 8pt 到 36pt。 使用 XAML 通用控制項時,預設會針對支援的語言選取 Segoe UI Variable 字型。 當使用此字型或具有光學軸的其他可變字型時,光學大小將自動根據所要求的字體大小進行調整。 使用 HTML 時,光學縮放也是自動的,但您必須在 CSS 中指定 Segoe UI Variable 字型。
大小和縮放比例
UWP 應用程式的字型大小會在所有裝置上自動縮放。 此縮放演算法可確保使用者在 10 英呎遠的 Surface Hub 上看到的 24 px 字型,就和在只有幾英吋遠的 5 吋手機上看到的 24 px 字型一樣清晰。
因為縮放比例系統的運作方式,您是以有效像素進行設計,而不是實際實體像素,而且您不應根據不同的螢幕大小或解析度來變更字型大小。
遵循 Windows 字體坡形大小調整。
請勿使用小於 12 像素的字型大小。
階層
使用者在掃描頁面時依賴視覺階層:標頭摘要顯示內容,本文提供更多詳細資料。 若要在應用程式中建立清楚的視覺階層,請遵循 Windows 字體坡形。
字型坡形
Windows 字體坡形可在頁面的類型之間建立重要關係,協助使用者輕鬆閱讀內容。 所有大小都是有效像素,會針對在所有裝置上執行的 UWP 應用程式而最佳化。
查看有關使用 XAML 字型坡形的指南以了解更多詳細資訊。
對齊方式
預設 TextAlignment 是 Left,而在大部分情況下,靠左和不齊右方法可提供一致的內容錨定與統一的配置。 對於 RTL 語言,請參閱調整配置和字型以支援全球化。
<TextBlock TextAlignment="Left">
字元計數
每行維持 50–60 個字母以利閱讀。
每行請勿少於 20 個字元或超過 60 個字元,因為這樣會難以閱讀。
裁剪和省略符號
當文字量超過可用空間時,建議裁剪文字並插入省略符號 [...],這是大部分 UWP 文字控制項的預設行為。
<TextBlock TextWrapping="WrapWholeWords" TextTrimming="Clip"/>
裁剪文字,如果啟用多行則換行。
請勿使用省略符號以避免視覺干擾。
注意
如果容器未明確定義 (例如,沒有區別的背景色彩),或是有連結可顯示更多文字,則請使用省略符號。
語言
Segoe UI Variable 是我們英文、歐洲語言、希臘文和俄文的字型。 對於其他語言,請參閱下列建議。
全球化/當地語系化字型
使用 LanguageFont 字型對應 API,以程式設計方式存取特定語言的建議字型系列、大小、粗細和樣式。 LanguageFont 物件提供各種內容類別的正確字型資訊存取權,包括 UI 標頭、通知、內文文字,以及使用者可編輯的文件本文字型。 如需更多資訊,請參閱調整配置和字型以支援全球化。
非拉丁語言的字型
字型家族 | 樣式 | 備註 |
---|---|---|
Ebrima | 常規、粗體 | 非洲字型的使用者介面字型 (ADLaM、Epic、N'Ko、Osmanya、Tifinagh、Vai)。 |
Gadugi | 常規、粗體 | 北美洲字型的使用者介面字型 (加拿大音節文字、切羅基文、奧薩奇文)。 |
Leelawadee UI | 常規、稍細體、粗體 | 東南亞字型的使用者介面字型 (布吉文、高棉文、寮文、泰文)。 |
Malgun Gothic | 一般 | 韓文的使用者介面字型。 |
Microsoft JhengHei UI | 常規、粗體、細體 | 繁體中文的使用者介面字型。 |
Microsoft YaHei UI | 常規、粗體、細體 | 簡體中文的使用者介面字型。 |
緬甸文字 | 一般 | 緬甸字型的後援字型。 |
Nirmala UI | 常規、稍細體、粗體 | 南亞字型的使用者介面字型 (孟加拉文、查克馬文、梵文字母、古吉拉特文、果魯穆奇文、坎納達文、馬來亞拉姆文、曼尼普爾文、歐迪亞文、桑塔爾文、僧伽羅文、索朗桑朋文、坦米爾文、泰盧固文)。 |
Segoe UI | 常規、斜體、細斜體、黑體斜體、粗體、粗斜體、細體、稍細體、略粗體、黑體 | 阿拉伯文、亞美尼亞文、喬治亞文和希伯來文的使用者介面字型。 |
SimSun | 一般 | 舊版中文 UI 字型。 |
Yu Gothic UI | 細體、半細體、標準、半粗體、粗體 | 日文的使用者介面字型。 |
字型
Sans-serif 字型
Sans-serif 字型是標題和 UI 元素的絕佳選擇。
字型家族 | 樣式 | 備註 |
---|---|---|
Arial | 常規、斜體、粗體、粗斜體、黑體 | 支援歐洲和中東字型 (拉丁文、希臘文、斯拉夫文、阿拉伯文、亞美尼亞文和希伯來文)。 黑體字重僅支持歐洲文字。 |
Calibri | 常規、斜體、粗體、粗斜體、細體、細斜體 | 支援歐洲和中東字型 (拉丁文、希臘文、西里爾文、阿拉伯文和希伯來文)。 阿拉伯文僅適用於直立。 |
Consolas | 常規、斜體、粗體、粗斜體 | 固定寬度字型,支援歐洲字型 (拉丁文、希臘文和西里爾文)。 |
Segoe UI | 常規、斜體、細斜體、黑體斜體、粗體、粗斜體、細體、稍細體、略粗體、黑體 | 歐洲和中東字型的使用者介面字型 (阿拉伯文、亞美尼亞文、西里爾文、喬治亞文、希臘文、希伯來文、拉丁文),以及傈僳文字型。 |
Selawik | 常規、稍細體、細體、粗體、略粗體 | 與 Segoe UI 計量相容的開放原始碼字體,適用於不想捆綁 Segoe UI 的其他平台上的應用程式。 從 GitHub 取得 Selawik。 |
Serif 字型
Serif 字型適合用來呈現大量的文字。
字型家族 | 樣式 | 備註 |
---|---|---|
Cambria | 一般 | 支援歐洲文字 (拉丁文、希臘文、西里爾文) Serif 字型。 |
Courier New | 常規、斜體、粗體、粗斜體 | Serif 固定寬度字型,支援歐洲和中東字型 (拉丁文、希臘文、西里爾文、阿拉伯文、亞美尼亞文和希伯來文)。 |
喬治亞 | 常規、斜體、粗體、粗斜體 | 支援歐洲字型 (拉丁文、希臘文和西里爾文)。 |
Tw Cen MT Condensed | 常規、斜體、粗體、粗斜體 | 支援歐洲字型的舊字型 (拉丁文、希臘文、西里爾文、阿拉伯文、亞美尼亞文、希伯來文)。 |
可變字型
可變字型適用於精確控制文字外觀。
字型家族 | 軸 | 備註 |
---|---|---|
Bahnschrift | 字重、字寬 | 支援拉丁文、希臘文和西里爾文的可變字型。 |
Segoe UI 變數 | 字重、光學大小 | 支援拉丁文、希臘文和西里爾文的可變字型。 |
符號和圖示
字型家族 | 樣式 | 備註 |
---|---|---|
Segoe MDL2 Assets | 一般 | 應用程式圖示的使用者介面字型。 如需詳細資訊,請參閱 Segoe MDL2 資產 一文。 |
Segoe UI Emoji | 一般 | Emoji 的使用者介面字型。 |
Segoe UI Symbol | 一般 | 符號的後援字型。 |