顺序|研究一下,体验设计中的排序问题( 二 )


如在SAP Fiori设计规范指南Tree的应用中,就定义了拖动排序的交互方式。
如图:

顺序|研究一下,体验设计中的排序问题
文章插图
优点:

  1. 操作灵活,可满足多形式的排序要求;
  2. 操作便捷高效,兼容性强,特别是少量数据时;
  3. 可视化操作,所见即所得。
缺点:
  1. 长表格的中,如果排序跨度较大,就比较困难,特别是PC端的跨页面拖动;
  2. 实现效果的调校需要丝滑动效的加持。
2. 指定排序指定排序即为每一项数据置顶相应的顺序编号,实现流动性的排序功能实现。如在金蝶云的单据录入中,有些环节对单据体的顺序有严格的要求,希望调整单据体分录的顺序。用户需要在自定义行号中输入所处的编号,可实现以及自定义行号的升序排列。
同样,在to G产品中,线上会议需要将与会领导按照一定的顺序进行排序,那么填写顺序编号就是比较经济和兼容性的实现方案。
优点:
  1. 排序稳定,指定顺序的数据不会受到其他因素的影响;
  2. 操作简便,直接输入想要的顺序数字进行排序,特别是对长列表比较友好,如跨页面排序。
缺点:
  1. 大量数据时,有可能涉及到两种排序规则,实现关键数据的指定排序,剩余数据另外一种排序规则;
  2. 当需要在以及完成排序的数据中插入数据时,交互上就稍显复杂需要考虑数据的替换与插入后的后续数据的编号问题;
  3. 如果临时插入了权重较低的内容,操作成本较大。
3. 逐步排序这种排序方式设计师会比较熟悉,在sketch与figma中,常常会用到将某个图层进行连续调整已达到相互叠加的效果,满足视觉要求。

顺序|研究一下,体验设计中的排序问题
文章插图
逐步排序比较适合页面中数据的微调,操作较为精细。
如在一些产品的属性配置中,一般情况下数量有限,但有时候需要对属性的顺序进行微调,往往会采用这种精细度较高的交互方式。

顺序|研究一下,体验设计中的排序问题
文章插图
优点:
  1. 符合用户心智;
  2. 操作稳定性高,不会出现错误排序;
  3. 操作精细、适用于微调。
缺点:
不适合长距离的数据移动排序。
如果数据调整到的目的地比较远,一次点击很难完成目标,所以需要频繁的操作,同时随着数据的位置移动,鼠标位置也要相应的微调,然后进行下一次的移动操作,因此需要不断重复“点击-移动-点击”的操作。
4. 置顶/置底排序这种排序方式设计师也会比较熟悉,在sketch与figma中,常常会用到将某个图层进行置顶、置底操作。用户可以对选中的数据,一键显示在最顶部或最底部。

顺序|研究一下,体验设计中的排序问题
文章插图
优点:
如果需要将某一内容优先展示,操作很方便。
缺点:
  1. 批量数据的排序就比较复杂;
  2. 如果仅仅是数据的排序,而不是单纯的将某一内容优先展示,操作起来就会比较复杂。
5. 条件排序条件排序即通过设置某种规则,实现需求数据的整体排序,在某种意义上来说,条件排序的规则也可以作为被动排序的排序规则。除了之前提到时间正序/倒序、字母顺序、笔画顺序规则外,常见的还有电脑桌面的文件排序规则,如文件名称、文件类型、创建时间,数据的升序与降序,如距离的正序等。

顺序|研究一下,体验设计中的排序问题
文章插图
优点:
  1. 适合数据的整体排序,一键完成;
  2. 使用范围比较广,可以是数据类型,也可以用户的查看频率,如阅读数量等;
  3. 可以实现多条件的交叉排序。
缺点:
不能指定某个数据的特异化显示。
6. 其他除此之外,也存在一些类似排序的交互方式,例如跨组织架构的人员的移动、跨文件结构的文件的调整,通常会采用拖动或移动到的方式进行调整,他们的排序是对所处结构的“排序”调整。

顺序|研究一下,体验设计中的排序问题
文章插图
从严格意义上来说,这种移动并不是排序,而是所属结构的变更。但在组织结构的调整中,如果允许节点之下子节点的拖动排序,就可以看作是组织结构的排序。
四、结语排序是交互组件、交互规范中的小透明,常常被湮没在下拉选择等组件中。同时,排序后的交互与视觉效果并没有明显的差异,仅对展示的内容属性有关。