后台产品常见分类：
C端产品的后台产品线，如淘宝商家版，美团商家版，对订单和用户进行管理，支持C端产品的业务进展；
平台级工具产品，如微信公众平台，对文章和读者的数据统计和管理；各大互联网公司的开放平台，如微博开放平台等；
企业级服务产品，虚拟主机系统（VMware），云主机管理系统（深信服、xensystem、腾讯云）以及各种云SaaS；
企业的业务处理平台，对内有考勤、报销等OA办公系统，对外有CRM客户管理系统，ERP资源及供应链管理系统。
我参与过的项目主要客户是公司内部（OA）、企事业单位以及政府机构的后台管理平台。像Ant或Element里面有全部的后台设计规范，设计和前端都可以去看里面的文档，我在这里只是总结了自己感觉有点细节的或者说容易忽视的地方。至于基本的设计规范大家可以参考文末推荐的设计组件库。
一、页面框架
左右栏布局包括顶部栏、左侧菜单栏、主体内容三大区域，其中顶部菜单栏、左侧菜单栏为固定结构，右侧主体内容根据分辨率进行动态缩放；上下栏布局包括顶部菜单栏和主体内容两大区域，其中顶部菜单栏为固定结构，主体内容进行动态缩放且需定义主体内容左右两边空白区域最小值；左右栏布局时，左侧菜单可收缩展开，收缩状态下固定宽度。
尺寸设定
一般在整体区域左上角放置产品LOGO及产品名称，大部分系统顶部栏高度48+8n，侧边栏宽度200+8n。我常用的是顶部栏高度56px，侧边栏宽度200px，侧边栏收缩状态宽度56px，右侧的侧浮窗宽度400px。
二、表格信息
表格主要分为五大区域：选择搜索区、操作区、表头、正文、底栏。选择搜索区放置筛选框和搜索框，为用户提供按需搜索，可以大大提高用户效率；操作区指各种对表格内容进行增删改查、批量处理、配置列的动作；表头展示列标题，一般具有排序功能；正文主要展示各种各样的数据，要注意行高、对齐、分割、信息层级等，要考虑是否提供行内操作；底栏显示分页、总数统计等。
表头要和表格内容有视觉上的区分，表格行高可采用36、40、48、60等。
表格内的信息通过对齐，会更加规范易理解，给用户视觉上的统一感，且视线流动顺畅，能够让人快速的捕捉到所要的内容。
文本信息左对齐，因为现代人的阅读方式习惯从左到右，符合正常的心智；
数据信息右对齐，更加方便数字大小的直观对比；
固定内容居中对齐，更好的信息呈现及表格空间的节省；
表头与信息内容对齐方式一致，一致性以达到简化，降低视觉噪音。
1.表格中经常会出现空数据或无数据的情况，留白处理会给用户造成一定的困惑和误解，明智的做法，是用“ - ”来填充显示。
2.呈现大型数据集时，水平滚动是不可避免的，通过横向滚动查看其它数据。将首列进行固定（若包含勾选操作，则一起固定），以便用户将数据与对象进行对应。若尾列包含列表操作，也将其进行固定，方便用户直接操作。
3.当需要进行批量操作时，不要忽视第一列的单选框和全选框。
4.抽屉编辑
三、反馈
弹框，弹框出现时，主题内容增加一层遮罩#000000，透明度50%，避免使用双层弹框，可同时采用有关闭图标的弹框和无关闭图标的弹框，引导用户户对内容进行正确操作。
全局提示，建议停留时间3-5s，在不希望在用户执行操作时中断用户前提下显示一条简短的成功消息。
警告提示，提醒用户系统中需要立即引起注意的错误信息，用不同颜色和样式展示需要关注的信息。
独占式，长流程步骤表单在最后告知用户成功结果。
通知提醒框，向用户告知重要的问题或失败状态，希望用户立马做出决策；反馈后台进程失败&告警结果。
侧滑框，又称抽屉，出现在右侧，固定宽度400px，高度覆盖在主题内容之上，点击侧滑框以外的区域则收起侧滑框。
四、案例
五、前端/设计资源
Ant Design：
https://ant.design/docs/spec/introduce-cn
Element：
https://element.eleme.cn/#/zh-CN/component/installation
iView：
https://www.iviewui.com/docs/introduce
飞冰：
https://ice.work/component/affix
Layui：
https://www.layui.com/doc/
G2：
https://g2.antv.vision/zh
Echarts：
https://www.echartsjs.com/zh/index.html
对于B端产品或后台管理系统，前期需要梳理好里面的逻辑和数据，这样才方便后期的设计。
确立设计规范：参考组件库，对基本的设计规范有个了解；其次跟前端沟通好，看选择用哪个组件库，便于设计与开发对接（注意组件的统一）。
实践出真知：经历过几个项目后，你就会形成自己的经验了，在以后的产品设计中，有些模版是可以重复套用的，可以大大提高效率。
便于产品迭代：后期产品更新迭代时，开发可以根据已有的规范进行调整；当团队协作时，统一的设计规范可以规范每一个设计师的设计，在视觉和体验上达成统一。
网友评论