如何建立一套UI设计规范

1、尺寸

设计图尺寸

虽说现在大多数人都是以750(@2x)为设计稿,但是也还是有人720(@2x)的尺寸,或是375(@1x)的尺寸,比如我就是用的720,所以设计之初最先要定一个统一的设计尺寸,特别是多个设计师合作的时候,千万不要想当然的以为别人都和你一样。

2、间距大小

间距包括页边距、模块与模块之间的间距,这种全局的间距大小必须要一致,页边距的大小很好定,基本上20、24、32居多,根据产品特性定一个统一的就好，而模块与模块之间的间距就相对复杂一点,在定之前需要先确定模块之间的分割方式,是用线、还是面、还是留白,然后再确定间距，

确定好模块与模块之间的分割方式后，还需要确定模块内部的，确定之后就要严格执行。

比如规范定的模块与模块之间用线，模块内部之间用留白，那后续所有页面都需要按照这个规则来（特殊情况除外）。

3、标准色

颜色是设计最重要的部分，没有之一。细节决定品质，所以对颜色的运用格外细致，颜色的搭配直接决定产品的品质感。包括基础标准色（主色）、基础文字色,还应该包括全局标准色（背景色、分割线色值等）这些都需要标好色值以及使用的场景。

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

4、字体

字体是设计中必不可少的考虑因素，不同的字体气质不一样，并且不同场景下带给人的感受也不一样。所以需要在设计的时候考虑到字体的设计效果，然后在设计规范中注明。

在定义字体名称的同时也定义了字体的风格，并且添加了不同字体风格的预览效果，常见的字体风格有：Light、Regular、Italic、Semibold、Bold。

5、段落设置

在实际的产品设计中，段落有很多种样式，不同场景下的段落要求也不一样。比如：阅读内容的段落要求文本可阅读性强，所以对字体、字号、颜色、行间距等要求简单易读。而带有装饰性的段落文本则不需要那么严谨，装饰性强就可以。

需要注意的是：在定义段落默认字体的时候还需要定义一个后备字体，即默认字体不能正常显示情况下显示的字体。设计的水平层次就在于对细节的打磨，这也就是段落规范在设计中存在的意义

6、图标具体分为以下三个作用：

图标是与其它网站链接以及让其它网站链接的标志和门户。

图标是网站形象的重要体现。

图标能使受众便于选择。根据图标大小和使用用途进行分类整理设计规范，这样才更清晰明了。

在我们的项目紧急而人员又不足的时候,可能没有那么多时间，去把所有的图标都画的精细，那这个时候我们可以先定尺寸。

当然这里说的定尺寸不是让你把页面内所有图标的尺寸都定好，而是说优先定几个大的模块，比如顶导航、底导航、个人中心的...