如何设计自适应图标

1,090 阅读7分钟
原文链接: sspai.com

译者注:

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,请访问 此链接 下载模板。

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

Adaptive Icon Playground

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

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

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

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

自适应,更进一步

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

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