在工作中，我們可以發(fā)現(xiàn)在導(dǎo)航、表格等場(chǎng)景下，樹結(jié)構(gòu)常常被應(yīng)用。那么樹結(jié)構(gòu)的設(shè)計(jì)是否可以在不同場(chǎng)景下做出細(xì)節(jié)改變？這篇文章里，作者結(jié)合工作中遇到的問題，對(duì)樹結(jié)構(gòu)如何設(shè)計(jì)進(jìn)行了重新思考，一起來看。

一、背景

最近在工作中遇到了一個(gè)問題，需求是對(duì)題目列表增加知識(shí)點(diǎn)的篩選，知識(shí)點(diǎn)是以樹結(jié)構(gòu)的方式創(chuàng)建和呈現(xiàn)，形成知識(shí)圖譜。每一個(gè)父節(jié)點(diǎn)也代表一個(gè)知識(shí)點(diǎn)。

如果篩選直接套用樹選擇組件，理解上會(huì)有歧義，所以重新梳理了一下樹結(jié)構(gòu)和樹結(jié)構(gòu)+多選框組合的內(nèi)容。

二、樹結(jié)構(gòu)

百科里說：在計(jì)算機(jī)科學(xué)中，樹是一種抽象數(shù)據(jù)類型或是實(shí)作這種抽象數(shù)據(jù)類型的數(shù)據(jù)結(jié)構(gòu)，用來模擬具有樹狀結(jié)構(gòu)性質(zhì)的數(shù)據(jù)集合。簡(jiǎn)單來說樹是一種存儲(chǔ)和組織數(shù)據(jù)的結(jié)構(gòu)方式。

比如公司的組織框架，就是以公司-部門等樹狀結(jié)構(gòu)來將人重新組織起來?；蛘呤枪P記類軟件，是以用戶自己定義的樹狀結(jié)構(gòu)，將筆記組織整理起來。

而組織數(shù)據(jù)的本質(zhì)就是：讓用戶可以快速處理數(shù)據(jù)。那么樹結(jié)構(gòu)的意義也就更為明確了，為了讓用戶更方便的管理、查看、使用數(shù)據(jù)。

樹結(jié)構(gòu)中，父子節(jié)點(diǎn)之間屬于從屬關(guān)系。父節(jié)點(diǎn)之間屬于并列關(guān)系。

三、樹結(jié)構(gòu)的應(yīng)用

樹結(jié)構(gòu)一般被用于導(dǎo)航、選擇器、表格等，由于導(dǎo)航不存在多選的情況，本文暫時(shí)忽略。

1. 樹選擇

下圖為 Ant Design 的樹選擇組件。

可以看出，Ant Design 對(duì)于樹選擇的規(guī)則：

1. 父節(jié)點(diǎn)被選中后，表示選中所有子節(jié)點(diǎn)。
2. 選擇子節(jié)點(diǎn)，父節(jié)點(diǎn)是半選中狀態(tài)，選擇框展示子節(jié)點(diǎn)內(nèi)容。
3. 選中所有子節(jié)點(diǎn)，父節(jié)點(diǎn)是選中狀態(tài)，則選擇框展示父節(jié)點(diǎn)內(nèi)容。

這種父節(jié)點(diǎn)會(huì)代替子節(jié)點(diǎn)內(nèi)容的展示結(jié)果，說明父子節(jié)點(diǎn)的關(guān)系一定是被用戶所熟知的，當(dāng)父節(jié)點(diǎn)代替子節(jié)點(diǎn)后，用戶不會(huì)產(chǎn)生疑惑。

比如下圖例子，電商產(chǎn)品需設(shè)置包郵城市，當(dāng)選中陜西省下的所有城市，若展示所有城市名稱，顯得有些繁瑣，且數(shù)據(jù)太多，增加用戶記憶負(fù)擔(dān)。若展示陜西省，表示陜西省內(nèi)的所有城市都包郵，這樣處理概念清晰，理解起來也更簡(jiǎn)單。

可以這么處理的原因是，用戶對(duì)于省份-城市的父子關(guān)系是非常熟悉的，對(duì)于用戶來講，城市一定歸屬于省份之下，大多數(shù)用戶一定是清楚自己城市是屬與那個(gè)省份的。并且這里的省份代表了其下的所有城市。那么父節(jié)點(diǎn)是可以代替子節(jié)點(diǎn)內(nèi)容的。

下圖為 TDesign 的樹選擇組件，和 Ant Design 的樹選擇不太一樣。選中所有子節(jié)點(diǎn)，父節(jié)點(diǎn)是選中狀態(tài)，但選擇框展示的是子節(jié)點(diǎn)內(nèi)容。

這里的區(qū)別是父節(jié)點(diǎn)的內(nèi)容沒有代替子節(jié)點(diǎn)。使用上圖包郵的例子解釋一下，當(dāng)陜西省下可選的城市并不是所有城市，比如陜西省下的可選項(xiàng)只有 4 個(gè)城市，那如果用陜西省代替的話，就會(huì)造成用戶誤解。用戶會(huì)以為包郵地區(qū)是陜西省的所有城市，其實(shí)并不是。

以上聊的是 2 者的區(qū)別。而 2 者的相同之處就是，父子節(jié)點(diǎn)選中時(shí)的從屬關(guān)系，既父節(jié)點(diǎn)被選中后，會(huì)選中所有子節(jié)點(diǎn)。且父子節(jié)點(diǎn)的內(nèi)容不會(huì)都展示。

2. 表格

Ant Design 具有樹選擇的表格組件（T Design 類似）：

當(dāng)CheckStrictly的開關(guān)關(guān)閉時(shí)：

1. 父節(jié)點(diǎn)被選中后，表示選中所有子節(jié)點(diǎn)；
2. 選擇子節(jié)點(diǎn)，父節(jié)點(diǎn)是半選中狀態(tài)；
3. 父節(jié)點(diǎn)，不可以單獨(dú)選中。

而當(dāng)開關(guān)打開時(shí)：

父子節(jié)點(diǎn)單獨(dú)選擇，且父子之間沒有級(jí)聯(lián)關(guān)系。所以父節(jié)點(diǎn)也不存在半選狀態(tài)。

為什么表格的樹選擇可以單獨(dú)作用，而選擇器的樹選擇不可以呢？

注意，表格的選擇框是在樹結(jié)構(gòu)之外的。首先，從整個(gè)表格來看，他們是一體的，所以多選框可以被樹結(jié)構(gòu)影響；但聚焦于 2 者時(shí)，也可以把 2 者理解為 2 個(gè)模塊，多選是多選，樹結(jié)構(gòu)只是數(shù)據(jù)之間的結(jié)構(gòu)關(guān)系，所以 2 者可以單獨(dú)作用。

而選擇器中，多選框是在樹結(jié)構(gòu)之內(nèi)的，表示多選框繼承了樹結(jié)構(gòu)的從屬關(guān)系。即，選擇會(huì)是受到父子結(jié)構(gòu)關(guān)系影響。

四、解決方案

那么回到我的問題上，知識(shí)點(diǎn)的篩選，應(yīng)該如何設(shè)計(jì)？也就是對(duì)于樹選擇器，如何使父子之間單獨(dú)作用，而不會(huì)讓用戶感到疑惑？

選擇模塊和樹結(jié)構(gòu)模塊區(qū)分開，2 者單獨(dú)作用。可以選擇表格中的樣式，放在樹結(jié)構(gòu)之前，也可以放在樹結(jié)構(gòu)之后。我最終選擇放在樹結(jié)構(gòu)之后，如果放在樹結(jié)構(gòu)之前和展開收起按鈕位置太近，容易誤點(diǎn)擊。放在之后，用戶在左側(cè)點(diǎn)擊展開，在右側(cè)勾選，操作路徑較長(zhǎng)。所以增加選中的響應(yīng)區(qū)域，如圖，響應(yīng)區(qū)域是內(nèi)容和多選框的一整行，且增加 hover 狀態(tài)，告知用戶。

五、最后

本文重點(diǎn)針對(duì)我的問題去做了一次思考復(fù)盤。其實(shí)需要思考的還有很多，例如多選后，選框內(nèi)的選項(xiàng)順序如何展示，是按照選擇順序還是樹級(jí)機(jī)構(gòu)順序？字?jǐn)?shù)有沒有限制？選項(xiàng)是使用+1 的方式更好，還是全部展示更好？

如果只是簡(jiǎn)單的做出隨意的決定，那工作的成長(zhǎng)在哪里？對(duì)于這種細(xì)節(jié)每一次都能思考多一點(diǎn)，我們的成長(zhǎng)就也會(huì)多一點(diǎn)。

以上內(nèi)容如有疑問，歡迎討論。