索引標籤

發行項
06/13/2023

注意

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

索引標籤提供在個別標籤頁面上呈現相關資訊的方式。

五個索引標籤的螢幕擷取畫面

一組典型的索引標籤。

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

索引標籤控制項代表用來組織在美國中經常找到的封包中組織資訊的索引標籤式快取資料夾。 (全球未使用 (一個資料夾。)

注意

與版面配置、索引標籤功能表、對話方塊和屬性視窗相關的指導方針會顯示在不同的文章中。

這是正確的控制項嗎？

若要決定使用時機，請考量下列問題：

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

使用模式

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

使用狀況	範例
動態視窗介面如同捲軸，索引標籤可用來增加視窗介面區以顯示相關資訊。	使用此模式時，使用索引標籤的概念上類似于將所有資訊放在單一可捲動表面的索引標籤上，並將索引標籤標示為標題。在此範例中，索引標籤可有效地增加視窗介面區。
多重檢視如同分割按鈕或下拉式清單，索引標籤可用來顯示相同或相關資訊的不同檢視。	在此範例中，索引標籤會變更檔中的檢視。
多個檔如同多個視窗，索引標籤可用來在單一視窗中顯示不同的檔。	在這些範例中，索引標籤會在單一應用程式視窗中顯示不同的檔。
獨佔選項如同選項按鈕，索引標籤可用來呈現多個獨佔選項。在此模式中，只會套用選取的索引標籤，並忽略所有其他索引標籤。	在此範例中，會使用索引標籤 (錯誤) 做為選項按鈕的替代專案。不建議使用此模式，因為它使用非標準行為。索引標籤的行為是設定，而不是單純是在視窗內巡覽的方式。

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

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

指導方針

一般

如果下列情況，請使用水準索引標籤：
- 視窗有七個或更少索引標籤。
- 即使使用者介面 (UI) 當地語系化，所有索引標籤仍符合一個資料列。
如果下列情況，請使用垂直索引標籤：
- 屬性視窗有八個以上的索引標籤。
- 使用水準索引標籤需要一個以上的資料列。
  
  在此範例中，垂直索引標籤會容納八個以上的索引標籤。
請勿巢狀索引標籤，或結合水準索引標籤與垂直索引標籤。 相反地，請減少索引標籤數目、只使用垂直索引標籤，或使用另一個控制項，例如下拉式清單。
不要捲動水準索引標籤。 水準捲動無法輕易探索。不過，您可以捲動垂直索引標籤。

不正確：

在此範例中，水準索引標籤會捲動。
針對可調整大小的視窗或窗格上的索引標籤，視需要在頁面上放置捲軸，而不是視窗或窗格。索引標籤應該一律為可見，而不會捲動出檢視。

在此範例中，索引標籤頁面具有捲軸，而不是窗格。
請確定索引標籤看起來像索引標籤，而不是其他類型的控制項。

不正確：

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

互動

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

圖示

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

不正確：

在此範例中，圖示會新增視覺雜亂，並稍微改善使用者理解。

例外： 如果空間不足，無法顯示有意義的標籤，您可以使用清楚辨識的圖示：

正確：

在此範例中，視窗很窄，圖示會比標籤更能傳達索引標籤。
請勿針對索引標籤圖形使用產品標誌。 索引標籤不適用於商標。

動態視窗表面模式

請勿在索引標籤頁面上使用捲軸。 Tabs 函式類似于捲軸，以增加視窗的有效區域。其中一個機制應該已足夠。
使用精簡的索引標籤標籤。 使用清楚描述頁面內容的一或兩個字。較長的標籤會耗用螢幕空間，特別是當標籤當地語系化時。
使用特定且有意義的索引標籤。 避免套用至任何索引標籤的泛型索引標籤，例如 [一般]、[進階] 或 [設定]。
如果索引標籤不適用於目前的內容，且使用者不預期，請將其移除。 這麼做可簡化 UI，使用者不會錯過它。

不正確：

在此範例中，當 Microsoft Word當做電子郵件編輯器使用時，[檔案位置] 索引標籤會不正確停用。不應停用此索引標籤，而是應該移除，因為使用者不會預期在此內容中檢視或變更檔案位置。
如果索引標籤不適用於目前的內容，且使用者可能會預期它：
- 顯示索引標籤。
- 停用頁面上的控制項。
- 包含文字，說明為何停用控制項。
請勿停用索引標籤，因為這樣做並不明確，而且禁止探索。尋找特定值的使用者會強制查看所有其他索引標籤。

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

多個檢視和檔案模式

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

獨佔選項模式

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

不正確：

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

正確：

在此範例中，會改用選項按鈕。

文件

參考索引標籤時：

使用確切的標籤文字，包括其大寫，以及包含文字索引標籤。
若要描述使用者互動，請使用 click。
可能的話，請使用粗體文字格式化標籤。否則，只有在需要以避免混淆時，才將標籤放在引號中。
因為多個用途可能模棱兩可，特別是針對全球物件，所以單獨使用名詞索引標籤只參考索引標籤控制項。針對其他用途，請使用描述元來厘清意義：Tab 鍵、定位停駐點或尺規上的索引標籤。

範例：在 [ 工具] 功能表上，按一下 [ 選項]，然後按一下 [ 檢視 ] 索引標籤。

Share via