完成时间:2019年5月17日
作者:林政鸿
在网页里icon是不可缺少的一个组成,不管在那种网站都可以找到它的身影icon的作用可以给用户加速了解这个功能是干什么的而且它还有另一个的作用就是提升页面的美观度,而且icon的设计方式非常多就比如渐变、线条、圆角、或者是面状的类型本篇文字就来简单的说一下icon的设计规范到底怎样设计才可以把icon设计好。
在设计icon的时候准确性要高,做icon的时候用AI来做的话整体的质量也会增加为什么用AI来绘图因为在AI里是矢量图而不是位图,位图其实就是普通图片再放大的时候会模糊而出现像素块而矢量图不会矢量图在AI里进行6800倍的放大也不会模糊或者是出现像素块,这个就是用AI做icon的好处保障了精准度还确保了清晰度。
第一就是留位,留位的做法是可以预防图标在具体应用时候而出现 边缘别切掉的风险也可以为设计的空间留下进退的余地通过某个设计网站的说明得知利用1024×1024的画板来进行制作会更好而且在新版的设计规模的时候还会给外围预留了64像素的位置。
网页icon的设计规范
然后就是韵律系统常见的的元素基本都是点、线、圆角还有三角这几样韵律,就拿圆角的来说圆角的规格也是8的倍数为原则最常用分为三种分别是8、16、32这些之间都是两倍数的关系而圆角的设计方式也是利用了一个直角的处理方式,还有就是在尺寸的选择上都会保持16倍数的原则来进行设计点的选择中新版的一步园标最常用的尺寸的点都是已80、96、112、128来设计当设计的时候特殊尺寸的要求时都可以按照16倍数来进行延伸。
网页icon的设计规范
到了最后就是辨识性,辨识就是可被告知的特色在图标上可以遵守和自然的两块的定律在在辨识度这一块也做了两处小尝试,通过图形的定义将72像素的圆角调整至32像素可以在视觉上令图标看起来更为坚硬和理性。
网页icon的设计规范
在设计icon的时候个人建议使用AI来进行制作,而且在进行图标的时候设计完成后尽量保持图形的整洁和图层的结构清晰也是不可缺少的一部分,其实图标的设计是 UI 设计中非常容易被忽略的环节,建立优秀的图形体系也不是一、二个设计人员的事,需要整个团队在设计前、设计中以及设计后都能够达成共识并且通力合作去完成共建。本次图标的升级,仅仅是一个开始。在调用图标时,考虑具体业务对于图形化寄予的期望,以及用户操作时的心智模型等因素,结合实际情况做调用和适当的二次设计和更改。

相关文章: