后台产品设计技巧

壹

后台产品的变化相对较少，是有迹可循的，掌握一定的设计技巧有助于我们完善细节规范，提高工作效率。在此，总结了后台产品设计四大要点，希望能给后台设计经验不太丰富的同学提供一些参考。

• 页面布局

后台产品更侧重于功能与逻辑，在页面布局上都大同小异。我经常用到的两种布局：（1）左右结构，分为Logo、登录账户、侧面导航、内容区四部分（2）上下结构，分为Logo、顶部导航、登录账户、内容区四部分。

图1 左右结构 图2 上下结构

Logo：可放置后台系统的名称或者图标，可以作为回到系统主页的快速入口。

登录账户：可放置当前登录人账户，通过此入口可进入个人中心详情页面。一般会有账户的退出和切换。在登录账户前面，可以添加全局性功能的入口，如：搜索、消息中心等。

导航：（1）侧面导航，多用于后台管理系统或内容太过庞杂的web端网站，按照系统功能点划分一级导航，二级导航等，能容纳更多信息且更符合阅读习惯，有更好的拓展性。（2）顶部导航，多用来划分网站的主要板块，常见于产品层级较少的网站或内容较规则的资讯类网站，如腾讯新闻、搜狐新闻等。

内容区：正文内容区域，展示我们信息和操作的主要区域。

• 首页设计

我所接触的后台产品绝大多数都是有首页的，首页设计之前，我们需要考虑首页内容是针对所有用户还是针对单一用户。

所有用户：展示产品相关的各种统计图、通知公告、集成的功能入口等。

单一用户：展示待办事项等只与当前登录用户相关的业务。

也遇到过首页中将两者结合起来的，既放通知公告、热点问题等针对所有用户的内容，也放待办事项等针对单一用户的内容。

• 列表页设计

表格列表

1、查询条件：

查询条件有哪些；哪些必填(红色*标注，在文字左侧)；排序；是否支持模糊查询；下拉框不存在默认值时，默认为“请选择”；输入框不存在默认值时，默认为“请输入”；查询条件右对齐，输入框左对齐。

2、查询结果：

（1）表头：有哪些字段、对每个字段的理解、字段的数据值是什么样子的、排序、有单位的字段带单位，如：金额（元）、可添加浅色的背景色、表头左侧添加一个【序号】字段

（2）列表的初始状态：

不显示，选择条件点击查询以后才显示

显示表头等查询结果框架，选择条件点击查询以后才显示数据

进来就按照默认条件展示数据

（3）数据量有多少：分页展示还是添加竖向滚动条展示；添加竖向滚动条时，是否需要固定表头或者只在显示数据的表格中添加竖向滚动条

（4）表格列数较多情况的几种处理方式：添加横向滚动条；允许用户对列自定；固定某些列，比如身份证号、姓名

（5）列宽：表头不能换行，列宽至少大于表头

列内容固定时，如手机号等，列宽应大于该固定宽度

列内容不固定时，应考虑大多数情况，保证大多数数据完整显示

数据长度大于列宽时，数据内容进行截断，末尾加......鼠标移入时，在上方显示 浮层显示完整内容，当数据末尾具有有价值内容时可采用中间截断，如邮箱 12345......@163.com；或允许用户对列宽进行调整

（6）排序：常用日期字段的升序、降序来排序；多列具有排序功能时，确定好优先级

（7）对齐方式：我公司使用文本居中对齐，数值金额右对齐的方式

（8）详情入口：一是以具有区别性的字段为链接（视觉上有所不同，如字体调为蓝色）；二是在表格内单独设置【查看】入口，字段较多有横向滚动条时建议将入口放在表格左侧，字段较少时可放在表格右侧。前者节省空间，后者存在感强，需要根据具体场景来确定方案

（9）勾选：

全选可以进行批量选中，在多页的情况下，通常有两种需求，其一是选中当前 页，其二是选中全部。

跨页选择，在第一页勾选几项后，翻页再去勾选其他项时，有两种情况：其一 是翻页后不保留选中状态；其二是保留选中状态，但往往无法快速获 知已选项的 情况，所以，在切换到其他页面时，需要再表格顶部显示已选项情况，允许删除 其中某一项和清空所有。

（10）按钮：在表格顶部放置按钮，比如新增、编辑、删除等放在左侧还是右侧根据情况调整（我司右侧居多），有些按钮时配合勾选进行操作的，当没有勾选项时，禁用该按钮或者给出弹框提示

（11）导出：给开发一个Excel模板，表名+筛选条件+时间+导出数据，通常使用表名来确定文件名称，另外需注意美观性

（12）未查询到结果时，给予未查询到的相关提示，如“暂无查询结果”

卡片列表

卡片列表让页面更美观丰富，视觉效果更好，目前工作中使用并不多，暂时不详细展开描述

• 添加页设计

1、方式：打开一个新的页面或弹框的页面。

2、内容分类：信息字段较多的时候，最好能够结合字段信息做一个分类，比如案件信息，企业信息，办理信息、附件信息

3、字段内容规范：

是否必填（必填项以红色号标识出来，红色在文字左侧；当必填项没有填写时，可在光标移走时，给出检验提示，如字段文本框下标红或高亮警示）

是否有字符限制（字符格式、字符长度），如：手机号、身份证号等。不符合格式的不允许写入，超过长度的不再写入

是否有默认值，如当前日期、当前办理人等，可直接写入且不允许修改

是否有单选，如性别，不需要文本框输入，单选即可

4、提示：保存、提交、删除等按钮，需要进行二次确认；操作成功、操作失败需给出提示。

5、键盘支持：支持TAB键移切换动光标焦点，移动遵循从左上至右下的原则

结语

后台设计还有许多技巧，我会在后续的文章继续分享一二

如果对你有帮助的话，请记得点赞鼓励一下我哦！更多文章更新在微信公众号【产品小姐姐】，欢迎关注免费领取我购买或收集的产品学习视频、规范模板、元件库等资料，期待一起交流进步。快来找我玩吧~

微信扫描关注