UI小渣 | UI设计一定要了解的设计规范

俗话说国有国法，家有家规，没有规矩不成方圆。无论是哪一行业都有各自的规矩和规范。

UI设计也不例外，具有设计规范。规范的设计可以让我们设计具有统一性，界面视觉更美观。

想要拥有高效且美观的设计，就必须遵守UI设计的规范。

今天小渣带来的这些规范，可以让正入门的新手UI设计师们高效的完成你们的设计。

一、画布尺寸规范

1.750*1334 px（IOS）

2.状态栏（40px）、导航栏（88px）、主菜单（98px）、内容区域（根据设计需要此区域可向下拉长）

二、色彩规范

色彩规范主要表明色彩的色值和使用范围，一般会从品牌色、辅助色、基础色、状态用色等等。

颜色不宜过多。选取一种主色、一种辅助色（非必需），在此基础上进行明度、饱和度变化，构成配色方案。

1.主色：原则上选用公司Logo色

2.搭配色：根据设计需要配色。

3.其余颜色通过纯黑#000000与纯白#ffffff的透明度变化来展现（包括图标和分隔线），而且透明度限定了几个值。

三、 字体规范

字体规范最需要注意的是提取出各个场景下需要用的字体和字号。

需要注意的是，要标注上应用场景方便其他人理解。不然其他成员也并不知道到底什么时候应用一级标题、什么时候用二级标题。

1)常用字号（字号不要出现奇数）

2)英文和数字字体：Roboto   中文字体：方正兰亭黑体或微软雅黑（根据适应不同系统配置来进行设计）

四、图标规范

1.像素对齐

需要严格的做到像素对齐，尤其是在做较小尺寸的图标时，如果不严格的遵循像素对齐，那最终的显示效果就会出现问题。

2.多用布尔运算

在做图标的时候，能用基本图形进行布尔运算的时候，尽量不要使用钢笔，这样做的好处有如下几点：

让你的图标更加规范

对图形结构理解更加深刻

后期更改形状更加方便

很多设计师以为UI设计就是设计图标。虽然事实并非如此，但图标的设计在整个UI设计中是比较基础的一个环节。

图标与品牌标志一样，在设计时都需要做适当的减法，应该尽量用简约的线条去表达其含义，应该尽量避免出现线条结构过于复杂的设计。

而且整体的图标都需要保持风格一致，例如图标的线条粗细、边角弧度、图标高度宽度比例、风格等等。

3.独特的风格

在做系列图标的时候，一定要在前期给图标设定一个风格及原则，使之看起来与众不同。

在这里值得一提就是，我们在做线性图标时，一定要保证描边粗细相同、圆角相同，如果这些基础的规则都没有遵循，那也就谈不上风格的统一、创新了。

4.视觉大小统一

在进行图标设计的时候，我们会使用栅格辅助线来帮助我们更加严格谨慎，但一定不要被辅助线困住，学会灵活运用，保持视觉上的大小统一。

在如今的APP设计环境当中，一些APP设计大牛都一直强调，设计师要为有品牌意识。

那么，在图标的设计中，我们也必须强调“品牌性”，简单的说就是把品牌中的抽象的概念变成具象化的图形，把品牌主副色调应用到图标设计中。

五、命名规范

小渣刚开始做设计时对于“命名”是没什么概念的，我都是随随便便地用一些没有特定意思的字母去给页面命名，以至于后来页面多的时候，要修改和调整时完全找不到，文件夹也一团乱。

自从小渣吃了这一教训后，页面和文件夹一定要命名和分好类。

因为统一的、规范的命名对我们自己的文件整理有很大的帮助，后期修改文件、图层的时候更加方便快捷，而且规范的命名也显得我们自身比较专业。

而且，如果如果命名不统一，团队之间的成员很难达成共识，任务交接时需要很大的学习成本。

而更重要的是，有规范的命名可以极大的节省程序开发的时间成本，减少很多不必要的沟通与重复切图的概率。

程序员完全可以直接使用的我们切片而不更改切片的名称，后期我们更换切图，只要切片名称不变，开发看都不用看直接替换就可以了。

如果你觉得这篇文章有所帮助

那记得分享给身边的朋友哈~

哦，对了

本文首发微信公众号“UI小渣”，欢迎转载，转载请注明作者及来源。