请选择 进入手机版 | 继续访问电脑版

【UI设计】我建议你把这招也学会

发表于 02-01 17:12 显示全部楼层 15 209

Icon绘制规范

1、基本知识理论

我们在观察相同宽高的图标时,会发现正方形的大小要比圆形的大,我们都知道是因为面积大于圆形的面积。

 

当我们改变圆形让它的面积和正方形的面积相同,这样会发现大小保持了一直。

 

我们在观看物体的时候会根据物体的面积大小,感知物体的大小,所以我们在设计图标的时候对于相同大小的尺寸的图标,要根据视觉面积进行调整。

这时候就需要一个规范来控制图标绘制的大小,给它一个在相同尺寸图标下的安全区域。

2、自定义图标规范

根据上面的一个原理我绘制了下面一个图形,来控制图标的范围大小。

我取名字为:限定框

所以我自己就发明了一个这个东西,简单粗暴不过挺好用。绘制图标的时候只要控制在白色的正方形里面就行了,如果有特殊的不规则的logo可以把突出的部分绘制到正方形外部。 



去掉限定框

正常:

特殊:


同样我在ps中也绘制了一个同样的限定框,用来控制图标大小范围。

在绘制图标的过程中也有一些需要注意的情况,就是绘制类似于正方形的图标时,不要顶慢整个安全区,要小于一点点,如果顶慢之后会发现它偏大。


限定框的简单应用

iOS系统的UI控件中,把控件缩放到750px设备屏幕下时,导航栏中的图标的大小为52*52px,所以我就规定导航栏图标的大小为最大范围是52*52px,那切图的时候就以最大的范围切图即可。

 

限定框在原型中的运用

可以快速绘制高质量原型,在后期只需要放入图标即可。

 

PS CC 2017版本的功能:iOS快速切图

图标绘制好了,避免不了的就是切图,下边就是新的切图小技巧,不借助任何的插件:

选中要导出的图层》右击导出为》设置参数

 参数设置步骤:

1、设置要切图的格式,iOS的格式都是一倍图、二倍图@2x、三倍图@3x,由于我们默认是二倍图所以要设置参数为0.5倍、1倍、1.5倍。

2、选择格式要为PNG,别的参数不用管

3、重要的一步,画布大小,就是我们限定框大小,选中左边所有要导出的图层,然后修改画布大小,然后点击全部导出,即可完成。

 

切图完成

 

这就是我们想要的png透明的正方形图片。


结论

APP界面、网页界面、后台界面设计中图标的绘制是必不可少,有一个图标的绘制规范也是必不可少,并且它也会让我们的工作事半功倍,为整个团队做出贡献。


回复 使用道具
举报
龙天哥

发表于 04-26 12:22 显示全部楼层

回复 支持 反对 使用道具
举报
馨四君

发表于 04-23 03:23 显示全部楼层

回复 支持 反对 使用道具
举报
追风筝的孩子

发表于 04-16 13:16 显示全部楼层

回复 支持 反对 使用道具
举报
佳木繁玥

发表于 04-14 23:52 显示全部楼层

回复 支持 反对 使用道具
举报
pcatzj

发表于 04-04 19:31 显示全部楼层

回复 支持 反对 使用道具
举报
hello_world

发表于 03-24 17:53 显示全部楼层

回复 支持 反对 使用道具
举报
西山霸王花

发表于 03-16 09:23 显示全部楼层

路过,支持一下

回复 支持 反对 使用道具
举报
loverol

发表于 03-15 07:20 显示全部楼层

回复 支持 反对 使用道具
举报
张比亚

发表于 03-10 05:29 显示全部楼层

楼主你好

回复 支持 反对 使用道具
举报
12下一页

发表新文章
孙傲

小码哥会员

0

学分

269

学币

281

积分

小码哥会员

Rank: 3Rank: 3

积分
281

关注新浪微博

Ta的主页 发消息
精华帖排行榜

精彩推荐

  • 关注小码哥教育