樹形控件是種常見的設(shè)計(jì)模式，幾乎與圖形化用戶界面同時(shí)誕生，通過(guò)結(jié)構(gòu)化的組織方式逐級(jí)展示內(nèi)容，讓整體信息架構(gòu)一目了然，非常適合以網(wǎng)頁(yè)或桌面端為載體的 B 端產(chǎn)品和生產(chǎn)力工具，比如電腦文件管理系統(tǒng)。

使用場(chǎng)景

樹形控件通常有以下 4 種表現(xiàn)形式：

可以把它們進(jìn)一步總結(jié)為 2 個(gè)使用場(chǎng)景：

其中，樹列表、思維導(dǎo)圖在 2 個(gè)場(chǎng)景中都有應(yīng)用，而樹導(dǎo)航和樹選擇多以查看為主。不同的使用場(chǎng)景，在設(shè)計(jì)上會(huì)有不同取舍。可以把它們進(jìn)一步總結(jié)為 2 個(gè)使用場(chǎng)景：

交互設(shè)計(jì)

結(jié)合樹形控件的使用場(chǎng)景，對(duì)其的操作也如此分類。顯然，「查看為主」時(shí)，對(duì)查看類操作的體驗(yàn)要求更高，而「編輯為主」時(shí)則相反。

新增節(jié)點(diǎn)

以新增節(jié)點(diǎn)為例，不同場(chǎng)景下用戶有不同的訴求：

查看為主

可以考慮鼠標(biāo)懸停到節(jié)點(diǎn)出現(xiàn)相關(guān)操作。

但此時(shí)較難預(yù)測(cè)的是用戶到底是想增加一個(gè)子節(jié)點(diǎn)還是同級(jí)節(jié)點(diǎn)。一個(gè)完備的解法就是讓用戶選擇。但實(shí)際業(yè)務(wù)中，此處可能還要選擇節(jié)點(diǎn)類型，比如語(yǔ)雀要選擇文檔還是表格。所以「節(jié)點(diǎn)類型 x 層級(jí)選項(xiàng)」有可能導(dǎo)致選項(xiàng)過(guò)多。此時(shí)可以有兩種處理方式：

針對(duì)第一種方法，我們需要額外思考一個(gè)問題：新建的子節(jié)點(diǎn)應(yīng)該放在第一位還是最后一位？

我的第一反應(yīng)是第一位，因?yàn)樗x操作區(qū)域最近，從操作到反饋都很自然，也避免目錄發(fā)生大幅度滾動(dòng)，所以在語(yǔ)雀目錄中是這樣設(shè)計(jì)的。但是實(shí)際也有很多用戶反饋希望是最后一個(gè)子節(jié)點(diǎn)，類似于1，2，3…… 的順序從老到新排列。我沒有辦法去驗(yàn)證如果真的是加為最后一個(gè)子節(jié)點(diǎn)，會(huì)不會(huì)又有另一波反饋聲音。后來(lái)我發(fā)現(xiàn)思維導(dǎo)圖新增子節(jié)點(diǎn)就是新增在末尾，以及絕大多數(shù)產(chǎn)品也是加在末尾，所以下次我大概會(huì)選擇放在最后試試?；蛘咚餍赃x擇上述第二種方法來(lái)避免這個(gè)問題。

此外，界面上還需要提供一種方式，允許用戶創(chuàng)建最頂層的一級(jí)節(jié)點(diǎn)。當(dāng)界面較大時(shí)，可以放置在頂部，讓用戶更易發(fā)現(xiàn)。

編輯為主

相較于上述方法，可以給出更明確直接的界面操作和添加位置示意或快捷鍵。

語(yǔ)雀在進(jìn)行目錄改版時(shí)，本想統(tǒng)一「閱讀頁(yè)面」和「編排目錄頁(yè)面」的交互方式——采用「查看為主」的添加方式，卻忽略了兩個(gè)頁(yè)面的用戶訴求不一樣。此時(shí)這里其實(shí)還可以借鑒思維導(dǎo)圖的創(chuàng)建方式，使用Enter/Tab 鍵快速添加節(jié)點(diǎn)。

修改節(jié)點(diǎn)屬性

結(jié)合實(shí)際業(yè)務(wù)，節(jié)點(diǎn)可能有不同屬性，比如名稱、類型、狀態(tài)、優(yōu)先級(jí)等?！覆榭礊橹鳌箷r(shí)，修改操作使用不多，可以考慮放入「…」中。

而「編輯為主」時(shí)，除了單個(gè)節(jié)點(diǎn)修改屬性方便，還需要考慮連續(xù)修改多個(gè)屬性，甚至是批量修改。如下圖，樹列表可以支持連續(xù)修改屬性節(jié)點(diǎn)。

如下圖，思維導(dǎo)圖可以通過(guò)多選然后在格式面板統(tǒng)一修改屬性。

調(diào)整結(jié)構(gòu)

樹形控件最有價(jià)值的部分就是其所表達(dá)的層級(jí)關(guān)系，常用調(diào)整結(jié)構(gòu)的操作總結(jié)如下：

無(wú)論采用那種方式，都遵循以下設(shè)計(jì)原則：

拖拽調(diào)整

簡(jiǎn)單而言，設(shè)計(jì)上要解決以下問題：

1.如何讓用戶知道可以拖拽？

2.如何讓用戶知道可以怎么拖拽到哪里？

可以在拖拽中采用「插入位置符號(hào)」暗示用戶，通常是一條彩色線條。應(yīng)盡可能增加「插入位置符號(hào)」出現(xiàn)的機(jī)率，減少用戶的困惑。設(shè)計(jì)時(shí)可以考慮上下左右兩個(gè)方向的拖拽運(yùn)動(dòng)分別可以觸發(fā)什么結(jié)果。

比如按以下方式簡(jiǎn)單把拖拽規(guī)則分為 3 大類，

當(dāng)然在「插入位置符號(hào)」盡可能多出現(xiàn)的同時(shí)，也要讓其出現(xiàn)的位置符合用戶預(yù)期且易理解。

比如向左移動(dòng)「非末尾子節(jié)點(diǎn)」，如果強(qiáng)行給以一個(gè)符合邏輯的響應(yīng)，「插入位置符號(hào)」可能離當(dāng)前光標(biāo)很遠(yuǎn)，甚至在屏幕外，且放手后可能引起目錄結(jié)構(gòu)較大變化，那么不如選擇此時(shí)拖拽無(wú)響應(yīng)。

這里再介紹「把一個(gè)節(jié)點(diǎn)調(diào)整為另一個(gè)的子節(jié)點(diǎn)」的兩種拖拽規(guī)則，分別適用于不同場(chǎng)景。

3.如何讓用戶快速拖拽到目標(biāo)位置？

當(dāng)用戶掌握了拖拽規(guī)則后，就需要幫助用戶快速實(shí)現(xiàn)自己的調(diào)整目標(biāo)。拖拽過(guò)程中注意以下幾點(diǎn)：

 ① 被拖拽節(jié)點(diǎn)可以半透明顯示，以盡量少遮擋樹形控件，方便用戶定位目標(biāo)位置。

 ② 被拖拽節(jié)點(diǎn)的原始位置可以以較弱的視覺效果展示，提示用戶節(jié)點(diǎn)從哪里被拖拽。

 ③ 整棵樹的結(jié)構(gòu)不要發(fā)生變化，以免原先確定的目標(biāo)位置發(fā)生位移。

 ④ 結(jié)構(gòu)層級(jí)較深時(shí)，通過(guò)輔助示意幫助用戶確定會(huì)將節(jié)點(diǎn)拖拽到哪一層級(jí)。

4.如何讓用戶確定拖拽結(jié)果滿足自己的期望？

當(dāng)以上問題都解決后，這個(gè)也許就不成問題。當(dāng)然也可以增加二次確認(rèn)的微交互。

非拖拽調(diào)整

調(diào)整結(jié)構(gòu)也可以通過(guò)非拖拽的方式完成。拖拽是一種直觀，但不輕松的操作，尤其是當(dāng)樹很龐大需跨屏拖拽時(shí)。此時(shí)可以增加按鈕操作，直接指定目標(biāo)位置，精確且快速。

         

當(dāng)「編輯為主」時(shí)，調(diào)整結(jié)構(gòu)也需要考慮批量操作。如下圖，支持多選節(jié)點(diǎn)同時(shí)調(diào)整，被調(diào)整結(jié)構(gòu)的節(jié)點(diǎn)有可能在原處于不同分支的不同等級(jí)，批量調(diào)整后會(huì)成為同一個(gè)字節(jié)的同級(jí)節(jié)點(diǎn)。

刪除節(jié)點(diǎn)

刪除是個(gè)比較慎重的操作，所以此處應(yīng)該詢問用戶是只刪除本節(jié)點(diǎn)，還是本節(jié)點(diǎn)及其下所有節(jié)點(diǎn)。

如果只刪除本節(jié)點(diǎn)，首先本節(jié)點(diǎn)需要從樹形控件中消失，以代表刪除成功，然后其子節(jié)點(diǎn)可以上移一級(jí)，保證用戶不會(huì)誤以為內(nèi)容丟失。

縮放視圖

查看時(shí)，思維導(dǎo)圖可視化效果更好。針對(duì)思維導(dǎo)圖，需要考慮視圖的放大縮小，適應(yīng)視口/真實(shí)大小切換。比如下圖語(yǔ)雀思維導(dǎo)圖的「縮放視圖」功能（不過(guò)這個(gè)設(shè)計(jì)把回到中心和適應(yīng)畫布藏的有點(diǎn)深）。

折疊層級(jí)

當(dāng)樹形控件龐大時(shí)，需要能夠快速折疊/展開層級(jí)，包括全部層級(jí)或者某一層級(jí)。如果是一棵「私人樹」，記住用戶折疊的展示層級(jí)，并且在下次進(jìn)來(lái)時(shí)仍舊保持。如果是一棵「公開樹」，可以增加默認(rèn)展開設(shè)置，比如下圖語(yǔ)雀中編排目錄的操作。

值得注意的是，折疊層級(jí)和縮放視圖的操作都應(yīng)該提供快捷鍵，會(huì)比通過(guò)界面操作更加高效，也不會(huì)打斷查看過(guò)程。可以想象一下你正在一個(gè)會(huì)議中展示一張思維導(dǎo)圖，在界面上操作「縮放視圖」耗費(fèi)更多時(shí)間，也會(huì)在奪走走觀眾的注意力。

附上常見查看操作快捷鍵，僅供參考：

上述部分快捷鍵會(huì)和瀏覽器自帶快捷鍵沖突，使用時(shí)需要覆蓋瀏覽器快捷鍵。

搜索和篩選

當(dāng)節(jié)點(diǎn)數(shù)量很多時(shí)，樹形控件應(yīng)該支持搜索查找節(jié)點(diǎn)，搜索關(guān)鍵詞可以高亮顯示；或按條件篩選展示節(jié)點(diǎn)及其上級(jí)節(jié)點(diǎn)路徑。

使用列表時(shí)，還有一個(gè)常見的操作是「排序」，但是整棵樹「排序」和樹形控件本身的層級(jí)順序是相矛盾的。所以「樹列表」基本沒有「排序」功能。

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

文章來(lái)源：站酷   作者：Ant_Design

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)( m.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)