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