樹形結(jié)構(gòu)是交互設計中的基礎(chǔ)組件，可用清晰的層級結(jié)構(gòu)來展示層級信息，便于用戶根據(jù)數(shù)據(jù)之間的關(guān)系來逐級找到相應的節(jié)點及數(shù)據(jù)。樹形結(jié)構(gòu)使用較為廣泛，例如導航、空間或邏輯組織、頁面定位、級聯(lián)選擇等，其結(jié)構(gòu)可展開或折疊，并根據(jù)相應的使用環(huán)境可進行相應的適應性改造。

定義

從更廣義的角度上來說，樹狀結(jié)構(gòu)（Tree structure），又可稱為樹形結(jié)構(gòu)，或稱樹狀圖，其是一種將層次結(jié)構(gòu)式的構(gòu)造性質(zhì)，以圖象方式表現(xiàn)出來的方法。以樹的象征來表現(xiàn)出構(gòu)造之間的關(guān)系，不過在圖象的呈現(xiàn)上，它是一個上下顛倒的樹，其根部在上方，是內(nèi)容的開頭，而下方的內(nèi)容稱為枝干與葉子。

在樹狀結(jié)構(gòu)中的基本單位，稱為節(jié)點（Node）。節(jié)點之間的鏈接，稱為分支（branch）。節(jié)點與分支形成樹狀，結(jié)構(gòu)的開端，稱為根（root），或根結(jié)點。根節(jié)點之外的節(jié)點，稱為子節(jié)點（child）。沒有鏈接到其他子節(jié)點的節(jié)點，稱為葉節(jié)點（Leaf）。

在進行介紹之前，我們先做一個小測試，如圖：

樹形結(jié)構(gòu)的 CheckBox 應該位于折疊 icon 的前面，還是后面？

結(jié)構(gòu)

樹形結(jié)構(gòu)是一種層次嵌套的結(jié)構(gòu)。一個樹形結(jié)構(gòu)的外層和內(nèi)層有相似的結(jié)構(gòu)， 所以，這種結(jié)構(gòu)多可以遞歸的表示。樹狀結(jié)構(gòu)只是一個概念，可以用許多種不同形式來展現(xiàn)。

相對來說，樹狀結(jié)構(gòu)是一個比較復雜的交互組件，包括若干組成部分。標準的樹狀結(jié)構(gòu)包括選中狀態(tài)、節(jié)點展開/折疊按鈕、單選框或復選框選擇器、類型圖標、描述文字、計數(shù)器、帶有編輯、導航或刪除等操作的附加按鈕等。設計師也可以根據(jù)需求，在樹狀結(jié)構(gòu)內(nèi)定制任意的組件。

樹形結(jié)構(gòu)就像一個包含分層數(shù)據(jù)的列表，充當物品的容器，可以展開和折疊節(jié)點。當用戶展開節(jié)點時，樹形結(jié)構(gòu)會根據(jù)當前顯示的級別數(shù)，動態(tài)更改每個級別的縮進。

由于場景不同，樹形結(jié)構(gòu)所含的元素也有所差異。標準的組織樹應該包括但不限于以上元素，根據(jù)需求，用戶可以通過基本元素組合成所需要的樹形結(jié)構(gòu)。

應用方式

樹形結(jié)構(gòu)的應用范圍很廣，常見的應用方式包括導航、定位、選擇、組織等。在不同的應用場景下，樹形結(jié)構(gòu)的表現(xiàn)形式、所包含的元素、可用的操作都有所不同。

接下來，我們就詳細介紹一下這四種場景的應用方式及注意事項：

1. 導航

導航是樹形結(jié)構(gòu)在 web 端最常見的應用方式，以至于很多人都不清楚其嚴格意義上算是樹形結(jié)構(gòu)，特別是包含多級導航左側(cè)導航，常見于 B 端產(chǎn)品后臺頁面和一些復雜數(shù)據(jù)的展示頁面。

如語雀的個人中心文檔列表。

該應用場景下的樹形結(jié)構(gòu)只具有子節(jié)點、葉節(jié)點以及折疊標識，而且折疊標識位于節(jié)點的后方。節(jié)點的操作也比較簡單，只有選擇與折疊，較少具有刪除、拖動等其他操作。

2. 組織

組織，常見的有行政組織、空間組織等，是樹形結(jié)構(gòu)形式、功能最完整、全面的表現(xiàn)形式。如 ERP、采購系統(tǒng)、財務系統(tǒng)中都會包含的人員管理，往往都是以組織的形式進行管理、展示。如企業(yè)微信、釘釘中，人員的部門結(jié)構(gòu)。

這種場景下，樹形結(jié)構(gòu)是產(chǎn)品的基礎(chǔ)核心，所有的人員權(quán)限操作都是依附于組織。在人員管理中，行政組織往往會被抽離出來，作為樹形結(jié)構(gòu)，成為導航，用以對人員的管理。除此之外，還需要對組織本身的管理，包括新增、合并、刪除、導入/出、排序等。

3. 選擇

樹形結(jié)構(gòu)的選擇場景多用于下拉選擇框，可以是一個，也可以分配到多個下拉選擇中。選擇功能并不是頁面或功能層面的需要，往往是下拉選擇的選項過多，且具有相應的隸屬關(guān)系，因此對選項進行層級組織顯示，便于用戶選擇。

該場景下的樹形結(jié)構(gòu)操作較為豐富，可以包括單選、多選、折疊，但不支持節(jié)點的移動、刪除、編輯操作等。這種類型的樹形結(jié)構(gòu)有一個特有的名稱-treeSelect(樹選擇）。

如下圖

在移動端中，則被稱為級聯(lián)選擇，常見的應用方式有地理位置的選擇。如圖京東、淘寶的收貨地址管理的編輯頁面。用戶在選擇地址時，需要根據(jù)地理區(qū)域的層級關(guān)系，逐步選擇到目標區(qū)域。

4. 定位

定位，與導航的功能類似，區(qū)別在于導航實現(xiàn)的是頁面之間的跳轉(zhuǎn)，而定位實現(xiàn)的是單一頁面內(nèi)的內(nèi)容展示，其多用于數(shù)據(jù)頁面的展示，位于頁面右側(cè)，往往與左側(cè)導航聯(lián)動使用。

定位功能的樹形結(jié)構(gòu)取決于展示頁面的數(shù)據(jù)結(jié)構(gòu)，將其結(jié)構(gòu)映射到定位功能的樹形結(jié)構(gòu)上。

該場景下的樹形結(jié)構(gòu)操作與導航類似，定位的形式根據(jù)頁面數(shù)據(jù)的結(jié)構(gòu)進行展示，或單級、或多級、或展開、或折疊展示。另外，在一些產(chǎn)品官網(wǎng)的宣傳頁面，也會采用這種定位功能，雖然展現(xiàn)形式不同，但本質(zhì)上是一致的。

如在阿里云產(chǎn)品介紹頁面，頂部的 Tab 是可以點擊，并使頁面滾動到目標區(qū)域，可以使用戶精確定位需要查看的信息，同時，減少用戶的滾動操作。

5. 其他

除了以上提到的四種應用場景，還有兩種場景也是較為常見的樹形結(jié)構(gòu)的表達形式，分別是數(shù)表格與思維導圖。

樹表格類似復合表格，樹表格多用于顯示和處理大量分層數(shù)據(jù)，具有一定的數(shù)據(jù)聚合功能，體現(xiàn)了高數(shù)據(jù)密度。因此，具有較為明顯的復雜性，然而應用場景和狀態(tài)較為簡單，不具有多面的操作應用。

思維導圖是基于樹狀結(jié)構(gòu)的最原始的應用方式，思維導圖是一種將思維形象化的方法。從結(jié)構(gòu)本身而言，這種場景較為簡單，更加注重節(jié)點的編輯、刪除等功能，可歸為組織的編輯狀態(tài)。

交互方式

根據(jù)不同的作用對象，樹形結(jié)構(gòu)的交互方式也有所不同。樹形結(jié)構(gòu)的交互方式樹形結(jié)構(gòu)的交互分為兩大類，宏觀操作與微觀操作。

1. 宏觀操作

宏觀操作，是對樹形結(jié)構(gòu)本身的行為與交互，主要包括滾動、選擇、排序、搜索等。一般情況下，該類操作不會對樹形結(jié)構(gòu)本身變更，往往樹形結(jié)構(gòu)的不同展示形式。

宏觀操作多屬于一級操作，用戶通過宏觀操作為后續(xù)的微觀操作做鋪墊。同時，宏觀操作多屬于常規(guī)操作，用戶對這些交互方式也較為熟悉。

2. 微觀操作

微觀操作，又可稱為二級操作，通過宏觀操作后，用戶找到相應的目標子節(jié)點，從而進行下一步操作。其主要包括有展開/折疊、選中態(tài)、導航、編輯、單擊、拖放等。

鍵盤操作

基于 Web 端的 B 類產(chǎn)品，更多的場景是鼠標操作，樹形結(jié)構(gòu)也多為鼠標操作，但也應該充分考慮鍵盤操作，以滿足特殊場景下的功能實現(xiàn)及體驗。

基本操作應該包括：

• →（右向箭頭）進入下一級節(jié)點
• ↑（上向箭頭）在同一級節(jié)點，向上切換同級節(jié)點，順序進入已展開一個同級子節(jié)點
• ↓（下向箭頭）在同一級節(jié)點，向下切換同級節(jié)點，順序進入已展開一個同級子節(jié)點
• ←（左向箭頭）返回上一級節(jié)點
• ??（回車鍵）選中子節(jié)點時，點擊回車鍵進行切換折疊與展開

上文給出的是基本操作，但設計師可以定義自己產(chǎn)品的鍵盤操作，但不要與用戶的認知有太大差異，否則會造成不必要的誤解。

設計應用經(jīng)驗

經(jīng)過多年的 B 端產(chǎn)品設計沉淀，在樹形結(jié)構(gòu)方面有一些共性的應用經(jīng)驗分享。

1. 樹形結(jié)構(gòu)的橫向擴展與縱向擴展

由于樹形結(jié)構(gòu)為多層嵌套形式，因此會存在橫向與縱向的擴展，橫向擴展決定了樹形結(jié)構(gòu)的高度，深度則決定了樹形結(jié)構(gòu)的寬度。

原則上，樹形結(jié)構(gòu)的橫向擴展不受限制，而縱向擴展不應該超過四級。因為在頁面中，樹形結(jié)構(gòu)區(qū)域的寬度是一定的，通常狀態(tài)下，由于層級縮進，隨著深度的增加，節(jié)點字段的顯示空間會受到擠壓，更有甚者會出現(xiàn)橫向滾動。過深的層級結(jié)構(gòu)，一方面會增加用戶的操作成本，另一方面也會造成字段顯示不全，對用戶的識別增加負擔。

2. 數(shù)據(jù)加載

數(shù)據(jù)加載可分為兩種加載方式：同步加載與異步加載，即同步樹與異步樹。數(shù)據(jù)加載要考慮樹形結(jié)構(gòu)的整體加載與部分加載，要明確用戶當前的加載節(jié)點，加載完成后應該立即刪除加載狀態(tài)指示。

當存在大量數(shù)據(jù)或數(shù)據(jù)存在服務器時，通常采用采用異步加載，根據(jù)用戶點擊展示點擊節(jié)點的數(shù)據(jù)，可有效的減少因加載非用戶所需而產(chǎn)生的時間消耗，提高用的操作體驗。與此相反，可采用同步加載。

3. 初始狀態(tài)顯示

樹狀結(jié)構(gòu)的初始狀態(tài)是指加載完成后，樹形結(jié)構(gòu)的折疊與展開狀態(tài)。如果樹形結(jié)構(gòu)的根節(jié)點下有大量的子節(jié)點，那么折疊的初始狀態(tài)可能更加符合用戶的認知。

相反，應該讓樹形結(jié)構(gòu)處于展開狀態(tài)。

4. 錯誤警告狀態(tài)

任何操作都需要系統(tǒng)給與用戶反饋，無論是顯性的亦或是隱形的。同樣的，樹形結(jié)構(gòu)也包含了相應的操作反饋和狀態(tài)反饋。其中，樹形結(jié)構(gòu)中的子節(jié)點操作反饋狀態(tài)分為兩類。

其一，輕量型的提示應該就近的顯示在樹形結(jié)構(gòu)內(nèi)部，讓操作與反饋存在頁面上的關(guān)聯(lián)。部分模塊的異常狀態(tài)，并不影響其他功能的操作，因此也不必打斷用戶的操作。

其二，重量型提示如導入二次確認等，需要非模態(tài)彈窗提示，其目的在于，可以打斷用戶的操作路徑，讓用戶停下來關(guān)注提示內(nèi)容，從而避免誤操作。

5. 樹形結(jié)構(gòu)的節(jié)點數(shù)量限制

為了產(chǎn)品的使用體驗，一般項目一次顯示最好不超過 200 個節(jié)點，對于較大數(shù)據(jù)結(jié)構(gòu)可嘗試橫向擴展樹形結(jié)構(gòu)，并采用分布加載的方式，減少用戶的等待焦慮。同時，應該確保用戶可以過濾和檢索數(shù)據(jù)。

6. 自動排序

作為數(shù)據(jù)展示的框架時，樹形結(jié)構(gòu)可以保留一定的自動排序功能，將數(shù)據(jù)以某種規(guī)則進行展示，便于用戶查看與尋找，如樹作為選擇功能時。作為某種頁面或者內(nèi)容結(jié)構(gòu)時，最好屏蔽自動排序功能。如作為導航使用時。

另外，還有一些需要根據(jù)應用場景，來判斷如何實現(xiàn)的設計細節(jié)。

例如，是否需要展示過濾結(jié)果的組織結(jié)構(gòu)及過濾后的結(jié)果展示？應該如何拖拽規(guī)則及拖拽的應用范圍，是否包括組織變更？彈窗添加還是就地編輯？如何決定組織樹的批量操作……

這些都需要設計師根據(jù)業(yè)務場景的實際需求，進行定制化的考量。

寫在最后

從本質(zhì)上說，樹形結(jié)構(gòu)只是一種幫助用戶查找分層信息的工具。通過樹形結(jié)構(gòu)用戶可以是快速、輕松地到達用戶想要到達的地方，也可以是打開、關(guān)閉、滾動和瀏覽。但是，不意味著僅僅因為信息是分層，樹形結(jié)構(gòu)就是最佳的展示方式，設計師應該進行基于場景業(yè)務的定制化設計。

歡迎關(guān)注作者微信公眾號：「體驗設計思」