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

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

本文是對自己工作中關(guān)于排序功能的復(fù)盤，包含了自己的思考和設(shè)計過程。

設(shè)計排序要考慮什么？

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

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

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

1. 拖拽排序

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

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

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

用戶和系統(tǒng)以點擊的方式進行互動，點擊是最容易感知和效率最高的交互方式。若內(nèi)容順序調(diào)整距離不遠時，可采用該方式。

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

3. 置頂

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

可以看出，拖拽排序?qū)τ跀?shù)量較大、距離較遠的場景來說，不是那么友好，但相比其余兩者具有更好的自由度。對于我們產(chǎn)品，管理章節(jié)順序?qū)儆诘皖l操作，老師創(chuàng)建章節(jié)單元的平均數(shù)量在 15 個左右，在移動端展示不到 2 屏，操作較為困難。但總體來說操作頻率低，考慮到操作靈活度，所以采用拖拽排序的方案實現(xiàn)章節(jié)順序調(diào)整。

二、如何告知用戶可拖拽

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

1. 使用拖拽圖標(biāo)引導(dǎo)用戶。
2. 展示提示文案告知用戶。

對章節(jié)內(nèi)容進行拖拽的行為在我們產(chǎn)品的功能模塊下，屬于低頻行為，而人們的記憶力總是很差，僅展示圖標(biāo)可能會增加用戶記憶力負(fù)擔(dān)，造成用戶認(rèn)知困難，所以增加提示文案告知用戶如何調(diào)整順序會更清晰。

拖拽熱區(qū)

僅點擊拖拽 icon 區(qū)域可進行拖拽。

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

三、跨層級如何排序

1. 交互規(guī)則

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

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

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

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

2. 視覺反饋

1）用戶拖動的目標(biāo)物體

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

2）將要放置的位置

預(yù)先占位。當(dāng)用戶將內(nèi)容拖起后，并移動位置時，提前顯示將要放在的位置，告知用戶目標(biāo)內(nèi)容將會被放到哪里。

3. 聽覺觸覺反饋

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

四、特殊狀態(tài)

1）劃分可拖拽區(qū)域，且對在區(qū)域內(nèi)無法放置的位置給出提示。

整體的可拖拽區(qū)域最高是多少，最低是多少，當(dāng)用戶拖拽到最高最低放下時，物體應(yīng)該被放置在什么位置上。

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

2）當(dāng)內(nèi)容過多超出 1 屏?xí)r，需確定拖動在什么位置時，頁面可上下滑動。

我們設(shè)置當(dāng)拖拽目標(biāo)到達界面底部沒有放下時，頁面開始往下滾動。往上滾動類似，當(dāng)拖拽目標(biāo)超出 navbar 時，頁面開始往上滾動。

3）考慮最底部的目標(biāo)內(nèi)容和界面底部的距離。提前預(yù)留出可拖拽區(qū)域。

最后

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