浅谈设计师必看的图标和ICON设计指南(3)

4.1 iOS应用图标

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

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

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

4.2 安卓应用图标

安卓应用图标同样需要很多尺寸，主流需求是1024px、512px、144px、96px、72px、48px六种。设计师提供给程序员的同样是直角矩形，然后程序员通过代码进行切割使其变成圆角图标。

4.3 iOS应用图标设计流程

在我之前的设计作品中，有个“影记”的摄影社区APP，本篇我们就以此为产品案例抛砖引玉来学习一个iOS应用图标的绘制过程。

4.3.1 寻找隐喻

隐喻是在彼类事物的暗示之下感知、体验、想象、理解、谈论此类事物的心理行为、语言行为和文化行为，即人们看到某样东西或听到某件事情能够马上在大脑中形成联想。例如说到摄影，马上就能想到相机、快门、闪光灯、暗房等。然后通过这些联想词，去找一些气质相符的图片制作情绪版，通过情绪版可以感受到产品的调性，然后从中提取一些形状和色彩作为产品图标的主要造型。

4.3.2 竞品分析

应用市场各类产品不胜其数，在同类应用中存在大量相似的应用图标设计，如何保持应用图标的唯一识别性非常重要。唯一识别性不单单指图形与其他应用有所差异，避免创意撞车，让用户在脑中形成思维模式，它还指图形表意是否清晰，是否符合用户的心里预期。

4.3.3 提取关键词

根据收集的图片，创建情绪版，结合自己的产品提取关键词，然后就知道在接下来的设计中应该突出什么。我们从“影记”中可提取首字母“Y”，相机中的“快门”“信号灯”“开关机”，并依次将关键词描绘成下列图形。

4.3.4 抽象图形

确立了首字母“Y”、“快门/开关机”和“信号灯”作为应用图标的主图形，接下来将绘制好的3个图形相结合，即完成初步设想。

4.3.5 图标栅格线

使用iOS应用图标栅格线作为设计一句有助于建立和谐的图标绘制比例，并与iOS系统保持统一，下图为iOS系统天气应用使用了图标栅格线。将图形放置在图标栅格上调整大小并注意图形与其比例协调。

4.3.6 丰富细节

通过上面图形组合已基本完成应用图标的设计，接下来我们还应从颜色、质感、背板等着手丰富图形的细节，建立起应用的产品气质。“影记”作为摄影师分享佳作平台，摄影师们用的器材颜色大多以黑色为主，因此酷酷的黑色更适合作为应用的主色。然后，白色的信号灯过于普通，使用相机本身发出的橘红色灯光作为信号灯的颜色，使其更加具有动感和活力。整体像「消息气泡」的造型暗示可以在这里进行摄影交流。

4.3.7 多场景测试

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

△ 注：上图非实际大小，仅表明不同分辨率下的比例关系

此外，应用图标还会以不同的分辨率出现在不同场景中，例如在iPhone 8plus上需@3x的图，即将120px的图标放大至1.5倍;而在iPhone7的设置页需要58px的图，就需要将120px的图缩小。将大图缩小成小图时，一些细节就会丢失，使画面变得模糊，因此设计师应对小尺寸图标进行席位调整，去除不必要的装饰元素，以确保应用图标在小分辨率应用场景下也能保持清晰的识别度。

APP中的功能图标

除了产品图标，还有一种图标被称为功能(或系统)图标，功能图标指的是担负一定功能和含义的图形，一般来说需要像文字一般地被人迅速理解，所以表达方式上不适合特别复杂，如微信底部四个系统图标就使用了比较简洁的线性风格。

功能图标在UI设计中占据非常重要的作用，几乎存在于每一个应用界面中，无论是在导航栏、工具栏或标签栏，还是在首页、详情页或个人中心页，都随处可见功能图标的身影。功能图标具有明确的表意功能，其作用在于替代文字或辅助文字来指引用户进行快速导航，它具有图形化的符号，比文字更加直观，符合普罗大众的认知习惯，有助于用户形成记忆思维，提高应用的易用性。同时设计精致、风格统一的功能图标提升了产品视觉效果，不但给用户带来视觉上的愉悦感，还带来了良好一致的使用体验。

在 @1x 一倍图设计模式下，以 24px 为网格基准的话，常使用的图标粗细有：1px 、1.5px、2px、3px，1.5的粗细常用于高倍屏，如近几年旗舰机的手机屏幕或者 retina电脑屏，否则像素渲染会比较模糊。

5.1 图标栅格

图标栅格被用来促进图标的一致性，以及为图形元素的定位建立一组清晰的规范。这种标准化的规范造就了一个灵活但有条理的系统，令所有的设计保持协调、一致和美学的视觉特征。

5.1.1 像素栅格

基于像素划分的像素栅格是最基础的栅格系统。在绘制图标时，我们总是希望将对象对齐到每一个像素，特别是直线。因为像素对齐不仅仅可以更好地渲染，还能让图标更加整洁、舒服。下图展示了Sketch 中像素对齐和没对齐图标之间的差异：

左：像素不对齐 右：像素对齐

可以在绘制图标之前就先设置好栅格，在Sketch和Figma中都有相似的设置。

Material Design官网给出了图标的辅助网格，为设计师绘制小图标提供一致的标准。图标网格通常包含三部分内容：活动区域，修饰区域，关键线形状。我们以此为例进行介绍。

活动区域：是指图标主要内容的绘制区域，通常而言图标图形的主体都在该区域内。

修饰区域：是指用于承载部分图标的一些出格图形，某些视觉占比较小的图形可以延伸到修饰区域，但不能超出网格范围。

关键线形状：关键线形状是网格的基础。有4种关键线形状，利用这些核心形状作为向导，你可以在产品图标的设计中保持一致的视觉比例。

如 Material Deisgn 的图标网格中，活动区域宽度为 20dp，修饰区域宽度为 2dp，4 种关键形状分别对齐于 20pd和 18dp 和 16dp的边缘，对齐于像素。

上图为基于网格和关键线形状绘制图标的示例：如左侧「剪切板」图标，整体核心图形部分以网格中的正方矩形为模板，顶部的挂钩图形视觉面积较小，部分内容伸入修饰区域。右侧「相机」图标以长方矩形为模板。

5.1.2 视觉栅格

除了像素栅格，还有视觉栅格。视觉栅格可以帮助我们找出图标的中心在哪里，以及人眼能感知到它有多大。圆形和弧形物体看起来会比正方形更小。因此我们应该在绘制图标时设定一个固定大小的容器，这样它们在导出时就都是相同的尺寸了。添加内边距可以让图标在视觉上看起来更加平衡，避免以后开发时还需要重新调整。

5.1.3 视觉重量

绘制图标不光要满足物理上大小统一，还要实现视觉上大小统一。设计师要懂得调节图标大小以避开视觉上的觉错。

UI界面的图标通常可以近似的看做以下的基本格式之一：横向矩形，纵向矩形，对角矩形，圆形，三角形，正方形。如果把它们做成高斯模糊效果，你就会发现它们具有相同的视觉重量，因为它们变成或多或少相同的斑点效果。

根据图标形状，将它们放在相应的框架中。你就会发现，方形图标比三角形或细长图标更紧凑。