美文网首页原型设计缘好设计.摄影.文案坊前端UI参考
UI小渣 | UI设计一定要了解的设计规范

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

作者: Lynn_f45e | 来源:发表于2019-10-14 10:55 被阅读0次

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

    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小渣”,欢迎转载,转载请注明作者及来源。

    相关文章

      网友评论

        本文标题:UI小渣 | UI设计一定要了解的设计规范

        本文链接:https://www.haomeiwen.com/subject/zholmctx.html