产品汪21：产品经理如何设计后台列表页面

最新推荐文章于 2024-04-22 13:25:32 发布

游戏新手村

最新推荐文章于 2024-04-22 13:25:32 发布

阅读量827

点赞数 10

分类专栏：产品汪文章标签：产品经理前端需求分析

本文链接：https://blog.csdn.net/m1928/article/details/137627293

版权

23 篇文章 1 订阅

订阅专栏

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

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

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

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

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

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

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

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

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

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

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

图3　订单列表页面（仅展示1/3列表项）

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

如果需要在列表中显示部分字段信息，可以通过图5中的数据筛选项勾选即可；

图4　改良后的订单列表

图5　通过数据筛选实现巧妙隐藏和转移

图6　时间和金额信息重新组织然后再隐藏、转移

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

图7　POS机管理列表

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

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