Adaptive icon 二设计自适应图标

转载自：https://sspai.com/post/40223

译者注：

Android O 引入了名为「自适应图标」（adaptive icon）的全新应用图标格式。自适应图标可以统一应用图标形状，允许开发者使用新特效，进而使设备的使用体验更为连贯。本文将会阐述自适应图标的工作原理，还会介绍设计自适应图标的一些技巧。

想要了解自适应图标的来龙去脉，参见本系列第一篇文章：《理解 Android 的「自适应图标」》。

作者：Nick Butcher

原文链接：Designing Adaptive Icons

基础

大小和形状

自适应图标大小为 108dp * 108dp，但使用遮罩后，最大尺寸为 72dp * 72dp。不同设备可以使用不同遮罩，但遮罩形状均须为凸多边形，且从遮罩中心到边缘的距离不得小于 33dp。

使用不同遮罩的效果如图

由于遮罩形状有最小尺寸，可以以遮罩中心为圆心，作一直径为 66dp 的圆，作为安全区域，以确保内容不会被裁掉。

圆角矩形遮罩内的安全区域

参考线（Keyline）

图标的参考线

形状参考线（keyline shape）是图标设计网格的基本构成，可以帮助你的应用图标与其他图标保持视觉比例统一。形状参考线包括：

圆形，直径 52 dp 或 32 dp；
正方形，44dp * 44dp，圆角半径 4dp；
矩形，52dp * 36dp 或 36dp * 52dp，圆角半径4dp。

本文末附有模板。

图层

自适应图标一般包括前景层和背景层两个图层。二者大小均为 108dp * 108dp。背景层不透明度应为 100%，前景层可以设置其他不透明度。两个图层应以「前景层在上，背景层在下」的方式堆叠。

设计图标时，应将元素置于大于实际显示大小（即遮罩大小）的两个图层中；如此，便可以实现一些很有趣的视觉效果和动画。但实现什么样的效果、何时实现，则要由设备制造商和启动器的开发者来决定。比如说，可以实现视差效果（如图左），也可以分别转换、缩放图层，再应用遮罩，以实现弹跳效果（如图右）。

原本大小为 108dp * 108dp 的图标被遮罩裁切为 72dp * 72dp，每边余下的 18dp 空间可以放置只在动效中呈现的「额外」元素。

设计时的注意事项

创建自适应图标时，Material Design 设计指南中创建产品图标部分基本适用。具体来说，图标的元素构成，包括阴影和光泽（finish）都得以保留，但现在，元素可以放置在前景层或背景层，以营造不同效果。

自然，很多图标只需要把商标放在前景，用纯色做背景，就算完工了，效果也不错。这样一来，图标在设备上的显示效果也比较理想。但真正有意思的是，我们可以集思广益，共同发掘新格式中的限制，汇聚奇思妙想，让图标变得更有趣。下面是一些注意事项，以及一些可以开发的点子。

裁切

自适应图标是动态图标，所以你不知道图标会加上什么形状的遮罩。因此，务必将商标等最重要的元素置于安全区内，尽量远离遮罩边缘。

背景锚定

将一些应该出现在前景中的元素置于背景，可以使其动作独立出来。例如，下图计算器图标中，大多数元素都在前景，但绿色块上的等号则位于背景：

将元素置于不同图层上，强调图层结构

如此一来，便能营造一种奇妙的动感：你的视觉会多关注亮色块，而亮色块的移动小于前景元素，能给人以深度感。

把遮罩「遮罩」掉

将遮罩元素置于前景也能创造有趣的效果。试想几种制作 Google Play Store 图标的方式。首先，可以用最「显而易见」的方式，也就是将彩色三角形置于前景，再加上一个白色背景。

「标准」的「彩色前景 + 白色背景」

然而还有另一种方法，就是用彩色背景，和一个白色的三角形遮罩作前景，可以得到相同的静态效果：

另一种方法，彩色背景 + 遮罩前景

这种设计，可以让透过遮罩「露出来」的彩色部分独立于遮罩运动，便可以在运动、缩放时，显示不同的部分。

左为常规构成，右为遮罩作前景

光与影

将光效与阴影置于不同图层，可以产生很奇妙的效果。比方说，可以给前景元素加上长阴影，在遮罩范围内移动时就会更具动感。同样地，光效也可以加到前景，而不是嵌在背景中；例如，可以在前景加一层「光泽」，模拟光源，移动时，因为其位于背景层之上，移动速度也有区别。

示例：前景阴影和（非常浮夸的）光源打在背景层上

注意，这样营造的效果，必须要合乎情理，避免出现阴影与前景元素脱节，或被背景元素遮挡的情况。还要记住，很多图标可能会同时出现，所以，上述光效要谨慎使用，以 Material Design 设计指南为纲。

藏在后面

你可以将元素置于背景层，使其静止时完全被前景遮挡，仅在运动时显现。

隐藏元素，仅在运动时显现

资源和工具

你可以访问此链接，下载我提供的 Sketch 文件，把它作为模板来创建自适应图标，其中包括图标网格、形状参考线和安全区域。自适应图标以符号（symbol）的形式存在，改变主元素的同时，会更新其他副本，以便预览使用不同遮罩时图标的样式。

如果你使用 Adobe Illustrator，请访问此链接下载模板。

我还找到了一些资源，有兴趣的可以看看：

自适应图标预览工具
Affinity Designer 模板
Bjango 模板，其中包括自适应图标
Figma 模板（需要登录）

Adaptive Icon Playground

开发自适应图标的过程中，我发现，很多设计细节都是通过观察前景元素和背景元素如何互动、如何运动而产生的。但这些因素还不能确定；我们还要看设备制造商和启动器开发者如何配置、应用自适应图标。为方便大家先做一些了解，我制作了一个测试应用，可以帮助大家在制作图标的同时，心里对图标可能的显示方式有个底：

可以测试不同的遮罩和动效在你的图标上是什么效果

这款应用可以显示设备上安装的所有使用自适应图标的应用。左右划动可以应用视差效果，点按图标则可以应用缩放效果。你可以配置效果强度，还能改变遮罩样式。通过这个工具，你就可以预览你的图标在不同设备上是如何显示、如何运动的。

你可以在此下载 APK 文件，或在此下载源码。

自适应，更进一步

希望本文能够帮你了解如何设计自适应图标，并对你有所启发。作为一名用户，我非常期待自己设备上的应用体验更为连贯。但更令我激动的是，我们齐心协力，一定可以发挥无限创意。

如果你是一名开发者，想要制作自适应图标，敬请期待本系列文章第三篇：《应用自适应图标》。