排序在B端和C端產(chǎn)品中都比較常見(jiàn)，隨著用戶(hù)對(duì)產(chǎn)品使用的易用性提高，排序在產(chǎn)品交互中也在變化。本文分享B端拖動(dòng)排序的多種場(chǎng)景及交互，希望對(duì)你有所啟發(fā)。

很久沒(méi)有更新B端產(chǎn)品相關(guān)的文章了，近期工作項(xiàng)目中做了很多新需求，接觸了更多業(yè)務(wù)，也學(xué)到了一些新的交互，后續(xù)將會(huì)根據(jù)我在實(shí)際工作項(xiàng)目中遇到的需求展開(kāi)總結(jié)。

B端產(chǎn)品設(shè)計(jì)具有較高的業(yè)務(wù)屬性，所以對(duì)于ui設(shè)計(jì)師而言也需要有較強(qiáng)的業(yè)務(wù)知識(shí)，在完全理解需求后，再針對(duì)業(yè)務(wù)場(chǎng)景、用戶(hù)體驗(yàn)、交互、布局合理、易用性等多維度展開(kāi)設(shè)計(jì)。

這一期主要分享關(guān)于B端產(chǎn)品中拖動(dòng)排序功能。

排序在B端和C端產(chǎn)品中都比較常見(jiàn)，前期排序有通過(guò)點(diǎn)擊上下箭頭排序，但是這樣的交互易用性較差，隨著用戶(hù)對(duì)產(chǎn)品使用的易用性提高，這種排序方式在產(chǎn)品交互中已經(jīng)漸漸的被舍棄。

目前對(duì)于排序功能，使用更多的是通過(guò)拖動(dòng)排序，通過(guò)選中數(shù)據(jù)后長(zhǎng)按鼠標(biāo)右鍵，上下拖動(dòng)來(lái)完成數(shù)據(jù)的排序。

一、拖動(dòng)排序的多種組件和交互

在B端產(chǎn)品中，我目前接觸的拖動(dòng)排序的組件包含以下兩個(gè)大類(lèi)：

1. 一級(jí)目錄常規(guī)排序（非樹(shù)結(jié)構(gòu)）
2. 樹(shù)組件多層級(jí)排序

對(duì)于分類(lèi)2【樹(shù)組件多層級(jí)排序】又包含兩個(gè)小類(lèi)：

1. 同層級(jí)排序（橫線高亮顯示即將放的位置）
2. 跨層級(jí)排序

對(duì)于小分類(lèi)【跨層級(jí)排序】又可以細(xì)分為四個(gè)場(chǎng)景：

1. 父級(jí)未展開(kāi)時(shí)：拖動(dòng)到父級(jí)、父級(jí)整行高亮
2. 父級(jí)未展開(kāi)時(shí)：拖動(dòng)長(zhǎng)按停留在父級(jí)時(shí)，父級(jí)自動(dòng)展開(kāi)子級(jí)
3. 父級(jí)已展開(kāi)時(shí)：拖動(dòng)到子級(jí)時(shí)，父級(jí)整行高亮，拖動(dòng)到的位置出現(xiàn)高亮橫線
4. 父級(jí)已展開(kāi)時(shí)：拖動(dòng)到子級(jí)文件夾時(shí)，父級(jí)不需要高亮，子級(jí)文件夾目錄整行高亮（子級(jí)已展開(kāi)和未展開(kāi)的交互與父級(jí)同理）

二、拖動(dòng)排序場(chǎng)景和交互實(shí)操

上面已經(jīng)總結(jié)了排序的組件和場(chǎng)景，下面我們就一起來(lái)看看不同組件在不同場(chǎng)景下的具體交互，通過(guò)實(shí)際項(xiàng)目設(shè)計(jì)詳細(xì)介紹拖動(dòng)排序的功能。

1. 一級(jí)目錄常規(guī)排序（非樹(shù)結(jié)構(gòu)）

數(shù)據(jù)默認(rèn)展示類(lèi)似列表數(shù)據(jù)一樣，平鋪?zhàn)髮?duì)齊排版，當(dāng)拖動(dòng)排序時(shí)，鼠標(biāo)移動(dòng)到需要排序的數(shù)據(jù)行，長(zhǎng)按鼠標(biāo)右鍵并拖動(dòng)數(shù)據(jù)上下移動(dòng)，被拖動(dòng)的數(shù)據(jù)原位置置灰（也可以直接消失）。

同時(shí)，被拖動(dòng)的數(shù)據(jù)跟著鼠標(biāo)走，移動(dòng)到其它位置時(shí)，在將要放下的位置出現(xiàn)藍(lán)色高亮分割線（還可以做到所有數(shù)據(jù)實(shí)時(shí)變化位置效果）這樣能讓用戶(hù)更加直觀地看到數(shù)據(jù)位置的變化。

此類(lèi)需求一般是針對(duì)一級(jí)數(shù)據(jù)排序，數(shù)據(jù)結(jié)構(gòu)比較簡(jiǎn)單，沒(méi)有文件夾多級(jí)樹(shù)狀結(jié)構(gòu)，下面列舉幾個(gè)工作中遇到的需求場(chǎng)景，以及分享幾個(gè)其它產(chǎn)品中遇到的交互，便于大家理解。

由于B端產(chǎn)品具保密性，所以下面分享的截圖非工作實(shí)際數(shù)據(jù)，大家只要明白需求場(chǎng)景和交互即可。

需求場(chǎng)景1：產(chǎn)品業(yè)務(wù)中有很多的表單，表單中的字段順序在不同企業(yè)中不同，應(yīng)該如何設(shè)計(jì)呢？

在設(shè)計(jì)時(shí)，可以將表單所有的字段羅列出來(lái)，然后用戶(hù)通過(guò)自定義排序字段即可，這里的交互就可以直接采用上下拖動(dòng)排序。

需求場(chǎng)景2：飛書(shū)中有多個(gè)應(yīng)用，對(duì)于每個(gè)用戶(hù)而言，自己所關(guān)注的應(yīng)用不同，優(yōu)先級(jí)不同，該如何設(shè)計(jì)？

同理，飛書(shū)也是對(duì)用戶(hù)個(gè)人的應(yīng)該設(shè)計(jì)了拖動(dòng)排序功能，可以根據(jù)自己關(guān)注的應(yīng)該排序應(yīng)該的位置，從而更快的找到自己常用的應(yīng)用，提高工作效率。

無(wú)論是對(duì)于列表數(shù)據(jù)還是卡片數(shù)據(jù)的排序都可以采用這種拖動(dòng)排序的交互。

2. 樹(shù)組件多層級(jí)排序

（1）同層級(jí)排序（橫線高亮顯示即將放的位置）

樹(shù)組件同層級(jí)排序默認(rèn)展示和拖動(dòng)時(shí)效果與一級(jí)目錄常規(guī)排序一致。

（2）跨層級(jí)排序

父級(jí)未展開(kāi)時(shí)：拖動(dòng)到父級(jí)、父級(jí)整行高亮

如下圖，當(dāng)需要把文件夾【數(shù)據(jù)名稱(chēng)顯示004】放在【數(shù)據(jù)名稱(chēng)顯示003】文件夾中，鼠標(biāo)拖動(dòng)數(shù)據(jù)放在【數(shù)據(jù)名稱(chēng)顯示003】時(shí)，【數(shù)據(jù)名稱(chēng)顯示003】整行會(huì)出現(xiàn)藍(lán)色高亮，表示被拖動(dòng)的數(shù)據(jù)即將放在該文件夾內(nèi)。

父級(jí)未展開(kāi)時(shí)：拖動(dòng)長(zhǎng)按停留在父級(jí)時(shí)，父級(jí)自動(dòng)展開(kāi)子級(jí)。

如下圖，按照上面的步驟拖動(dòng)時(shí)，當(dāng)鼠標(biāo)一直停留在【數(shù)據(jù)名稱(chēng)顯示003】的位置時(shí)，該文件夾會(huì)自動(dòng)展開(kāi)二級(jí)目錄，這是一個(gè)拖動(dòng)排序比較友好的交互，可以讓用戶(hù)再次看到該目錄下的數(shù)據(jù)結(jié)構(gòu)，并快速一次性選擇需要放的位置。

父級(jí)已展開(kāi)時(shí)：拖動(dòng)到子級(jí)時(shí)，父級(jí)整行高亮，拖動(dòng)到的位置出現(xiàn)高亮橫線。

如下圖，在上圖基礎(chǔ)上，當(dāng)鼠標(biāo)繼續(xù)拖動(dòng)數(shù)據(jù)，想要放在二級(jí)目錄中時(shí)，數(shù)據(jù)一級(jí)目錄同樣會(huì)顯示高亮，告訴用戶(hù)當(dāng)前數(shù)據(jù)的層級(jí)關(guān)系。

同時(shí)，二級(jí)數(shù)據(jù)中會(huì)出現(xiàn)藍(lán)色高亮分割線，標(biāo)識(shí)被拖動(dòng)的數(shù)據(jù)即將放的位置，這樣就能清晰的知道被拖動(dòng)的數(shù)據(jù)將放在那個(gè)目錄的那個(gè)位置。

父級(jí)已展開(kāi)時(shí)：拖動(dòng)到子級(jí)文件夾時(shí)，父級(jí)不需要高亮，子級(jí)文件夾目錄整行高亮（子級(jí)已展開(kāi)和未展開(kāi)的交互與父級(jí)同理）。

當(dāng)需要將數(shù)據(jù)拖動(dòng)到二級(jí)文件夾內(nèi)時(shí)，只需要高亮二級(jí)文件夾即可。

關(guān)于樹(shù)組件多層級(jí)排序的使用場(chǎng)景和交互比較復(fù)雜，上面我根據(jù)不同場(chǎng)景分別列出了交互展示方式，下面再根據(jù)實(shí)際業(yè)務(wù)需求列舉案例說(shuō)明，因?yàn)榇藞?chǎng)景主要是針對(duì)交互和顯示，所以我就直接拿動(dòng)圖展示，便于大家理解。

結(jié)語(yǔ)

好了，這期文章內(nèi)容干貨較多，碼字較多，也希望大家看完后有所收獲。

每次在總結(jié)文章時(shí)，都會(huì)突發(fā)奇想到其它知識(shí)方面，也想要一起總結(jié)，但是由于篇幅太長(zhǎng)，知識(shí)量太大，也不利于閱讀和吸收。

比如在這一期的拖動(dòng)排序文章總結(jié)時(shí)，我就會(huì)想要總結(jié)表單字段自定義匹配、自定義是否必填、自定義排序的場(chǎng)景，以及，多層級(jí)樹(shù)組件拖動(dòng)排序后，各個(gè)數(shù)據(jù)的權(quán)限關(guān)系問(wèn)題。

擔(dān)心大家沒(méi)有耐心看完，沒(méi)辦法一次性吸收，所以還是每次一篇文章總結(jié)一個(gè)小的知識(shí)點(diǎn)吧。