在設計排序功能時，我們需要考慮到哪些維度和細節？這篇文章里，作者就結合實際工作，對排序功能的設計進行了思考和復盤，并從四個層面進行了講解，一起來看看吧，或許會對你有所幫助。

查看了一些資料發現，很多都是在講具體元素和交互形式，會輸出一些通用結論。但需求千變萬化，通用結論并不一定適用于每一個人，遇到具體需求該如何思考才是最重要的。

本文是對自己工作中關于排序功能的復盤，包含了自己的思考和設計過程。

設計排序要考慮什么？

需求還是對于章節單元的管理，關于管理模式相關內容，這里是傳送門《管理模式》，這篇內容主要聊排序部分。從以下四個方面來考慮：

1. 如何排序，確定交互形式
2. 如何讓用戶知道可排序
3. 跨層級的排序如何設計
4. 特殊狀況

一、如何排序，確定交互形式（僅聊移動端）

1. 拖拽排序

用戶長按某個元素，拖拽移動目標到任意位置。這個元素可以是拖拽的圖標，也可以是目標內容本身，區別僅僅是拖拽熱區的不同。這種方式給予了用戶最高的自由度，可以隨意地移動目標位置。

但也存在缺點，比如將目標內容從第一屏的第一個放置到第2屏的最后一個位置上，需長時間長按目標元素，操作難度較高，容易發生失誤。

2. “上移”“下移”排序

用戶和系統以點擊的方式進行互動，點擊是最容易感知和效率最高的交互方式。若內容順序調整距離不遠時，可采用該方式。

但當對目標進行遠距離的位置調整時，需多次點擊，且每一次只能按照順序依次更改位置。想象一下當用戶將第十二章移動到第一個位置時，可能需要點擊十二下，每一次點擊后，章節會往上移動一下，用戶的手也需要往上移動一個位置，耗時較長，且過程很枯燥。

3. 置頂

置頂表示將目標內容一鍵排列在第一位。如果多個目標被置頂，那么會按照時間順序倒序排列，最后置頂的在第一個位置上。這種方式雖然也可以間接地完成排序，但無法精確到排在第幾位。所以置頂更適合對于目標內容的推薦，只是利用更改目標內容展示順序完成了將內容推薦給自己或者用戶的這個操作。

可以看出，拖拽排序對于數量較大、距離較遠的場景來說，不是那么友好，但相比其余兩者具有更好的自由度。對于我們產品，管理章節順序屬于低頻操作，老師創建章節單元的平均數量在 15 個左右，在移動端展示不到 2 屏，操作較為困難。但總體來說操作頻率低，考慮到操作靈活度，所以采用拖拽排序的方案實現章節順序調整。

二、如何告知用戶可拖拽

操作前用戶可預知。在用戶操作前，需讓用戶知道該元素可交互，且用戶與之交互后需符合用戶心理預期。

1. 使用拖拽圖標引導用戶。
2. 展示提示文案告知用戶。

對章節內容進行拖拽的行為在我們產品的功能模塊下，屬于低頻行為，而人們的記憶力總是很差，僅展示圖標可能會增加用戶記憶力負擔，造成用戶認知困難，所以增加提示文案告知用戶如何調整順序會更清晰。

拖拽熱區

僅點擊拖拽 icon 區域可進行拖拽。

原因有 2 點，第一管理頁面，功能較多，有展開收起層級，更多，若拖拽熱區太多，用戶也容易誤觸。第二，若整個卡片都可拖拽的話，用戶無法進行頁面的滑動，滑動操作是用戶手指和界面進行長時間的接觸，完成上下的滑動的操作，與長按拖拽的交互沖突。

三、跨層級如何排序

1. 交互規則

對于單層級的排序，就很清晰，直接拖拽調整位置就好。但對于多層級，且層級之間不可以替代交換順序，就需考慮不同的情況。

拖起A章節（A 章節包含多個單元）時，A 章節就需要自動收起，其余章節也需自動收起，因為章節只能調整章節之間的前后順序，不能調整章節之間的父子層級順序。自動收起無關內容，在界面減少信息打擾，在交互上縮短拖拽距離，讓操作行為變得更簡單一些。

拖動 A 單元。單元只能放在章節下，不能與章節同層級，所以需考慮章節展開收起的不同狀態下，A 單元如何交互和呈現。

當章節收起時，拖動 A 單元到章節上時，表示A 單元被放置在章節的最后一個位置。當章節展開時，放在章節上和收起規則一致，也可以在單元之間選擇具體位置。

2. 視覺反饋

1）用戶拖動的目標物體

想象下當我們將桌上的杯子拿起，放在陽臺上的過程。拿起杯子時，杯子會高于之前的水平面（桌面）。所以投射在界面上，托起目標物體時，我們可以給物體增加投影表示物體被托起的狀態。

2）將要放置的位置

預先占位。當用戶將內容拖起后，并移動位置時，提前顯示將要放在的位置，告知用戶目標內容將會被放到哪里。

3. 聽覺觸覺反饋

比如淘寶，飛書，微信當目標物體被拖動時，會有產生震動效果，從聽覺和觸覺層面讓用戶更加真實的感知到拖動物體的過程。飛書，微信對于物體可以被放置在某一位置時，也會有一次震動，這次的震動效果會更小一些。這種設計真的太貼心了，我甚至自己拖了好久。

四、特殊狀態

1）劃分可拖拽區域，且對在區域內無法放置的位置給出提示。

整體的可拖拽區域最高是多少，最低是多少，當用戶拖拽到最高最低放下時，物體應該被放置在什么位置上。

例如飛書，會在最后一個位置之后還給了一段可拖拽距離，為了讓用戶可以看見物體將要被放置的位置。淘寶對于不可放置的位置給出文字提示。

2）當內容過多超出 1 屏時，需確定拖動在什么位置時，頁面可上下滑動。

我們設置當拖拽目標到達界面底部沒有放下時，頁面開始往下滾動。往上滾動類似，當拖拽目標超出 navbar 時，頁面開始往上滾動。

3）考慮最底部的目標內容和界面底部的距離。提前預留出可拖拽區域。

最后

以上是我關于排序功能的設計思考過程，如有疑問希望可以跟大家多多交流。