「后台列表页设计原则和技巧」

摘要： 本文详述了管理后台列表页的设计原则和技巧，对于新手有很大的学习价值。

不管是什么类型的产品，几乎都会出现「列表页」，前台部分的列表页设计技巧已经有不少的介绍了，下面我以「电商系统」为例，谈谈业务后台的列表页设计原则和技巧。

1 什么是「列表页」

1.1 「列表页」的概念

列表页是一些具备同种属性的内容的聚合。简单讲，在电商系统里面，展现全部商品或订单信息的或类似页面就是列表页。列表页的简单特征就是一行一条数据，和数据库或Excel表格的概念都很像。商品列表页就是一行一条商品信息，订单列表页就是一行一条订单信息。

1.2 「列表页」的类型

根据列表行数据的生成方式，可分为「主动型列表」和「被动型列表」，在阐述这两个概念以前，咱们先来区分两种用户的身份，一种是「使用后台的管理员用户」，另外一种是「使用前台的终端用户」，这两类人经常不是同一群人，咱们都称之为「用户」，读者须要根据不一样场景注意区分。

主动型列表：指的是列表中的数据是由管理员生成的，而非终端用户生成。例如「商品列表页」中的数据就是由管理员生成，与终端用户无关，用户在前台看到的商品信息均由后台编辑生成，用户没法变动商品信息。

被动型列表：指的是列表中的数据均是由终端用户生成的，而非管理员生成。例如「订单列表页」中的数据就是由终端用户生成，用户选择商品，提交订单，造成订单信息。

主动型列表和被动型列表虽然都是列表页，可是因为其内容的来源不一样，因此在设定其产品逻辑方面有很大不一样。

2 列表页设计原则

列表页有如下几条设计原则。实际上说原则也并不许确，由于产品设计并无一个既定的标准，而是这些方法论是由行业前驱提出，而且通过了相关产品、市场的重重考验，被证实了是行之有效的。

第一条：根据场景提供展现的业务列。

第二条：产品新数据行可以便捷地看到。

第三条：操做宜少不宜多。

上面的几条原则可能比较抽象，难以理解，下面我来详细讲解。

3 列表页设计技巧

3.1 列表页构成元素

咱们先来看看一个完整的列表页有哪些元素，主体是列表，包含一些对列表的操做，以及搜索。咱们重点说明「列表」部分。

第一行为字段名，不出意外通常是：序号、业务列、操做。序号没什么好说的，就是一个一、二、3…的展现，用途只是用于辅助「行」的显示，无任何的业务逻辑和附加含义。业务列是列表的主要部分，操做指的是对该一行的数据的操做，常见的有：编辑、删除等等。

主动型列表还有「新增行」操做（对应不一样业务名称都不一样，例如商品列表页就是「新增商品」），通常被动型列表无「新增行」操做。

3.2 业务列

业务列中须要展现哪些元素呢？单行记录可能包含多个数据，哪些须要放上去，哪些不须要放上去，哪些须要显示可是只须要再深一层显示，怎么断定？

依据就是上述设计原则的第一条——根据场景提供展现的业务列。首先你须要定义这个页面的用途是什么，根据设定的用途去展现相应的元素，同时更重要的是，要了解用户真正须要的是什么。须要展现什么内容，不是看咱们有什么，而是看用户须要什么。仍是以「商品列表页」为例，这个页面的用途就是管理商品的（实际上这个页面自己就叫「商品管理」页），后台新增、编辑商品，前台展现，供用户购买。一个商品包含如下元素：商品名称、商品描述、库存、价格、展现图、规格、详情介绍等，显示这些内容是很难所有都放到列表页的「业务列」中的，那如何取舍呢？咱们将这个列表页的用途定位为：辅助用户快速找到对应的商品，进行编辑或其余操做。若是是这个定位的话，那么只要一个商品名称就能够了。

实际上，在业务列中呈现的元素不只仅是「商品名称」，咱们这里再引入一个新的概念：主要元素和补充元素（辅助元素）。在这里「商品名称」就是主要元素，主要元素和补充元素的区别是即便只保留主要元素，也不影响这个页面功能的实现。在「商品管理页」中常见的补充元素还有：封面图——辅助经过看图直接找到对应商品，价格，销量（被动产生数据），库存等。

咱们在设计页面时，必定要肯定「主」和「次」，不要一锅粥的全往上挤。必定要克服一种「代码思惟」，这种思惟的典型想法就是「这个数据个人数据库有存，可能也有用户想要看，为何不放上去？」，回答仍是「定位」！

咱们再来说讲「订单列表页」，通常名称也叫「订单管理页」。（可能不少读者会疑惑，这些列表页为何在取名的时候都不带列表的，关于后台功能菜单的取名，能够看个人这篇文章《后台菜单命名小技巧》）在设置业务列的时候，第一步仍是明确这个页面的定义和用途，想一想用户在何时会用到这个页面，再简单讲，思考「在什么状况下，用户出于什么目的会主动打开这个页面」，这个就是找准「用途」的技巧。用途无非就是下面这些：

（1）和买家协商一致，去后台改价。

（2）看看有什么新订单，而后去操做发货。

（3）退款操做

明确了用途，以后再把对应的业务列往上放就能够了。

关于「页面用途」，这里再讲几句，说说不少新手很容易犯的错误，就是「想太多」。会去思考「万一用户不当心点到这个页面，忽然想看某个数据，看不到怎么办？」又或者是「若是咱们把这个数据也放上去，这样若是有用户想看，就能够看了」。错误太多，不少颇有趣，后面再整一期讲讲这些常见的「想固然」的想法吧。

还须要特别注意的是，咱们将「用户须要什么」的时候，这里的「用户」不是指具体的某我的，而是一群人，准确的讲，是带「占比数」的一群人，例如90%的用户倾向于A方案，10%的用户倾向于B方案，而A和B方案只能二选一的状况下，咱们只能选择A方案，而不是说只要存在一个用户须要某个功能，咱们就必须往上作。

3.3 默认列表顺序

默认排列顺序算是一个不算重点的重点，一是由于它重要，很是重要，二是这个技巧特别简单，几乎不须要深刻思考。原则中第二条：「产品新数据行可以便捷地看到。」讲的就是这里的默认列表顺序。那么什么是列表顺序呢？

列表一行一条数据，老是须要一个明确的规则去肯定它的排列顺序，而不是随机的，哪条记录排在前面，哪条记录排在后面，都是须要制定必定的规则的。那么怎样才能让「产品新数据可以便捷地看到」呢？技巧就是根据所在列表的新数据放在第一，越新的数据排在越前面。再结合「主动型列表」和「被动型列表」的特征这个技巧还须要必定的优化升级。咱们结合具体例子讲解。

商品列表页，这是典型的主动型列表，全部的数据行都是用管理员用户主动生成的。首先第一条是毫无争议的，新增的商品默认排在第一行。还有一个方面是，编辑保存的商品，也是须要从后往前拉的。不然排在后几页的商品，编辑后就没有任何变化。因此将二者组合，默认列表排序规则就是「商品保存时间降序排列」（保存不区分新增仍是编辑）。

不少人可能会想到，商品在前台的展现顺序问题，因此引入「手动排序的序号」概念，这实际上是彻底多余的，前台商品的排序最好和后台排序脱轨，遵循一套排序规则后期维护会很是麻烦。（这一点以后的文章会细讲）

订单列表页，这是典型的被动型列表，全部的数据都是由终端用户生成的。因此默认排序规则很简单，就是「生成订单的时间降序」排列。

还有一个算是小难点，仍是以「订单列表页」举例，订单有多种状态，咱们会在订单列表页设立标签栏快捷查询，那么如何制定各标签栏的默认排列顺序呢？其实仍是遵循同样的道理，就是进入该标签栏的时间降序。例如订单的状态有「未支付」、「已支付」、「已发货」、「已完成」等等。未支付状态指的是，订单已生成，可是用户未付款，那么该标签栏下列表的默认排列顺序就是「生成订单的时间降序」。已支付状态指的是，用户已经付款，可是商家尚未发货，那么该标签栏下列表的默认排列顺序就是「付款时间降序」。已发货状态指的是商家完成发货，那么该标签栏下列表的默认排列顺序就是「发货时间降序」。已完成状态指的是用户手动确认收货或者系统自动确认收货，那么该标签栏下列表的默认排列顺序就是「确认收货时间降序」。

简单来讲，只要记住一点就没问题了，先进来的排后面，后进来的排前面。

3.4 辅助排列顺序

默认排列顺序和辅助排列顺序的区别是，默认就是直接进入该页面，不须要进行任何操做就直接展现的，辅助排列顺序是须要用户手动操做，变动排列顺序，辅助排列顺序通常设定在特定业务列上，点击可变动按此规则降序或升序排列。设定辅助排列顺序的技巧和前面提到的「业务列」同样，仍是明确页面定义和用途，这里不赘述了。例如商品列表页常见的辅助排列顺序有按销量、库存、价格排列等。

3.5 操做

常见的操做有：编辑、排序、删除等等。根据不一样业务功能的列表页，操做区按钮区别很大。下面讲讲几个常见的功能。

3.5.1 编辑

对于主动型列表，不少人会情不自禁地加上「编辑」操做，很大程度上这是没错的，可是仔细思考，这里真的须要「编辑」吗？

编辑操做实际上一条便捷操做，除了保留原有数据外，至关于删除原有记录，再新增内容和原来同样，再修改内容，省去了前两步。多数列表存在编辑是没问题的，可是一些会产生不少跟该条记录强绑定关系的列表，最好编辑和删除两个功能都不要有。仍是以电商为例，遇到节日或者其余活动，通常会进行促销打折活动，后台「活动列表页」会新增一条活动信息，若是这个活动关联不少数据，那么就须要保证这条记录是不动的，一旦编辑或删除，原纪录不在了，牵一发而动全身，会引起太多麻烦。这时候就不要问「用户只是想把上次那个活动再改一下弄个新活动，还要新增多麻烦啊，编辑改一下多方便啊，这样不行吗？有个用户就强烈须要。」这种傻问题了。

3.5.2 排序

有些业务逻辑很是简单的内容，先后台的展现顺序是一致的，这时候就须要排序功能，先后台同步变更。

3.5.3 删除

删除操做是一个比较敏感的操做，若是不是特别必要，尽可能不要放删除功能。

3.5.4 搜索

是否须要搜索功能，是根据预期产生的数据行数决定了，若是在30条之内，则尽可能别上，30条以上酌情上。

4 总结

列表页知识点就讲到这里了，基本只要掌握了这些技巧，设计一些常规的列表页已是没有问题了，若是遇到业务逻辑更加复杂的状况，再根据状况断定，可是万变不离其宗，规则就是那么几条。这里再总结一下：

业务列：要克服「代码思惟」，放什么内容，不是看咱们有什么，而是用户须要什么。

默认排列顺序：先来的排后面，后来的排前面。

操做：宜少不宜多，有须要才往上放。
【原文连接】