查看原文
其他

她总结了最全的后台列表设计

涵小仙女 产品刘 2022-10-16

今天这篇文章是微信公众号:涵小仙女 向我投的稿,我很佩服她这种主动争取的人,喜欢的小伙伴可关注她的微信公众号,如果你也有文章想让我帮你发的,可以微信私聊我:yw5201a1。


在上一篇文章干货 | web端后台设计规范和表单控件大汇总中讲述了怎样设计添加页表单。添加进数据库的数据通过后台列表页展示出来,今天来讲讲如何设计后台列表页。


列表页通常由两部分组成:查询字段和表格列表


△以商品列表页为例


一、查询字段


查询字段需要注意以下几点:


1.表格的哪些字段应该作为查询字段?


不是所有的表格字段都要拿来作为查询字段。作为查询字段的通常使用频率较高,且根据该字段可以查询出列表唯一数据。


尤其是在一些创新项目中,这点体现特别明显。创新项目需要快速迭代,打样试错。在版本初期,查询字段都不会有太多。


比如,商品较少时,商品列表通常会根据商品名称来查询商品,而不会使用商品ID(商品较少时,大家对商品名称认知感更强,反而不会刻意去记商品ID)。这时候,商品名称应该作为查询字段而商品ID不会作为查询字段。又比如,商品的最新修改时间,大家通常也不会用这个表格字段来查询商品,所以没有必要作为查询字段。


2.查询字段的排列顺序?


查询字段较多时,应考虑字段的排列顺序,将使用频率较高的字段放置在前,尽量避免放置在中间位置


△以订单列表页的订单筛选为例


比如,订单ID是订单列表页的高频查询字段,自然放置在第一个位置比较合适,若放置中间位置或靠后位置,就不那么合理。


3.查询字段是精确查询还是模糊查询?


一般原则是文字查询为模糊查询,比如商品名称;数字查询为精确查询,比如手机号码。


4.查询字段过多,可将使用频率不高的先隐藏起来,作为高级查询。


当查询字段超过一定数量,我们可以将不是那么重要的的查询条件隐藏,通常有一个“更多”或“高级搜索”。



二、表格列表


表格承担着数据库数据展示,数据操作等作用。表面上看只需要将数据展示出来就行,但需要注意的细节也挺多。


1.默认排序?


排序并不总是以创建该条数据的最新时间倒叙排列,如订单和商品,通常是以创建最新时间倒叙排列。但在一些时效性较强的列表,比如通知公告,默认排序应该是最近修改时间倒叙排列,不再是以创建时间为准。


2.若表头字段较多,又不得已都要展示,可做自定义表头。


表头字段较多时,可做自定义表头。不同角色用户关注表头重点不同,让用户根据需要,自定义表头,包括哪些表头展示出来、表头的展示顺序。用户可以把自己不关心的列隐藏,把关心的列放到最左边,从而能够在一进入页面时就能看到自己最关心的内容。


3.列表宽度


列表宽度有个最基本的标准——表头不能换行。若有些字段较长,比如商品名称,表头宽度也应更长。若表格数据字数超过固定宽度,应考虑截断,有些可以尾部截断,比如【云南•玫瑰礼包(玫瑰花茶...】;有些则需要中间截断,比如【12345...@163.com】。


4.操作栏


操作栏通常有:查看、编辑、删除、查看日志等操作。如果操作多于三个,建议将剩下的操作折叠为“更多”,外面只保留2到3个常用操作。



查看点击进入详情页。


编辑点击进入编辑页,一定要考虑哪些字段可编辑,并不是所有的字段都可编辑。


删除一定要注意删除的数据是否有关联关系,若有关联关系,一定要先解除关联关系,才能再删除。是软删除还是硬删除。软删除只是页面上这条数据消失,但数据库中这条数据还在;硬删除是数据库中的数据也删除了。


有些操作按钮是根据列表某个字段的状态显示的,比如商品的上下线。


后台产品虽然重逻辑,但如果在逻辑严谨的情况下,让用户有更好的体验,那就是更好的产品了。我并不赞成只有在C端使用的是我们的用户,此时我们要注重用户体验,要做的好看。给内部员工用的后台系统就简单粗暴,不考虑其使用感受。毕竟如果是内部系统的话,那他们很大可能每天都要使用。


清晰的记得曾经使用一个系统,这个系统将“新增”按钮放置列表数据的最下方,而列表数据又有20多条,每次新增时都要滑动页面至最下方才能看到这个按钮,内心每次之不爽。


后台产品虽多,但套路大多相同,交互、UI更是可以复用。形成属于自己的一套规范,在以后的产品设计中,将大大提高工作效率。

欢迎小伙伴加我的私人微信yw5201a1交流。

更多干货可关注微信公众号:chanpinliu880

想学习更多关于产品、职场、心理、认知等干货,可长按右边二维码,关注我们。

帮你成长

我之前也创立过产品经理学习交流群,那个时候由于人数少,大家讨论也蛮积极的,但是微信群讨论的一大弊端就是无法将谈论的知识提炼出来,干货内容渐渐被口水话淹没,所以我建立了一个知识星球(原小密圈),在这里我会分享自己的思考感悟,你有问题可以随时像我发起提问,同时别人提的问题你也能看到,更重要的是你不论什么时候看这个回答它都在!

同时大大老师以后所有的live,小密圈的同学都可以免费学习。

为了更好的服务知识星球的小伙伴,大大老师将会在知识星球发表一些干货文章和音频供大家学习,当然这些内容公众号是没有的。

知识星球规则:

1、费用:为了保证社群的质量和活跃度,需要先付款99元,签到后会返还

2、返还费用:连续签到3天返还30元,连续签到5天返还50元,连续签到7天返还70元。

下图是返还凭证:

2、签到形式:可以是你的产品感悟,也可以是你学习中遇到的问题,也可以是你回答别人问题。(把你的感悟记录下来,把你遇到的问题提出来,帮助解决别人遇到的问题,这个过程就是成长,切记不要潜水,好歹你也是付费进来的)。

3、奖励:每周抽取最活跃的用户,(提出的问题+发表的产品感悟+回答别人问题)总数最多,即有可能获得现金红包、PRD文档、面试简历模板、原型文件等不同奖励形式。

奖励凭证:

邀请5个小伙伴加入,则本人加入的费用免除,并同时获赠68元现金奖励,当让为了保证群质量,邀请的小伙伴需要付费加入。

4、广告:社群内禁止发广告,否则即使付费,也要被T出去,如果想发广告,加入上课群,并红包走起,想加入上课群,加微信yw5201a1,拉你入群。

之前付费进入产品经理学习群的小伙伴,可以加微信(yw5201a1),免费拉你入群。

长按下方二维码加入我们吧!

送福利:把此文章转发到朋友圈保留24小时即可找我领取一份想要行业的原型和PRD文档。

往期精彩文章

如何规划一个从0到1的产品PRD,做出一个让主逻辑跑通的MVP?

产品经理面试一对一咨询指导

电商技术解密之库存系统

浅析支付系统的整体架构

一款问答APP的产品需求文档(PRD)


点击“阅读原文”

即可进行报名。

您可能也对以下帖子感兴趣

文章有问题?点此查看未经处理的缓存