列表排序交互方式小结

列表作为多个同类型信息的集中,其默认的排序通常是列表项加入的时间,以及某个值的升序降序。在某些追求特定展示效果的场景下,也需要主动去设置某些列表项的位置。在最近的工作中跟列表打交道比较多,因此总结了一下几种列表排序的方式,包括: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种方式时工作量上的比较,得知拖拽排序和编辑序号是会工作量更大些,但差别也不是特别大。
刷新机制
另外一个要与开发沟通好的问题是,列表排序更改后页面的刷新机制。像豆列那样每进行一次编辑页面就要全刷一次,无疑会带来糟糕的体验。

总结

列表排序方式的选择,首先需要考虑排序的需求到底是怎样的,再去综合列表项总数、要排序的项目数总、列表项形式等因素。总的来说,拖拽还是可以胜任大多数的排序场景。本文只是做出简单的总结,列表的形式和使用场景千差万别,还是那句话,具体情况具体分析。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 174,517评论 25 709
  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 12,292评论 4 61
  • 凑足了思念 塞满背包 沿着黄河大堤去看你下 缠绵的风 把黄河路上的红绿灯吹乱 雨从三路下到五路 点点滴滴 滋...
    张怀智阅读 387评论 0 0
  • 三十年的相見 紧紧握着你的手 然后轻轻地抽出 泪水哽咽 一个呼喊了四年的名字 从唇边走向了心田 人世的三十年啊...
    王文兵阅读 287评论 1 1
  • 我放学回家很快的做完了作业,然后外婆跟我说你应该学会预习课文了,我说:好的。于是我跟外婆说:我先读完经典,再来预习...
    ZZ李梦涵阅读 346评论 2 1