樹形選擇

關(guān)于樹形選擇，我們必須先知道它的基礎(chǔ)概念，“樹” 究竟是什么？我們先來看看樹狀結(jié)構(gòu)的定義

樹狀結(jié)構(gòu)：

樹狀結(jié)構(gòu)其實(shí)是作為一種層次結(jié)構(gòu)化的表達(dá)方式，它能夠?qū)涞某橄蟪鰜肀磉_(dá)完整的構(gòu)造關(guān)系，為什么叫做樹，是因?yàn)樗袷且粋€(gè)上下顛倒的樹，根部在最頂端，枝葉反而變?yōu)橄路健?

同樣在對(duì)樹狀結(jié)構(gòu)的整體命名上，也遵循了與之類似的表達(dá)方式：

節(jié)點(diǎn)（Node）：是樹狀結(jié)構(gòu)當(dāng)中的基本單位，使用節(jié)點(diǎn)可以表示 不同數(shù)據(jù)間的 組成關(guān)系（從屬關(guān)系與并列關(guān)系）通常節(jié)點(diǎn)會(huì)分為幾類特殊情況。

1.根節(jié)點(diǎn)：整個(gè)樹狀結(jié)構(gòu)的開端被稱為根節(jié)點(diǎn)。一個(gè)樹狀結(jié)構(gòu)一定只有一個(gè)根，在思維導(dǎo)圖中，根節(jié)點(diǎn)就代表著它的開端，用于延展出更多的樹狀結(jié)構(gòu)。不過在目前的樹形選擇當(dāng)中，因?yàn)閷?duì)易用性的要求，通常會(huì)隱藏根節(jié)點(diǎn)，只展示子節(jié)點(diǎn)。而根節(jié)點(diǎn)隱藏在 標(biāo)題、選項(xiàng)文本 當(dāng)中。

2.子節(jié)點(diǎn)：根節(jié)點(diǎn)之外的節(jié)點(diǎn)被稱為子節(jié)點(diǎn)。一個(gè)樹狀結(jié)構(gòu)子節(jié)點(diǎn)數(shù)量是沒有具體限制，在樹形選擇當(dāng)中是直接展示出來的部分。

3.葉節(jié)點(diǎn)：沒有連接到其他子節(jié)點(diǎn)的節(jié)點(diǎn)。葉節(jié)點(diǎn)屬于一類特殊的子節(jié)點(diǎn)，它是整個(gè)樹狀結(jié)構(gòu)的最末端節(jié)點(diǎn)，在樹形選擇當(dāng)中是一個(gè)重要的概念，下面會(huì)展開來講。

分支（Branch）：節(jié)點(diǎn)之間的鏈接，在我們樹形選擇當(dāng)中，分支的線條可以選擇顯隱。其搭配的使用方式也有所不同

同時(shí)我們還會(huì)用到節(jié)點(diǎn)的幾個(gè)基礎(chǔ)的概念：

節(jié)點(diǎn)層級(jí)：指當(dāng)前節(jié)點(diǎn)所在的層級(jí)，比如根節(jié)點(diǎn)為第一層級(jí)，根的子節(jié)點(diǎn)為第二層級(jí)，以此類推；

節(jié)點(diǎn)高度：對(duì)于某一節(jié)點(diǎn)的高度，便是該節(jié)點(diǎn)下所有葉節(jié)點(diǎn)從上到下的個(gè)數(shù)；

節(jié)點(diǎn)深度：指該節(jié)點(diǎn)到根節(jié)點(diǎn)的唯一路徑長度，深度與層級(jí)較為類似。

樹狀結(jié)構(gòu)究竟出現(xiàn)在生活中的什么地方呢？樹狀結(jié)構(gòu)對(duì)于我們又有什么用呢？大家可能理解上會(huì)覺得很枯燥，我給大家舉一個(gè)例子：

回憶一下我們小學(xué)使用字典時(shí)的場景，首先我們是先通過聲母，去確定這個(gè)漢字的大概的頁數(shù)范圍，然后通過韻母去確定這個(gè)漢字的詳細(xì)位置，最后通過音調(diào)找到想要尋找的漢字：

其實(shí)字典的設(shè)計(jì)，便是一個(gè)典型的樹形結(jié)構(gòu)。而在 B端系統(tǒng)中我們常見的公司組織架構(gòu)、省 市 縣 地址選擇、在線教育的班級(jí)結(jié)構(gòu) 等等，這些都是使用了完整的樹形結(jié)構(gòu)。

采用樹形可以快速進(jìn)行結(jié)構(gòu)化的表達(dá)，其目的是為了用戶能夠快速地增刪改查，想要更多了解結(jié)構(gòu)化表達(dá)的同學(xué)推薦大家看一本書《金字塔原理》，里面講了非常多的邏輯化思維、表達(dá)的方法與內(nèi)容，內(nèi)容比較多，而這種思維其實(shí)在我們工作生活中都能夠用到。

樹狀結(jié)構(gòu)組成：

1.層級(jí)縮進(jìn)

為了將樹的整個(gè)結(jié)構(gòu)完整的表達(dá)出來，會(huì)使用層級(jí)縮進(jìn)的方式進(jìn)行區(qū)分，通常會(huì)使用 8px 對(duì)下一級(jí)節(jié)點(diǎn)進(jìn)行縮進(jìn)，這樣能夠表達(dá)更為完整的層級(jí)關(guān)系。

這里要注意，如果想要更為強(qiáng)調(diào)樹形選擇的層級(jí)關(guān)系或者樹形內(nèi)容本身就比較多的情況下，可以見解 Coding 編輯器的思路，即：將縮進(jìn)內(nèi)容使用“分支線”進(jìn)行表達(dá)，更明確清晰。 這里使用層級(jí)線后，折疊圖標(biāo)也會(huì)有所不同，下面有明確解釋。

2.折疊圖標(biāo)（節(jié)點(diǎn)按鈕）

主要是將節(jié)點(diǎn)下的所有樹葉與子節(jié)點(diǎn)進(jìn)行展示，在整個(gè)樹的結(jié)構(gòu)中，折疊圖標(biāo)一般分為兩種：三角折疊、方形折疊

三角折疊：為頁面層級(jí)較少時(shí)使用。因?yàn)樵谳^少的層級(jí)下，用戶不用特意去思考當(dāng)前節(jié)點(diǎn)所在層級(jí)究竟在哪。

方形折疊： 更多與頁面層級(jí)線進(jìn)行配合使用，通過層級(jí)縮進(jìn)，將頁面層級(jí)線標(biāo)識(shí)清楚，能夠更好的在多層級(jí)情況下進(jìn)行合理區(qū)分。

3.選擇控件

整個(gè)樹形結(jié)構(gòu)依舊是在選擇錄入框架下，分為單選和多選。因此需要對(duì)其類型有所展示，特別是在多選的場景下，一定要標(biāo)明它的類型，方便用戶進(jìn)行理解使用。

通常這個(gè)控件可以在單選的時(shí)候進(jìn)行隱藏，這里先按下不表，我在樹形選擇的類型當(dāng)中深入給同學(xué)們進(jìn)行分析理解。

4.選項(xiàng)文本

注意字?jǐn)?shù)限制、超出后如何處理即可，我就不做過多介紹。

樹形選擇的類型：

在講樹形選擇之前，我先為大家講解關(guān)于與其相關(guān)的同類型產(chǎn)品，為了方便大家的記憶，我選擇出了兩類不同的組件進(jìn)行對(duì)比，感興趣的同學(xué)可以關(guān)注“CE青年” 后臺(tái)回復(fù)樹形對(duì)比進(jìn)行查看。我通過視頻的形式為大家進(jìn)行了講解，相信大家在看完之后一定會(huì)有所收獲。

1.單選樹

單選樹只能選擇葉節(jié)點(diǎn)，也就是需要將每個(gè)樹展開過后才能進(jìn)行選擇。

它是一個(gè)較為傳統(tǒng)的選擇方式，因?yàn)樗倪x擇熱區(qū)較小并且理解成本較高，因此這種方式不太滿足現(xiàn)如今對(duì)于B端產(chǎn)品效率提升方面的要求，并且要求十分特殊，因此使用較少，現(xiàn)多以單選節(jié)點(diǎn)樹為主。

2.單選節(jié)點(diǎn)樹

單選節(jié)點(diǎn)樹與單選樹最大的區(qū)別在于其能夠選擇子節(jié)點(diǎn)，這樣可快速選擇該子節(jié)點(diǎn)以及其各種葉節(jié)點(diǎn)。

同時(shí)傳統(tǒng)的單選節(jié)點(diǎn)樹中是采取單選按鈕的方式，隨著對(duì)B端要求的不斷提高，并且在樹的功能越發(fā)的復(fù)雜過后，幾乎取消了 單選按鈕 的形式，取而代之的是將整個(gè) 文本標(biāo)簽 作為選擇的熱區(qū)，用戶點(diǎn)擊過后即可進(jìn)行選擇。

因此在樹形選擇當(dāng)中，逐漸將單選節(jié)點(diǎn)樹演變成由兩部分熱區(qū)所組成的一個(gè)控件：

在左側(cè)，主要以樹類型的展開折疊操作，熱區(qū)通常就是圖標(biāo)折疊圖標(biāo)這一部分；

在右側(cè)，以選擇該選項(xiàng)、節(jié)點(diǎn)的操作為主，熱區(qū)范圍以整個(gè)選項(xiàng)文本作為基礎(chǔ)，進(jìn)行延展即可。

這里還是提示以下新讀者，這類選擇一定要進(jìn)行 Hover 狀態(tài)處理，不然用戶無法根據(jù)光標(biāo)的變化判斷是否可點(diǎn)擊，當(dāng)然老讀者跳過就行～

3.多選節(jié)點(diǎn)樹

大家在對(duì)比單選與多選時(shí)會(huì)發(fā)現(xiàn)，為什么不會(huì)存在多選樹？不存在只選擇選項(xiàng)的多選呢？

思考時(shí)間又到了，別忘下劃，自己先想想呢～

雖然在理論上會(huì)存在多選樹的情況，但是它存在的價(jià)值比較詭異。首先在樹的節(jié)點(diǎn)當(dāng)中，我選擇一個(gè)子節(jié)點(diǎn)就是選擇該節(jié)點(diǎn)下的所有。因此可以說是選擇了一個(gè)節(jié)點(diǎn)；或者說它選擇了該節(jié)點(diǎn)下的多個(gè)選項(xiàng)，因此在實(shí)際情況中這類場景過于的少，更多會(huì)用多選節(jié)點(diǎn)樹進(jìn)行代替。

當(dāng)然，多選節(jié)點(diǎn)樹與單選節(jié)點(diǎn)樹在結(jié)構(gòu)上是十分接近的，就是將復(fù)選框展示出來，方便大家進(jìn)行選擇。考慮到大家經(jīng)驗(yàn)不足，建議這里復(fù)選框放在折疊圖標(biāo)前側(cè)，原因有二：

• 在樹形選擇后續(xù)的拓展當(dāng)中，經(jīng)常會(huì)遇到選擇增加一些操作功能，比如 新增、刪除、復(fù)制、粘貼、拖動(dòng)排序。我看很多設(shè)計(jì)師最開始因?yàn)榉N種原因?qū)⑦x擇組件部分放在后側(cè)，導(dǎo)致之后的操作無法進(jìn)行更多的拓展，隨之崩潰，對(duì)樹形選擇又是一頓亂造～

• 現(xiàn)有的基礎(chǔ)架構(gòu)基本都是沿用了這類設(shè)計(jì)，可減少前端同學(xué)的工作量，同時(shí)也減少他 BUG 的產(chǎn)生。

多選節(jié)點(diǎn)樹的使用場景非常多，我舉一個(gè)大家在樹形選擇中都會(huì)犯的例子，希望大家能夠多理解其中存在的特殊邏輯：

比如在一個(gè)大型上市公司當(dāng)中，我作為老板會(huì)去設(shè)定整個(gè)“設(shè)計(jì)部”的權(quán)限，并且想要得到的效果是之后有任何新員工都是使用這個(gè)權(quán)限。如果作為一個(gè)新人設(shè)計(jì)師，很容易就會(huì)使用多選節(jié)點(diǎn)樹，將整個(gè)組織架構(gòu)進(jìn)行選擇，但是這樣的選擇與用戶實(shí)際想要的內(nèi)容是存在較大差異的。

在產(chǎn)品設(shè)計(jì)中，對(duì)于上訴的“設(shè)計(jì)部”這個(gè)概念其實(shí)是一個(gè)動(dòng)態(tài)數(shù)據(jù)，即在之后新增到“設(shè)計(jì)部”的所有員工，我不必再去權(quán)限管理中重新配置。我們遇到動(dòng)態(tài)數(shù)據(jù)的情況時(shí)，首先不建議大家采取樹形選擇，因?yàn)槭紫葘?duì)于這個(gè)概念的理解成本很高，無法通過樹形選擇這樣的方式讓用戶理解；同時(shí)系統(tǒng)對(duì)于這類動(dòng)態(tài)數(shù)據(jù)的情況都建議特殊處理，至于怎么處理，大家可以在評(píng)論區(qū)討論，我也會(huì)在后續(xù)文章當(dāng)中為大家進(jìn)行講解。

樹形選擇的優(yōu)點(diǎn)

易理解：

因?yàn)闃錉罱Y(jié)構(gòu)本身就已經(jīng)存在很久，早在 DOS 計(jì)算機(jī)時(shí)代就有它的影子，經(jīng)過長期累月的發(fā)展，用戶在理解上也會(huì)相對(duì)更加容易

快瀏覽：

在數(shù)據(jù)量特別大的時(shí)候，能夠根據(jù)子節(jié)點(diǎn)優(yōu)先找到自己想要的葉節(jié)點(diǎn)，從而提升選擇效率，與《選擇錄入02》當(dāng)中講到的 Tab選擇十分類似，沒看過的同學(xué)建議先去看看。

看結(jié)構(gòu)：

結(jié)構(gòu)，能夠輔助人們進(jìn)行快速記憶，從而對(duì)整體框架有著更深了解。而樹形選擇正是有了這種結(jié)構(gòu)能夠更為方便的讓更多人熟知，從而更快了解業(yè)務(wù)。

樹形選擇常見誤區(qū)：

數(shù)據(jù)量

首先對(duì)于樹形選擇本身的控件形式，你就需要去分析其能承載的內(nèi)容數(shù)據(jù)量。應(yīng)該是在什么范圍內(nèi)較為合適。

當(dāng)數(shù)據(jù)量過大時(shí)一定會(huì)出現(xiàn)異步加載、數(shù)據(jù)分頁等諸多情況，因此在設(shè)計(jì)中，需對(duì)這類情況進(jìn)行設(shè)計(jì)。

全選功能

全選功能本身較為簡答，無外乎就是一個(gè)復(fù)選框的事情，但是在上面提到的數(shù)據(jù)量過大 + 全選的存在，會(huì)有些問題還需要大家進(jìn)行留意。

鍵盤映射

在樹形選擇當(dāng)中，都可以采取鍵盤操作從而提高效率。基本規(guī)則是：

↑鍵：向上切換同級(jí)節(jié)點(diǎn)；從第一子節(jié)點(diǎn)，順序返回父節(jié)點(diǎn)；

↓鍵：向下切換同級(jí)節(jié)點(diǎn)；順序進(jìn)入已展開的第一子節(jié)點(diǎn)；

←鍵：關(guān)閉當(dāng)前級(jí)別節(jié)點(diǎn)；返回上一級(jí)父節(jié)點(diǎn)；

→鍵：展開子節(jié)點(diǎn)列表；順序進(jìn)入已經(jīng)展開的第一子節(jié)點(diǎn)；

回車鍵：提交當(dāng)前 foucs 的節(jié)點(diǎn)選項(xiàng)；

樹形選擇是較為常見的一類方式，但由于大家對(duì) 基本的樹形結(jié)構(gòu) 認(rèn)識(shí)不足，導(dǎo)致對(duì)其設(shè)計(jì)會(huì)有許多誤區(qū)。

作者：CE青年    來源：站酷
藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長學(xué)習(xí)，請(qǐng)掃碼藍(lán)小助，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系。