樹視圖

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

在樹狀結構中，包含數據的對象稱為分葉節點，而包含其他對象的物件則稱為容器節點。 單一最上層容器節點稱為根節點。 用戶可以按下加號和減號展開器按鈕來展開和折疊容器節點。

windows 檔案總管樹視圖的

典型的樹檢視。

這是正確的控件嗎？

擁有階層式數據並不表示您必須使用樹檢視。 通常 清單檢視 是更簡單、更強大的選擇。 清單檢視：

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

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

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

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

  包含清單

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

  

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

  作為容器螢幕快照

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

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

  目錄窗格的

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

如果您需要顯示兩個以上的階層（不包括根節點），則必須使用樹視圖。

若要決定樹視圖是否為正確的控件，請考慮下列問題：

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

設計概念

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

可預測性和可探索性

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

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

使用者可能無法完全瞭解樹狀結構的版面配置，但在與樹狀結構互動一段時間后，它們將會形成關聯性的心理模型。 如果該心理模型不正確，則會導致混淆。 例如，假設音樂播放機可以在多媒體、記憶體和USB容器中找到。 此安排可改善可探索性。 如果使用者第一次在多媒體中找到裝置，使用者可能會得出結論，像是音樂播放程式的所有裝置都會出現在多媒體容器中。 然後，用戶會預期類似裝置，例如數位相機，會出現在多媒體容器中，如果情況並非如此，就會變得混淆。

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

廣度與深度

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

其他原則

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

如果你只做一件事...

仔細權衡使用樹視圖的優點和缺點。 使用階層式排列的數據並不表示您需要使用樹視圖。

使用模式

樹檢視有數種使用模式：

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

指引

介紹

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

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

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

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

  internet explorer 我的最愛清單

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

• 如果用戶沒有理由折疊這些節點，請勿讓容器節點折疊。 這樣做會增加不必要的複雜性。

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

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

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

  不正確：

  

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

• 重新考慮連接線路。 雖然這幾行清楚地顯示容器和分葉節點之間的關聯性，但它們會新增視覺雜亂，而不會大幅協助理解。 具體來說，當節點接近時，它們並無濟於事，也不會在節點相距這麼遠時有所説明，而需要捲動。

  正確：

  具有連接線的樹視圖

  更好：

  樹視圖的

  連接線很少有助於理解。

互動

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

• 請讓雙擊行為備援。 應該一律會有具有相同效果的命令按鈕或作功能表命令。

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

  

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

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

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

樹狀結構組織

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

複選框樹檢視

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

  

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

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

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

  正確：

  

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

建議的大小調整和間距

樹視圖重設大小和間距

建議針對樹視圖控件重設大小和間距。

• 選擇樹視圖寬度，以避免在樹狀結構完全展開時，大部分專案需要水平卷動。

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

• 選擇不需要垂直捲動的樹視圖高度。 如果這樣做可減少垂直滾動條的需求，請考慮讓樹視圖稍微長一點（或更多，如果有可用空間）。

  不正確：

  

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

• 如果使用者受益於讓樹視圖變大，請將樹視圖及其父窗口調整為可重設大小。 這麼做可讓用戶視需要調整樹視圖大小。

標籤

控件標籤

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

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

• 使用句子樣子大寫。

• 將標籤放置在控件上方，並將標籤對齊控件的左邊緣。

• 若為多重選取範圍樹視圖，請撰寫標籤，以便清楚有多個選取範圍。 複選框樹視圖標籤可能較不明確。

  不正確：

  具有元件標籤的樹檢視

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

  更好：

  

  在此範例中，標籤清楚地指出多個選取專案是可能的。

  最佳：

  具有複選框的樹視圖

  在此範例中，複選框會清楚指出有多個選取專案，因此標籤不一定明確。

數據文字

• 使用句子樣子大寫。

指示文字

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

• 使用句子樣子大寫。

• 補充說明是有説明但不需要的，應該保持簡短。 如果使用 而不是標籤，或位於控件下方，請將此資訊放在標籤和冒號之間的括弧中。

  樹視圖下方說明的

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

文件

參考樹檢視時：

• 使用確切的標籤文字，包括其大寫，但不包含訪問鍵底線或冒號。 如果內容需要區分一般清單，請包含單字清單或階層式清單。
• 針對樹狀專案，請使用確切的專案文字，包括其大寫。
• 只有在程序設計和其他技術檔中，才能將樹視圖視為樹視圖。 在其他地方，使用清單或階層式清單，因為字詞樹狀結構對大多數使用者造成混淆。
• 若要描述用戶互動，請針對數據使用 select，然後展開和折疊加號和減號按鈕。
• 可能的話，請使用粗體文字格式化標籤和樹狀專案。 否則，只有在需要防止混淆時，才將標籤和專案放在引號中。

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

參考樹檢視中的複選框時：

• 使用確切的標籤文字，包括其大寫，並包含文字複選框。 請勿包含訪問鍵底線。
• 若要描述用戶互動，請使用 select 和 clear。
• 可能的話，請使用粗體文字格式化標籤。 否則，只有在需要防止混淆時，才將標籤放在引號中。

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