列表排序交互方式小结

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

总结

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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 204,684评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 87,143评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 151,214评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,788评论 1 277
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,796评论 5 368
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,665评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,027评论 3 399
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,679评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 41,346评论 1 299
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,664评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,766评论 1 331
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,412评论 4 321
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,015评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,974评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,203评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,073评论 2 350
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,501评论 2 343

推荐阅读更多精彩内容

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