如何从0到1建立UI设计规范

设计规范一直是我们设计师需要关注的，毕竟设计规范能增强团队之间的协作能力、工作效率。设计规范如果考虑不到位，往往会出现规范太空洞缺乏实际指导意义、规范太死板影响设计发挥等问题。

今天，三石就把自己经常用到的几个小方法交给大家。

1、色彩规范

2、信息层级

3、控件统一

4、界面布局

1、色彩规范

色彩规范主要表明色彩的色值和使用范围，如主色调、辅助色、功能色、字体色等。在选择主色调时，首先确定产品的调性、用户对象和所要表达的气氛，以及利用色彩所希望达到的目的，色彩取向决定了这个产品的风格。

产品的辅助色可用主调色的邻近色，也可用对比色。确定主色和辅助色之前，建议应用到各种页面中去看看实际效果，因为每个页面的使用环境都不同，反复验证后才能确定最终的色彩方案。

一般情况下，可选择一到三种辅助色配合使用，整个产品的色彩最好控制在四种颜色之内。

产品文字中一般会有一级标题、二级标题、一级正文、二级正文、提示文字、辅助文字等，为了区分层级便于浏览，通常会根据产品需要把字体颜色深浅分成3到5个层级，常见的有#333333、#666666、#999999这个组合，这个组合的层级区分比较分明，适应性比较广，因此有一定的参考价值。

2、选择字体

文字是APP中最核心的元素，是产品传达给用户的主要内容，我们可以看到在不同品牌之间都有自己的字体规范。首先根据产品定位、用户群体选择合适的字体。同时也对字号做一个全局的规划。在同一个界面内，尽量用不同的字号去区分信息层级。可参考下图

另外字体的数量应保持在3种之内，能用2种就不要用3种，能用1种就不要用2种。

3、控件统一

在产品中按钮控件的复用度是很高的，同样的一个确定按钮也会根据页面环境不同来设定不同宽高尺寸。

需要注意的是，即使按钮宽高不同，按钮样式也需要统一宽高比例、描边、直角、圆角、色值、文字区域、字体、字间距等，以保证按钮样式的统一。

另外，在一般情况下，按钮会有四种鼠标状态。不同颜色的按钮之间，相同的鼠标状态也需统一视觉效果。比如同层级的蓝色和绿色按钮放在一起，这2个按钮在hover状态下的明度变化看起来应相对统一。

4、界面布局

不同类型的产品通常会采用不同的布局方式。总结我们在做页面设计时，注意以下几点即可

1、整体视觉统一

2、间距统一

3、页面整洁有序

4、提供足够的交互区域

结语

实践出真知，落实规范才是目的，不要为了规范而去做规范，每一个好的规范都是经过不断更新与迭代迭。