用戶介面文字
注意
此設計指南已針對 Windows 7 建立,但尚未更新較新版本的 Windows。 大部分指引仍適用原則,但簡報和範例不會反映我們 目前的設計指導方針。
使用者介面文字會出現在UI介面上。 此文字包含控制項標籤和靜態文字:
- 控件標籤會識別控制件,並直接放在控件旁邊或旁邊。
- 靜態文字是所謂的,因為它不是互動式控件的一部分,為使用者提供詳細的指示或說明,讓他們可以做出明智的決策。
注意:與樣式和語調、字型和 comon 控件標籤相關的指導方針會顯示在不同的文章中。
使用模式
UI 文字有數種使用模式:
使用量 | 描述 |
---|---|
標題列文字 使用標題列文字來識別視窗或對話框的來源。 |
在此範例中,標題欄文字會識別視窗。 |
主要指示 使用醒目的主要指示,簡明說明視窗或頁面中要執行的動作。 |
指令應該是特定語句、命令式方向或問題。 良好的主要指示會傳達用戶的目標,而不是只專注於操作UI。 在此範例中,主要指示文字會根據使用者自己的權益或興趣,直接與使用者互動問題。 |
補充指示 必要時,請使用補充指示來呈現有助於瞭解或使用視窗或頁面的其他資訊。 |
您可以提供更詳細的資訊、提供內容,以及定義術語。 補充指示詳細說明主要指示,而不需要簡單地重新措辭。 在此範例中,補充指示會提供兩個可能採取的動作課程,以回應主要指示中提供的資訊。 |
控件標籤 標籤直接位於控件或控件旁邊。 |
在此範例中,控件標籤會識別使用者可以選取或修改的桌面時鐘設定。 |
補充說明 控制標籤標的詳細說明(通常是用於命令連結、單選按鈕和複選框)。 |
在此範例中,補充說明會釐清選擇。 |
設計概念
軟體開發人員通常會將文字視為降級至產品文件和技術支援。 “首先,我們將撰寫程式代碼,然後我們會僱用某人來協助我們解釋我們開發的內容。然而,事實上,重要文字是在程式中稍早撰寫的,因為UI是經過設想和編碼的。 畢竟,這種文字比任何其他技術寫作類型更頻繁,而且被更多的人看到。
可理解的文字對於有效的UI至關重要。 專業作者和編輯器應與UI文字上的軟體開發人員合作,作為設計程式不可或缺的一部分。 讓他們早日處理文字,因為文字問題通常會顯示設計問題。 如果您的小組無法解釋設計,通常是需要改進的設計,而不是說明。
UI 文字的設計模型
當您考慮 UI 文字及其在 UI 介面上的位置時,請考慮下列事實:
- 在專注的沉浸式閱讀中,人們以從左至右、由上至下的順序閱讀(在西方文化中)。
- 使用軟體時,使用者不會沉浸於UI本身,而是沉浸於其工作中。 因此,使用者不會讀取其掃描的UI文字。
- 掃描視窗時,用戶在實際篩選文字時,可能會顯示正在讀取文字。 除非他們認為需要,否則它們通常不會真正理解 UI 文字。
- 在視窗中,不同的UI元素會收到不同層級的注意。 使用者通常會先讀取控件標籤,特別是那些似乎與完成手邊工作相關的標籤。 相較之下,使用者只會在認為需要時讀取靜態文字。
針對一般設計模型,請勿假設使用者仔細閱讀由左至右、由上至下的順序的文字。 相反地,假設使用者從快速掃描整個視窗開始,然後大致依照下列順序讀取 UI 文字:
- 中央的互動式控制件
- 認可 按鈕
- 在其他地方找到的互動式控制件
- 主要指示
- 補充說明
- Window title
- 主體中的其他靜態文字
- 註腳
您也應該假設一旦使用者決定該怎麼做,他們就會立即停止閱讀並執行。
消除備援
多餘的文字不僅需要寶貴的屏幕空間,而且會削弱您嘗試傳達的重要想法或動作的有效性。 這也是讀者時間的浪費,在掃描是常態的情況下,更是如此。 Windows 努力說明使用者一旦順利且簡潔地需要執行哪些動作。
檢閱每個視窗,並消除控件內和跨控件的重複單字和語句。 不要避免重要的文字;視需要明確,但不要重複,也不解釋顯而易見。
避免過度通訊
即使文字不是多餘的,它可能只是太單字,以解釋每一個細節。 太多文字不鼓勵閱讀:眼睛往往跳過它諷刺地導致更少的溝通,而不是更多的。 在UI文字中,簡潔地傳達基本資訊。 如果某些使用者或某些案例需要更多資訊,請提供更詳細 說明內容的連結,或可能提供詞彙的詞彙輸入連結,以釐清字詞。
不正確:
在此範例中,文字太多而無法輕易掃描。 雖然不是設計工具所打算的,但使用者很可能會按 [下一步],而不會閱讀任何內容。
為了避免不鼓勵閱讀的文字,請製作您的文字來製作每個字數。 不加減的內容,因此請使用簡單、簡潔的文字。
使用反轉金字塔圖
學術寫作通常使用一種「金字塔」結構風格,奠定事實的基礎,與這些事實合作,並建立形成金字塔狀結構的結論。 相比之下,記者使用以結論為讀者必須擁有的基本「外賣」的「反金字塔」風格。 然後,它填補了讀者可能感興趣的漸進細節,也許只是為了掃描。 這種樣式的優點是,它是正確的點,並允許讀者停止閱讀他們選擇的任何時間點,仍然瞭解重要資訊。
您應該將反向金字塔結構套用至 UI 文字。 立即取得重要資訊,讓用戶隨時停止閱讀,並使用 [說明] 鏈接來呈現金字塔的其餘部分。
在此範例中,基本資訊位於主要指令文字的查詢中,其他實用資訊位於補充指示中,而詳細數據可按兩下 [說明] 連結來取得。
如果你只做五件事...
- 早期處理文字,因為文字問題通常會顯示設計問題。
- 設計掃描的文字。
- 排除多餘的文字。
- 使用容易理解的文字;不要過度溝通。
- 如有必要,請提供說明內容的連結以取得更詳細的資訊。
指導方針
一般
拿掉多餘的文字。 在視窗標題、主要指示、補充指示、內容區域、命令鏈接和認可按鈕中尋找多餘的文字。 一般而言,請將全文檢索保留在主要指示和互動式控件中,並從其他地方移除任何備援。
避免大型UI文字區塊。 執行這項操作的方式包括:
- 將文字分割成較短的句子和段落。
- 必要時,提供 [說明] 連結 至有用的資訊,但並非必要資訊。
選擇可清楚傳達及區分物件用途的物件名稱和標籤。 使用者不一定必須找出物件真正的意義,或它與其他物件有何不同。
不正確:
較佳:
在不正確的範例中,對象名稱完全不會區分;較佳的範例會依產品名稱顯示強式差異。
如果您想要確定使用者讀取與動作相關的特定文字,請將它放在互動式控制件上。
- 可以接受:
- 在此範例中,使用者可能不會閱讀說明他們正在確認的文字。
- 更好:
- 在此範例中,您可以確定至少使用者了解他們即將格式化磁碟。
在句子之間使用一個空格。 不是兩個。
文字字型、大小和色彩
- 僅針對連結和主要指示使用藍色文字。
- 僅針對搜尋結果中的URL使用綠色文字。
下列字型和色彩是 Windows 的預設值。
模式 | 主題符號 | 字型、色彩 |
---|---|---|
CaptionFont |
9 pt. black (#0000000) Segoe UI |
|
MainInstruction |
12 pt. blue (#003399) Segoe UI |
|
指示 |
9 pt. black (#0000000) Segoe UI |
|
BodyText |
9 pt. black (#0000000) 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. 黑色 (#0000000) Segoe UI |
||
(無) |
9 pt. 黑色 (#00000000) 卡利布里 |
|
(無) |
17 pt. 黑色 (#0000000) 卡利布里 |
其他文字特性
粗體字
請謹慎使用粗體來吸引用戶必須閱讀的文字。 例如,掃描單選按鈕選項清單的使用者可能會欣賞以粗體顯示標籤,以從新增每個選項補充資訊的文字中脫穎而出。 請注意,使用太多粗體會降低其影響。
使用加上標籤的數據時,使用粗體來強調整體數據更重要。
對於大部分的泛型數據(若數據沒有標籤就沒有什麼意義,如同數位或日期),請使用粗體標籤和純文本數據,讓使用者更輕鬆地掃描和了解數據類型。
對於大部分的自我解釋性數據,請使用純文本標籤和粗體數據,讓使用者可以專注於數據本身。
或者,您可以使用深灰色文字來取消強調較不重要的資訊,而不是使用粗體來強調更重要的資訊。
在此範例中,標籤不會使用粗體強調數據,而是使用深灰色來取消強調。
並非所有字型都支援粗體,因此對理解文字絕對不重要。
斜體
使用 以字面方式參照文字。 請勿針對此目的使用引號。
正確:
檔與檔案的字詞通常會交替使用。
用於文字框和可編輯下拉式清單中的提示。
在此範例中,[搜尋] 方塊中的提示會格式化為斜體文字。
請謹慎地強調特定單字,以協助理解。
並非所有字型都支援斜體,因此對理解文字絕對不重要。
粗體斜體
- 請勿在 UI 文字中使用。
強調
- 請勿使用 ,但連結除外。
- 不要用於強調。 請改用斜體。
標點符號
時期
- 請勿放在控件標籤、主要指示或說明連結的結尾。
- 放在補充指令、補充說明或任何其他形成完整句子的靜態文字結尾。
問號
- 放在所有問題結束時。 不同於句點,問號用於所有類型的文字。
驚嘆號
- 在商務應用程式中,請避免。
- 例外狀況: 驚嘆號有時會用於下載完成的內容中(“Done!”),並提醒注意 Web 內容(“New!”)。
逗號
- 在三個或多個項目的清單中,一律在清單中的下一個專案後面加上逗號。
冒號
- 使用外部控件標籤的冒號。 對於輔助功能而言,這特別重要,因為某些輔助技術會尋找冒號來識別控制標籤。
- 使用冒號來介紹項目清單。
橢圓
橢圓形表示不完整。 在UI文字中使用省略號,如下所示:
不要讓省略號成為互動式。 若要顯示截斷的文字,讓用戶調整控件的大小以查看更多文字或使用 漸進式洩漏控件 。
引號和引號
若要以字面方式參照文字,請使用斜體格式,而不是引號。
只有在需要防止混淆時,才能將窗口標題和控件標籤放在引號中,而且您無法改用粗體來格式化。
對於引號,偏好雙引號 (“ ”] :避免使用單引號。
正確:
您確定要刪除 「Sparky」 的 cat 資料夾嗎?
不正確:
您確定要刪除 「Sparky 的 cat 資料夾」嗎?
大寫
針對標題使用標題樣式大寫、所有其他UI元素的句子樣式大寫。 這樣做更適合 Windows 音調。
例外狀況: 對於舊版應用程式,您可以視需要針對命令按鈕、功能表和數據行標題使用標題樣式大寫,以避免混合大寫樣式。
這個泛型範例會顯示屬性表的正確大寫和標點符號。
這個泛型範例會顯示對話框的正確大寫和標點符號。
對於特徵和技術名稱,在大小寫方面是保守的。 通常,只有主要元件應該大寫(使用標題樣式大寫)。
正確:
Analysis Services、Cube、維度
Analysis Services 是 SQL Server 的主要元件,因此標題樣式大寫是適當的:Cube 和維度是資料庫分析軟體的常見元素,因此不需要將其大寫。
針對功能和技術名稱,在大寫時保持一致。 如果名稱在UI畫面上出現一次以上,它應該一律會以相同的方式顯示。 同樣地,在程式中的所有UI畫面上,名稱應該一致地呈現。
請勿將一般使用者介面專案的名稱大寫,例如工具列、功能表、滾動條、按鈕和圖示。
- 例外狀況: 網址列、連結列。
請勿將所有大寫字母用於鍵盤按鍵。 相反地,請遵循標準鍵盤所使用的大寫,如果鍵盤上沒有標記按鍵,則遵循小寫。
正確:
空格鍵、Tab 鍵、Enter、Page Up、Ctrl+Alt+Del
不正確:
空格鍵、TAB 鍵、ENTER、PG UP、CTRL+ALT+DEL
不要將所有大寫字母都用於強調。 研究表明,這是很難閱讀的,用戶傾向於把它視為“尖叫”。針對警告,請使用警告圖示和清楚說明情況。 例如,不需要在所有大寫字母中新增WARNING 一詞。
如需詳細資訊,請參閱特定UI元件指導方針中的或「標籤」一節。
日期和時間
不要硬式編碼日期和時間的格式。 尊重使用者選擇日期和時間格式的地區設定和自定義選項。 使用者會在 [區域] 和 [語言] 控制面板項目中選取這些專案。
在 Microsoft Outlook 的這些範例中,完整日期的兩種格式都正確。 它們反映使用者在 [區域] 和 [語言] 控制面板專案中所做的不同選擇。
針對受益於有其他資訊的案例,請使用完整日期格式。 針對沒有足夠空間供完整格式使用的內容使用簡短日期格式。 當使用者選擇要包含在長短格式中的資訊時,設計工具會根據案例和內容,選擇要在程式中顯示的格式。
在此範例中,長日期格式可協助用戶組織工作和期限。
全球化和當地語系化
全球化表示建立可在任何國家/地區或文化特性使用的文件或產品。 當地語系化表示調整檔或產品,以用於國家/地區/地區以外的地區設定。 撰寫 UI 文字時,請考慮全球化和當地語系化。 您的程式可能會翻譯成其他語言,並用於與您自己的文化特性非常不同的文化特性。
針對具有變數內容的控件(例如清單檢視和樹視圖), 請選擇適合最長有效數據的寬度。
在UI介面中包含足夠的空間,讓任何將當地語系化的文字(但不包含數位)額外30% (短文字最多200%)。 從一種語言翻譯到另一種語言通常會變更文字的行長度。
請勿在運行時間從子字串撰寫字串。 請改用完整的句子,讓翻譯工具沒有模棱兩可。
請勿使用次級控件、其包含的值或其單位卷標來建立句子或詞組。 這類設計無法當地語系化,因為句子結構因語言而異。
不正確:
正確:
在不正確的範例中,文本框會放在複選框卷標內。
請勿只將句子的一部分設為鏈接,因為翻譯時,該文字可能不會保持在一起。 因此,鏈接文字應該自行形成完整的句子。
- 例外狀況: 詞彙連結可以插入內嵌,做為句子的一部分。
如需詳細資訊,請參閱 Go Global Developer Center。
標題列文字
- 根據視窗類型選擇標題列文字:
- 對於最上層程序視窗,如果標題列 標題 和圖示顯示在視窗頂端附近,您可以隱藏標題列 標題 和圖示以避免備援。 不過,您仍然需要在內部設定適合供 Windows 使用的標題。
- 對於對話框,請勿在標題中包含 「dialog」 或 「progress」 字組。 這些概念是隱含的,而離開這些字組可讓使用者更容易掃描標題。
主要指示
使用主要指示,簡明說明用戶應該在指定的視窗或頁面中執行的動作。 良好的主要指示會傳達用戶的目標,而不是只專注於操作UI。
以命令式方向或特定問題的形式表達主要指示。
不正確:
在此範例中,主要指令只會指出程序的名稱;它不會明確邀請用戶採取動作。
例外狀況: 錯誤訊息、警告訊息和確認可能會在其主要指示中使用不同的句子結構。
盡可能使用特定動詞。 特定動詞(範例:連接、儲存、安裝)對用戶來說比一般動詞更有意義(例如:設定、管理、設定)。
對於控制面板頁面和精靈頁面,如果您無法使用特定的動詞,建議您完全省略動詞。
可以接受:
輸入您的地區設定、區域和語言
更好:
地區設定、地區和語言
對於錯誤訊息和警告等對話框,請勿省略動詞。
如果新增主要指令文字,則不要覺得必須使用主要指令文字,這隻會是UI內容中多餘的或顯而易見的。
在此範例中,UI 的內容已經非常清楚;不需要新增主要指令文字。
僅簡潔地使用單一完整句子。 將主要指示剖析為基本資訊。 如果您必須進一步說明,請考慮使用補充指示。
使用句子樣式的大寫。
如果指令是語句,請勿包含最後的句點。 如果指示是問題,請包含最終問號。
針對進度對話框,請使用簡短說明進行中的作業, 結尾為省略號的片語。 範例:「列印您的圖片...」
提示: 您可以在說明視窗或頁面的用途時,想像對朋友說什麼來評估主要指示。 如果以主要指令回應會是非自然、無幫助或尷尬的,請重新處理指令。
如需詳細資訊,請參閱特定UI元件指導方針中的一節。
補充指示
- 必要時, 請使用補充指示來呈現有助於瞭解或使用視窗或頁面的其他資訊, 例如:
- 提供內容來說明視窗在程式或系統起始時顯示的原因。
- 可協助用戶決定如何根據主要指示採取行動的合格資訊。
- 定義重要的術語。
- 如果不需要補充指示,請勿使用補充指示。 如果您想要以簡潔方式執行,最好與主要指示溝通所有專案。
- 請勿以稍微不同的措辭重複主要指令。 相反地,如果沒有其他內容可新增,請省略補充指示。
- 使用完整的句子和句子樣式大寫。
控件標籤
標記每個控件或控件群組。 例外狀況:
文字框和下拉式清單可以使用提示來加上標籤。
漸進式洩漏控件通常未標記。
次級控件會使用其相關聯控件的標籤。 微調控件一律是次級控件。
省略重新指定主要指令的控件標籤。 在此情況下,主要指示會採用存取密鑰。
可以接受:
在此範例中,文本框標籤只是主要指令的重述。
更好:
在此範例中,會移除備援標籤,因此主要指令會採用存取密鑰。
標籤位置:
- 氣球、複選框、命令按鈕、群組框、連結、索引標籤和提示會直接由控件本身加上標籤。
- 下拉式清單、清單框、清單檢視、進度列、滑桿、文字框和樹視圖會標示在上方、向左排清或向左卷標。
- 漸進式洩漏控件通常未標記。 雪佛龍按鈕會標示為右側。
為每個互動式控件 指派唯一的訪問鍵,但連結除外。 如需詳細資訊,請參閱 鍵盤。
讓標籤保持簡短。 不過,請注意,將一個或兩個字新增至標籤有助於釐清,有時不需要補充說明。
偏好特定標籤而不是泛型標籤。 在理想情況下,使用者不應該讀取任何其他內容才能了解標籤。
不正確:
正確:
在正確的範例中,會針對認可按鈕使用特定的標籤。
如需標籤清單,例如單選按鈕、使用平行片語, 並嘗試保留所有標籤的長度大約相同。
針對標籤清單,請將標籤文字放在選項之間的差異上。 如果所有選項具有相同的簡介文字,請將該文字移至群組標籤。
不正確:
正確:
正確的範例會將相同的簡介詞組移至標籤,因此兩個選項會更清楚區分。
一般而言,偏好正面片語。 例如,使用 do 而不是 do,而通知而不是不要通知。
- 例外狀況: 複選框標籤「不要再顯示此訊息」已廣泛使用。
省略適用於指定類型之所有控件的指令動詞。 相反地,將標籤放在控件的獨特之處。 例如,不說使用者需要輸入文字框控件,或使用者需要按兩下連結。
不正確:
正確:
在不正確的範例中,控件標籤具有適用於其類型之所有控件的指令動詞。
在某些情況下,控制標籤的下列括弧批註可能很有説明:
- 如果選項是選擇性的,請考慮將 “(optional)” 新增至標籤。
- 如果強烈建議使用選項,請將 “(recommended)” 新增至標籤。 這樣做表示設定是選擇性的,但無論如何都應該設定。
- 如果選項僅適用於進階使用者,請考慮將 “(advanced)” 新增至卷標。
您可以在標籤之後的括弧中指定單位(秒、連接等等)。
此範例顯示度量單位為 MB(MB)。
如需詳細資訊,請參閱特定UI元件指導方針中的或「標籤」一節。
補充說明
當控件需要比標籤可傳達更多的資訊時,請使用補充說明。 但是,如果您不想要以簡潔方式與控件標籤溝通所有專案,請勿使用補充說明。 一般而言,補充說明會與命令連結、單選按鈕和複選框搭配使用。
必要時, 在控件標籤中使用粗體,讓文字在有補充說明時更容易掃描 。
在此範例中,單選按鈕標籤是粗體,使其更容易掃描。
將補充說明新增至群組中的一個控件並不表示您必須提供群組中所有其他控件的說明。 如果您只能在必要時使用說明,請提供標籤中的相關信息。 不要有只是為一致性重述卷標的補充說明。
在此範例中,群組中的兩個控件包含補充說明,但第三個控件則不包含。
如果補充說明遵循命令連結,請在第二個人中撰寫補充文字。
範例: 命令連結:建立無線網路設定並儲存至 USB 快閃磁碟驅動器
補充說明:這會建立您可以使用USB快閃磁碟驅動器傳輸到路由器的設定。 只有在您有支援 USB 快閃磁碟驅動器設定的無線路由器時,才這麼做。
使用完整的句子和結尾標點符號。
認可按鈕標籤
下表顯示最常見的認可按鈕標籤及其使用方式。
按鈕標籤 | 使用時機 |
---|---|
確定 |
|
是/否 |
是是的肯定回應是是或沒有問題,而否是負面回應。 |
取消 |
|
關閉 |
關閉視窗。 不會捨棄任何變更或副作用。 |
停止 |
停止目前正在執行的工作,並關閉視窗。 任何進行中的工作或副作用都不會被捨棄。 |
套用 |
在擁有者屬性表中:套用擱置的變更(自窗口開啟或上次套用之後所做的變更),但讓視窗保持開啟。 這樣做可讓使用者在關閉屬性表之前評估變更。 在擁有的屬性表中:請勿使用。 |
下一步 |
在精靈和多步驟工作中:前進到下一個步驟,而不認可工作。 |
[完成] |
在精靈和多步驟工作中:關閉視窗。 如果工作尚未執行,請執行工作。 如果已經執行該工作,則不會捨棄任何變更或副作用。
|
做 |
不適用。 |