使用標(biāo)簽頁，與標(biāo)簽相關(guān)聯(lián)的信息可以在獨(dú)立的頁面上分別展示。

一組典型的標(biāo)簽頁

標(biāo)簽頁通常出現(xiàn)在屬性窗口中，但實(shí)際上標(biāo)簽頁可以在任何窗口中使用。
標(biāo)簽頁控件源于在美國常見的文件柜中整理信息的帶標(biāo)簽的馬尼拉文件夾。 (馬尼拉文件夾不在全世界通用。)

何時(shí)使用該控件？

思考以下問題：

• 所有控件是否都能放置在同一個(gè)大小合宜的頁面上？如果是，直接使用單頁。
• 是否只有一個(gè)標(biāo)簽？如果是，使用單頁。
• 這些標(biāo)簽頁之間是否有明顯的聯(lián)系？如果沒有，可以考慮將信息分割成相關(guān)信息的不同窗口。
• 如果用于設(shè)置，不同頁面上的設(shè)置是否完全獨(dú)立？更改一個(gè)頁面的設(shè)置會(huì)影響其他頁面的設(shè)置嗎？如果它們不是獨(dú)立的，則使用任務(wù)頁面或向?qū)ы撁娲妗?/li>
• 標(biāo)簽頁之間是同級(jí)關(guān)系，還是層級(jí)關(guān)系？如果是層級(jí)關(guān)系，考慮使用漸進(jìn)式展示控件或者子對(duì)話框來顯示相關(guān)信息。
• 標(biāo)簽頁是用來展示同一個(gè)任務(wù)中的數(shù)個(gè)步驟嗎？只有當(dāng)標(biāo)簽頁的設(shè)計(jì)看起來類似步驟、并且有一個(gè)明顯的（除點(diǎn)擊標(biāo)簽頁外的）替代方法（比如“下一步” 按鈕）來進(jìn)入下一步驟時(shí)，您可以使用它來顯示任務(wù)中的步驟。 否則，如果需要這些步驟，請(qǐng)使用頁面流或向?qū)ы搧硪龑?dǎo)設(shè)置。如果步驟是可選的，則使用模態(tài)對(duì)話框顯示可選的步驟。
• 標(biāo)簽頁展示的是同一數(shù)據(jù)的不同視圖嗎？如果這樣，考慮使用分裂式按鈕或者下拉菜單來更改視圖。盡管標(biāo)簽頁也可以更改視圖，但其他兩種控件更輕量。

應(yīng)用范例

標(biāo)簽頁有以下幾種使用形式：
動(dòng)態(tài)窗口界面：類似滾動(dòng)條，標(biāo)簽頁可用來擴(kuò)展窗口界面以顯示更多信息。使用這種模式，使用標(biāo)簽頁在概念上類似于將所有信息以可滾動(dòng)選項(xiàng)卡的形式線性排列在單個(gè)界面上，并將標(biāo)題作為選項(xiàng)卡標(biāo)簽。

在該例中，標(biāo)簽頁（選項(xiàng)卡）有效地?cái)U(kuò)展了界面的顯示區(qū)域

在該例中，標(biāo)簽頁可更改文件的視圖模式

在上面例子中，標(biāo)簽頁在同一窗口中展示了多份文件

在本例中，選項(xiàng)卡(錯(cuò)誤地)被用作單選按鈕的替代品。 **不推薦使用此模式**，這是一種非標(biāo)準(zhǔn)行為：該例中標(biāo)簽頁的作用是設(shè)置，而不是單純?cè)诖翱谥袑?dǎo)航。

只需記住一件事······
標(biāo)簽頁下的信息相互之間是有關(guān)聯(lián)的，但不同標(biāo)簽頁下的設(shè)置又是相互獨(dú)立的。最后一項(xiàng)被選中的標(biāo)簽頁不應(yīng)具有任何特殊含義。

設(shè)計(jì)指南

通用原則

• 以下情況使用水平標(biāo)簽頁：
  1.窗口的標(biāo)簽頁少于7個(gè)；
  2.即使在用戶界面本地化的極端情況之下，在一行上排列所有標(biāo)簽也是合適的。

• 以下情況使用垂直標(biāo)簽頁（個(gè)人覺得這種情況下叫選項(xiàng)卡更為合適）：
  1.屬性窗口的標(biāo)簽頁多于8個(gè)；
  2.使用橫向標(biāo)簽頁會(huì)出現(xiàn)超過一行的情況。
  

  在該例中，縱向標(biāo)簽頁可以容納8個(gè)及以上的標(biāo)簽頁

• 不要嵌套標(biāo)簽頁，也不要將橫向標(biāo)簽頁與縱向標(biāo)簽頁組合在一起。應(yīng)該減少標(biāo)簽頁的數(shù)量，只使用縱向標(biāo)簽頁；或者使用其他控件，如下拉列表等。

• 不要將標(biāo)簽頁橫向滾動(dòng)。水平滾動(dòng)的功能不容易被用戶發(fā)現(xiàn)。但縱向標(biāo)簽頁的垂直滾動(dòng)是可以的。

錯(cuò)誤示例：橫向滾動(dòng)的標(biāo)簽頁

• 對(duì)于可調(diào)整大小的窗口或面板上的標(biāo)簽頁，當(dāng)需要的時(shí)候，在頁面內(nèi)、而不是整個(gè)窗口上加滾動(dòng)條。

  
  
  該例中，滾動(dòng)條在標(biāo)簽頁內(nèi)而不是在窗口上。

• 確保標(biāo)簽頁的形態(tài)像標(biāo)簽頁，而不是其他控件。
  

  錯(cuò)誤示例：這些標(biāo)簽頁看起來像是命令按鈕

交互

• 當(dāng)控件僅應(yīng)用于頁面內(nèi)時(shí)，請(qǐng)將它們放置在選項(xiàng)卡式頁面的邊框之內(nèi)。
• 當(dāng)控件應(yīng)用于整個(gè)窗口時(shí)，將它們置于選項(xiàng)卡式頁面之外。
• 在更改選項(xiàng)卡標(biāo)簽頁的時(shí)候不要設(shè)置特殊效果。標(biāo)簽頁可以按任意順序訪問。更改當(dāng)前選項(xiàng)卡不應(yīng)產(chǎn)生附帶效果、應(yīng)用特殊的設(shè)置或觸發(fā)錯(cuò)誤提示。
• 不要為用戶最后選擇的標(biāo)簽頁賦予特殊的意義。標(biāo)簽頁選擇的作用是導(dǎo)航，用戶選擇的最后一個(gè)標(biāo)簽并不是某種設(shè)置。
• 不要讓一個(gè)頁面內(nèi)的設(shè)置依賴于其他頁面上的設(shè)置。將所有相關(guān)聯(lián)的設(shè)置放在同一頁面上。
• 如果用戶可能從顯示的最后一個(gè)選項(xiàng)卡開始，使該選項(xiàng)卡保持不變，并默認(rèn)選中它。將這一設(shè)置應(yīng)用在每個(gè)窗口、每個(gè)用戶上。否則，默認(rèn)選中第一個(gè)標(biāo)簽頁。

圖標(biāo)

• 不要在選項(xiàng)卡上放置圖標(biāo)。這里的圖標(biāo)通常會(huì)造成視覺冗余，在占用屏幕空間的同時(shí)也不會(huì)增進(jìn)用戶對(duì)選項(xiàng)的理解。只有類似于標(biāo)準(zhǔn)符號(hào)等能幫助用戶更好地理解選項(xiàng)卡的圖標(biāo)才是可以被添加的。
  

  錯(cuò)誤示例
  
  例外情況: 當(dāng)空間不足以顯示有意義的完整標(biāo)簽文字，你可以使用清晰可識(shí)別的圖標(biāo):
  
  在該例中，窗口過窄，圖標(biāo)比文字在標(biāo)簽頁中的表意效果更好

• 不要在標(biāo)簽頁中使用產(chǎn)品logo圖標(biāo)。標(biāo)簽頁不能用來做品牌標(biāo)志。

動(dòng)態(tài)窗口界面模式

• 不要在所有標(biāo)簽頁上方再加滾動(dòng)條。標(biāo)簽頁的功能本就與滾動(dòng)條類似，是為了增加可用的屏幕空間。這兩種機(jī)制擇一選用就可以了。

• 使用簡明的標(biāo)簽頁文字。使用一至兩個(gè)詞簡單描述頁面內(nèi)容。過長的文字標(biāo)簽會(huì)占用屏幕空間，還要考慮到本地化標(biāo)簽文字時(shí)需要的空間。

• 使用明確、有意義的標(biāo)簽頁文字。避免使用可以應(yīng)用于任何標(biāo)簽頁的文字描述，比如：“通用”、“高級(jí)”和“設(shè)置”等。

• 如果一個(gè)標(biāo)簽頁不適用于當(dāng)前上下文，用戶也不希望應(yīng)用它，就直接去掉它。這樣做可以簡化界面。
  

  錯(cuò)誤示例：在此示例中，在將 microsoftword 用作電子郵件編輯器時(shí)，未正確禁用“文件位置”選項(xiàng)卡。應(yīng)該刪除這個(gè)選項(xiàng)卡，而不是禁用它，因?yàn)橛脩舨幌Ｍ谶@個(gè)上下文中查看或更改文件位置。

• 當(dāng)某個(gè)選項(xiàng)卡不適用于當(dāng)前上下文，但用戶可能會(huì)希望：
  1.展示選項(xiàng)卡控件。
  2.禁用該標(biāo)簽頁內(nèi)的所有控件。
  3.展示解釋為何控件被禁用的文字信息。
  時(shí)：
  不要直接禁用該選項(xiàng)卡，直接禁用會(huì)讓用戶無法進(jìn)行探索，而且也沒有給出禁用的原因。如果用戶有明確需要的內(nèi)容，將不得不一一點(diǎn)擊其他所有選項(xiàng)卡進(jìn)行查看。
  

  該例中，視圖選項(xiàng)卡下沒有任何一項(xiàng)可以應(yīng)用于閱讀布局。但是，基于對(duì)標(biāo)簽文字的理解，用戶可能希望選項(xiàng)卡下的應(yīng)用能生效，因此頁面會(huì)顯示，但選項(xiàng)是禁用的。

多視圖和多文檔模式

• 將視圖或文檔名稱放在標(biāo)簽上。
• 避免過長的標(biāo)簽名。如果需要，可以設(shè)置最大名稱長度，或者使用省略號(hào)截?cái)囡@示的選項(xiàng)卡標(biāo)簽。長的標(biāo)簽會(huì)占用更多屏幕空間，特別是當(dāng)標(biāo)簽本地化時(shí)。
• 如果選項(xiàng)卡不適用于當(dāng)前上下文，則刪除該選項(xiàng)卡。

獨(dú)占選項(xiàng)模式

• 不要使用此種模式！直接用單選按鈕或下拉列表代替。
  
  錯(cuò)誤示例：選項(xiàng)卡被錯(cuò)誤地用作單選按鈕的替代品

正確示例

標(biāo)簽

• 基于模式為選項(xiàng)卡設(shè)置標(biāo)簽文字。使用名詞而不是動(dòng)詞，不要設(shè)置結(jié)束標(biāo)點(diǎn)符號(hào)。更多有關(guān)信息，請(qǐng)參見前面的模式指南。

• 使用句式大小寫規(guī)則。

• 不要分配存取鍵?？梢酝ㄟ^快捷鍵(Ctrl + Tab，Ctrl + Shift + Tab，Ctrl + PgUp，Ctrl + PgDn)訪問標(biāo)簽。好的存取鍵搭配數(shù)量有限，因此不將訪問鍵分配給選項(xiàng)卡，就能將它們分配給其他控件了。

說明

當(dāng)提到標(biāo)簽頁/選項(xiàng)卡時(shí)：

• 使用確切的標(biāo)簽文本，包括其大小寫，并加上“選項(xiàng)卡/標(biāo)簽頁/tab”描述。
• 要描述用戶交互，請(qǐng)使用點(diǎn)擊/click。
• 盡量使用粗體文本格式化標(biāo)簽文字。否則，僅在需要時(shí)將標(biāo)簽加上引號(hào)，以防混淆。
• 因?yàn)槎嘀赜梅赡苁悄＠鈨煽傻?，特別是對(duì)于全世界的讀者來說，單獨(dú)使用名詞“選項(xiàng)卡”來指代選項(xiàng)卡控件。對(duì)于其他用途，請(qǐng)使用描述符(Tab 鍵、制表位或標(biāo)尺上的制表符標(biāo)記)來闡明其含義。