共用方式為

字型

  • 發行項

注意

此設計指南是針對 Windows 7 所建立，尚未針對較新版本的 Windows 進行更新。 大部分的指導方針仍以原則方式套用，但簡報和範例不會反映 我們目前的設計指導方針。

使用者與文字互動的不只是 Microsoft Windows 中的其他任何元素。 Segoe UI (發音為 「SEE-go」) 是 Windows 系統字型。 標準字型大小已增加到 9 點。

segoe ui 字型中的字母圖例

Segoe UI 字型。

Segoe UI 和 Segoe 不是相同的字型。 Segoe UI 是適用于使用者介面文字字串的 Windows 字型。 Segoe 是 Microsoft 和合作夥伴用來產生列印和廣告材質的商標字型。

Segoe UI 是一種易記、開放且易記的字樣，因此比 Tahoma、Microsoft Sans Serif 和 Arial 更易讀。 它具有 humanist sans serif 的特性：其大寫 (窄 E 和 S 的不同寬度，例如，相較于 Helvetica，寬度更相似，寬度相當寬) ;小寫的壓力和字母格式;和其真正的斜體 (，而不是「斜體」或斜線羅馬，就像許多產業外觀的 sans serifs) 。 字樣是為了在畫面和列印中提供相同的視覺效果效果。 其設計目的是要成為人類人體 sans serif，沒有強式字元或干擾奇數。

Segoe UI 已針對 ClearType 優化，在 Windows 中預設為開啟。 啟用 ClearType 時，Segoe UI 是一種簡潔、可讀取的字型。 若未啟用 ClearType，Segoe UI 僅可稍微接受。 此因素會決定何時應該使用 Segoe UI。

Segoe UI 包含拉丁文、希臘文、斯拉夫文和阿拉伯文字元。 也有新的字型，也會針對 ClearType 優化，針對其他字元集建立並使用。 這些包括適用于日文的 Meiryo、適用于韓文的 Malgun Japanese、Microsoft JhengHei for Chinese (Traditional) 、Microsoft YaHei for Chinese (Simplified) 、適用于希伯來文的 Jsonha，以及適用于泰文的 ClearType 集合字型，以及專為檔使用而設計的 ClearType 集合字型。

Meiryo 包含以 Verdana 為基礎的拉丁字元。 Malgun Gothic、Microsoft JhengHei 和 Microsoft YaHei 會使用自訂的 Segoe UI。 不建議使用這些字型的斜體版本。 Malgun Gothic、Microsoft JhengHei 和 Microsoft YaHei 僅以一般和粗體樣式提供，這表示斜體字元是透過斜體樣式來合成。 雖然 Meiryo 包含真正的斜體和粗體斜體，但這些樣式只適用于套用斜體樣式時，日文字元保持直立的拉丁字元。

在 功能區 命令使用者介面中，偏好使用稱為 Meiryo UI 的 Meiryo 變化。

為了支援使用這些字元集的地區設定，Segoe UI 會根據當地語系化程式期間的每個地區 設定 ，以正確的字型取代。

若要授權 Segoe UI 和其他 Microsoft 字型以使用 Windows 型程式進行散發，請連絡 Monotype。

注意：與樣式和音調和使用者介面文字相關的指導方針會顯示在不同的文章中。

設計概念

字型、字樣、點大小和屬性

在傳統的印刷樣式中，字型描述字型、點大小和屬性的組合。 字型是字型的外觀。 Segoe UI、Tahoma、Verdana 和 Arial 都是字樣。 點大小是指字型的大小，從遞增子的頂端測量到下階的底部，減去稱為前置) 的內部間距 (。 點大約是 1/72 英吋。 最後，字型可以有粗體或斜體的屬性。

非正式地，人們通常會使用字型取代本文中所做的字型，但技術上，Segoe UI 是字型，而不是字型。 每個屬性的組合都是唯一的字型 (，例如 9 點 Segoe UI 一般、10 點 Segoe UI 粗體等等) 。

Serif 和 sans serif

字樣為 serif 或 sans serif。 Serif 是指通常完成字型中字母筆劃的小回合。 sans serif 字樣沒有 serifs。

讀者通常會偏好使用 serif 字型做為檔中的本文。 serifs 提供檔正式性和風格。 針對 UI 文字，需要簡潔的外觀和較低的電腦監視器解析度，讓 sans serif 字樣成為更好的選擇。

對比

文字在文字與背景的亮度之間有很大的差異時，最容易閱讀的文字。 白色背景上的黑色文字提供極淺背景上的最高對比深色文字，也可以提供高對比。 此組合最適合主要 UI 介面。

深色背景上的淺色文字提供良好的對比，但不像淺色背景上的深色文字一樣好。 這個組合適用于次要 UI 介面，例如總管工作窗格，您想要相對於主要 UI 介面取消強調。

如果您想要確定使用者讀取文字，請在淺色背景上使用深色文字。

能供性

文字可以使用下列 能供性 來指出其使用方式：

  • 指標。 I-bar (「文字選取」) 指標表示文字是可選取的，而左指箭號 (「一般選取」) 指標表示文字不是。
  • 插入號。 當文字具有輸入焦點時，插入號是閃爍的垂直線，表示可選取或可編輯文字中的插入/選取點。
  • 箱。 文字周圍的方塊，表示它是可編輯的。 若要減少簡報的權數，只有在選取可編輯的文字時，才會動態顯示方塊。
  • 前景色彩。 淺灰色表示文字已停用。 非灰色色彩，特別是藍色和紫色，表示文字是連結。
  • 背景色彩。 淺灰色背景弱式建議文字是唯讀的，但在實務上，唯讀文字可以有任何色彩背景。

這些能供性會結合下列意義：

  • 可編輯。 以文字選取指標顯示于方塊中的文字、插入號 (輸入焦點) ，且通常位於白色背景。
  • 唯讀、可選取。 具有選取指標的文字，以及輸入焦點) 的插入號 (。
  • 唯讀、不可選取。 具有箭頭指標的文字。
  • 已停用。 具有箭頭指標的淺灰色文字，有時位於灰色背景上。

唯讀文字傳統上具有灰色背景，但不需要灰色背景。 事實上，灰色背景可能不想要，特別是針對大型文字區塊，因為它建議停用文字，不建議閱讀。

協助工具與系統字型、大小和色彩

讓身心障礙或障礙的使用者能夠存取文字的指導方針可以縮小為一個簡單的規則：一律使用系統字型、大小和色彩來尊重使用者的設定。

如果您只執行一件事...

一律使用系統字型、大小和色彩，以尊重使用者的設定。

開發 人員： 從程式碼中，您可以使用 GetThemeFont API 函式來判斷系統字型屬性 (包括其大小) 。 您可以使用 GetThemeSysColor API 函式來判斷系統色彩。

因為您無法對使用者的系統主題設定進行任何假設，所以您應該：

  • 請一律以您的字型色彩和背景為基礎，以系統主題色彩為基礎。 絕對不要根據固定 RGB (紅色、綠色、藍色) 值來製作您自己的色彩。
  • 一律比對系統文字色彩與其對應的背景色彩。 例如，如果您選擇文字色彩的COLOR_STATICTEXT，也必須為背景色彩選擇COLOR_STATIC。
  • 一律根據系統字型的比例大小變化建立新的字型。 假設系統字型計量，您可以建立粗體、斜體、較大和較小的變化。

確保程式遵守使用者的設定的簡單方式是使用不同的字型大小和高對比色彩配置來測試。 所有文字都應該在所選色彩配置中正確調整大小並顯示。

使用模式

文字有數種使用模式：

使用方式 Description
標題列文字
識別視窗之標題列上的文字。
 標題列文字字型的範例
主要指示
說明頁面、視窗或對話方塊上要執行的文字。
主指令文字字型的範例
次要指示
補充文字，說明在頁面、視窗或對話方塊上執行的動作。
次要指示文字字型的範例
一般文字
一般 (使用者介面中顯示的唯讀) 文字。
一般文字字型的範例
強調文字
粗體文字可用來讓文字更容易剖析，並吸引使用者必須閱讀的文字。 斜體文字是用來參照文字， (而非引號) ，並強調特定字組。
強調文字字型的範例
可編輯的文字
使用者可以編輯的文字會顯示在方塊中。 若要減少簡報的權數，只有在選取可編輯的文字時，才會顯示方塊。
可編輯文字字型的範例
停用的文字
不適用於目前內容的文字，例如已停用控制項的標籤。 停用的文字表示使用者通常 () 不應該同時讀取文字。
停用的文字字型範例
連結
用來巡覽至另一個頁面、視窗或說明主題的文字，或起始命令。
連結文字字型的範例
(暫留) 文字字型的連結範例
群組標頭
用來將清單檢視中的專案分組的文字。
群組標頭文字字型的範例
檔案名稱
只有內容檢視中的檔案名文字 () 。
內容檢視) 文字字型中檔案名 (範例
檔文字
檔中使用的文字 (，而不是 ui 文字) 。
檔文字字型範例
檔標題
用來做為檔內標題的文字。
檔標題文字字型的範例

指導方針

字型和色彩

  • 下列字型和色彩是 Windows Vista 和 Windows 7 的預設值。
模式 主題符號 字型、色彩
標題列文字字型的範例
CaptionFont
 9 pt. 黑色 (#000000) Segoe UI
主指令文字字型的範例
MainInstruction
 12 pt. blue (#003399) Segoe UI
次要指示文字字型的範例
指令
 9 pt. 黑色 (#000000) Segoe UI
一般文字字型的範例
BodyText
 9 pt. 黑色 (#000000) Segoe UI
強調文字字型的範例
BodyText
 9 pt. 黑色 (#0000000) Segoe UI，粗體或斜體
可編輯文字字型的範例
BodyText
 9 pt. 黑色 (#0000000) Segoe UI，在方塊中
停用的文字字型範例
已停用
 9 pt. 深灰色 (#323232) Segoe UI
連結文字字型的範例
HyperLinkText
 9 pt. blue (#0066CC) Segoe UI
(暫留) 文字字型的連結範例
經常性存取
 9 pt. 淺藍色 (#3399FF) Segoe UI
群組標頭文字字型的範例
11 pt. blue (#003399) Segoe UI
內容檢視) 文字字型中檔案名 (範例
11 pt. 黑色 (#000000) Segoe UI
檔文字字型範例
(無)
 9 pt. black (#0000000) Calibri
檔標題文字字型的範例
(無)
 17 pt. black (#0000000) Calibri
  • 根據 UI 技術和目標版本的 Windows，選擇字型並優化視窗版面配置：
UI 技術 目標 Windows 版本 要使用的字型和優化
Windows Presentation Foundation
 全部
 使用 WPF 主題元件。
Win32 或 WinForms
 Windows Vista 或更新版本
 使用適當的 Segoe UI 字型。
可延伸元件或 Windows Vista 前
 若要以 Windows XP 和 Windows 2000 為目標，請使用對應至 Tahoma 的 8 點 MS Shell Dlg 2 虛擬字型。
若要以舊版 Windows 為目標，請使用 8 點 MS Shell Dlg 虛擬字型，其對應至 Windows 2000 和 Windows XP 上的 Tahoma，以及 Windows 95、Windows 98、Windows Premium Edition 和 Windows NT 4.0 上的 MS Sans Serif。
  • 開發 人員：
    • 對於使用固定版面配置的專案 (例如 Windows 對話方塊範本和 WinForms) ，請硬式編碼上表中的適當字型。
    • 對於使用動態配置 (例如Windows Presentation Foundation) 的專案，請使用主題字型。 使用 DrawThemeText 之類的主題 API，根據主題符號繪製文字。 如果主題服務未執行，請務必有以系統計量為基礎的替代方案。
  • 針對 Segoe UI，請使用 9 點字型大小或更大的字型大小。 Segoe UI 字型已針對這些大小優化，因此請避免使用較小的大小。
  • 一律比對系統文字色彩與其對應的背景色彩。 例如，如果您選擇文字色彩的COLOR_STATICTEXT，也必須為背景色彩選擇COLOR_STATIC。
  • 一律根據系統字型的比例大小變化來建立新的字型。 假設系統字型計量，您可以建立粗體、斜體、較大和較小的變化。
  • 針對淺色背景顯示大量唯讀文字 (，例如授權條款) ，而不是灰色背景。 灰色背景建議停用文字，而不建議閱讀。
  • 請考慮長度上限為 65 個字元 ，讓文字更容易閱讀。 (字元包括字母、標點符號和空格。)

屬性

  • 大部分的 UI 文字都應該是純文字，而不需要任何屬性。 屬性可以使用，如下所示：
    • 粗體。 在控制項標籤中使用 ，讓文字更容易剖析。 請謹慎使用 ，以吸引使用者必須閱讀的文字。 使用太多粗體可降低其影響。
    • 斜。 使用 以常值參照文字，而不是引號。 謹慎使用來強調特定單字。 用於文字方塊和可編輯下拉式清單中的提示。
    • 粗體斜體。 請勿使用。
    • 強調。 除了連結之外，請勿使用 。 請改用斜體來強調。
  • 並非所有字型都支援粗體和斜體，因此對於瞭解文字絕對不重要。