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

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

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

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

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

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

一、拖動排序的多種組件和交互

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

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

對于分類2【樹組件多層級排序】又包含兩個(gè)小類：

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

對于小分類【跨層級排序】又可以細(xì)分為四個(gè)場景：

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

二、拖動排序場景和交互實(shí)操

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

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

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

一款產(chǎn)品無到有，產(chǎn)品經(jīng)理需要做些什么？

在一個(gè)產(chǎn)品從無到有的過程中，要做好產(chǎn)品經(jīng)理這個(gè)角色實(shí)在是不容易，除了大家都知道的寫需求、寫需求、寫需求，要做的事多著呢。產(chǎn)品經(jīng)理不是你眼中的只會找你麻煩，提要求..

查看詳情 >

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

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

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

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

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

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

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

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

2. 樹組件多層級排序

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

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

（2）跨層級排序

父級未展開時(shí)：拖動到父級、父級整行高亮

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

父級未展開時(shí)：拖動長按停留在父級時(shí)，父級自動展開子級。

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

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

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

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

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

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

關(guān)于樹組件多層級排序的使用場景和交互比較復(fù)雜，上面我根據(jù)不同場景分別列出了交互展示方式，下面再根據(jù)實(shí)際業(yè)務(wù)需求列舉案例說明，因?yàn)榇藞鼍爸饕轻槍换ズ惋@示，所以我就直接拿動圖展示，便于大家理解。