Matrix 首页推荐
Matrix 是少数派的写作社区,我们主张分享真实的产品体验,有实用价值的经验与思考。我们会不定期挑选 Matrix 最优质的文章,展示来自用户的最真实的体验和观点。
文章代表作者个人观点,少数派仅对标题和排版略作修改。
在体验 ColorOS 15(下文简称「c15」)的过程中,我注意到它的部分动画有一点奇怪,但当时我并没有非常深入地去理解 c15 的曲线设计意图。直到有了官方给出的图例可以参考,作为动画爱好者,我自然是来了兴趣。更加深入地思考加上每天多次刻意的动画系曲线观察,我想我应该也能将我的想法比较通俗易懂地解释出来,带大家些微窥见 c15 设计的一角。
再加上 c15 新推送了官方堆叠桌面和 3×1 文件夹,真的是猛男落泪,什么叫「OTA 之神」啊😭1。
当然了,在文章开始之前简单说明几点:
- 本篇文章并非专业测评,同时并不讨论流畅度。动画作为一个非常主观的内容,是很难满足所有人胃口的,我在这里抛砖引玉,如果您能留下一两句金玉良言,不胜感激。
- 由于目前 c15 堆叠后台处于内测版本,因此本文对未来版本可能出现的改进不做保证,文章内容仅代表系统桌面 15.6.3_241a057_250106 版本下的体验。
- 测试时一加 12 的系统版本为 ColorOS PJD110_15.0.0.502(CN01V30P01),小米 14 系统版本为 HyperOS 2.0.101.0(已 root,测试中如与官方有动画上的区别会特别说明)。
- ColorOS15 以下简称 c15,HyperOS2以下简称 hy2,以此类推,ColorOS 14 则简称c14,HyperOS 1 则简称 hy1,请您知悉。
好了,就此开始吧!
薛定谔的阻尼
首先咱们来谈谈 c15 的阻尼问题。我认为 c15 的阻尼是不够统一的,我画了一个简单的图示供你参考:

在前期手指未松开时,动画会非常非常黏滞,就如同有什么东西在拉扯着窗口一般;而松开手指后阻尼会突然减弱,窗口开始加速运动。这种阻尼的不统一是导致视觉观感不佳的主要原因。次要原因自然是曲线设计的偷懒,运动空间被卡得很死;c15 的动画运动路径,在松手的一瞬间也会顿一下,明显可以看出系统切换了动画策略2。
有朋友跟我说502版本修复了抛出去的曲线问题,确实修了,但只修了一点点。而且在测试连续多个 APP 打断动画的时候,你会看到这些图标在桌面飞得老高。
突如其来的加速应该算是 ColorOS 系统的特色了。
就和当初 MIUI 是唯一一家采用先运动后展开动画效果厂商3一样,ColorOS 15 的加速效果也非常有特点,如果能将这个加速改得更加柔和一些,和手指移动时黏糊的感觉中和一下,就会变成「黑厂4」最为鲜明的特色之一——轻快。
因此我们可以看出 c15 和其他 iOS、Hyper 等系统在动画实现方式(或者说理念)上的不同:如果我们把 APP 想象为一个个放在规整架子上小球,那么厂商们的做法就是给 APP 绑上了橡皮筋,当用户上滑退出释放手指时,就用橡皮筋将 APP 扯回来,同时顺带考虑了重力和空气阻力,因此在视觉上可能会呈现为右边这样:

而在 c15 设计师的思考当中,扔上去就应该直接做斜抛运动——你们都是歪门邪道!所以 c15 删掉了大部分橡皮筋的弹力,只在超出回弹的时候才能看到依旧存在着的这根橡皮筋。而且 c15 给我的感觉就像一个能将球精准投进篮筐的篮球运动员,这也和其他厂商的理念并不相同。
设计师的思路其实是完全没错的,甚至可以说是 c15 的一大特色,但落实的时候应该是用力过猛了。因此你可以看到非常黏糊的前半截动画,和滑得飞快、抛得老高的中段动画。我认为再收敛一点,再将速率计算优化一下会更好。
仔细观察运动路径后也会发现,其他厂商也并非完全是上图所示那样:c15 的定义是松手后再计算斜抛运动曲线,而其他厂商的定义则是从上滑的那一瞬间起就时刻为斜抛运动做准备。同时,视觉上给我的感受是 c15 的运动锚点在手指处,所以视觉上会把 APP 抛得非常高,其他厂商的运动锚点在 APP 卡片的中心位置,因此斜抛运动的曲线不明显5,但并不是右图那样抽象。
我们再简单来画个受力分析:

一开始那黏糊糊的手感,和后面完全不在乎牛顿的重力反差感太强,这也是我说 c15 阻尼调教不和谐、不统一的原因之一。
其他厂商是怎么做的呢?

首先,手指移动的优先级保持最高;其次,多加入了橡皮筋的考量。感觉有点抽象了?那好,我用一句话来概括一下:
c15 在手指松开前和松开后各自做了一套运动轨迹,而其他厂商共用一套曲线,这也是 c15 动画有割裂感的本质原因。
我们再来观察一下友商们的 y 轴运动路径,非常宽松,例如:

而 c15 对 y 轴的运动方向就卡得非常死:在往旁边抛的时候,没有惯性往右边再走一点再回到原本的位置,而是直接开始往回收。给人一种顿了一下的感觉。同时你可以观察到,APP 在打开的时候图标也往上跳了一下,可能这样才会符合 c15 设计师口中的自然抛物曲线吧,但我的意见是打开 APP 时可以不用非得遵循这种曲线。
上面是上半屏 APP 的动画分析,接下来是下半屏。下半屏幕的动画曲线我只想说:拖动距离短,那么很像 hy1 的超重超粘手感,如果你用力抛,阻尼又会突然瞬间减弱并运动加快,看着有一种说不出的「闪现感」。
但有一说一,下半屏的曲线做的比上半屏更好。
阻尼方面的问题不仅仅出在 APP 动画上,还出现在各个角落,其实阻尼加多了并不会让动画看起来更丝滑,反而会显得拖沓不干脆,在控制中心的回弹曲线是相当优秀的,如果阻尼再弱一点、速度再稍微快点就非常完美了。

然后就是 APP 内的信息流滑动阻尼,同样,我画了一个粗糙的示意图来帮助大家理解。

c15 再次采用比较线性的减速曲线,导致视觉上如同一下子在冰面上飞出去一般「滑过了头」,而末尾停下来的感觉更是突兀地像按下了暂停键,不符合真实物理规律。
在 c15 的很多地方我们都能看到上图中的线性减速/加速曲线6,并且 c15 的动画速率在默认的「适中」档位实在是有些过慢了,在部分场景下借用的原生过渡动画又非常快速,导致视觉上的割裂感是比较严重的。
举个「栗子」:在上滑退出时如果桌面正好没有该 APP 的图标,那么 APP 页面会在松手后顿一下,线性加速淡出和线性运动路径,而背景模糊非常的自然、非常的灵动(忽略掉那个背景抽搐的话),这种反差感像是写到后面程序员不想写了,随便塞了个动画能跑就行的感觉。
小组件
c15 小组件动画曲线其实和 hy2 相差无几,只在上文中提到的手指移动时黏滞问题和速率有区别,但顶部的小组件还是有抛出问题,中部及以下的就没有这个问题。
还有,作为唯一一家负一屏小组件支持「从哪来到哪去」动画的厂商(虽然能看出是精简版动画),c15 依然值得表扬。
小窗动画
小窗动画可以说是我最不满意的。大片大片的线性动画和对不齐的圆角,让小窗动画的观感很差。

当然,三个点灵动的显示动画还是值得夸一夸的,还有优秀的触感适配7,但其他真没什么好夸的了,不如 hy2,甚至部分不如 hy1。
其次,澎湃优秀的逻辑完全没学到精髓:灵动的模糊、响应迅速不粘滞、连贯的非线性曲线和符合直觉的侧边小窗收起。mini 小窗更是重量级:我想把 mini 小窗收到侧边隐藏起来,因为挡住了主应用的界面,结果 mini 小窗居然收纳不起来8?
补充说明一下,这个屏幕边缘用空气墙阻挡的逻辑,我觉得只是另一种选择而已,这一点没有优劣之分,并且 c15 的 mini 小窗可以停留在屏幕上任何位置,这一点好评,但是有时候会因为空气墙而卡手,而且动画速率和曲线居然是固定的。hy2 的(其实 MIUI 就可以做到了)就非常灵动。
并且最重要的是,c15 只能同时存在一个小窗,这是最蛋疼的,但是好在后台小窗加油多开几个,hy2 是卡死了只能同时 2 个9……
接下来就是浮动小窗动画,全是线性动画:

在退出时,窗口完全无法跟随手指移动,这也是为什么我认定 c15 对 y 轴动画计算偷懒的原因。不过好处是你可以直接拖小白条来放大缩小小窗,这点挺不错:

横屏小窗的逻辑感觉有点重量级,我知道 c15 设计师想的是让动画「从哪来回哪去」,但是也请麻烦考虑下方不方便使用,我刚挪到右边的 mini 小窗一下又飞到左边去,实在是令人无语啊……
还有一个我很不满的点就是这挂起小窗的触发范围也大过头了吧,稍微一滑就给我切小窗去了……也可能是我没习惯?反正我经常误触小窗出来。
分屏动画
c15 分屏做得非常好,要是动画再精进一下,简直就是「最优解」级别的分屏。无论是「全景虚拟屏青春版」还是底层逻辑,都令人无可挑剔——咳咳,扯得有点远了,咱们还是讨论动画吧。
向左挂起分屏时,那灵动的回弹和柔和的曲线瞬间让我沉迷,点击一下恢复全屏时柔和的曲线再次让我上瘾,柔和且丝滑。贴心的 c15 最后还会给你一个 toast 提示防止你不会用,实在是太棒了!
点击 APP 时,c15 固定会将 APP 从底部弹出,既舒适又减少了 bug(点名某家至今没解决分屏黑条闪烁问题的厂商),长按小白点拖动窗口则可以切换为小窗。唯一美中不足的就是没有将小窗拖到顶部状态栏自动恢复全屏的功能(用 Hyper 用的)。
但切换的动画速率有点太快了,最后突然将小窗重新放大速率太快也略显突兀,建议团队再改一下。另外再提一点建议:咱要抄就抄个透,把分屏选项也给加进来呗?
接下来是我个人非常喜欢的「全景虚拟屏青春版」,它完美解决了分屏的显示面积小,难以同时对比的痛点。并且也可以将一个分屏缩小,另一个全屏,甚至可以切换分屏应用!非常优秀的逻辑。
编注:这部分交互可参考我们之前的专题页面。
总之分屏非常令我惊喜,c15 的分屏逻辑我愿称之为世界范围内的第一10。
多任务(含内测版堆叠体验)
分析的时候把内测堆叠版给我干出来了,这下好了,重新来吧:平铺版的各种特性和动画,我认为处在一个非常优秀的水平,只有三个点略作修改,即可达到近乎完美的水准。
- 底部图标出现时机太晚,提前一点应该会更好。在桌面唤出多任务时图标出现的时机就很好,把图标闪现消失改成跟随卡片运动消失/渐变消失就更好了。
- 下滑回到 APP 主界面加上一些阻尼和运动惯性,让视觉上看起来更舒适一些。
- 上滑清除卡片的动画有些拖沓了,稍微再快一点点就能达到一个舒适的速率。
接下来咱们讲讲内测中的堆叠多任务动画,这个问题不少,希望团队加油改进,让我们用上更完善的正式版。
首先,莫名其妙的阻尼再次出现。粗略转换为 v-t 图像大致是这样:

如图所示,红色的线为理想中的曲线,绿色的线为当前 c15 的堆叠动画曲线。
c15 的堆叠后台有一个特性,那就是不管你用多大的力,它都会确保最后停下来的时候正好在第一张/最后一张卡片上,因此无论你滑动快慢都会看到动画快速启动,随后较为快速地刹停,有点难受。
在理想的曲线当中,到达 t2 的时间点时如果卡片已经是最后一张,来一个非常灵动的回弹效果是不是会更加的漂亮?
然后便是过慢的速率调节。实在是太慢了,上滑 APP 停顿进入多任务时尤其明显。其实能看出是在模仿 iOS,但是速率再快一点会更舒适,动画太慢并不好反而会导致有黏滞感。
最后由于是内测版的原因,比较多的地方能明显看出闪现,希望后期继续改进。
这次 c15 对于新的堆叠后台卡片的脑门上加了和小窗一致的三个点,我觉得算是一种巧思,能比较好地融合进卡片内,如果这三个点加上能够拖动的交互就更好了,比如按住三个点拖动,把 APP 变成小窗 or 分屏。
流(灵)体(动)云(岛)
在这稍微提一下我认为目前存在的问题吧:
- 在通知中心、控制中心、多任务界面莫名消失,再次出现时居然是淡入?且不论为什么这三个地方为什么要让流体云消失,出现的时候能不能重新播放一下展开动画,这样视觉观感会好不少。
- 从流体云长按(或其他方式)回到 APP 内部的时候,很像 MIUI 的曲线,先移动到屏幕中间顿一下再向上下展开 APP 界面,但还是因为速率调教问题,观感不能说不丝滑,感觉有点奇怪,为什么不倒放 APP 进入流体云的动画呢?
其他的动画,譬如控制中心的按钮小动画什么的,我认为各家都是非常优秀的水平,只是逻辑上的区别,因此就不聊了。
结语
c15 的动画底子相当好,可以说和 hy2 那一套 MIUI 12++++++++++的底子不相上下,并且在合理的地方还会借用安卓原生动画,是相当聪明的做法。
但同时很多地方能看出设计师用力过猛,例如部分地方采用比一般厂商更慢的速率来凸显动画,部分地方用慢+快的反差对比来体现动画的存在感。在我看来,c15 只差那么一点点就能成为完美的动画——速率和阻尼调教不够熟练,小窗动画不够好。
我希望 ColorOS 团队在新的一年里能够将系统动画体验更加完善,毕竟标榜自己是 OPhone,那么系统细节体验也要对齐 iOS 吧。
就说这么多,感谢大家能看到这里,敬请批评指正,谢谢!
> 下载 少数派 2.0 客户端、关注 少数派公众号,解锁全新阅读体验 📰
> 实用、好用的 正版软件,少数派为你呈现 🚀