列表作為多個(gè)同類型信息的集中，其默認(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聊天列表：

QQ聊天列表

新浪微博的置頂可能是是大家更熟悉的例子，這里就不截圖了。

1. 拖拽

拖拽模擬了物理世界，是最自然的方式，顯然它有著高效、靈活的優(yōu)點(diǎn)，但相比其他排序方式它對(duì)視覺設(shè)計(jì)、開發(fā)要求要稍高。要實(shí)現(xiàn)流暢的拖拽過程，有以下幾點(diǎn)值得注意：
1.1、在靜態(tài)界面或hover時(shí)表現(xiàn)出可拖拽性
也就是所謂UI的affordance，讓人一看就知道它是可拖拽的:

teambition的任務(wù)卡片，小塊矩形區(qū)域，并且在矩形左側(cè)使用色彩帶強(qiáng)化卡片的形象；hover時(shí)光標(biāo)會(huì)變成手

在worktile中，hover中一塊任務(wù)板時(shí)會(huì)出現(xiàn)可拖拽的標(biāo)示

簡(jiǎn)書的首頁(yè)標(biāo)簽頁(yè)順序，用了3道小杠表示可拖拽；hover時(shí)光標(biāo)會(huì)變成十字箭頭

1.2、在拖拽過程中表現(xiàn)出可拖拽性
在視覺上需要設(shè)計(jì)拖拽項(xiàng)、原位置空出、新位置預(yù)留的樣式，觸發(fā)和完成拖拽的各項(xiàng)數(shù)值也需要詳細(xì)定義。

teambition的卡片拖拽時(shí)還帶有傾斜效果

1.3、列表項(xiàng)越多，拖拽的優(yōu)勢(shì)就越不明顯
大家可以回想下在ps中手指壓著鼠標(biāo)、眼睛盯著圖層名稱去拖動(dòng)圖層的經(jīng)歷，真是一大麻煩。而當(dāng)列表項(xiàng)多到出現(xiàn)了翻頁(yè)，就更無(wú)法直接實(shí)現(xiàn)拖拽。此時(shí)，需要新開頁(yè)面進(jìn)入能實(shí)現(xiàn)拖拽的頁(yè)面，或者干脆就將列表設(shè)計(jì)為無(wú)限列表，像本地文件那樣。
由常規(guī)頁(yè)面進(jìn)排序頁(yè)面，如豆瓣相冊(cè)的拖拽排序：

豆瓣相冊(cè)的常規(guī)頁(yè)面

豆瓣相冊(cè)的照片排序頁(yè)面

3. 上/下移

單次點(diǎn)擊實(shí)現(xiàn)一個(gè)單位的上/下移動(dòng)，操作簡(jiǎn)單，適用于對(duì)列表局部中的項(xiàng)進(jìn)行排序，常見于文件創(chuàng)建類工具中的內(nèi)容管理。如Sketch、Axure：

Sketch中的上/下移動(dòng)圖層

axure中的sitemap

值得注意的是，上/下移動(dòng)的操作與單個(gè)列表項(xiàng)是分開的，而不是像其伴隨著單個(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í)，雖然有圖層面板，但用戶的注意力集中在內(nèi)容而非內(nèi)容的列表上，用戶可以直接在編輯區(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)景。如豆瓣豆列的排序、蝦米精選集的排序：

豆列的默認(rèn)狀態(tài)

豆列的編輯狀態(tài)

蝦米精選集的編輯狀態(tài)

技術(shù)實(shí)現(xiàn)上的考慮

工作量
從交互設(shè)計(jì)的角度審視了這幾種排序方式之后，也需要考慮實(shí)現(xiàn)的問題。尤其是在工期緊張人手不夠的情況下，設(shè)計(jì)方案常常會(huì)變?yōu)椤安惶糜玫辽倌苡谩钡男ЧＳ谑俏胰ピ儐柫碎_發(fā)同事實(shí)現(xiàn)4種方式時(shí)工作量上的比較，得知拖拽排序和編輯序號(hào)是會(huì)工作量更大些，但差別也不是特別大。
刷新機(jī)制
另外一個(gè)要與開發(fā)溝通好的問題是，列表排序更改后頁(yè)面的刷新機(jī)制。像豆列那樣每進(jìn)行一次編輯頁(yè)面就要全刷一次，無(wú)疑會(huì)帶來(lái)糟糕的體驗(yàn)。

總結(jié)

列表排序方式的選擇，首先需要考慮排序的需求到底是怎樣的，再去綜合列表項(xiàng)總數(shù)、要排序的項(xiàng)目數(shù)總、列表項(xiàng)形式等因素?？偟膩?lái)說，拖拽還是可以勝任大多數(shù)的排序場(chǎng)景。本文只是做出簡(jiǎn)單的總結(jié)，列表的形式和使用場(chǎng)景千差萬(wàn)別，還是那句話，具體情況具體分析。