列表作為多個(gè)同類(lèi)型信息的集中，其默認(rèn)的排序通常是列表項(xiàng)加入的時(shí)間，以及某個(gè)值的升序降序宙址。在某些追求特定展示效果的場(chǎng)景下，也需要主動(dòng)去設(shè)置某些列表項(xiàng)的位置调卑。在最近的工作中跟列表打交道比較多抡砂，因此總結(jié)了一下幾種列表排序的方式，包括：1.拖拽恬涧；2.置頂注益；3.上/下移動(dòng)；4.編輯序號(hào)溯捆。
1. 置頂
使用方式：對(duì)列表中某項(xiàng)或某幾項(xiàng)進(jìn)行置頂操作
方便性：
局限：
使用場(chǎng)景：用于突出眾多列表項(xiàng)中的少數(shù)幾項(xiàng)丑搔，從而首先展示重要信息，或快捷進(jìn)入常用項(xiàng)目提揍。
置頂?shù)奶攸c(diǎn)在于無(wú)論列表內(nèi)容有多少啤月，可以簡(jiǎn)單地完成對(duì)目標(biāo)內(nèi)容的操作，適用于對(duì)列表中單個(gè)或少數(shù)幾項(xiàng)進(jìn)行突出劳跃。被置頂?shù)捻?xiàng)可以取消置頂谎仲，取消置頂后按照列表某人排序規(guī)則回到其應(yīng)處的位置。如QQ聊天列表：
新浪微博的置頂可能是是大家更熟悉的例子售碳，這里就不截圖了强重。
1. 拖拽
拖拽模擬了物理世界绞呈，是最自然的方式贸人，顯然它有著高效、靈活的優(yōu)點(diǎn)佃声，但相比其他排序方式它對(duì)視覺(jué)設(shè)計(jì)艺智、開(kāi)發(fā)要求要稍高。要實(shí)現(xiàn)流暢的拖拽過(guò)程圾亏，有以下幾點(diǎn)值得注意：
1.1十拣、在靜態(tài)界面或hover時(shí)表現(xiàn)出可拖拽性
也就是所謂UI的affordance，讓人一看就知道它是可拖拽的:
1.2、在拖拽過(guò)程中表現(xiàn)出可拖拽性
在視覺(jué)上需要設(shè)計(jì)拖拽項(xiàng)秘血、原位置空出味抖、新位置預(yù)留的樣式，觸發(fā)和完成拖拽的各項(xiàng)數(shù)值也需要詳細(xì)定義灰粮。
1.3仔涩、列表項(xiàng)越多，拖拽的優(yōu)勢(shì)就越不明顯
大家可以回想下在ps中手指壓著鼠標(biāo)粘舟、眼睛盯著圖層名稱(chēng)去拖動(dòng)圖層的經(jīng)歷熔脂，真是一大麻煩。而當(dāng)列表項(xiàng)多到出現(xiàn)了翻頁(yè)柑肴，就更無(wú)法直接實(shí)現(xiàn)拖拽锤悄。此時(shí)，需要新開(kāi)頁(yè)面進(jìn)入能實(shí)現(xiàn)拖拽的頁(yè)面嘉抒，或者干脆就將列表設(shè)計(jì)為無(wú)限列表零聚，像本地文件那樣。
由常規(guī)頁(yè)面進(jìn)排序頁(yè)面些侍，如豆瓣相冊(cè)的拖拽排序：
3. 上/下移
單次點(diǎn)擊實(shí)現(xiàn)一個(gè)單位的上/下移動(dòng)隶症，操作簡(jiǎn)單，適用于對(duì)列表局部中的項(xiàng)進(jìn)行排序岗宣，常見(jiàn)于文件創(chuàng)建類(lèi)工具中的內(nèi)容管理蚂会。如Sketch、Axure：
值得注意的是耗式，上/下移動(dòng)的操作與單個(gè)列表項(xiàng)是分開(kāi)的胁住，而不是像其伴隨著單個(gè)列表項(xiàng)。我想刊咳，其中一個(gè)理由是在這種點(diǎn)擊一次移動(dòng)一個(gè)位置的場(chǎng)景中彪见，僅僅點(diǎn)擊一次很可能達(dá)不到目的。如果操作跟隨列表項(xiàng)的移動(dòng)娱挨，那么在多次點(diǎn)擊時(shí)鼠標(biāo)需要不斷點(diǎn)擊 - 移動(dòng) - 點(diǎn)擊 - 移動(dòng)……在點(diǎn)擊區(qū)域不大的情況下余指，操作起來(lái)無(wú)疑會(huì)比較麻煩。另外跷坝，在使用這些工具時(shí)酵镜，雖然有圖層面板，但用戶(hù)的注意力集中在內(nèi)容而非內(nèi)容的列表上柴钻，用戶(hù)可以直接在編輯區(qū)選中內(nèi)容進(jìn)行編輯淮韭，而不用在列表選中再操作。
4. 編輯序號(hào)
直接編輯數(shù)字編號(hào)是最精準(zhǔn)的排序方式了贴届，當(dāng)然操作也更復(fù)雜靠粪。另外足丢，每次對(duì)編輯后頁(yè)面都需要刷新一次（其他排序方式是這樣嗎？）庇配。它適用于需要對(duì)列表整體排序進(jìn)行把握斩跌、可能對(duì)每個(gè)列表項(xiàng)的排序都有要求的場(chǎng)景。如豆瓣豆列的排序捞慌、蝦米精選集的排序：
技術(shù)實(shí)現(xiàn)上的考慮
工作量
從交互設(shè)計(jì)的角度審視了這幾種排序方式之后耀鸦，也需要考慮實(shí)現(xiàn)的問(wèn)題。尤其是在工期緊張人手不夠的情況下啸澡，設(shè)計(jì)方案常常會(huì)變?yōu)椤安惶糜玫辽倌苡谩钡男Ч涠Ｓ谑俏胰ピ?xún)問(wèn)了開(kāi)發(fā)同事實(shí)現(xiàn)4種方式時(shí)工作量上的比較，得知拖拽排序和編輯序號(hào)是會(huì)工作量更大些嗅虏，但差別也不是特別大洛姑。
刷新機(jī)制
另外一個(gè)要與開(kāi)發(fā)溝通好的問(wèn)題是，列表排序更改后頁(yè)面的刷新機(jī)制皮服。像豆列那樣每進(jìn)行一次編輯頁(yè)面就要全刷一次楞艾，無(wú)疑會(huì)帶來(lái)糟糕的體驗(yàn)。
總結(jié)
列表排序方式的選擇龄广，首先需要考慮排序的需求到底是怎樣的硫眯，再去綜合列表項(xiàng)總數(shù)、要排序的項(xiàng)目數(shù)總择同、列表項(xiàng)形式等因素两入。總的來(lái)說(shuō)敲才，拖拽還是可以勝任大多數(shù)的排序場(chǎng)景裹纳。本文只是做出簡(jiǎn)單的總結(jié)，列表的形式和使用場(chǎng)景千差萬(wàn)別紧武，還是那句話(huà)剃氧，具體情況具體分析。
