×

列表设计的一些想法和思路

96
詹仕波
2017.08.23 14:24* 字数 2063

前几天在朋友圈看到了一张图,结合最近正在跟一个产品实习生沟通的一个小项目,对于列表设计有了一些想法和思路。

图1 来自朋友圈的“供应商管理列表”

1.供应商管理列表

发上面这张朋友圈图片的是一位程序猿,我的大学同学。第一眼看到这张图的时候,我从同学视角转换到了产品视角,立马发现了这个列表几处欠妥的地方。

列表上需要显示供应商的省市区信息;
列表上需要显示供应商的入驻时间;
可能需要显示该供应商规模相关的信息:例如供应商品数、等级、供应客户数;
可能需要显示该供应商活跃相关的信息:例如最近登录/交易时间、订单数、交易额;

当然您可能说:这些信息会在供应商明细里面显示,列表上不需要显示这么多。但从页面的排布上来看,至少是可以把省市区信息、入驻时间这2项信息加上的。可以的话还可以从其它几项信息里面摘出几项重要的信息展示出来。

可能有小伙伴会说,这个列表有必要加这么多信息么?想看的话去详情页看就行了啊。但我以2年+的电商经验告诉您,以下的每个字段都有实际的业务,而且在做决策和具体方案执行时确实都会用到这些信息。相反,营业执照号加到这个列表上是没什么卵用的。

图2 每个字段均有业务意义

2.列表设计规范/建议

列表是最常见一种界面元素,尤其是后台管理系统中,我们会用到大量的列表,但从业10年以来我所见到的所接触到的大部分公司的后台系统,感觉没有最渣只有更渣,问到相关开发或者产品时也只能得到一句无法辩驳的回复“这个后台就我们公司几个内部人员用,将就用嘛”。

然而所有问题似乎可以简单归纳为2条

1).怎样使列表更易读?
2).列表项信息过多怎么办?

先拿第一条来说,几乎很多后台系统的列表都不满足这一点,还是以上面那张图为例,我们可以细说下怎么来提高易读性

1).不要出现横向滚动条,请自行脑补下横向纵向拖动滚动条查看列表信息的画面;
2).务必隔行填充,以避免看信息时串行;
3).如果做不到隔行填充,查看信息时该行需有背景色或者hover效果(可以加灰色边框)
4).列表项对其方式需要规范,长度相对固定数据列居中对齐,不固定的居左对齐,数字或金额请靠右对齐并千分位分割显示,订单相关数据鼠标悬停时请4-4位分割;
5).设定每列的固定或最小宽度,显示不全的时候鼠标悬停显示全部,支持双击单元格复制内容;
6).每行操作按钮很多时可酌情(未选中或未悬停状态下)隐藏部分,可点击区域可酌情增高或增宽;
7).每页显示的条数较多的时候,建议将表头做吸顶(固定),减少用户的记忆负荷(避免上下滑动页面查看表头信息);
8).时间项等信息可以精简,比如2017-08-23 10:35:50这样的时间,如果是当年的时间则把年份隐去然后精简为08-23 10:35:50;跨年的信息可以把秒隐去然后精简为2016-08-23 10:35;

文章开头举例中的信息,明显是列表项信息过少,但大部分情况下我们要面对的不是过少而是过多的问题,对于此,我们或许可以采用《简约至上-交互设计四策略“合理删除、分层组织、适时隐藏、巧妙转移”以下原则避免列表项信息过多

图3 订单列表页面(仅展示1/3列表项)

1).删除:将所有列表项信息整理汇总后,根据业务重要度进行排序,将列表项中非必要的字段信息合理删除掉,如下图4所示;
2).分类:以上的订单列表页分别显示了“下单时间、付款时间、确认收货时间和清分时间”4个信息,乍看上去密密麻麻全是时间,在此我们将时间分类进行组织。各种金额也是同理,如下图6所示;
3).隐藏:将重要程度较低的时间和金额进行隐藏,见图4和图5;
4).转移:把时间和金额项转移到图6中所示(鼠标悬停到图4所示的蓝色文字即可显示),如果需要在列表中显示部分字段信息,可以通过图5中的数据筛选项勾选即可;

图4 改良后的订单列表
图5 通过数据筛选实现巧妙隐藏和转移
图6 时间和金额信息重新组织然后再隐藏、转移

3.列表设计之筛选/搜索区

孤阴不长,独阳不生。列表显示和筛选条件从来都是成对出现的,很少会出现只有列表没有筛选/搜索区的情况。辣么筛选/搜索区设计的时候又需要注意哪些事情呢?

图7 POS机管理列表

看到这个列表和筛选/搜索条件的时候我同样是崩溃的,这时我才深刻的体会到为何这个功能上线2年多了一直没有人用,根本没法用不好用。随手都可以列举下这个页面出现的诸多问题:

筛选/搜索条件

1.商户号:1个省共用1个商户号,所以在筛选/搜索条件里面是没有业务意义的,或者说是跟地域重复的;
2.所属店铺:看似很有必要,1个企业可以开多个店铺。但实际上POS机入网的时候后台系统不会也无法区分出来是哪个店铺在用,所以这个也是多余的;
3.发放时间:如果管理人员想查看/统计/盘点下近半年或者1年某个省份或者全国的POS机情况,试问怎么操作?
4.优先顺序:我们在对筛选条件排序的时候(如上图所示的三行三列,哪个条件在哪个位置)会尽可能的把性质/内容相似的排在一起,如输入项集中在一起,筛选项集中在一起。这点图7没有槽点,但相似性原则之外还有一条优先级顺序,即将重要程度高/使用频率高的信息放在前面,这样企业名称需要更靠前。

列表显示

1.筛选条件中有的信息列表中需要显示:例如图7搜索条件的“所属企业”;
2.列表信息中从左往右字段信息应该和搜索/筛选区域的字段信息顺序大体上保持一致,且字段名称/称谓应该一致;
3.列表信息中从左往右字段的重要程度大体上是依次递减的;
4.列表要显示页数,可以快速翻页,同时也需要有计数。

大部分产品汪都心怀一颗改变世界的雄心,但在做“乔布斯”之前,我觉得还是需要脚踏实地做好这些最最基本的东西。

产品设计
Web note ad 1