列表作为多个同类型信息的集中，其默认的排序通常是列表项加入的时间，以及某个值的升序降序。在某些追求特定展示效果的场景下，也需要主动去设置某些列表项的位置。在最近的工作中跟列表打交道比较多，因此总结了一下几种列表排序的方式，包括：1.拖拽；2.置顶；3.上/下移动；4.编辑序号。
1. 置顶
使用方式：对列表中某项或某几项进行置顶操作
方便性：
局限：
使用场景：用于突出众多列表项中的少数几项，从而首先展示重要信息，或快捷进入常用项目。
置顶的特点在于无论列表内容有多少，可以简单地完成对目标内容的操作，适用于对列表中单个或少数几项进行突出。被置顶的项可以取消置顶，取消置顶后按照列表某人排序规则回到其应处的位置。如QQ聊天列表：
QQ聊天列表
新浪微博的置顶可能是是大家更熟悉的例子，这里就不截图了。
1. 拖拽
拖拽模拟了物理世界，是最自然的方式，显然它有着高效、灵活的优点，但相比其他排序方式它对视觉设计、开发要求要稍高。要实现流畅的拖拽过程，有以下几点值得注意：
1.1、在静态界面或hover时表现出可拖拽性
也就是所谓UI的affordance，让人一看就知道它是可拖拽的:
teambition的任务卡片，小块矩形区域，并且在矩形左侧使用色彩带强化卡片的形象；hover时光标会变成手
在worktile中，hover中一块任务板时会出现可拖拽的标示
简书的首页标签页顺序，用了3道小杠表示可拖拽；hover时光标会变成十字箭头
1.2、在拖拽过程中表现出可拖拽性
在视觉上需要设计拖拽项、原位置空出、新位置预留的样式，触发和完成拖拽的各项数值也需要详细定义。
teambition的卡片拖拽时还带有倾斜效果
1.3、列表项越多，拖拽的优势就越不明显
大家可以回想下在ps中手指压着鼠标、眼睛盯着图层名称去拖动图层的经历，真是一大麻烦。而当列表项多到出现了翻页，就更无法直接实现拖拽。此时，需要新开页面进入能实现拖拽的页面，或者干脆就将列表设计为无限列表，像本地文件那样。
由常规页面进排序页面，如豆瓣相册的拖拽排序：
豆瓣相册的常规页面
豆瓣相册的照片排序页面
3. 上/下移
单次点击实现一个单位的上/下移动，操作简单，适用于对列表局部中的项进行排序，常见于文件创建类工具中的内容管理。如Sketch、Axure：
Sketch中的上/下移动图层
axure中的sitemap
值得注意的是，上/下移动的操作与单个列表项是分开的，而不是像其伴随着单个列表项。我想，其中一个理由是在这种点击一次移动一个位置的场景中，仅仅点击一次很可能达不到目的。如果操作跟随列表项的移动，那么在多次点击时鼠标需要不断点击 - 移动 - 点击 - 移动……在点击区域不大的情况下，操作起来无疑会比较麻烦。另外，在使用这些工具时，虽然有图层面板，但用户的注意力集中在内容而非内容的列表上，用户可以直接在编辑区选中内容进行编辑，而不用在列表选中再操作。
4. 编辑序号
直接编辑数字编号是最精准的排序方式了，当然操作也更复杂。另外，每次对编辑后页面都需要刷新一次（其他排序方式是这样吗？）。它适用于需要对列表整体排序进行把握、可能对每个列表项的排序都有要求的场景。如豆瓣豆列的排序、虾米精选集的排序：
豆列的默认状态
豆列的编辑状态
虾米精选集的编辑状态
技术实现上的考虑
工作量
从交互设计的角度审视了这几种排序方式之后，也需要考虑实现的问题。尤其是在工期紧张人手不够的情况下，设计方案常常会变为“不太好用但至少能用”的效果。于是我去询问了开发同事实现4种方式时工作量上的比较，得知拖拽排序和编辑序号是会工作量更大些，但差别也不是特别大。
刷新机制
另外一个要与开发沟通好的问题是，列表排序更改后页面的刷新机制。像豆列那样每进行一次编辑页面就要全刷一次，无疑会带来糟糕的体验。
总结
列表排序方式的选择，首先需要考虑排序的需求到底是怎样的，再去综合列表项总数、要排序的项目数总、列表项形式等因素。总的来说，拖拽还是可以胜任大多数的排序场景。本文只是做出简单的总结，列表的形式和使用场景千差万别，还是那句话，具体情况具体分析。
网友评论