全是干貨！B端拖動排序的多種場景及交互總結

一、前言

很久沒有更新 B 端產品相關的文章了，近期工作項目中做了很多新需求，接觸了更多業務，也學到了一些新的交互，后續將會根據我在實際工作項目中遇到的需求展開總結。

B 端產品設計具有較高的業務屬性，所以對于 ui 設計師而言也需要有較強的業務知識，在完全理解需求后，再針對業務場景、用戶體驗、交互、布局合理、易用性等多維度展開設計。

這一期主要分享關于 B 端產品中拖動排序功能。

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

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

更多B端干貨：

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

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

1. 一級目錄常規排序（非樹結構）
2. 樹組件多層級排序

對于分類 2「樹組件多層級排序」又包含兩個小類：

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

對于小分類「跨層級排序」又可以細分為四個場景：

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

三、拖動排序場景和交互實操

上面已經總結了排序的組件和場景，下面我們就一起來看看不同組件在不同場景下的具體交互，通過實際項目設計詳細介紹拖動排序的功能。

1. 一級目錄常規排序（非樹結構）

數據默認展示類似列表數據一樣，平鋪左對齊排版，當拖動排序時，鼠標移動到需要排序的數據行，長按鼠標右鍵并拖動數據上下移動，被拖動的數據原位置置灰（也可以直接消失）。

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

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

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

需求場景 1：產品業務中有很多的表單，表單中的字段順序在不同企業中不同，應該如何設計呢？

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

需求場景 2：飛書中有多個應用，對于每個用戶而言，自己所關注的應用不同，優先級不同，該如何設計？

同理，飛書也是對用戶個人的應該設計了拖動排序功能，可以根據自己關注的應該排序應該的位置，從而更快的找到自己常用的應用，提高工作效率。

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

2. 樹組件多層級排序

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

樹組件同層級排序默認展示和拖動時效果與一級目錄常規排序一致。

②跨層級排序

父級未展開時：拖動到父級、父級整行高亮

如下圖，當需要把文件夾「數據名稱顯示 004」放在「數據名稱顯示 003」文件夾中，鼠標拖動數據放在「數據名稱顯示 003」時，「數據名稱顯示 003」整行會出現藍色高亮，表示被拖動的數據即將放在該文件夾內。

父級未展開時：拖動長按停留在父級時，父級自動展開子級

如下圖，按照上面的步驟拖動時，當鼠標一直停留在「數據名稱顯示 003」的位置時，該文件夾會自動展開二級目錄，這是一個拖動排序比較友好的交互，可以讓用戶再次看到該目錄下的數據結構，并快速一次性選擇需要放的位置。

父級已展開時：拖動到子級時，父級整行高亮，拖動到的位置出現高亮橫線

如下圖，在上圖基礎上，當鼠標繼續拖動數據，想要放在二級目錄中時，數據一級目錄同樣會顯示高亮，告訴用戶當前數據的層級關系。

同時，二級數據中會出現藍色高亮分割線，標識被拖動的數據即將放的位置，這樣就能清晰的知道被拖動的數據將放在那個目錄的那個位置。

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

當需要將數據拖動到二級文件夾內時，只需要高亮二級文件夾即可。

關于樹組件多層級排序的使用場景和交互比較復雜，上面我根據不同場景分別列出了交互展示方式，下面再根據實際業務需求列舉案例說明，因為此場景主要是針對交互和顯示，所以我就直接拿動圖展示，便于大家理解。

結語

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

每次在總結文章時，都會突發奇想到其它知識方面，也想要一起總結，但是由于篇幅太長，知識量太大，也不利于閱讀和吸收。

比如在這一期的拖動排序文章總結時，我就會想要總結表單字段自定義匹配、自定義是否必填、自定義排序的場景，以及，多層級樹組件拖動排序后，各個數據的權限關系問題。

擔心大家沒有耐心看完，沒辦法一次性吸收，所以還是每次一篇文章總結一個小的知識點吧。

歡迎關注作者的微信公眾號：「設計小余」