背景系统列表设计

假设Wang老师想审查中国学科的课程,并且在审查期间,他将注意课程名称,年份,学期,课程类型,版本和难度是否正确;如果是正确的,则将执行上市操作。

如果数据分散并且没有批处理操作功能,请想象老师Wang会如何做?

在中国学科中找到课程;找到需要审查的信息;执行清单操作;找到下一个数据并继续上述操作;如果需要1分钟的课程,则需要30分钟才能操作30堂课。

如果您是Wang老师,您可能会发疯。如何通过产品方法提高王老师的效率?

王老师的问题是它缺乏批处理清单的功能,批处理列表的前提是根据某些规则以列表形式以有序的方式显示所有数据。

因此,列表的使用可以在一定程度上提高工作效率。

在背景系统中,显示数据的最常见方法是列表。那么如何设计背景系统列表?

列表的通常三个主要部分:数据查询,批处理操作和数据显示。

一、数据查询

在后端系统中,用户将希望有效地找到某些数据或某种类型的数据。例如,当王老师回顾课程时,他需要有效地找到中国学科的课程。列表中的数据查询函数解决了针对性搜索某种类型数据的效率低下的问题。

列表中的数据查询通常是通过搜索框,过滤器选项等实现的。

1。搜索框

搜索框解决了用户针对某个数据的需求。例如,如果王老师想在2020年的秋季三年级中找到中国顶级的教师A,则最快的方法是直接搜索课程并出现目标结果。

搜索框通常进入特定字段,单击搜索或输入,然后直接找到特定/类数据。

搜索有两个规则:准确的搜索和模糊搜索——准确的搜索是根据输入条件准确搜索某些完美匹配的数据;模糊搜索是指查询所有包含输入条件的数据。

例如,在电子商务后端系统中的搜索框中,输入产品编号并找到某个产品;在教师后端系统中,输入学生的名字,然后找到某个学生。

背景系统列表设计

想象一下,如果没有定向搜索功能,则只能通过搜索搜索每个功能。如果列表中有50个数据,并且您可以查看一块数据,则可能需要30秒才能找到某个数据。虽然只需3秒即可搜索定向搜索。

(示例来自微信公共平台)

2. 筛选项

滤波器选项是通过系统现有搜索条件符合条件的某种类型的结果的功能。例如,淘宝主页上的导航栏是一一是过滤器选项。

过滤选项解决了用户找到具有共同特征的某种类型数据的需求。例如,如果王老师想找到三年级中国星期六的课程9:0011:00,那么您可以通过过滤选项选择上述条件;单击搜索以直接搜索所有课程,以获取三年级中国星期六9:0011:00。

过滤器选项分为单层过滤,级联过滤,日期/时间选择器等。

单层过滤:也就是说,只有一层过滤选项,例如过滤主体。过滤选项包括:中文,数学和英语,所有这些都是同一级别的过滤选项;级联过滤:在有许多过滤级别(例如主题中的过滤知识点)时使用,然后有两层过滤选项:第一个级别是主题,第二级是与主体相对应的知识点;日期/时间选择器:也就是说,过滤一个日期/时间,以解决用户在日期/时间期间查找数据的需求;下图是三种过滤类型的示例:

(例如:蚂蚁设计)

在理解了三种类型的过滤表单之后,我们还需要知道每个过滤选项的过滤方法将分为:单个选择和多项选择。

单项选择:给定几个固定过滤条件,用户一次只能选择一个过滤条件;在单项选择条件下,过滤器结果符合过滤器条件,并且可以过滤掉。

多项选择:用户可以选择多个过滤条件。用户选择多个过滤器选项之后的过滤逻辑还需要根据实际情况设计。例如,在用户选择多个过滤器选项后,是否包含所选选项的过滤器结果,或者必须将所有选定的选项击中,然后才能被过滤出来,并提前设计和思考。

通常,有针对性的搜索和过滤选项用于满足用户的需求,以快速而有针对性地查询某些/某些类型的数据。

二、批量操作

系统中查询数据后用户的目的之一是操作数据。例如,在王老师找到某种类型的当然之后,他不得不将课程放在货架上。在类似数据上执行相同的操作是B端用户的工作方案之一。然后,在这种情况下,批处理操作的功能可以提高用户的工作效率。

批处理操作的功能通常包括两个部分:多重选择功能和操作功能。

1. 多选

背景系统列表设计

用户滤除了通过查询功能符合某些规则的目标数据后,如果您想在这些数据上操作,则首先需要选择这些数据,也就是说,告诉程序——我想对这些数据执行相应的操作。

因此,许多选择功能可以提高用户进行选择的效率,您可以单击/多次单击选择一批数据。

如下图所示,选择列可以选择所有数据,或者仅选择几个数据。

(例如:ant Design vue)

2. 操作功能

如下图所示,选择数据后,您可以单击标签和黑名单按钮以对数据执行相应的操作。

(例如:微信公共平台)

三、数据展示

在后端系统列表中,数据显示是整个列表页面的主要内容,用于显示用户所需的数据信息。

例如,在王老师获得了通过数据查询满足要求的中国学科课程之后,必须审查每个课程以验证每个课程的信息是否准确;因此,基于列表的数据显示可以提高用户查看数据的效率。

列表也经常在我们的实际生活中使用,例如高中毕业后的同学,高中同学的成绩单等。这些是列表形式的数据显示。

该列表包含:表标头,数据,Pager等,如下图所示,这是列表的示例图:

(例如:蚂蚁设计)

1. 表头

标题通常包含信息的三个部分:标题,注释描述和排序功能。

标题:标题用于说明该数据列是什么以及它可以提供的信息。

背景系统列表设计

标题需要满足条件,也就是说,清楚地说明了这一数据列是什么以及最简单的语言中可以使用的内容;标题中的单词数是基于“无单词可以删除”的原则。

在下图的第三列中,学生们正在为下一季度的长期课程购买课程。然后,“下一季度的长期课程”是最简单,不可或缺的表达方式。

注意:注释是此列中标题或数据的说明。

评论可以在标题的左侧和右侧表示,通常带有感叹号或问号。鼠标浮动,浮动窗口似乎在数据列中显示了字段的说明。

写作解释的原则是“什么是,可以做什么”,它也遵循简洁标题的原则。

目的是:看到它之后,用户可以清楚地知道它是什么以及用户可以使用它的方法;例如,下个赛季的长期课程的解释是“学生为下一个季度注册的长期课程的主题;实时更新;可用于转换交流”。

但是,并非所有数据都需要评论,那么我需要评论什么情况?

如果它是基本属性的数据,每个人都对此有一致的理解,并且不会有任何问题或异议,那么就不需要评论。例如:名称,序列号,性别,家庭地址等;如果数据是在看到之后引起疑问的字段,或者是通过一些复杂的计算获得的,则最好在标题上添加注释以降低用户学习成本。

排序函数:列表中的数据将根据固定的默认排序安排,但是当用户想要按其他方式排序时,如果数据是根据大小安排的,则需要通过排序函数进行操作;而且我们需要提前设置排序逻辑,例如单击排序顺序,从小到大,如果数据相同,则将从小到大;再次点击将从大到小;再次单击将返回原始安排。

2. 数据

列表中的数据分为行和列。每行数据主要基于数据的第一列,每个数据列都是数据分类。标题是数据分类的名称,该名称直接告诉用户此数据列是什么;例如:高中成绩单,一排是同学的所有等级,而一列是一个学科的成绩。

列表中的所有数据均来自详细信息页面,那么列表中应显示哪些数据?列表中应该排列哪些优先级?这些还要求我们根据使用情况和数据的重要性提前设计。

或者一开始提到的“老师王说课程”的场景。王老师在列表中注意什么数据?

课程主要信息:课程ID和课程名称,这两个信息用于定位;基础课程属性:主要老师,班级,学年学期等;课程状态:是否在货架上。通过分析,我们基本上可以确定需要显示哪些数据以及数据的优先级。

列表中的数据还将进行操作,例如删除,编辑等;因此,在列表中,通常最后一列是一个操作列,可以将其设计用于在操作列中为此数据添加各种操作功能。

用户评论


箜篌引

真的很有用!之前弄后台的时候总是卡在界面设计上,这个列表设计思路非常参考!

    有8位网友表示赞同!


冷眼旁观i

这篇文章太棒了!讲得通俗易懂,图表也很清晰,让我对后台系统的结构有了更深入的理解。

    有5位网友表示赞同!


别在我面前犯贱

我觉得对于初学者来说这篇博客写的很有帮助,但对于一些经验丰富的开发者来说可能已经不算新鲜的了.

    有9位网友表示赞同!


沐晴つ

后台系统列表设计确实是一个很关键的任务,能有效提升用户体验。但是我有些好奇不同的后台系统会使用哪些不同的列表样式呢?

    有10位网友表示赞同!


涐们的幸福像流星丶

我本身不太熟悉程序设计,看了这篇文章后对后台系统的整体框架有了概念,感觉还是很有意思的。

    有16位网友表示赞同!


喜欢梅西

这个设计的重点是突出操作按钮的可视化,我觉得这一点非常重要!尤其是对于小白用户来说,操作简便能够大大提升他们的使用体验。

    有14位网友表示赞同!


玩味

虽然设计方案很不错,但我个人更倾向于侧滑的形式,觉得这样更加简洁美观,更容易满足用户的操作需求。

    有13位网友表示赞同!


孤败

后台系统列表设计确实是一个容易被人忽视的方面,文章中的分析非常到位,尤其提到了不同类型内容需要对应不同的样式,这一点我非常认同!

    有12位网友表示赞同!


娇眉恨

我觉得这篇文章有些理论性较强,实际案例和应用场景的讲解稍微不足,希望能以后补充一些更加具体的例子。

    有6位网友表示赞同!


枫无痕

这个设计思路确实可以提高用户的操作效率,尤其是对于那些经常需要批量处理信息的用户来说,会带来非常大的帮助!

    有18位网友表示赞同!


话扎心

文章提到很多细节,让我对后台系统开发有了更深入的理解。不过,我想知道如何选择合适的列表设计工具呢?有什么推荐的吗?

    有9位网友表示赞同!


十言i

对于复杂的功能模块,如何将列表设计更加清晰明了,保持用户操作的便捷性,我觉得这仍然是一个值得探讨的问题!

    有5位网友表示赞同!


清羽墨安

我喜欢这篇文章中对不同列表样式的对比分析,能够帮助我更好地理解各种设计方法的特点和适用场景,非常实用!

    有20位网友表示赞同!


仅有的余温

后台系统列表设计虽然很重要,但我更关注于数据的安全性和稳定性。希望文章以后也能多谈谈这些方面的知识点。

    有15位网友表示赞同!


青袂婉约

在移动端的应用下,如何调整后台系统的列表设计,以满足用户的触控操作需求,这是一个需要我们认真思考的问题!

    有9位网友表示赞同!


经典的对白

我觉得这段话说的对极了!简洁明了的系统界面对于用户来说非常重要,能有效提高他们的工作效率。文章很值得一读!

    有11位网友表示赞同!


颓废人士

这篇文章太贴心了!很多时候我在设计后台系统的时候真的很困惑,不知道如何合理的安排列表结构,这篇博客真是给了我很大的帮助,让我对后台系统的整体规划有了新的思路。

    有7位网友表示赞同!


回到你身边

我目前正在学习网页前端开发,对后台系统的了解还比较浅。这篇博客很适合我的学习需求,介绍得通俗易懂,而且有图示辅助,更容易理解。希望以后能多更新一些相关的文章!

    有5位网友表示赞同!

上一篇
下一篇

为您推荐

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

联系我们

联系我们

0898-88881688

在线咨询: QQ交谈

邮箱: email@zhutibaba.com

工作时间:周一至周五,9:00-17:30,节假日休息
关注微信
微信扫一扫关注我们

微信扫一扫关注我们

手机访问
手机扫一扫打开网站

手机扫一扫打开网站

返回顶部