提交需求
赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!
什么是icon?
什么是icon
icon翻译为图标,是信息的图像表达方式。在设计页面的时候使用icon有很多优点,icon可以将某个功能进行直观的视觉表达,减少用户的认知成本。在早期的实验中,人们发现大脑处理图片的速度比处理文字的快60000倍。早期的icon都是拟物风格,用户很容易将这些图标和生活用品一一对应,具有强识别性。
icon的应用场景
在app上图标的应用无处不在,常见的应用场景有三大类,分别是:应用图标 、 功能性图标、装饰性图标。
icon的设计风格
扁平风格(面性、线性、渐变风格)、2.5D风格、3D风格、拟物、轻拟物。
如何搭建icon的设计规范
当一个项目中有很多地方都需要用到图标时,就需要制定一个图标的设计规范。图标规范要包含几点:
icon栅格如何绘制
在网上重新看了一遍关于iOS栅格绘制的方法,发现根号2、三分法和黄金分割的计算还是没有看明白,还是用一些技巧,使用以前网易设计师推荐的栅格画法。假设现在要画一个30pt的图标,那么30pt是这个图标的点击范围,在中间画一个24pt的矩形作为这个图标的视觉范围。那么,如果提取一个缩进值,缩进值=icon视觉区域*10%。
注意:所禁止取整数、偶数,举例如果是4.4就取4,取最近的一个值
正方形:视觉区域减去缩进值就得到了正方形icon的尺寸
横向长方形:宽度为视觉区域的最大值,高度=视觉区域-2*缩进值
纵向长方形:高度为视觉区域最大值,宽度=视觉区域-2倍缩进值
圆形:视觉区域就是圆形尺寸哪怕依旧做好了栅格规范,在绘制图标的时候也要适当关掉栅格,用肉眼对比一下图标整体的大小,尤其在在绘制异形图标的时候,物体对齐并不意味着是视觉对齐,这时就需要根据实际的情况进行调整。
如何交付?
可以通过图片格式或svg格式交付,如果是svg格式交付需要注意的是:
1.svg不支持颜色填充
2.保留点击区域的位置,点击区域为一个透明矩形
3.svg格式要将描边转化为闭合图像,在Ai中这一步叫做转曲
分享结束,希望以后能在项目中有意义地使用icon~
Powered by Froala Editor
大牛,别默默的看了,快登录帮我点评一下吧!:)
登录 立即注册