樹狀檢視

透過樹狀檢視，使用者可以使用單一選取專案或多個選取專案，檢視並與階層式排列的物件集合互動。

在樹狀結構中，包含資料的物件稱為分葉節點，而包含其他物件的物件稱為容器節點。 單一最上層容器節點稱為根節點。 使用者可以按一下加號和減號展開器按鈕來展開和折迭容器節點。

典型的樹狀檢視。

這是正確的控制項嗎？

擁有階層式資料並不表示您必須使用樹狀檢視。 通常 清單檢視 是更簡單但功能更強大的選擇。 清單檢視：

• 支援數個不同的檢視。
• 支援依 [詳細資料] 檢視中的任何資料行排序資料。
• 支援將資料組織成群組，形成兩層階層。

若要使用清單檢視，您可以使用下列技術將階層式資訊扁平化：

• 如果存在，請移除根節點，因為通常不需要。

• 使用清單檢視群組、索引標籤、 下拉式清單或 可展開的標題 來取代最上層容器。

  

  在此範例中，清單檢視群組會用於最上層容器。

  

  在此範例中，索引標籤會用於最上層容器

  

  在此範例中，下拉式清單會用於最上層容器。

• 如果相關聯的控制項顯示所選容器的內容，該控制項可以顯示較低層級的階層。

  

  在此範例中，低階容器會顯示在文件視窗中。

如果您需要顯示兩個以上的層級階層， (不包含根節點) ，您必須使用樹狀檢視。

若要決定樹狀檢視是否為正確的控制項，請考慮下列問題：

• 資料是否為階層式？ 如果不是，請使用其他控制項。
• 階層至少有三個層級 (不包含根) ？ 如果沒有，請考慮替代專案，例如清單檢視群組、索引標籤、下拉式清單或可展開的標題。
• 專案是否有輔助資料？ 若是如此，請考慮在 [詳細資料] 檢視模式中使用清單檢視，以充分利用輔助資料。
• 較低層級的資料是否與獨立子工作相關？ 如果是，請考慮在相關聯的控制項或個別視窗中顯示資訊， (使用 命令按鈕 或 連結) 顯示。
• 目標使用者是否為進階？ 進階使用者更熟悉使用樹狀結構。 如果您的應用程式是以新手使用者為目標，請避免使用樹狀檢視。
• 專案是否有大部分使用者熟悉的單一、自然、階層式分類？ 如果是，資料就適合用於樹狀檢視。 如果需要多個檢視或排序，請改用清單檢視。
• 使用者是否需要在某些案例中查看較低層級的資料，或部分但並非全部？ 如果是，資料就適合用於樹狀檢視。

設計概念

樹狀結構的目的是要組織資料並方便尋找，但很難讓樹狀結構中的資料易於探索。 決定樹狀檢視及其組織時，請記住下列原則。

可預測性和可探索性

樹狀檢視是以 物件之間的關聯性為基礎。 當物件形成清楚、已知且互斥的關聯性時，樹狀結構最適合用來對應至單一、容易判斷的容器。

重大問題在於物件可以出現在不同的節點中。 例如，使用者預期在何處找到播放音樂的硬體裝置、具有大型硬碟，以及使用 USB 埠？ 或許在數個不同的容器節點中，例如多媒體、儲存體、USB，以及可能位於硬體資源中。 其中一個解決方案是將每個物件放在最適當的單一容器下，而不論情況為何;另一種方法是將每個物件放在套用的所有容器下。 前者會提升簡單、簡潔的階層，而後者則會提升探索性，每個都有優點和潛在問題。

使用者可能無法完全瞭解樹狀結構的版面配置，但會在與樹狀結構互動一段時間後形成關聯性的心意模型。 如果該心力模型不正確，會導致混淆。 例如，假設可以在多媒體、儲存體和 USB 容器中找到音樂播放程式。 這種相片順序可改善可探索性。 如果使用者第一次在多媒體中尋找裝置，使用者可能會認為音樂播放程式等所有裝置都會出現在多媒體容器中。 接著，使用者會預期類似裝置，例如數位相機出現在多媒體容器中，如果不是這種情況，就會變得混淆。

設計樹狀結構時的挑戰是平衡可探索性與可預測的使用者模型，以將混淆降到最低。

廣度與深度

可用性研究顯示 使用者在樹狀結構中尋找物件比深度深的樹狀結構更成功，因此在設計樹狀結構時，您應該偏好廣度高於深度。 在理想情況下，樹狀結構應該不超過四個層級， (不會計算根節點) ，而且最常存取的物件應該會出現在前兩個層級中。

其他原則

• 當使用者找到所尋找的內容時，他們就會停止尋找。 他們不會查看可能找到物件的位置，因為它們不需要。 這些使用者可能會假設他們找到的第一個路徑是唯一的路徑。
• 使用者無法在大型複雜樹狀結構中尋找物件。 使用者不會執行詳盡的手動搜尋，以尋找這類樹狀結構中的物件;一旦認為他們已花費合理的心力，就會停止。 因此，大型的複雜樹狀結構必須與其他存取方法補充，例如文字搜尋、索引或篩選。
• 有些程式可讓使用者建立自己的樹狀結構。 雖然這類自我設計的樹狀結構可能會與使用者的心力模型一致，但通常會以不完全且不良的維護方式建立。 例如，雖然檔案系統、電子郵件程式和我的最愛清單通常會儲存類似的資訊類型，但使用者很少會用相同的方式組織它們。

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

仔細衡量使用樹狀檢視的優點和缺點。 具有階層式排列的資料並不表示您需要使用樹狀檢視。

使用模式

樹狀檢視有數種使用模式：

使用狀況	範例
只有容器節點的樹狀檢視 使用者可以一次檢視及與一個容器互動。	一般而言，這些樹狀檢視具有相關聯的控制項，可顯示所選容器的內容，讓使用者一次只能與一個容器互動。 在此範例中，樹狀檢視只有容器節點。 選取節點的內容會顯示在相關聯的清單檢視控制項中。
具有容器和分葉節點的樹狀檢視 使用者可以檢視容器和離開並與其互動。	一般而言，這些樹狀檢視具有相關聯的控制項，可顯示所選容器或分葉的內容。 允許使用者與分葉互動，通常必須支援多個選取專案。 在此範例中，樹狀檢視同時具有容器和分葉節點。 因為支援多重選取專案，所以開啟專案的內容 會使用相關聯 控制項中的索引標籤來顯示。 或者，樹狀檢視可以有組織的清單，其中容器是標題，而分葉是選項。 在此範例中，樹葉是選項，而容器是選項類別。
核取方塊樹狀檢視 使用者可以選取任意數目的專案，包括無專案。	核取方塊清楚地指出可以選取多個選項。 當多個選取專案是基本或常用的時，請使用此樹狀結構模式。 在此範例中，核取方塊樹狀檢視允許選取功能來開啟或關閉。
樹狀檢視產生器 使用者可以一次新增一個容器或分葉來建立樹狀結構，並選擇性地設定順序。	使用者可以建立或修改許多樹狀結構。 有些樹狀結構是使用操作功能表和拖放 (就地建置的，例如 windows 檔案總管中的資料夾) ，而其他樹狀結構則是使用特殊對話方塊建置 (例如 windows Internet Explorer 中的我的最愛清單) 。 在此範例中，使用者可以使用對話方塊來建置自己的我的最愛清單。
具有替代存取方法的樹狀檢視 使用者可以使用階層式樹狀結構以外的方式尋找物件。	如先前所述，使用者無法在大型複雜樹狀結構中尋找物件，因此這類樹狀結構應該以其他存取方法補充，例如文字搜尋、索引或篩選。 在此範例中，使用者也可以使用目錄、索引和我的最愛來存取訊號。 對於某些使用者，索引和搜尋索引標籤比內容索引標籤更實用。 在此範例中，Windows [開始] 功能表也會讓使用者在 [搜尋] 方塊中輸入名稱的一部分，來存取程式、檔案和網頁。

指導方針

簡報

• 在容器內，以邏輯順序排序專案。 依字母順序排序名稱、數值順序的數位，以及依時間順序排序日期。

• 使用 [永遠顯示選取專案] 屬性 ，讓使用者可以立即判斷選取的專案，即使控制項沒有輸入焦點也一樣。

• 如果樹狀目錄做為目錄，請使用 Single Expand 屬性來簡化樹狀結構的管理。 如此一來，只會展開樹狀結構的相關部分。

• 避免呈現空樹狀結構。 如果使用者建立樹狀結構，請使用使用者可能需要的指示或範例專案來初始化樹狀結構。

  

  在此範例中，清單一開始會顯示範例。

• 如果使用者沒有理由折迭容器節點，請勿讓容器節點折迭。 這麼做會增加不必要的複雜度。

• 如果負載效能是問題，則預設只會顯示樹狀結構的第一層和第二層容器。 然後，當使用者展開樹狀結構中的分支時，您可以視需要載入其他資料。

• 如果使用者展開或折迭容器，請讓該狀態持續存在，以便在下次顯示樹狀檢視時生效，除非使用者可能偏好以預設狀態啟動。 持續性應該以每一樹狀結構檢視為基礎，以每個使用者為基礎。

• 如果高階容器有類似的內容，請考慮使用視覺線索來區分它們。

  不正確：

  

  在此範例中，信箱和封存資料夾有類似的內容。 一旦樹狀結構進一步擴充，使用者很難知道樹狀結構中的所在位置，因而造成混淆。 在不同區段中使用稍微不同的圖示可解決此問題。

• 重新考慮連接線。 雖然這幾行清楚顯示容器和分葉節點之間的關聯性，但是它們會新增視覺雜亂，而不需要大幅理解。 具體來說，當節點關閉時，它們不會有所説明，也不會協助節點到目前為止需要捲動。

  正確：

  

  較佳：

  

  連接線會執行一些動作，以協助理解。

互動

• 請考慮提供按兩下行為。 按兩下應該與選取專案並執行其預設命令相同。

• 按兩下行為備援。 一律會有命令按鈕或操作功能表命令具有相同效果。

• 如果專案需要進一步說明， 請在資訊提示中提供說明。

  

  在此範例中，資訊提示會提供進一步的資訊。

• 提供相關命令的內容功能表。 這類命令包括剪下、複製、貼上、移除或刪除、重新命名和屬性。

• 停用樹狀檢視時，也停用任何相關聯的標籤和命令按鈕。

樹狀結構組織

• 使用大部分使用者熟悉的自然階層式結構。
• 如果您無法使用這類結構，請嘗試平衡可探索性與可預測的使用者模型，以將混淆降到最低。
• 若要安全地改善可探索性，請在：
  • 專案與任何其他類似的專案無關 (，因此使用者不會因為關聯不正確而混淆) 。
  • 只有一些這類備援位置的專案 (，因此樹狀結構不會變得過大) 。
• 使用最簡單的階層式結構，可正常運作。 若要這樣做：
  • 將最常存取的物件放在樹狀結構的前兩個層級 (不會計算根節點) ，並將較不常存取的物件放在階層下。
  • 消除不必要的或結合備援中繼層級容器。
• 偏好廣度高於深度。 在理想情況下，樹狀結構應該不超過四個層級，而且最常存取的物件應該會出現在前兩個層級中。
• 判斷您是否真的需要根節點。 如果使用者需要在整個樹狀結構上執行命令的能力，請提供根節點 (可能使用根節點上的操作功能表) 。 否則，樹狀結構會比較簡單且更容易使用，而不需要它。
• 如果樹狀結構具有替代的存取方法，例如文字搜尋或索引，請將焦點放在最有用的內容，以優化樹狀結構以進行流覽。 使用替代存取方法時，樹狀結構的內容不一定是完整的。 簡化樹狀結構可讓使用者更輕鬆地尋找最有用的內容。

核取方塊樹狀檢視

• 顯示清單下方選取的專案數目，特別是當使用者可能選取數個專案時。 此意見反應可協助使用者確認其選擇正確。

  

  在此範例中，選取的專案數目會顯示在樹狀結構下方。 很明顯地，未選取兩個專案。

• 如果可能有許多專案並選取或清除所有專案，請新增 [全部選取] 和 [清除所有命令] 按鈕。

• 使用混合狀態核取方塊來指出容器中專案的部分選取專案。

  正確：

  

  在此範例中，會使用混合狀態核取方塊來表示部分選取。

建議的大小和間距

針對樹狀檢視控制項建議的大小和間距。

• 選擇樹狀檢視寬度，以避免 在樹狀結構完全展開時，對大部分專案進行水準捲動。

• 包含額外 30% 以容納當地語系化。

• 選擇可消除不必要的垂直捲動的樹狀檢視高度。 請考慮讓樹狀檢視稍微較長 (或更久，以便在執行此動作時，如果有可用的空間) 可減少垂直捲動條的需求。

  不正確：

  

  在此範例中，讓樹狀檢視稍微寬一點且較長，在大部分情況下都會消除捲軸。 在這個特定樹狀結構中，一次只能開啟一個容器。

• 如果使用者受益于讓樹狀檢視變大，請將樹狀檢視及其父視窗調整大小。 這麼做可讓使用者視需要調整樹狀檢視大小。

標籤

控制項標籤

• 所有樹狀檢視都需要標籤。 將標籤撰寫為單字或片語，而不是句子、以冒號結尾，以及使用 靜態文字。

• 指派唯一存取金鑰。 如需指派指導方針，請參閱 鍵盤。

• 使用句型大寫。

• 將標籤置於控制項上方，並將標籤與控制項的左邊緣對齊。

• 針對多重選取樹狀檢視，請撰寫標籤，以便清楚顯示多個選取範圍。 核取方塊樹狀檢視標籤可能較不明確。

  不正確：

  

  在此範例中，標籤不會提供多個選取範圍的相關資訊。

  較佳：

  

  在此範例中，標籤清楚指出可以選取多個選項。

  最好：

  

  在此範例中，核取方塊會清楚指出多個選取專案可能，因此標籤不需要明確。

資料文字

• 使用句型大寫。

指示文字

• 如果您需要新增樹狀檢視的相關指示文字，請將它新增至標籤上方。 使用完整句子搭配結尾標點符號。

• 使用句型大寫。

• 有助於但不需要的補充說明應該保持簡短。 在標籤與冒號之間加上括弧，如果使用 而不是標籤，或在控制項下方，請將此資訊放在主要指令後面。

  

  在此範例中，補充說明位於 控制項下方。

文件

參考樹狀檢視時：

• 使用確切的標籤文字，包括其大寫，但不包含便捷鍵底線或冒號。 如果內容需要與一般清單區別，請包含單字清單或階層式清單。
• 針對樹狀結構專案，請使用確切的專案文字，包括其大寫。
• 只有在程式設計和其他技術檔中，才會將樹狀檢視稱為樹狀檢視。 除了其他位置，請使用清單或階層式清單，因為字詞樹狀結構對大部分的使用者造成混淆。
• 若要描述使用者互動，請使用選取資料，並展開和折迭加號和減號按鈕。
• 可能的話，請使用粗體文字來格式化標籤和樹狀專案。 否則，只有在需要防止混淆時，才將標籤和專案放在引號中。

範例：在 [內容] 清單中，選取 [使用者介面設計]。

參考樹狀檢視中的核取方塊時：

• 使用確切的標籤文字，包括其大寫，並包含單字核取方塊。 請勿包含便捷鍵底線。
• 若要描述使用者互動，請使用選取並清除。
• 可能的話，請使用粗體文字格式化標籤。 否則，只有在需要防止混淆時，才將標籤放在引號中。

範例：在 [要備份的專案 ] 清單中，選取 [ 我的檔 ] 核取方塊。