如何设计标准的后台页面框架图？

在产品过程中，在处理完结构、流程和角色权限后，我们将开始具体的界面设计。本文作者分享了后台页面的设计思路，供大家参考。

每一页的实际设计都是在产品结构、流程设计和角色权限设计完成后开始的。

一种标准的后台页面框架应主要分为：搜索框、功能栏、目录区(包括操作列)、总结栏(分为数据统计区和分页区)。

一、导航栏

位置：页面顶部

顾客告诉用户现在的“哪里”，显示方式如下：一级菜单名>二级菜单名>三级菜单名>

如果做得更好，可以在页面名称上添加链接，点击跳转到相应的菜单页面。

二、搜索框

位置：导航栏下面

没有什么好说的，筛选数据使用，分为筛选条件和按钮。

筛选条件：通常必须包括姓名、日期、编号。 / 编码 /ID(唯一标志)，其余的筛选条件取决于客户的需求。如果筛选条件很多，超过 3 好吧，还需要添加和收集按钮来优化页面空间。

按钮：查询一定要有，重置看选择的数量，如果选择的数量多，再加一个重置按钮。

三、功能栏

位置：在搜索框和目录区之间。

其中，功能按钮是针对所有数据、多个数据或新数据的查询。

例如：

导出：导出是查询到的所有数据。

批量删除：在列表中查看数据后，点击将查看的数据全部删除。

创建新任务：创建新的数据。

多说一句，任何查询数据页面，都应该有导出功能，业务方肯定会要求所有详细数据清单。

四、目录区

位置：在功能栏下面

列出数据字段，必须使用的字段如下 5 其它字段看客户需要增加。

一般来说，字段的顺序从左到右是： / 编码 /ID、名称、状态、类型、时间等字段按客户查看频率排列，用得越频繁越靠左。

注意事项

目录中的字段越多越好。最好查询数据库中单表的数据，因为如果一个目录查询了多个数据库表，页面会加载速度很慢。

目录字段应只包含数值类型的字段，如：照片、视频等，不适合放在列表中，应放在操作列中查看。

表格中，数据值类型为左边的汉字，右边的数字和时间(参考) Excel）

统一小数点位数，一般保留 2 第三位小数，四舍五入。

另外，一些后台目录会把最左边的 1-2 列固定，因为数据字段很多，防止客户在查看后面的值时忘记前面的数字。

操作列

位置：列表的最后一个列表

在这里，所有的功能按钮都与一个数据相对应。按钮类型分为以下几类。 5 种

五、汇总栏

位置：目录下面

总结栏可分为数据统计区和分页区。

数据统计区

总结数据必须在相应字段下方，可以总结的字段一般是数量和额度，比如平均值和率值不能总结。当然，如果客户需要，可以按照其他公式计算总结。

分页区

目录用于更换页面。通常包括目录数据的总数，每个页面的数量，第几页，共几页，上一页，下一页。

第六，页面框架和角色权限

为什么后台页面框架的布局如此呢？

首先，该页面框架非常清晰地分配了功能和信息规划，其次，这种框架可以完美地适应角色权限。

当设计角色权限时，我们可以用一个表格列出系统中所有角色对应的菜单。

然后，在角色权限功能中 - 在配备新角色时，界面的按键权限可以通过功能、操作两个部分进行检查。

最终，用户登录后台页面，看到的是与其权限相对应的按钮，整齐划一。

本文由 @吴德馨 在没有作者许可的情况下，原发布于每个人都是产品经理，禁止转载。

题图来自 Unsplash，基于 CC0 协议

本文仅代表作者观点，版权归原创者所有，如需转载请在文中注明来源及作者名字。

免责声明：本文系转载编辑文章，仅作分享之用。如分享内容、图片侵犯到您的版权或非授权发布，请及时与我们联系进行审核处理或删除，您可以发送材料至邮箱：service@tojoy.com