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

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

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

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

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

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

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

1. 拖拽排序

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

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

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

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

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

3. 置頂

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

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

二、如何告知用戶可拖拽

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

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

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

拖拽熱區(qū)

僅點(diǎn)擊拖拽 icon 區(qū)域可進(jìn)行拖拽。

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

三、跨層級(jí)如何排序

1. 交互規(guī)則

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

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

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

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

2. 視覺反饋

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

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

2）將要放置的位置

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

3. 聽覺觸覺反饋

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

四、特殊狀態(tài)

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

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

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

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

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

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

最后

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