俗话说国有国法,家有家规,没有规矩不成方圆。无论是哪一行业都有各自的规矩和规范。
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小渣”,欢迎转载,转载请注明作者及来源。