2.3 如何绘制应用图标

iOS 6及之前版本，应用图标的圆角半径都可以通过1/4圆绘制出来，即绘制标准的圆角矩形即可，主屏幕应用图标为114×114px，使用20px圆角半径；App Store应用图标为512×512px，使用90px圆角半径等。从iOS 7开始，主屏幕应用图标调整为120×120px，并且不再是标准的圆角矩形，而是某种连续曲线，接近于26～27px圆角半径。

我们把两个形状重叠放大后进行对比，可以发现它们圆角之间的差别，其中灰色线框为标准圆角矩形绘制的圆角，蓝色为iOS 7圆角，它与圆角矩形拥有相同的对角线锚点，区别在于其曲线稍微向中心收紧。

事实上，我们很难在Retina显示屏上区分这么细微的差别，因此设计师在绘制iOS应用图标时不必过分纠结它的圆角，直接绘制成直角矩形交给开发工程师即可，如应用图标需用于展示，可以绘制120×120px圆角矩形、27px圆角半径代替。

在App Store上有个“7分钟健身”的专题，本篇我们就以此为产品案例来学习一个iOS应用图标的绘制过程，在后面的篇幅中我们再来讲解Android应用图标的绘制方法。

寻找隐喻

隐喻是在彼类事物的暗示之下感知、体验、想象、理解、谈论此类事物的心理行为、语言行为和文化行为，即人们看到某样东西或听到某件事情能够马上在大脑中形成联想，例如当说到健身，我们就马上想到强壮、健康、热情、肌肉、秒表、跑步机等。

竞品分析

在同类应用中存在大量相似的应用图标设计，如何保持应用图标的唯一识别性非常重要。唯一识别性不单单是指图形与其他应用有所差异，让用户在脑中形成思维模式，它还指图形表意是否清晰，是否符合用户的心理预期。图1，通常7个圆点首先想到Loading，难以与“7分钟”发生联系；图2，表意太宽泛，数字7可以是与7相关的任何事情；图3，虽然增加了正六边形背景，仍然表意不明确；图4，秒表与运动、健身相关，数字7在秒表图形中间代表着时间，因此这是表意非常清晰的设计。

提取关键词

我们从“7分钟健身”中可以提取“7”“时间”“健康”“身体”，并将这4个关键词描绘成下列图形。仔细分析这个产品后发现，它与主流健身应用在挖掘用户需求上有着很大的差异化，强调的是每天花7分钟锻炼身体。因此，“7分钟”才是这个产品的核心卖点，我们在设计应用图标时应突出“7”和“时间”的视觉表现。

抽象图形

确立了“7”和“时间”作为应用图标的图形，“7”的图形可以直接使用阿拉伯数字7,“时间”的图形除了要体现“时间”外，还需兼顾体现“健身”。我们发现“秒表”的图形能够同时体现这两个元素，即与竞品分析中的图4有着同样的视觉表现，因此要在图形上有所区别，绘制好两个图形后将两者相结合，即完成初步设想。

图标栅格线

使用iOS应用图标栅格线作为设计依据有助于建立和谐的图标绘制比例，并与iOS系统保持统一，下图为iOS系统天气应用使用了图标栅格线。

将图形放置在图标栅格上调整大小并注意图形与其比例协调，在下图中：图1比例过小；图2视觉重心偏上，因为图形的中心点并不在图形的圆心，因此不能与图标栅格同心圆；图3视觉重心偏下，因为图形的重心并不在中轴线，因此不能与图标栅格水平居中对齐；图4比例协调，图形略微靠上使得视差平衡。

丰富细节

“7”与“秒表”的组合图形并不具有唯一识别性，我们还应从颜色、质感、背板等着手丰富图形的细节，建立起应用的产品气质。首先，7分钟健身强调轻松训练，并非高强度的激烈运动，因此健康的绿色比燃烧的暖色系更加适合作为应用的主色。接着，浅色或线性渐变色的背板过于普通（第1步和第2步），使用径向渐变能与大多数的应用形成差异化（第3步），给背板增加光芒万丈的视觉效果，使其更加具有动感和活力，这就是7 Minute Workout Challenge的应用图标（第4步）。

多场景测试

将120×120px应用图标设计终稿放大至1024×1024px，交付开发工程师提交至App Store上架，正确的图标设计稿应是直角矩形，iOS会自动应用一个圆角遮罩将图标的4个角遮住，假如图标设计稿自带圆角，就有可能露出图标透明区域。

此外，应用图标还会以不同的分辨率出现在不同场景中，例如在iPhone 7 Plus上需@3x的图，即将120×120px放大至1.5倍；在iPhone 7的设置页需58×58px的图，即将120×120px缩小。将大图缩小成为小图，一些细节就会丢失，使画面变得模糊，因此设计师应对小尺寸图标进行细微调整，去除不必要的装饰元素，以确保应用图标在小分辨率应用场景下也能保持清晰的辨识度。（注：下图非实际大小，仅表明不同分辨率的比例关系。）