按:「研究所」是《科技漫游》新增的栏目。本栏目旨在发挥「打破砂锅」的精神,对软硬件的设计原理和应用做详细解读和评述。这或许不会像教程类文章那样帮你快速解决具体问题,但意在「授人以渔」,帮助你加深对于技术的理解,从而触类旁通、举一反三。


应用启动动画是我们每天都在接触的东西,但对国内用户而言它也是感知最不明显的存在——它的应用价值早已被各式各样的开屏广告榨取得一干二净,从任何角度来说都谈不上「优雅」。

正是在这么一个国内用户恨得咬牙切齿、总想除之后快的地方,Google 借 Android 12 带来了一点新东西:专为启动画面动画体验打造的 SplashScreen API

考虑到目前各厂商 Android 底层版本的升级和适配越来越快,基于 Android 12 的定制系统中却几乎没有厂商对这一特性进行强调和跟进。为了不让它像当年 自适应图标 那样成为对国内 Android 生态而言几乎没人愿意「搭理」的存在,我还是决定从一名热心用户的角度出发,写篇文章和大家展开聊聊。

启动动画是「魔鬼」吗?

不聊《原神》,当下大部分智能手机都是「性能过剩」的。点开一个应用需要等待加载的情况越来越少,对支付宝这类金融支付工具而言,点开即用 更是开发者和用户都更愿意见到、也一直在追求的启动体验。

因此早年会有「Splash Screen 是魔鬼」这种言论也不足为奇。在移动互联网崛起初期、智能手机尚未成为内容消费主要载体的时代,那些「用完即走」的工具类应用并不需要、也没必要拥有过于冗长和华丽的启动动画。围绕启动动画所诞生的需求是后来才有的,现如今,在点击图标和看到应用主界面这二层关系之间,启动动画存在的意义早已不是为了等待应用完成主界面加载。

例外情况也有,一般都与网络请求相关:要么应用本身确实很糟糕,比如浏览器套壳的那种应用,它们的确需要加载这么久,要么这些应用确实需要预先加载内容,比如微博、新闻客户端等。

总之,我们目前依然还能看到启动动画这位「魔鬼」在人间行走,主要有这么几个原因:

一方面是品牌表达。在启动动画播放的这段时间里,向用户展示品牌标识,比如微博早年的「随时随地发现糟心新鲜事」;当然也可以展示其它品牌,比如现在的各种广告:

图:人人都是产品经理

另一方面则是提升系统体验的需要。舒适、自然的启动动画,能够在启动器主屏和应用主界面之间增加缓冲,既能强调系统和应用二者之间的层次,也能为桌面、图标、应用这三者之间的跳转赋予更多视觉上的「流畅」体验。

需要区分的一点是,目前大部分定制系统的桌面设置中提供的「启动动画速度」设置,所解决的其实都只是图标和启动画面之间的衔接问题;而本文所讨论的「启动动画」,则是从图标放大为满屏窗口到应用主界面加载完成这一流程的全过程。

层次与串联:理解 Android 12 的新特性

为什么厂商至今只做前半部分而忽略后半部分,原因大家应该都明白。而 Google 作为 Android 的核心「工程师」,自然得从更高的层面构思整个应用启动体验这件事:

比如如何将应用图标、启动画面和应用主界面这三个环节自然、优雅地串联起来

这就是 Android 12 引入 SplashScreen API 想要解决的问题。从品牌表达的角度来说,当我们点击用自适应图标做出好看的图标后,图标上的品牌特征、视觉图案如果能够自然延展至启动画面,然后引导用户进入采用 Material Design 3 精心打造的、具有品牌辨识度的主界面当中——这就是 Google 一直以来想要打造的完整体系,整个体验也应该是极具个性、同时又非常令人舒适的。

什么都不如一个例子直观:

Disney+ 在 Android 12 中的启动效果

以尚未适配 Android 12 启动动画的 Disney+ 为例,在上面的应用启动流程中,无论「将应用图标放大至屏幕中央」这一步骤是否存在1,图标中的品牌标识和启动画面中 Disney+ 的品牌标识虽然相似,但显然是没有任何衔接的(尽管 Disney+ 在启动画面的这个 logo 动画非常精致)。换句话说,在应用图标和启动画面这两个环节之间,缺少了一个能够形成前后关联、在视觉设计上提供呼应的手段。

为此,Android 12 对全局启动画面的布局进行了重新设计,新的启动画面由窗口背景、动画图标和图标背景三部分组成。

在下面这份官方参考图中,抛开其它设计上需要开发者注意的区域(比如 ② 所对应的可选图标背景、③ 所对应的前景遮罩等),① 所对应的部分就是开发者可以根据实际需要进行展示的启动动画(比如横跨 Disney logo 上的那颗星星);如果开发者没有进行适配,那这个位置便会默认提取应用在桌面启动器中的实际图标,也就是大家在上面那张图中首先看到的放大并居中显示的 Disney+ logo。

启动画面的可自定义元素 | 图:Google

另外,Android 12 的新版启动画面是全局且强制的。也就是说,即便开发者选择忽视这一特性,他们的应用在 Android 12 上也会按照新的启动动画流程「走一遍」:点击图标后,应用在启动器中的图标会被放大至屏幕中央,待 Android 12 的默认启动画面结束后,再播放应用本身的启动画面(比如广告)……

铁路 12306 在 Android 12 中的启动效果

对那些没有进行自适应图标适配的应用来说,新的启动效果堪称「公开处刑」。更糟糕的是,如果应用本身就有多个启动画面,比如先放品牌标识、再放开屏广告,在未经改动的 Android 12 中,进入应用界面前我们就得连看三次启动画面了。

有意思的是,这里 Google 和定制系统的手机厂商再次出现了分歧,或者说大多数厂商根本就没有人负责审读 Android 系统的更新和迁移规范:为了避免用户遇到上面提到这种启动体验,Google 给出了多种启动画面调整方案,建议开发者隐藏、移除或是通过 SplashScreen API 提供的方式来展现品牌标识部分,在最理想的情况下,启动画面会出现一次,最多也只会播放两次,即品牌标识加开屏广告。

冗长的启动画面体验自然是不好的,因此 Google 也建议开发者多用显示界面占位符

而在所有可能的处理方案中,手机厂商目前大多选择了最「省事」的那一种:完全去掉 SplashScreen API,这样一来启动画面依然只会播放两次 —— 换句话说,咱当 Android 12 完全没有这个新功能就好。

真的好吗?我记得国内厂商大概从 2019 年开始就有在聊「生态」的了。作为「生态」玩家,在这种时候站出来推动国内开发者适配一下是不是更好?

优秀的适配案例指北

我们认为,优秀的适配案例至少应该满足以下 3 个条件:

  • 自适应图标:可以保证在 Android 12 上的基本启动动画效果
  • 漂亮的动画:与启动器图标有所呼应,同时能够动态展示品牌特质
  • 合理的衔接:用合理的退出效果衔接主界面,保证完整的动画体验

以此为标准,本文也简单收录一些优秀案例。

Google 系应用

为了给自家 Pixel 6 系列造势,今年 Google 应用不仅在 Material You 上早早起势,针对 Android 12 启动动画的适配也推进得相当迅速。

关联阅读:Android 平台的颜值标杆:Material You 应用大赏

尽管细节各不相同,但 Google 自家应用的启动动画设计思路基本一致。Google 应用在 Google Pixel 的启动器中可以开启「带主题的图标」,这套图标采用 Material You 壁纸取色作为主色调,能够带来风格更加统一的主屏视觉效果。

采用 Material You 动态色彩的主屏图标

因此在自家应用的启动动画上,Google 采用了一种能够延续启动器图标风格的动画方案:以应用图标主体部分的单色图案为主体,应用启动过程中,大家更为熟悉的彩色版本图标由内而外完成对单色图案的色彩填充。

Google Drive 就是个很直观的例子,如果启动时网络状况不佳需要加载文件列表,我们还能看到主界面有用上面提到的界面占位符:

Google Drive 的启动动画

据不完全统计,目前 Google 自家应用在 Android 12 上采用这种启动动画的已经有不少了,从最基础的日历、联系人到新闻、Google Drive。

这当中最值得称道的应该是 YouTube:虽然和其它应用一样采用了色彩填充式的启动动画方案,但 YouTube 采用了从左至右的填充方向,配合缩放效果,营造了一种与播放按钮箭头方向一致的动态感。

YouTube 的启动动画

第三方应用

虽然第三方应用在 Pixel 启动器上还无法像 Google 应用那样拥有 Material You 动态色彩图标,但借鉴上述思路实现启动动画效果的应用已经有不少了。

这当中最令我个人印象深刻的是 TachiJ2K 这款漫画阅读器:

TachiJ2K 的启动动画

TachiJ2K 图标的主体图案取自日语「立ち読み」的第一个字,启动动画则在此基础上运用色彩填充式动画,填充过程则像是一笔一划将这个字写了出来。最后从顶上冒出的那个小皇冠既是对应用图标的完美重现,也让整个启动动画多了几分俏皮感。

色彩填充以及在此基础上的各种变体,算是目前比较复杂但效果最为好看的方案了。除此之外,新的启动动画也是开发者对抽象图标进行具体演绎的一次绝佳机会,比如纯纯写作。

纯纯写作的启动动画

值得一提的是,虽然纯纯写作可能是国内首款适配 Android 12 启动动画的应用,同时也是本文的创作契机之一,但现阶段的动画实现在我看来其实并不完美2——就像上文所介绍过的那样,好的启动动画应该具备能够让用户将其与应用图标关联起来的地方。

纯纯写作的启动动画虽然让我们终于一睹了图标中那个剪影的真容,但仔细观察会发现,动画主体和应用图标不仅轮廓细节上无法严格对应,在风格上也有着较大的差异。动画的色彩和设计偏卡通,应用图标选择的则是较为写实的长投影风格。

最后,如果开发者不想在启动动画这件事情上花太多心思,Pano Scrobbler 和 1Password 是两个非常值得参考的案例:因为应用图标主体部分采用线条图案设计,Pano Scrobbler 直接将放大后的图标主体做成了启动动画,如此一来,应用启动的过程同时也是这个风格诡谲的图案被直接放大展示给用户的过程。适合图标图案以集合线条、图形为主,有设计细节的应用参考。

Pano Scrobbler 的启动动画

1Password 对动画衔接的思考也有可取之处,在运行 Android 12 的设备上启动时,你能看见从桌面图标放大的 1Password logo 在画面中居中、短暂延迟后被向上推起(用户进行身份验证)、最后重新居中并旋转解锁的全过程。真正实现了从桌面图标到解锁进入应用主界面的完美融合3

回到那个老问题

第一次在 Android 12 上运行精心适配过新版启动动画效果的应用时,很多人应该都会和我一样,感叹这种设计思路所带来的流畅与自然。对开发者来说,它是一次将应用图标「盘活」的机会,也是展现美术设计、提升品牌辨识度的绝佳契机;对用户而言,启动应用过程中原有的微小段落感也进一步得到了弥合,从桌面图标到应用主界面,那种「从哪里来到哪里去」的递进关系变得更加丝滑。

但比较遗憾的是,除了文本提及的 Google 自家应用和部分第三方应用,目前适配了新版启动动画的 App 实在不多。除了上文已经提到过的厂商有意忽略,Google 依然采取非强制要求的形式,也注定了它可能会像自适应图标那样,逐渐成为国内应用从未见过的「新东西」。

因此如果你在使用过程中遇到了适配得比较好的应用,不妨在评论区补充分享。

关联阅读:Android 平台的颜值标杆:Material You 应用大赏

参考链接: