设计规范是为了确保能够在一般可用性和审美常识下避免犯错的方法，以及有一套在出现错误时能第一时间补救的方案。设计规范也是为了减少设计过程中出错的次数，那么设计规范中需要注意的问题又有哪些呢？为减少日常设计工作中踩雷，一起来看看吧。
一、颜色规范
1. 主色

主色主要是对：色号+使用场景说明。众多色调中，以一种色调为主的色调。
例如：
#00AAEE   用于特别强调和突出的文字，标签和icon。
#3DC6FC  用于所有弹窗按钮及图标、logo、文字等。
2. 辅色

辅助色在整体的画面中应该起到平衡主色的冲击效果和减轻其对观看者产生的视觉疲劳度，起到一定的视觉分散的效果。
例如 #99CCF2  是用于所有不可点击按钮。
3. 文字颜色

例如：
#4F4A66  用于一级文字信息
#888F9A  用于二级文字信息

#A4AAB3  用于说明文字信息

#DFDFE0  用于引导填写文字信息

#FFFFFF  用于反白文字

4. 布局颜色

例如：
#E7E7E7  用于弱分割线

#C8C7CC  用于强分割线

#F5F5F5  用于底色

二、字体规范
主要是对字体+使用场景说明。
例如：
40px  用于导航栏标题文字
36px  用于大标题文字
34px  用于导航栏强调文字，按钮上文字
32px  用于列表中标题文字
30px  用于首页中副标题文字

24px  用于主要内容文字

18px  用于次要说明文字

三、控件规范
1. 顶部导航栏
主要是对：顶部导航长宽大小+icon文字模块大小说明。
2. 底部导航栏
主要是对：底部导航长宽大小+icon文字模块大小说明。
3. 列表

主要是对：列表长宽大小+icon文字模块大小+间距说明。
4. 按钮

主要是对：按钮长宽大小+按钮颜色+字号大小+字号颜色说明。
四、布局规范

1. 页面可视区域&可操作区域
主要是对：页面分辨率+内容可视区域和可操作性区域距离屏幕边缘尺寸说明。例如：


2. 弱细线分割
主要是对：使用场景+尺寸+颜色说明。
例如：用于相同属性模块间区分   尺寸：1px   颜色：#E7E7E7

3. 强细线分割
主要是对：使用场景+尺寸+颜色说明。
例如：用于相同属性模块间区分   尺寸：1px   颜色：#C8C7CC

4. 底色分割

主要是对：使用场景+色块+颜色说明。
例如：用于不同属性模块间区分   色块：高40px   颜色：#F5F5F5

5. 留白分割

主要是对：使用场景+色块。
例如：统一模块内文字字段间分割   色块：高20px。
适用于小模块之间分割  尺寸：高30px。