UI必看!如何制作标准的UI图标(2)

来源:网络   作者:热心网友   发布时间:2017-06-19    浏览次数:338

二、如何符合标准:怎么画?

1、单色icon多用布尔运算:只有一个图层方便后期调整,方便交接使用。

57ba594385c8a8012193a3e40924.jpg

36e2594385dba8012193a3cc5e88.jpg

举个例子,左边的黑色icon的外圈是用了描边描出3px的宽度,这样导致图层变多,修改起来很麻烦,而且描边的圆角很难控制,如果想把外圈切一个断口将会更麻烦。右边都用布尔运算的icon相对整洁得多。

a8f059438a3ba8012193a32a1d10.jpg

2、Of course!!像素要对齐

38b259438a96a8012193a34c8c71.jpg

3、合适的大小:保证一组图标视觉上大小一致

d98a59438aaba8012193a3ae4cdf.jpg

画icon之前,我们可以把表示最大尺寸的框画出来,在这个框框内,icon不要画得太满,要有适当留白。同时,为了视觉上的统一,圆要略大于方形。遇到倾斜的图标,可以先正着画好了再旋转角度。


4、抓住有特点的小细节

4bc559438ab5a8012193a3b4597b.jpg

简单来说就是,保证线的粗细、圆角的大小一致,图形是否分割、线是否有断点等细节也要大体上保持一致。这样的一套icon是有整体性的,风格才算统一。


三、小结

47b959438ac8a8012193a3deca9f.jpg

沿着UI的发展趋势,icon的风格经过了各种各样的变迁,从拟物到扁平、从静到动,有的化繁为简,有的更加多变有个性,不过道理仍旧是万变不离其宗的。icon设计看似简单但是讲究一点不少,既要表达准确,还要设计精确,相信一波一波的设计师都是在实战中摸爬滚打过来的。

12共2页
联盟广告
×

感觉还不错,那就赞助一下吧!您的鼓励就是我们坚持的动力!

打赏说明:您的赞助我们将用于购买网络带宽和优质设计资源,提升用户体验!

相关推荐

http://www.shejixf.com/shejijiaocheng/shejililun/6075.html
×

一键快速登录后才能下载本站资源

新会员登录即可获取5学币奖励,超爽下载!

×

一键快速登录后才能下载本站资源

新会员登录即可获取5学币奖励,超爽下载!

×

充值学币 立即开通