11例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、字体

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

以下引用的是Retail Banking Service UI Style Guide中的字体规范，在定义字体名称的同时也定义了字体的风格，并且添加了不同字体风格的预览效果，常见的字体风格有：Light、Regular、Italic、Semibold、Bold。

4、段落设置

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

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

5、图标

图标是主要的软件标识，在设计资源中是最主要的模块之一。
在软件产品中乃至可能每个页面都存在图标，图标除了美化的浸染以外，还有着明确指代含义的打算机图形。

详细分为以下三个浸染：

图标是与其它网站链接以及让其它网站链接的标志和门户。
图标是网站形象的主要表示。
图标能使受众便于选择。
根据图标大小和利用用场进行分类整理设计规范，这样才更清晰明了。

6、图片

图片也是属于设计规范最主要的部分之一，按照用场分类整理图片资源，设计风格系统化。

7、度量

在设计的过程中，我们常常会利用一套规范的度量标准，来保持产品的同等性，分别为圆角值、间距、大小。

对度量阐明最好的是设计中常常利用到的栅格系统（Grid Systems），利用固定的格子设计版面布局，其风格工致简洁。
这便是我们在网页和APP设计的过程中常常利用到栅格系统的缘故原由。

8、阴影

阴影风格及参数也是设计规范中的一部分，在整理设计规范的时候，须要把稳的是阴影的参数值是网页中掌握阴影的参数值，而不是设计软件中的参数值。

举个例子：网页中阴影对应的参数值为：box-shadow: type:Outset offset X:0px offset Y:4px Blur:8px Spread:0px color:#000000 ，不透明度：10%，这才是程序员须要的阴影参数值，否则终极开拓出来的阴影会涌现不一致的情形，无法达到规范的目的。

9、组件

常用的UI组件（Component）：Button控件、下拉框、选择框（单选\复选框）、韶光选择器、输入框、搜索框、进度条、分页器、提示框、警告框、表格、弹出面板、数字步进器、选项卡等。

Button控件

按钮是最常见的组件之一，按钮有5个状态：Normal、Hover、Active、Disabled 、Loading。

须要在规范等分别罗列出这五个状态，标注上对应的按钮添补色、边框色、圆角值、按钮宽度和高度，按钮文今年夜小、颜色值。
如果是图标按钮的话，除了上述参数值以外还须要标注icon和按钮文本之间的间距和icon图标的大小。

10、下拉框

下拉框是为用户供应多个选择的单选组件，优点是用最大略的界面布局办法收纳了很多的选项，须要把稳定义下拉选择框弹出的时候，鼠标移动上去的Normal、Hover、Active状态。

11、选择框（单选\复选框）

顾名思义，单选框是浩瀚选择里面选一个，而复选框是浩瀚选择里面可以无限制选择。
单选框和复选框都须要三个状态，即未选中状态、选中状态和不可点击状态。

韶光选择器：

韶光选择器是选择年月日的组件，分别对应年月日星期的信息，在设计的时候须要考虑到4个状态，分别是：Select、Not_Select、Hover和Disable，并且写进设计规范。

输入框：

输入文本框是我们软件产品设计必不可少的组件，文本输入框有4个状态：Normal、Active、Disable和Error。

搜索框：

和输入框相同的地方是都须要聚焦然后输入内容完成操作，该当有为Normal、Active、搜索下拉状态、Error状态。

进度条：

这个须要在规范中注明上传进度条的全体交互操作流程，对Normal状态、点击上传/拖拽上传状态、上传中、上传成功、上传失落败，全体流程状态的整理。
在上传过程中，任何用户操作都该当有及时相应的动作，这样用户在利用的过程中才不会迷茫。

分页器：

分页器是用于切换内容页面的复合组件，常规的分页器有高下页操作按钮、分页页码按钮、输入页码手动查找的搜索框，以及分页器的4个状态：Normal、Hover 、Active、Disabled。

提示框：

提示框是一个事宜触发弹出面板显示的组件，常常利用提示框的地方是，删除按钮、疑难问题点、提示类弹出信息等。
这个风格设计就比较多了，设计风格各不相同，定义底板样式、笔墨样式和阴影参数。

警告框：

页面报错时的显示样式，常用的警告类信息是：操作成功、提醒用户把稳、警告用户把稳等。

表格：

表格类信息居多，应重点整理表格样式以及文本质彩大小。

弹出面板：

弹出面板紧张由4个部分组成，分别是面板内的文本信息、按钮、面板大小样式、蒙版颜色和透明度。

数字步进器：

数字步进器属于复合类型的组件，可以理解为按钮和输入框联动的组件，以是输入框和按钮拥有的属性状态，步进器都有。

选项卡：

切换选项卡即切换内容，和下拉选择框不同的是，选项卡是将多个选项都排列出来的单选组件，须要考虑4个状态：Normal 、Hover 、Active 、Disabled 。

设计规范对全体项目的规范性推动很强大，但是须要花韶光和耐心细心打磨，以是须要花费很多韶光和精力去整理资料、编辑素材、分类整合，末了还要在设计软件中将全体规范重新排列设计。

本文由 @ jongde 原创发布于大家都是产品经理。
未经容许，禁止转载

题图来自 Pixabay，基于 CC0 协议