【设计经验】图标设计初阶要先型(中)

起点学院产品经理365成长计划,2天线下闭门集训+1年在线学习,全面掌握BAT产品经理体系。了解详情

连接上文>>【设计经验】图标设计初阶要先型(上)

2、精致的基础要素

精致即精细极致。看似简单的图标其实并不是随便了事,但知道了这些基本要素你就可以完成一个合格的图标了。好的图标是谨慎认真的注重每一笔每一像素每一矢量锚点的,尽可能的往精美优雅的方向努力吧骚年~

·犀利清晰

需要锻炼厉害的眼睛,使出你的火眼金星捕捉每个像素之差,像素满格才能清晰的呈现,细分出来通常会遇到以下3种情况,这也是最影响图标基本质量的问题点。

1) 轮廓发虚

图标一定要用矢量绘制,但是新手很容易犯的第一个错误就是图标模糊的问题,也不清楚为何会这样。其实就是矢量边缘模糊产生的问题,也是个人绘制的不良习惯造成。避免这个问题,必须在100%画布上绘制图形,而且不能直接推动图标放大缩小,即使这样改变大小了也要放大画布调整路径的锚点,反复查看及校正是否对齐1px网格,而不是0.1~0.9px,正是不满1px格才会生产虚线。而圆形的绘制保证十字架4个边缘点对准就可以了。

2) 斜形发虚

斜线也是会有模糊与精致之分的,不仔细对比其实是比较难看到问题,可能很多人都会碰到图形进行倾斜效果时是有锯齿的,那就是角度的处理问题了,自己进行多角度对比下试试,会发现哪一个角度最清晰。也可以将图层进行双层叠加,会非常犀利哦~

3) 像素不够或多余

看下来都是像素发虚与清晰的原因都是一样的,下面这个例子是箭头在小尺寸情况下可点阵矢量像素绘制,如果是大尺寸(如上面最大的箭头示例)可以直接钢笔绘制。

总结一下上面的处理方法,坚持最少发虚原则:

·比例协调

图形内部结构要注意元素构成之间的比例,有黄金比例分割也有感性的平衡方法。严谨的图标比例可参照苹果IOS图标规范案例,打好内部统一结构线进行图形绘制和比例分配。

如果头眼昏花嫌麻烦,也可靠经验感觉快速完成一个具有平衡感的图标。

·视差平衡

同一个尺寸规格,但根据不同形状的图标,会导致面积占比引起的视差大小不同,但要在参考尺寸范围内绘制进行调整。以下图标示例都是撑满方框边缘绘制,按道理这好像是准确的,但由于人的肉眼会有视差问题,所以做的设计就要暂时抛开科学,以人的真实情况去判断再调整。

连接下文>>【设计经验】图标设计初阶要先型(下)

本文来源:ui.com

您的赞赏,是对我创作的最大鼓励。

评论( 1

登录后参与评论
  1. 学习了!! 谢谢

    回复
加载中