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

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

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

1 什么是「列表页」

1.1 「列表页」的概念

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

1.2 「列表页」的类型

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

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

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

主动型列表和被动型列表虽然都是列表页,但是由于其内容的来源不同,所以在设定其产品逻辑方面有很大不同。

2 列表页设计原则

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

第一条:**根据场景提供展示的业务列。**

第二条:**产品新数据行能够便捷地看到。**

第三条:**操作宜少不宜多。**

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

3 列表页设计技巧

3.1 列表页构成元素

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

第一行为字段名,不出意外一般是:序号、业务列、操作。序号没什么好说的,就是一个1、2、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 总结

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

业务列:要克服「代码思维」,放什么内容,不是看我们有什么,而是用户需要什么。

默认排列顺序:先来的排后面,后来的排前面。

操作:宜少不宜多,有需要才往上放。

转载自十二赞官网【原文链接】

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 151,829评论 1 331
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 64,603评论 1 273
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 101,846评论 0 226
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 42,600评论 0 191
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 50,780评论 3 272
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 39,695评论 1 192
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,136评论 2 293
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 29,862评论 0 182
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 33,453评论 0 229
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 29,942评论 2 233
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 31,347评论 1 242
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 27,790评论 2 236
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 32,293评论 3 221
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 25,839评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,448评论 0 181
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 34,564评论 2 249
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 34,623评论 2 249

推荐阅读更多精彩内容