理解与设计自适应图标 —— 自适应图标入门指南

理解与设计自适应图标 —— 自适应图标入门指南

本文翻译自我们的老朋友 Nick Butcher 的文章 Understanding Android Adaptive IconsDesigning Adaptive Icons.

上. 理解篇

在 Android O 中, Google 引入了自适应图标 (Adaptive Icons) 作为新的应用图标格式. 为了更好的理解 Google 此举包含的意义, 我们不妨先来看看自适应图标被用来替代了什么.

在 Android 图标设计指南进化的进程中, Google 总是希望大家采用独特的外形. 当然, 我是非常喜欢独特外形的. 我一直认为, 独特的外形确实能够帮助用户定位他们想要打开的应用. 如果你想要怀旧一番, 不妨去听听我和 Roman Nurik一个老视频里关于这个话题的讨论.

这里是 Roman 为我制作的 Plaid 设计的 「传统」 图标. 我相信她独特的外形可以让她鹤立鸡群, 跃然而出:



Plaid 的图标. 这也是我认为独特外形可以一目了然的理由.

但世间除了光明总有阴影. 在独特外形的世界里, 近乎毫无限制的自由造成了毫无限制的混乱. 当每个应用都自行决定外形, 尺寸以及阴影 (阴影是图标自带的), 那么不可避免的后果就是她们之间有可能变得大相径庭. 下面就是一个仅仅使用来自 Google 的图标制作的, 能展示这种状况曾经有多么糟糕的范例:



感谢 AndroidPolice 供图

虽然上图已经是来自 2012 年的老古董, 而现如今情况已然改善了不少 —— 尤其是在 material design 中加入了相应指导后 —— 我依然认为现在的 Android 系统仍旧将太多的责任担在了开发者肩上; 给予他们过多的自由则有损全局体验.

当我们创造一个新的应用时, 我们的视野会被她完全占据. 我们在她身上耗费巨量的心思以让她致臻完美与独特. 但是此时我们的想法便过于孤立了. 任何应用都不可能脱离系统而存在, 而在系统中, 这个应用与其他应用并存, 而你的应用需要和其他应用打好关系. 当你需要和其他应用打好关系时, 一个格外突兀的图标就会产生严重的影响. 因此, 比起理想的状况, 现实往往是以此终结:



理想对现实: 当所有的东西都 「独特」 时, 便没有 「独特」 可言了.

对于这种现状, 主屏应用和厂商门便开始各显神通: 第三方主屏应用往往提供各种图标包供君选择以替代应用自带的图标或者把她们的尺寸统一; 而手机厂商则倾向于选择给图标加个背景, 来强化他们的一致性与彰显自己的品牌.



三星的主屏给所有应用加上了一个方圆形背景. 图源 CNet.

对于渴望统一图标形状与尺寸的心情我是非常理解的, 但是这种罔顾应用开发者心情调整应用图标的行为往往得不到最好的结果.

Android 7.1 中引入了圆形图标 roundIcon, 试图造就某种程度的一致性, 但是这对于手机厂商们希望让自己的设备看着独特毫无帮助 (比方说, 索尼和 Pixel 都只支持圆形图标), 也缺乏各种变数, 开发者也完全可以搞一个不知道什么形状的图标然后指鹿为马: 这是圆形的!

我将这种状况总结为, 主屏与图标间缺乏明确定义的, 让主屏可以正确显示图标的 「契约」. 在完全的图标设计自由与希望获得和谐一致的愿望之冲突中, 现在的方式把责任推到了错误的地方. 主屏应用试图重设尺寸但是不理解内容, 比如一个图标里什么是至关重要的而什么是拿来占地方的. 而应用图标则需要跟上 material guideline 的指导来确定它们的尺寸/边距/阴影等元素都是正确的. 我认为自适应图标的角色就是一份清晰明确的 「契约」, 让应用提供的资源以及主屏使用他们的方式都更加正确.

对于图标设计者而言, 失去自由是显而易见的结果. 我想这更多是一种转变而不是削减. 自适应图标引入了更有趣的新制约, 开启了一道通往完全不同的世界的大门.

下. 设计篇

基础

▏形状与尺寸

自适应图标的尺寸是 108dp × 108dp, 但是遮罩的尺寸为最大 72dp × 72dp. 不同的设备可以提供不同的遮罩, 但一般来说都是凸多边形, 半径最少 33dp.



关于遮罩会如何生效的简单例子.

因为遮罩的最小半径是 33dp, 你可以认为整个图形中心的 66dp 直径圆中是一个安全区, 在此区域内不可能会被裁切.


参考线


参考线的形状是用来帮助你确定图标视觉中心与比例的网格. 参考线里的图形分辨是:

  • 直径为 52dp 和 32dp 的圆形
  • 边长为 44dp, 圆角为 4dp 的正方形
  • 边长为 52dp × 36dp 与 36dp × 52dp, 圆角为 4dp 的矩形

在文末附带的模板中, 你也可以看到这些参考线.

图层

自适应图标实际上是由两个图层组成的: 前景与背景. 两个图层的尺寸均为 108dp × 108dp; 背景图层必须是完全不透明的, 而前景图层可以是透明的. 前景图层覆盖于背景图层之上.


提供比遮罩尺寸大的两个图层给予了自适应图标产生有趣的视觉特效以及动画的可能性. 至于这些特效和动画会在什么时候派上用场就任君想象了 ¯\_(ツ)_/¯ 反正设备和主屏的决定权也很重要. 这里有一些很容易就能想到的简单例子: 平移视差, 或者脉动特效.


由于图标本身的 108dp × 108dp 会被遮罩裁切到最大 72dp × 72dp, 那么每边多出来的 18dp 就可以被认为是 「多余」 的内容, 仅会在动画里被显示.

注意事项

Material design 中提到的图标设计指南在此依然是生效的. 尤其是图标的结构, 阴影以及高光的部分. 但现在你可以给前景背景放上不同的元素来产生不同的效果.

我已经可以想象到很多图标会被改成商标拍到纯色背景上就算完事儿了. 这至少可以保证你的图标在所有设备上都正常显示. 对于我和社区而言, 最令人兴奋的是对于新规范里体现的各种有趣可能性的探索才刚刚起步. 已经有不少设计师制作出了令人赏心悦目的自适应图标, 下面我就提几点值得注意的思路.

裁切

因为自适应图标 「动态」 的天性, 你很难猜测你的图标会被套上一层什么形状的遮罩. 因此任何重要的元素, 比如商标什么的, 都应该待在重心 66dp 的安全区以内, 远离可能被遮罩裁切的边缘区域.

锚定背景

把某个看起来似乎是前景的元素放在背景上就意味着它会独立于前景运动. 比如计算器图标就把加减乘三个图标放在前景, 而高亮色上的等号则位于背景上:



不同层级的元素强化了层级关系.

把明亮的色块锚定于背景上为动效提供了更多有趣的可能性, 并营造出了一种深度感.

▏被遮罩的遮罩

我认为把前景图层作为遮罩是一个很有趣的想法 —— 固实的背景元素被前景遮罩裁切. 用 Google Play Store 的图标来做例子吧, 一种最为直观, 也最没有想象力的做法就是把三角形图标拿来做前景, 然后用一张白色背景了事.



「标准」 的前景设置

何不试试把四色组合作为背景, 而用一个镂空三角的白色前景的组合呢? 这种组合在静态时和之前的做法看起来是一模一样的:



把色块作为背景, 白色作为前景的替代做法.

这种设置方案可以让用户透过前景的镂空 「窥见」 背景颜色, 而单独移动的遮罩则会使动画中被披露的背景产生变化.



左图为普通的布局, 右图则是前景遮罩布局.


光与影

将光照于阴影布置在不同的图层上同样可以带来有趣的结果. 比如说, 在前景使用长阴影样式会使得前景在遮罩区域内移动时产生有趣的效果. 当光效被施加在前景而非背景上时亦然. 比如说, 「镀层光」 图层可以在前景中模拟一个光源. 把光源放在前景中可以保证动画中光源于阴影的位置相对不变.



前景长阴影与背景夸张光效的示例

注意, 不要搞出不符合常识的特效, 比如阴影从元素上脱离, 或者穿透背景元素什么的. 同样的, 牢记当你的图标与其他应用图标并排时, 奇怪的光源会造成不一致. 对于光源的使用, 最好还是参照 material design 规范.

幕后英雄

你可以试着把某个元素放在平时被前景完全遮挡的背景区域中, 这样它就只会在动效时被披露.



在动画中披露的元素.

资源与工具

这里是我的 sketch 文件, 你可以以此为模板创造自己的自适应图标. 它包括图标网格, 参考线图形以及安全区. 他们被作为 symbol 嵌入, 所以当你改动母版时所有被遮罩版本也会产生相应的变更以便预览.


如果你是 Ai 用户, 我同样上传了 Adobe Illustrator 模板.

除此之外, 你也可以看看这些额外的资源:

自适应图标练兵场

在开发自适应图标时, 我总会被一些由不同的前景背景组合产生的有趣或细致的动画特效惊艳到. 对于动画特效会被用在什么地方依然是一个开放问题, 但是至少在目前的主屏里我们是看不到这些特效的. 为了让大家更好的调查这一区域, 我做了一个微小的测试应用, 希望它有助于你评价你自己的图标:



试试看遮罩与动效在你的图标上看起来怎么样

这个应用会展示你设备上所有带有自适应图标的应用图标. 滚动会产生视察特效, 触摸其中一个图标会产生缩放特效. 你也可以自己调整特效强度和改变图标遮罩. 希望这个小工具能帮你预期你的图标将来在不同的设备上会是什么样子.

你可以下载 APK, 也可以来 GitHub 上看看源码.

适应并前进

希望这篇文章可以为你提供足够的信息与启发你设计出优秀的自适应图标. 作为一个用户, 我已经迫不及待看到我的应用们变得更一致了. 更令我兴奋的是, 我看到了很多来自社区的创意方案.

如果你是开发者, 并想看到更多关于自适应图标的东西, 请看如何应用响应式图标.

编辑于 2017-07-11

文章被以下专栏收录