一 点睛

本篇主要介绍下面几个内容。

• 信息设计范畴概述
• 列表页的字段设计
• 列表页的信息布局
• 列表页的扩展功能

商品列表页是后台的重要页面，本篇我们都以商品列表页为例进行说明。

二 信息设计范畴概述

1 信息设计的范畴

后台页面常常包括列表页、表单页、详情页，以及组织这些页面的导航。

表单页是填写内容的页面，典型的表单页是新建商品页。

详情页是展示内容的页面，典型的详情页是商品详情页。

后台页面的一种常见的布局如下：上面和左侧是导航，右侧是信息列表，表单页和详情页。这三种页面相辅相成，都是为了完成某项业务而存在。

还有一类页面，是为了做商业决策而存在的，这类页面被称为商业智能仪表盘，也被称为仪表盘或可视化数据页，这类页面会展示图形化数据，从而为企业的决策提供依据。

2 列表页的类型

a 内容类

典型的是电商平台的商品列表页。运营人员通过查看该列表页，决定商品的上下架、制定营销策略和编写商品文案等。后台编辑的内容都是要给用户看的。另外，内容页还包括优惠活动、优惠券、专题信息等列表信息。

b 审核类

典型的是商品审核、优惠券审核、退货审核等。公司内部为了方便管理，就要进行一系列的审核。这些审核措施既可以对内容类进行审核，也可以对服务类（如订单退货）进行审核。审核是业务管控的手段。

c 服务类

典型的是电商平台的订单列表页。一个订单就是一项业务，是由用户发起的，并由平台执行服务，如发货、送货等。

概括地说，一个电商平台的内容就是前台展示的商品、活动等，是用户来网站的理由；审核就是内部管控；订单就是电商平台执行的业务，是给用户提供的服务。大多数交易类网站均可拆解为这三类内容。

三 列表页的字段设计

一般列表区域有三个：筛选区域、查看区域、操作区域

1 筛选区域

可分为两部分

• Tab导航
• 筛选项

这两部分的设计应该遵循两个原则

• Tab 导航必须有，并且可分层
• 筛选项看业务，前期可少加

a Tab 导航必须有，并且可分层

Tab 导航的好处

• 区分不同业务：Tab 项将不同的业务类型分开，看起来很清晰。
• 提升工作效率：和下拉列表比，Tab 操作步骤更少，效率更高。
• 良好的扩展性：Tab 导航可加小红点或数字提升，扩展性好。

Tab 导航的设计需要注意两点

1） 在不同的 Tab 导航下，其内容也是不一样的。

2）Tab 导航可分层。例如，在“线上商品”导航下，还有“在售中、已售罄、已下架”三个导航、在这三种状态下，也有不同的工作任务。

b 筛选项看业务，前期可少加

所有的筛选项都是基于业务目标而存在的，而不是随意加入的。

2 查看区域

查看区域分为列表区域、排序功能和分页区域。

a 列表区域

列表区域可分三部分：识别、决策和操作

识别：先要确定内容是什么，以及内容间的区别。对商品来说，内容间的区别是 ID、图片和商品。其他常见字段还有分类、品牌等。

决策：用户看了商品信息后就要做决策。常见的决策信息有：商品价格、销量和库存。其他常见的字段还有上架时间、最近销量。另外，如果筛选项中有某个字段，一般也要在类别中展现。

操作：操作部分字段包括状态字段和操作字段。状态字段一般应加入，这样就可以让运营人员明白当前商品的状态，便于进一步操作。比如，当前商品状态是上架状态，运营人员一看就知道进行下架操作。

b 排序功能

只要明确有哪些字段需要排序，并且指明在默认情况下按哪个字段排序即可。

c 分页区域

后台分页常有现成的组件支持，产品经理直接拿来就可以了。

3 操作区域

运营人员在看了销量、库存等信息后，就要有所行动，如进行下架、重新编辑等操作。

四 列表页的信息布局

设计时，需要注意两点

1 一列一字段，便于阅读

2 承载更多信息的方法

如果列表页要展现的信息较多，则可支持列表区左右滑动，并固定商品图片和标题等内容，或者支持左侧导航栏折叠等，这些就可以容纳更多的列表信息。

五 列表页的扩展功能

这两个扩展功能是信息的通知和列表页信息的导出。

1 信息通知

发送消息的方式有站内消息、发送短信、发送邮件

a 站内消息

通过发送站内消息，来通知用户商品的变化，但前提是用户必须登录。如果用户始终在电脑前，这种通知是没问题的。站内消息的表现形式众多，如小红点、未读数、消息列表等。

b 发送短信

如果用户不在电脑前，那么商家通过发送短信也能通知用户。这种方式会产生一定的费用。

c 发送邮件

如果该信息并不重要，并且用户用系统不频繁，那么发送邮件也是可以的。用户只需登录邮箱，既看了工作邮件，也看了消息通知。

2 列表页信息的导出

列表页信息可以支持导出，即通过单击导出按钮，将当前列表的内容生成 CSV 文件或 Excel 文件，并下载到本地电脑上。