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