学习UI设计必知的防雷小知识：11例UI设计规范模板

作为UI设计师，整理设计规范也是设计能力的一种体现。所以，无论是自己设计创作的阶段还是和程序员沟通推动产品开发阶段，你的设计规范是否完善，对产品的质量起着决定性的关键作用。

在UI设计的过程中，设计规范是一个关键步骤。如何通过设计规范提高品牌一致性和推动开发高度还原设计？

这里，为大家整理了设计精细并且优质的设计规范模板，干货多多，有助于你整理设计规范的时候理清思路，完善细节。

先为大家整理了设计规范中的分类情况，UI设计规范有几大分类组成，分别是：Logo、标准色、字号、段落设置、图标、图片、间距、圆角值、大小、阴影、组件等。

 

1、Logo

 

品牌印象的直接感受，根据页面不同背景所使用的Logo图也不同。将产品中所使用到的Logo统一分类，以下引用Moby’s Petshop UI Style Guide的Logo资源例举说明。

Moby’s Petshop UI 的Logo由图形和文字组合而成，而品牌色为蓝色，Logo的使用也需要考虑到Footer黑色背景下的Logo。所以用Logo的横竖向排版和单个Logo图形来分类更好。

分类里面则展现品牌色的Logo、品牌色背景的Logo、Footer黑色背景的Logo。

 

2、标准色

 

颜色是设计最重要的部分，没有之一。细节决定品质，所以对颜色的运用格外细致，颜色的搭配直接决定产品的品质感。颜色大致可分为品牌色、文本颜色、背景色、线框色等。给颜色添加关键词，明确用于什么界面。

以下引用real-pixels UI Style Guide的颜色规范，可以借鉴的是每个颜色不仅标注了颜色值，而且右侧给出了颜色使用的场景，值得借鉴的是按钮Normal状态和Hover状态的颜色值放在一起，这样，对不同状态显示的颜色感受更直观。

对颜色值统一规范命名变量，提高开发效率的同时更好的维护设计规范。

在前端开发中，对颜色值进行编号，这样对代码也有着极大的优化。定义一个设计规范的CSS样式库，开发过程中就不用重复修改CSS参数值，直接引用定义好的变量名就可以，这样修改设计规范的成本大大降低。

 

3、