共用方式為


製表元

注意

此設計指南已針對 Windows 7 建立,但尚未更新較新版本的 Windows。 大部分指引仍適用原則,但簡報和範例不會反映我們目前的設計指導方針

索引標籤提供在個別標籤面上呈現相關信息的方式。

五個索引標籤的螢幕快照

一組典型的索引標籤。

索引標籤通常與屬性視窗相關聯(反之亦然),但索引標籤可用於任何類型的視窗。

索引標籤控件代表索引標籤的馬尼拉資料夾,這些資料夾用來組織在美國通常找到的檔案櫃中的資訊。 (馬尼拉的資料夾在全球沒有使用。

注意

版面配置索引標籤表對話框屬性視窗 相關的指導方針會以個別文章呈現。

這是正確的控件嗎?

若要決定,請考慮下列問題:

  • 控件可以舒適地容納在單一合理大小的頁面上嗎? 如果是,請使用單一頁面。
  • 只有一個索引標籤嗎? 如果是,請使用單一頁面。
  • 索引標籤是否以某種明顯的方式彼此相關? 如果沒有,請考慮將資訊分割成個別的相關信息視窗。
  • 如果用於設定,不同頁面上的設定是否完全獨立? 變更某個頁面上的設定會影響其他頁面上的設定嗎? 如果它們不獨立,請改用工作頁面或 精靈
  • 索引標籤大多是彼此的對等,還是有階層式關聯性? 如果階層式,請考慮使用漸進式洩漏或子 對話框 來顯示相關信息。
  • 索引標籤是否用來顯示工作內的步驟? 您只能使用「索引標籤」在工作中顯示步驟,使其看起來像步驟,而且有明顯的替代方式可移至文字步驟,例如 [下一步] 按鈕。 否則,如果需要這些步驟,請使用頁面流程中的頁面或 精靈。 如果步驟是選擇性的,請改為使用強制回應 對話框來顯示選擇性步驟
  • 索引標籤是否為相同數據的不同檢視? 如果是,請考慮使用 分割按鈕下拉式清單 來變更檢視。 雖然索引標籤可以有效地用於變更檢視,但替代項目比較輕量。

使用模式

索引標籤標有數種使用模式:

用法
動態視窗介面
如同滾動條,索引標籤可用來增加視窗介面區以顯示相關信息。
使用此模式時,使用索引卷標在概念上類似於將所有資訊以線性方式放在單一可捲動表面的索引標籤上,並將索引卷標當做標題。
五個索引標籤的螢幕快照
在此範例中,索引標籤可有效地增加視窗介面區。
多個檢視
如同分割按鈕或下拉式清單,索引標籤可用來顯示相同或相關信息的不同檢視。
設計、分割和預覽索引標籤的螢幕快照
在此範例中,索引標籤會變更檔中的檢視。
多個檔
如同多個視窗,索引標籤可用來在單一視窗中顯示不同的檔。
不同檔三個索引標籤的螢幕快照
不同月份的索引標籤 圖
在這些範例中,索引標籤會在單一應用程式視窗中顯示不同的檔。
獨佔選項
如同單選按鈕,索引標籤可用來呈現多個獨佔選項。 在此模式中,只會套用選取的索引標籤,並忽略所有其他索引標籤。
位置、資料和訊息索引標籤的螢幕快照,
在此範例中,會使用索引標籤(不正確)作為單選按鈕的替代專案。
不建議 此模式,因為它使用非標準行為。 索引標籤的行為是設定,而不是純粹是在視窗內巡覽的方式。

如果你只做一件事...

請確定索引標籤上的資訊是相關的,但不同頁面上的設定是獨立的。 選取的最後一個索引標籤應該沒有特殊意義。

指引

常規

  • 使用水平索引標籤,如果:

    • 視窗有七個或更少的索引標籤。
    • 所有索引標籤都符合一個數據列,即使使用者介面 (UI) 已當地語系化也一般。
  • 如果:,請使用垂直索引標籤

    • 屬性視窗有八個以上的索引標籤。

    • 使用水平索引標籤需要一個以上的數據列。

      具有11個選項的屬性視窗螢幕快照

      在此範例中,垂直索引標籤可容納八個或多個索引標籤。

  • 不要巢狀索引標籤或結合水準索引標籤與垂直索引標籤。 相反地,請減少索引標籤、只使用垂直索引標籤,或使用另一個控件,例如下拉式清單。

  • 不要捲動水準索引標籤。 水平捲動無法輕易探索到。 不過,您可以捲動垂直索引標籤。

    不正確:

    截斷的水準索引標籤 螢幕快照

    在此範例中,會捲動水準索引標籤。

  • 針對可重設大小的視窗或窗格上的索引卷標,視需要將滾動條放在頁面上,而不是視窗或窗格。 索引標籤應該一律可見,而不是捲動出檢視。

    具有滾動條的垂直索引標籤面 螢幕快照

    在此範例中,索引卷標頁面具有滾動條,而不是窗格。

  • 確定索引標籤看起來像索引標籤,而不是其他類型的控制件。

    不正確:

    具有索引標籤按鈕的視窗螢幕快照

    在此範例中,這些索引標籤看起來像命令按鈕。

互動

  • 當控件只套用至頁面時,將它們放在索引卷標式頁面的框線內。
  • 當控件套用至整個視窗時,將它們放在索引卷標式頁面之外。
  • 請勿將效果指派給變更索引標籤。 索引標籤必須依任何順序存取。 變更目前的索引標籤不應該有副作用、套用設定或產生錯誤訊息。
  • 請勿將特殊意義指派給最後一個選取的索引標籤。 索引標籤選取範圍用於瀏覽用戶最後一個索引標籤選取範圍不是設定。
  • 不要讓頁面上的設定與其他頁面上的設定相依。 請改為將任何相依設定放在相同的頁面上。
  • 如果使用者可能從顯示的最後一個索引標籤開始,請讓索引標籤保存並依預設加以選取。 讓設定以個別視窗為基礎,以每個用戶為基礎保存。 否則,預設會選取第一頁。

圖示

  • 請勿將圖示放在索引標籤上。 圖示通常會新增不必要的視覺雜亂、取用螢幕空間,而且通常不會改善使用者理解。 只新增有助於理解的圖示,例如標準符號。

    不正確:

    具有索引標籤上圖示的視窗螢幕快照

    在此範例中,圖示會新增視覺效果雜亂,而且很少改善使用者理解。

    例外狀況: 如果空間不足而無法顯示有意義的標籤,您可以使用可辨識的圖示:

    正確:

    具有圖示和已橋置卷標的索引標籤螢幕快照

    在此範例中,視窗非常窄,圖示會比標籤更能傳達索引標籤。

  • 請勿針對索引標籤使用產品標誌。 索引標籤不適用於 商標

動態視窗表面模式

  • 請勿在索引標籤面上使用滾動條。 索引標籤功能類似於滾動條,以增加視窗的有效區域。 一個機制應該就足夠了。

  • 使用簡潔的索引標籤。 使用清楚描述頁面內容的一或兩個字。 較長的標籤會耗用螢幕空間,尤其是在標籤當地語系化時。

  • 使用特定且有意義的索引標籤。 請避免套用至任何索引標籤的一般索引標籤,例如 [一般]、[進階] 或 [設定]。

  • 如果索引標籤不適用於目前的內容,且使用者不預期,請將其移除。 這麼做可簡化UI,使用者不會錯過它。

    不正確:

    選項視窗的螢幕快照,其中索引標籤稱為暗灰色

    在此範例中,當Microsoft Word 做為電子郵件編輯器時,[檔案位置] 索引標籤會不正確停用。 不應停用此索引標籤,而是應該移除,因為使用者不會預期在此內容中檢視或變更檔案位置。

  • 如果索引標籤不適用於目前的內容,且使用者可能會預期:

    • 顯示索引標籤。
    • 停用頁面上的控件。
    • 包含文字,說明控件停用的原因。

    請勿停用索引標籤,因為這樣做不是自我解釋,而且禁止探索。 尋找特定值的使用者將被迫查看所有其他索引標籤。

    視窗的螢幕快照,其中檢視索引標籤選項呈現灰色

    在此範例中,[閱讀版面配置] 中不會套用 [檢視] 選項。 不過,使用者可能會預期它們會根據索引標籤套用,因此會顯示頁面,但選項已停用。

多個檢視和檔模式

  • 使用索引標籤上的檢視或檔案名稱。
  • 避免太長索引標籤名稱。 如有必要,請具有最大名稱大小,或使用省略號截斷顯示的索引標籤。 較長的標籤會耗用螢幕空間,尤其是在標籤當地語系化時。
  • 如果索引標籤不適用於目前的內容,請移除索引標籤。

獨佔選項模式

  • 請勿使用此模式! 請改用單選按鈕或下拉式清單。

    不正確:

    具有兩個 [建立] 索引卷標的窗口螢幕快照

    在此範例中,索引標籤不正確地用來取代單選按鈕。

    正確:

    具有兩個單選按鈕的視窗螢幕快照

    在此範例中,會改用單選按鈕。

標籤

  • 根據標籤索引標籤模式。 使用名詞,而不是動詞,而不結束標點符號。 如需詳細資訊,請參閱上述模式指導方針。
  • 使用句子樣子大寫。
  • 請勿指派存取金鑰。 索引標籤可透過快捷鍵存取(Ctrl+Tab、Ctrl+Shift+Tab、Ctrl+PgUp、Ctrl+PgDn)。 存取金鑰選項不足,因此不要將存取金鑰指派給索引標籤,可讓它們更容易指派給其他控制件。

文件

參考索引標籤時:

  • 使用確切的標籤文字,包括其大寫,並包含單字索引標籤。
  • 若要描述用戶互動,請使用 click。
  • 可能的話,請使用粗體文字格式化標籤。 否則,只有在需要防止混淆時,才將標籤放在引號中。
  • 由於多個用途可能模棱兩可,特別是針對全球觀眾,因此單獨使用名詞索引標籤僅參考索引標籤控件。 對於其他用途,請以描述元來釐清意義:Tab 鍵、製表位或尺規上的製表標記。

範例:在 [工具] 功能表上,按兩下 [選項],然後按兩下 [檢視] 索引卷標。