一、什么是设计规范？
设计规范是针对特定产品所制定出来的一整套设计标准，包括设计原则、设计规则等等。通过这套标准，能减少错误发生率并提高设计质量和输出稳定性。
二、为什么要制定设计规范？
1、对用户：一致的风格和体验，始终遵守用户习惯，减少认知成本。
2、对产品：品牌风格一致，体验一致；涉及APP/小程序/H5/网站，建立多端产品视觉标准化，品质更稳定
3、对团队协作：
1）团队内部：新人入职快速接手项目；其他同事维护效率更高
2）团队外部：建立一致的规则，开发协作更顺畅
4、对个人
1）提升系统全局框架能力，减少设计决策，提升工作效率
2）形成经验型参数，提升效率，有更多的精力用于打磨体验
3）对品牌风格、用户体验有更深的认知
三、制定设计规范，踩过哪些坑，总结的经验
1、制定规范的时间越早越好，品牌颜色定义好了，就可以着手做规范了。做完大致的规范，再去做界面。
在产品进入到界面设计时，最先行的应该是设计规范。我们可以根据产品属性和品牌风格，再结合经验型参数，定义好品牌色、辅助色和文字颜色、全局背景色等等。而其他的元素通常都有较为固定的尺寸大小和模式。
切忌不要一直迭代，没有制定一贯的规则，然后界面越做越乱和臃肿，设计与开发协作困难重重。
2、规范制定后，要文档化并上传蓝湖，尽量不变更，变更要及时同步开发。
一贯的规则的制定，建立在通用性基础上，要适合绝大多数场景。制定后是用于遵守的，尽量不要变更。
制定规则的时候，要考虑全局和延展性。例如全局背景色的制定，可以多参考过国民级产品是什么样的，通过截图和对比，发现规律，进而参照和利用。
3、相似的东西应该合并成为一种，尽量用较少的元素和样式解决问题，不再为差别不大的细节而纠结，掉进时间的陷阱。
相似的大小，比如字号32px和30px，差别是细微的、没有韵律和节奏的，对于用户而言无对比差别，对于开发协作而言是滥用样式。我们应该定义几种有差异和对比的关键字号大小、间距大小、颜色，尽量用较少的元素和样式解决问题，然后复用到整个产品，是整个产品风格一致的同时，有节奏感，视觉更美观。
4、系统级别图标的设计，定义好颜色，再去绘制，能让整个风格更一致
虽然图标是切图，但也不应该忽视定义图标的颜色。顶部导航图标、下一步图标等基础图标放在控件中绘制，定义好一种颜色，然后根据特定场景调整。
5、全局设定，应该更严谨
1）全局边距的设定，应该结合产品信息和内容的多少来设定。以我做的2套教育产品设计规范为例，教师使用后台型APP，信息较密集，全局边距应该更小，设定为24px较合适。而用户端儿童启蒙教育产品，科目较少，课程较少，边距设定为32px较合适。
2）全局背景色的设定，要考虑用户长时间观看，要让用户聚焦于内容，背景色应该要后退，不能凸起，选用较少的品牌色在里面。可参考国民级产品背景色的设定，特点是选用蓝灰色。
四、设计规范中的经验型参数总结
1、布局
1）画布大小的一致：使用750*1334px@2x，能够在安卓和IOS都能够有好的还原效果
2）统一的网格单位：采用8点网格系统
常用间距为：8、16、24、32、48、64 单位px
常用图标大小为：48*48px、24*24px
常用组件大小：吸底按钮模块120px （通常组件的大小我也会考虑做成10为倍数，例如列表高度110px，如果按照8的倍数104，不太容易反应出来是8的倍数）
这里关键是同一模块的一致性，每个平台都有自己的规则，我们制定规范是为了让自己团队更好的协同办公，而不是为了规范而规范，只要团队成员之间达成共识，提升了团队效率，适合团队成员使用，那就是最好的规范。
2、文字
1）字号大小：大标题40px、较大标题36px、正常标题32px、正文28px、最小字号一般是26px、tabbar字号一般是22px；常见字号梯度是：40、36、32、28、24、20（以4为单位递增，减少差别不大的字号使用）。 行高的换算公式为：字号+8px
2）字体颜色
可用无彩色系、或者深蓝灰系列，一般情况颜色是3-4种。这两个系列的文字在明度上是一样的，深蓝灰系列偏蓝。
3、按钮
按钮通常需要定义主按钮、次按钮、中按钮、小按钮、置底按钮、自定义按钮6种。并定义没种按钮的正常、按下、不可用状态。
4、对话框
对话框通常需要定义有标题、无标题、多操作、自定义（含图片）、广告弹窗、更新弹窗等样式。
5、遮罩
遮罩通常颜色为黑色#000000，透明度一般为50%或60%。
6、toast
toast通常颜色为黑色#000000，透明度一般为70%。位置通常垂直页面居中。
7、圆角
APP中的圆角通常需要定义一个通用的圆角，比如20px，或是以8为倍数，定义8或者16px。根据具体的场景，例如弹窗、底部浮层可适当变大，在变化的时候遵循一个规则。圆角大小的种类不要多，通常通用一种。
参考文档：
sketch cloud 怎么用？设计体系读书笔记：https://www.uisdc.com/reading-notes-of-design-system
sketch cloud 怎么用？https://www.uisdc.com/build-component-library
大公司如何做设计系统？24 个 Sketch 组件库源文件合集下载：https://www.uisdc.com/24-sketch-component-library-source-files
较好的设计体系资源：
https://www.jianshu.com/p/269ceba75872
https://www.jianshu.com/p/4461c8a7a856
Airbnb建立视觉语言：
https://airbnb.design/building-a-visual-language/#2
组件库资源：
有赞：https://vant-contrib.gitee.io/vant/#/zh-CN/button
teambition：https://design.teambition.com/
饿了么：https://element.eleme.io/#/zh-CN/component/installation
微信小程序官方：https://developers.weixin.qq.com/miniprogram/design/#%E5%9B%BE%E6%A0%87
本文未完待续，设计路漫漫，沉淀总结，一步步向前。
