再谈一个管理后台列表功能应有的素质

大家能看到的这个号第1篇文章《无心朝政,列表功能分析下》就是讲列表功能。虽然当时写的时候特别认真,但基本是围绕“列表功能”这个广泛的词来阐述的。

 ​最近在做一个体育赛事赛程的后台管理系统 Match-Schedule,对管理后台列表有更多的体会。所以想更通俗更细致地阐述一下,我心中一个后台管理系统的列表应该具有哪些功能。 

细节太多,先来一张基础列表页面的截图,然后再来列个功能清单。 

图一(这里先标记一下方便说明):

01.png

图一用框框kuang起来的都是这个后台管理系统列表页面的组成部分,会覆盖到每一个类的列表页面。当然,远远还不止这些细节,会在后面截图也框出来说明下。 

从上到下,自左至右: 

URL 可读易懂 

被激活的导航栏标识 被激活的位置应该有标识或高亮,方便用户一眼识别自己点了哪 

整个列表的名称 html的h1标签,焦点说明 

当前列表数据(MetaData)元数据 当前列表共有条目数,当前页面显示了从第几条到几条 

页面面包屑导航 当前列表出于系统的哪个层级的位置 

配置当前表格的按钮 (后面单独说明) 

列表页面头部功能按钮 曾有很长一段时间我纠结这类按钮应该放在顶部还是底部,最终选择了在顶部。好处是不管你页面条目数量多或少,你都能在选中后直接在顶部执行,无需在条目数过多的情况下还要拉到底再操作。douying:“非常方便和好用,我就一直在用啊。” 

搜索框 刚需,基本每个数据表格页面都需要的,常常出没于表格功能按钮的顶部左侧或者右侧,能有`placeholder`说明一下搜索啥就更好了 

表头checkbox 用于用户过滤或搜索后直接全选中或全不选中当前页面的条目 

表头排序 table的th,字段是否可排序,当前排序的方式,如何取消排序 

表格内容a链接title 内容链接要带titile说明,方便用户鼠标停悬在上面的时候知道点击后会发生什么(示例:AG超玩会)每页显示多少条目的按钮(这张图不说明,下面在特别说明) 

列表分页 刚需,数据条目过多的时候,用户不可能分屏来查看对吧,而且程序一次性取出大量数据服务端查询会变慢,前端渲染速度会大幅下降(渲染过程中有用户浏览器停止响应的风险),建议每页显示大小在10-30。

图一的说明就这些,个人觉得每个节点都需要仔细考究的。比如字体颜色深浅,页面整体的整洁性,链接颜色,提示等等...往下说图二。 

图二: 

02.png

选中列表剩余的数据 当前只显示了11条数据,一共47条,还有36条数据在服务器没取出来,但我需要一并选中选中条目后相关操作按钮激活 对比`图一`和`图二`。这里的按钮一个是禁点击一个是可以点击的 

过滤的分类 这里不算是通用功能,但既然说到了就提一下,比如用户点击了按钮,那么按钮就要高亮或激活的状态,都是为了方便用户识别 

被选中的表格数据 数据条目要高亮,这里截图的时候没有取消选中一些条目来做对比,阅读的朋友可以对比`图一`这里选中的条目数据是浅绿色走一波的 

每页显示条目数 这个曾收到相关用户的疑问。这是根据一定数据宽度动态变化的,很多后台系统是固定的,比如10,20,50,100,200这样递增。这里我是按照按钮个数计算的,根据数据一共条目计算,分摊到5个阶梯的按钮上,每页最多显示200条的限制策略

图二就这些,都是一下用户操作后页面显示的相关变化,以及提示,还有显示条目数策略等,下面图三会接着(图二-1)简单做一下说明。 

图三: 

03.png

当用户选中了剩余的条目,其实前端就选了这个过滤条件下的所有数据库条目了,前端给个post表单一个比如`Select_ALL="true"`的name值,这样,当操作post到后端的时候判断这个标识,以减少再次查库的过程。 

图四: 

04.png

列表功能刚需的搜索功能,这里我高亮了我的搜索结果,同时搜索框填充搜索值。锁定用户的搜索值,只有访问的是这个URL,那么这里就都会以这个值进行填充。

搜索这边我是全文模糊匹配的,只有列表某个字段匹配到关键词就会当结果之一处理。当然,这里能够做到可选操作定位到搜索某列值就更完美了。 

 总结一下,综合上面的提到的可能还不够详尽的就已经有18个细节了,希望对有需要朋友有所帮助。 

上一篇Previous

Django 让用户自动登录

下一篇Next

本博启用灰色调 2020年4月4日举行全国性哀悼活动

暂无评论添加评论