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

定義

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

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

在進(jìn)行介紹之前，我們先做一個(gè)小測試，如圖：

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

結(jié)構(gòu)

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

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

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

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

應(yīng)用方式

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

接下來，我們就詳細(xì)介紹一下這四種場景的應(yīng)用方式及注意事項(xiàng)：

1. 導(dǎo)航

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

如語雀的個(gè)人中心文檔列表。

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

2. 組織

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

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

3. 選擇

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

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

如下圖

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

4. 定位

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

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

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

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

5. 其他

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

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

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

交互方式

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

1. 宏觀操作

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

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

2. 微觀操作

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

鍵盤操作

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

基本操作應(yīng)該包括：

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

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

設(shè)計(jì)應(yīng)用經(jīng)驗(yàn)

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

6. 自動(dòng)排序

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

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

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

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

寫在最后

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

歡迎關(guān)注作者微信公眾號(hào)：「體驗(yàn)設(shè)計(jì)思」