如何制定统一的后台系统设计规范

前言说明：

本篇文章是我在制定规范过程中的一些思考与总结，主要是设计时的总体思路与需要制定规范的方方面面。文章以自己项目的内容作为示例，由于系统只面向内部开放涉及保密，所以对一些数据和信息进行了打乱，但不会影响内容理解。如果哪里有问题，欢迎指正。

项目描述：

为配合公司业务发展及提高工作效率，后台包括财务系统、仓库运输系统、权限系统、业务员管理系统等几个系统，需要统一整合，并确定统一页面风格及页面规范。

负责范畴：

1，负责整体页面风格，并确定统一框架结构

2，为几个系统设计logo，并统一入口

3，设计详细页面规范，统一间距、icon、颜色、按钮、表单表格及交互规范。

Part 1：设计前的思考

一，制定规范的原因

· 设计 — 多个设计师同步设计，避免风格不统一

· 前端 — 搭建全局共用控件，辅助前端开发

· 交互 — 梳理产品框架，提高逻辑和页面的统一性

· 产品 — 后续增改和迭代有据可依

二，制定前的准备

1，了解后台业务，梳理业务流程

不同的后台有不同的业务内容，比如电商会有采购系统，仓库运输系统，业务员管理系统，权限系统等等，且专业词汇较多。在设计之前，要先找产品经理了解一下后台的业务内容，梳理一下业务流程，把系统框架和模块内容整理出来（如下图财务系统）。如果时间较赶，也可以直接过一遍页面，在脑子里快速梳理一下，做到心中有数。

2，与前端沟通，了解前端的开发习惯和应用组件

设计时不要自嗨，先根据产品所讲和自己理解，整理好准备修改的内容。与前端沟通时，可以加上一些新的想法，再确定页面的设计重点或者有无必要。很多情况下，统计分析一类的图表，已经有很多现成的模板，除非有一定要这样做的理由，否则没必要在这些上耗费太多时间。

3，主页面与基础模块设计完成后再制定

没实际设计前，很多想法会欠考虑，要先把系统的主页面和基础模块设计完成后再制定。

4，规范可修改

规范只是参考，为开发和设计提供便利而非禁锢，要根据页面具体问题具体分析。

三，全局思考，清楚要制定哪些规范

规范制定前，要有清晰的思路，知道要制定哪些规范。规范不只是简单的颜色，字体，表单表格等，一个完整的后台，有菜单/导航、表单、表格、数据/图形、控件/组件以及弹窗组成，大到页面整体框架、页面布局，小到按钮颜色、反馈状态等等都要考虑。

要制定规范的内容大致分为以上几个部分，下面我一一进行说明。

Part 2：制定规范

一，框架结构

框架结构大致分为“上下结构布局”和“左右结构布局”。

1，上下结构布局

顶部为一级导航，且顶部tab切换，左侧导航有相应变动时，多用此结构。

2，左右结构布局

侧边为一级导航，顶部为较少变更的内容（例如用户名，使用帮助等）时，多用此结构。

二，设计尺寸

确定尺寸前先确定网页是全屏响应式还是居中固定式，一般后台系统是全屏响应式。理论上说，全屏响应式的网页设计，可以选择任意主流尺寸作为基尺寸 。但后台系统一般是基于1920*1080的尺寸设计，适配1366*768的屏。

三，整体风格

整体风格分为“轻淡”与“深色”。（大概分类，比较主观）

1，轻淡

指灰色底，白色的版面（或白色底，白色版面），左侧导航栏可以浅色（不一定白色，可浅灰），可以重色（深浅可以设置切换）。

2，深色

指深色的版面，一般用于数据可视化及一些炫酷的页面（图片来自于网络，侵删）

四，具体规范

制定规范，首先要清楚哪些需要制定，大概分为以下几个模块。

· 板式

· 字体 

· 色彩

· 图标

· 按钮

· 表单

· 控件

· 表格

· 弹窗

1 : 板式

01）内容

板式内容一般有 顶部导航栏、侧边导航栏和主内容区域

02）栅格

关于栅格的原理我就略去了，具体使用方法也有很详细教程，想了解可以查查，在这里我主要说结论：

· 使用24栅格系统（即：将整个设计建议区域按照24等分的原则进行划分）

· 栅格间隙【（16+8n）px】（此项目间隔为24px）其它间距大小与各模块长宽，最好为8的倍数。

· 顶部导航栏【（48+8n）px】（此项目高度为64px）

· 侧边导航栏【（200+8n）px】（此项目宽度为232px）

2：字体

1）不同系统的有不同的字体规范

但实际设计后台时，因为有大量数据，且很多英文与数字都是与汉字混合在一起，所以如果要严格中英文字不同，也会非常麻烦，所以一般mac统一为PingFang，win统一为微软雅黑（此句话仅代表个人观点～）。

2）字阶

字阶分类时，个人认为可以不要全部用一级二级或是主辅做分类，因为有时开发与设计对主辅的理解不同，并且因为后台系统的整个版面已经设计出来，所以可以直接用字体使用方向做分类的标准。

3 : 色彩

1）主色/辅助色 

主色调要根据用户群体、用户使用场景以及产品的定位来进行思考和选取。在页面中主要用于关键行动点，重点信息点亮及图形化等场景。

2）衍生色

衍生色主要是依据主色衍生出来的颜色，可用于移入、点击等交互态，或导航表头表格等模块。

3）背景控件等

4 : 图标

1）分类

· 业务图标 - 一般是修饰文案的辅助图形，如侧边栏icon等

· 系统图标 - 一般用来表示常用的操作，如返回，退出等 

2）上传

可以上传到Iconfont“我的项目”里，里面有详细要求和操作讲解，可以自行了解一下（需要svg格式）。

5 : 按钮

1）分类

按钮用于开始一个即时操作，按表现形式可以大致分为文本按钮、描边按钮和填充按钮。（antdesign是分为主按钮、次按钮、虚线按钮、危险按钮）

2）交互态

按钮的交互态一般有五种，分别为正常（Nor），禁用（Disable），移入（Hover），点击（Click），按下（Press）

*注：1，移入（Hover）为正常状态按钮加入20%白色，点击（Click）和按下（Press）为正常状态按钮加入10%黑色（点击是一个动作，一般点击和按下的颜色可以相同，且交互反馈可以自行设计，不用拘泥于以上）

6 : 表单

表单具有数据收集、校验和提交功能，包含复选框、单选框、输入框、下拉选择框等控件。我先从整体分类以及交互状态来讲解，具体控件规范后面再单独列出。

1）分类

表单类型按照内容层级划分为普通表单、分类表单和分步表单。

· 普通表单 - 只有一个内容层级，不用分类

· 分类表单 - 内容较多，可与产品沟通进行分类

· 分步表单 - 需要分步骤进行填写，有已填写、正填写和未填写三个状态

2）交互态

这里的交互态指的是在填写表单时的即时反馈，主要分为默认状态、选中状态、错误状态和成功状态

错误状态与成功状态要立即反馈，不要等全部填写完点击确定时再反馈。

7 : 控件

常见的表单控件有输入框、下拉选择框、单选框、复选框、开关、分页等，我就几种常见的进行说明。

1）输入框

· 内容 - 一个输入框，通常有标签名称、提示信息、输入框组成。如果是必填表单，在适当位置（标签的前后，输入框后）加上红色*号（或其他符号）

· 交互态 - 有正常、选中、模糊匹配、移入、与禁用等状态

· 尺寸标注 - 输入框的宽度是可以根据字符长短变化的

2）下拉选择框

3）单选框/复选框/开关

4）分页

8 : 表格

表格包含标题和内容，通常都是一行行展示。

1）设计注意事项

· 设计时，应该将标题和内容区分，比如标题文字加粗/颜色加深/字号加大，或标题背景加深。

· 编号可以按照“升序”或“降序”排列

· 当文字内容可以操作时，可以将文字颜色变成主色，但要与主“操作”有区分

· 内容一般用白色块区分，然而一行行的标准单元格如果都是白色的就不便于预览，可以每隔 一行设置相区分的背景

· “操作”可以用icon表示，鼠标移入有相应操作解释，也可以直接用文字按钮或描边按钮

2）交互

· 鼠标移入要有反馈

· 响应式时，窗口缩小长文字折行，每一列的高度都要同步变化

· 表格内容过多时，可出现滑动条，两边名称与操作固定

9 : 弹窗

弹窗按强度一般分为三种，弱弹窗、强弹窗、重弹窗。（也可以按是否强制交互分为模态弹窗和非模态弹窗）

1）弱弹窗

轻弹窗，一般鼠标经过的时候即可出现而不用点击，比如提示说明，鼠标移过后立即消失，它不会影响当前页面内容的视觉效果和操作。

2）强弹窗

强弹窗通常是一个对话框，必须对这个对话框进行操作后才可以离开，如确认信息、错误信息提示等。

3）重弹窗

重弹窗像是一个新的页面，比如侧滑窗、详情、表单等。

Part 3：部分页面展示

Part 4：结语

总之，后台规范是一个很大的系统，不是简单地总结色彩文字组件等，而是要考虑业务流程与操作逻辑，然后再从整体出发，先确定好设计尺寸和风格，再从整到微，对配色，字体，表单等进行设计，期间要熟练运用设计技巧，如栅格，如Iconfront，再比如sketch的symbol等，还要考虑到每一个组件的交互状态，一一制作出规范。以上都是我完成此次项目后的一些经验总结，难免有纰漏，欢迎批评指正(^ ^)。