一款產品無到有，產品經理需要做些什么？
2025-4-4 杰睿
排序在B端和C端產品中都比較常見，隨著用戶對產品使用的易用性提高，排序在產品交互中也在變化。本文分享B端拖動排序的多種場景及交互，希望對你有所啟發。
很久沒有更新B端產品相關的文章了，近期工作項目中做了很多新需求，接觸了更多業務，也學到了一些新的交互，后續將會根據我在實際工作項目中遇到的需求展開總結。
B端產品設計具有較高的業務屬性，所以對于ui設計師而言也需要有較強的業務知識，在完全理解需求后，再針對業務場景、用戶體驗、交互、布局合理、易用性等多維度展開設計。
這一期主要分享關于B端產品中拖動排序功能。
排序在B端和C端產品中都比較常見，前期排序有通過點擊上下箭頭排序，但是這樣的交互易用性較差，隨著用戶對產品使用的易用性提高，這種排序方式在產品交互中已經漸漸的被舍棄。
目前對于排序功能，使用更多的是通過拖動排序，通過選中數據后長按鼠標右鍵，上下拖動來完成數據的排序。
在B端產品中，我目前接觸的拖動排序的組件包含以下兩個大類：
對于分類2【樹組件多層級排序】又包含兩個小類：
對于小分類【跨層級排序】又可以細分為四個場景：
上面已經總結了排序的組件和場景，下面我們就一起來看看不同組件在不同場景下的具體交互，通過實際項目設計詳細介紹拖動排序的功能。
數據默認展示類似列表數據一樣，平鋪左對齊排版，當拖動排序時，鼠標移動到需要排序的數據行，長按鼠標右鍵并拖動數據上下移動，被拖動的數據原位置置灰（也可以直接消失）。
同時，被拖動的數據跟著鼠標走，移動到其它位置時，在將要放下的位置出現藍色高亮分割線（還可以做到所有數據實時變化位置效果）這樣能讓用戶更加直觀地看到數據位置的變化。
此類需求一般是針對一級數據排序，數據結構比較簡單，沒有文件夾多級樹狀結構，下面列舉幾個工作中遇到的需求場景，以及分享幾個其它產品中遇到的交互，便于大家理解。
由于B端產品具保密性，所以下面分享的截圖非工作實際數據，大家只要明白需求場景和交互即可。
需求場景1：產品業務中有很多的表單，表單中的字段順序在不同企業中不同，應該如何設計呢？
在設計時，可以將表單所有的字段羅列出來，然后用戶通過自定義排序字段即可，這里的交互就可以直接采用上下拖動排序。
需求場景2：飛書中有多個應用，對于每個用戶而言，自己所關注的應用不同，優先級不同，該如何設計？
同理，飛書也是對用戶個人的應該設計了拖動排序功能，可以根據自己關注的應該排序應該的位置，從而更快的找到自己常用的應用，提高工作效率。
無論是對于列表數據還是卡片數據的排序都可以采用這種拖動排序的交互。
（1）同層級排序（橫線高亮顯示即將放的位置）
樹組件同層級排序默認展示和拖動時效果與一級目錄常規排序一致。
（2）跨層級排序
父級未展開時：拖動到父級、父級整行高亮
如下圖，當需要把文件夾【數據名稱顯示004】放在【數據名稱顯示003】文件夾中，鼠標拖動數據放在【數據名稱顯示003】時，【數據名稱顯示003】整行會出現藍色高亮，表示被拖動的數據即將放在該文件夾內。
父級未展開時：拖動長按停留在父級時，父級自動展開子級。
如下圖，按照上面的步驟拖動時，當鼠標一直停留在【數據名稱顯示003】的位置時，該文件夾會自動展開二級目錄，這是一個拖動排序比較友好的交互，可以讓用戶再次看到該目錄下的數據結構，并快速一次性選擇需要放的位置。
父級已展開時：拖動到子級時，父級整行高亮，拖動到的位置出現高亮橫線。
如下圖，在上圖基礎上，當鼠標繼續拖動數據，想要放在二級目錄中時，數據一級目錄同樣會顯示高亮，告訴用戶當前數據的層級關系。
同時，二級數據中會出現藍色高亮分割線，標識被拖動的數據即將放的位置，這樣就能清晰的知道被拖動的數據將放在那個目錄的那個位置。
父級已展開時：拖動到子級文件夾時，父級不需要高亮，子級文件夾目錄整行高亮（子級已展開和未展開的交互與父級同理）。
當需要將數據拖動到二級文件夾內時，只需要高亮二級文件夾即可。
關于樹組件多層級排序的使用場景和交互比較復雜，上面我根據不同場景分別列出了交互展示方式，下面再根據實際業務需求列舉案例說明，因為此場景主要是針對交互和顯示，所以我就直接拿動圖展示，便于大家理解。
本文由 @設計小余 原創發布于人人都是產品經理。未經許可，禁止轉載
題圖來自Unsplash，基于 CC0 協議
該文觀點僅代表作者本人，人人都是產品經理平臺僅提供信息存儲空間服務。
蘭亭妙微(www.izc.net.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的大數據可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網站設計、平面設計，以及相關的軟件開發服務，咨詢電話：01063334945。我們建立了一個微信群，每天分享國內外優秀的設計，有興趣請加入一起學習成長，咨詢及進群請加藍小助微信ben_lanlan