折叠屏 iPhone Duo 的开合动画，让不少人第一次因为一个动效产生换机冲动。壁纸和图标像固定在现实空间，屏幕从画面下穿出，透视压缩与模糊渐变接住视觉连续性，复现的关键是界面投影取色与开合参数联动。

今年的“科技春晚”，苹果发布会又多了一个One more thing的时刻，传了好多年的折叠屏iPhone Duo终于在上个星期给端出来了，总算是放了个大招。

发布会之后，群里有人说，自己第一次因为一个动效，产生了买一台手机的冲动。

打动他的，就是那个开合动画。作为设计师，我看我的设计圈里，大家讨论最多的也是它，真的，太惊艳了。

就是上面这个动效，像一个玻璃镜子一样，穿透了的感觉。

平时我们看到的折叠屏打开，就是外屏消失，画面黑一下，内屏再出现。两块屏几乎是独立的，中间交接一下。用户能理解到的东西是，手机打开了，该换大屏了。

苹果这次给人的感觉很不一样。原来的壁纸、图标跟UI，就跟真的固定在现实空间里，屏幕从它们下面展开、穿过去。画面里的透视在压缩，有些地方逐渐模糊、变暗，整个界面顺着手机的动作，进入另一种形态。

你明明知道屏幕换了，视觉上却没有被打断。合着的时候看到的东西，和展开之后看到的东西，始终能接得上。这真的牛X！

不知道为啥，我突然想到苹果之前做的Vision Pro。它们都在处理界面与空间之间的关系，这次的设计有可能是从中得到了一些启发。苹果在它官方的HIG动效指南里也强调，动画要跟随人的手势，符合人的预期。这个设计原则，放到这个具体的动效上，感受非常直观。

你说一个开合动画能解决多大的问题？好像也没有。没有它，手机照样能用。但群里已经有人被它打动，甚至开始考虑买它了。这种反馈，对做设计的人来说应该挺有感触。一个平时容易被当成无关紧要的细节，打磨到位之后，用户真的会看见，会买单的。

有意思的是，我在网上刷到，三星用户不到一天就把类似的效果复刻出来了。虽然细节上还有不足，后面会说。但至少说明现有的手机也能尝试做出这样的变化。

不过，我其实会更在意设计师是怎么想到这个动效的？简直是个天才。他是怎么从大家都熟悉的折叠动作里，找到这种处理方式的？

做设计的朋友大概都能懂我说的吧，一个效果拿过来，好像也没有多复杂，似乎自己也能做。但在别人把它做出来之前，确实就是没有人做出来啊。

从提出那个想法，把模糊、透视和屏幕变化之间的关系理顺，再把细节打磨到能放进产品里，这些工作都发生在大家看到成品之前。等成品摆在眼前，实现路径已经清楚了很多，再去临摹，面对的问题自然不一样。

而且，临摹版本也没有那么快就做到位。像前面说的那个三星的复刻，一开始的版本开始折叠的时候，会有明显的黑边，模糊出现的时机不够自然，空间投影关系也有偏差。单独看，每一个都像是个小问题，但放在同一个动画里，那种顺畅的感觉就没了。

苹果的设计难抄，经常就难在这些地方。大概效果可以很快做出来，但感觉总差一点。你甚至不需要说清哪一帧错了，也能看出两个版本的完成度不一样。

如果你也想还原这个动效，我尝试拆成几步，把可以怎么做讲清楚。苹果具体怎么做，我也不知道，我们先看怎样能做出类似的感觉。

第一步，准备一张界面图，再搭一个能开合的手机模型。

可以先用一张包含壁纸和图标的截图。手机模型先简化成绕中间铰链转动的两半，固定一半，让另一半能翻开就行。

然后把那张界面图放在手机完全展开时所在的平面上，先让它保持不动。你可以想象，壁纸和图标被画在一张悬在空中的画上，屏幕正在这张画下面转动。

这一步先固定观看角度，方便看清图像和屏幕之间的关系。

第二步，算清楚屏幕上的每个位置，应该显示图里的哪一部分。

从看手机的位置拉一根想象中的细线，穿过屏幕上的一个点，再延伸到刚才那张界面图上。碰到图上的什么颜色，就把这个颜色画到屏幕的那个点上。

屏幕转了一点，这根线和界面图相交的位置也会变化，再按新的位置取颜色。把屏幕上的这些点都算一遍，就拼出了当前角度下该显示的画面。

你盯着其中一个图标看，就会发现它在屏幕上需要跟着移动、拉伸或压缩。从设定好的观看位置看过去，图像却像是还留在原来的地方。前面说的那种“屏幕从图像里穿过去”的感觉，就从这里开始出现了。

第三步，给不同位置加上不同程度的模糊和明暗。

可以先在画面上拉一条渐变带，一头保持清晰，往另一头逐渐模糊。亮暗也做成渐变，再把这两种变化的强度和开合进度连起来。

这样，同一时间就会有的地方清楚，有的地方像隔着一层毛玻璃，慢慢模糊、暗下去。整块屏幕一起变糊，就看不出这种远近的区别了。

调试效果的时候，可以先把变暗关掉，只看模糊出现的位置和时机。模糊对了，再把明暗加回来。视觉上可以把它理解成，屏幕离那张画越远，看起来越模糊。

第四步，把这些变化都交给开合角度来控制。

平时做动效，我们经常先画好状态A，再画状态B，安排好中间的过渡。点一下，动画就按设定的时长播放完。

做这个效果时，可以先加一个滑块，用它来模拟手机的开合。拖动滑块，手机模型跟着转，图像的位置、模糊程度和明暗也一起更新。先把这几件事都接到同一个开合角度上。

你停在中间，画面就保持在对应的状态。往回拖，画面也跟着往回走。这样才能试出用户慢慢打开、突然停住、又合回去时，界面能不能接得上。

到这一步，从A到B的过程就可以由用户的动作来控制了。要搬到真机上，还得接入设备提供的开合角度信息，让手上的动作带动画面变化。

大体上就是这样实现的，后面就需要微调效果了，这一步不用多说，是苹果做的最好的地方，逐个细节打磨到最好，开合的图像映射，黑边，模糊度，黑白渐变等等。

听起来好像也不是特别复杂对吧？你很难挑出一个单独的参数，就说它最厉害，但从这个设计来说，整个体验是最顺的，这就是它在设计上厉害的地方，最后的细节微调非常重要。

从苹果这次发布的iphone duo，我隐隐看到了一种趋势，硬件能力越来越强之后，界面就能更多地贴近我们在现实生活里的经验。然后在自然的基础上，适当做一点艺术化的放大，透视、模糊都不完全照搬物理世界，但要让用户能凭直觉理解眼前发生了什么。

看完这些细节，我也会想到自己的折叠屏手机。

我自己用了几年折叠屏，打开的频率其实不多。我又不是特别喜欢看视频，平时单用外面那块屏，已经完全够用了，从比例上也像一个普通手机。所以用着用着，它就成了一部加厚版的普通手机。

各手机厂商在介绍折叠屏的时候，大屏当然是个卖点。但到了每天用的时候，我总得有件事情需要它，才会把手机翻开。屏幕能够翻开，跟我愿意展开它，不是一件事。

这次苹果从屏幕比例、Dock栏的位置，到应用的交互和视觉，都围绕着这个动作做了调整。那个动画尤其让我在意，它把打开手机这件事做得很有记忆点。折叠本身也成了可以被感受到的交互，手上的动作和眼前的变化连在了一起。

连Duo这个名字，放在这里看也挺有意思。

我还专门去查了下，像Galaxy Z Fold、MIX Fold、X Fold，Fold很直接地告诉你，这台手机可以折叠。Duo是拉丁语，意思是二重奏、双重，它会让我想到一对搭档，两个部分之间的配合。这个名字给我的联想，是两块屏、两种形态，放在一起能做些什么。

展开之后，把两个应用并排放在内屏上，一边看视频，一边记笔记，就不用来回切换。苹果还宣布，今年稍后会支持Apple Pencil，在内外屏上记笔记、画草图、做批注。突然想到，以前乔布斯老爷子不是说，用笔来操作手机是一件很愚蠢的事吗？这回又要回归了，不知道他会不会生气。

Duo FaceTime会把身边的人也考虑进来了。你在视频通话，旁边的人可以通过外屏加入同一通话，不用挤着看一块屏，也不用把手机传来传去。

拍照的时候，Duo Preview让被拍的人在外屏上看到构图，自己调整姿势。AI会识别大家准备好的时机，自动拍照。负责拍照的人终于不用设好倒计时，再急急忙忙跑回镜头前了。把手机半折放在桌上，还能免手持视频通话、看教程或者录延时。

这些场景里，有些是在一块大屏上同时做两件事，有些让两个人各用一块屏，还有些用到了手机不同的摆放形态。折叠这件事，开始和具体的生活连上了。对我这样平时很少需要展开手机的人来说，至少能看到一些拿它做事的理由。

苹果最擅长把产品讲到这个地方。你听完它的介绍，脑子里就会有一个自己用手机的画面，知道哪件事会方便一点，哪种麻烦可以少一些。

我看国内厂商不少宣传，会花很大篇幅讲铰链怎么样、折痕怎么样、又薄了多少毫米，芯片多牛逼、电池多大、配置多强。技术确实很厉害，只是有时听完了，还要用户自己把这些参数换算成日常使用的好处。

苹果自己也讲参数。讲到电池，它会继续告诉你，一天的使用能不能撑下来，让用户少一些续航焦虑。讲双屏，它给你看的是视频通话不用挤在一起，拍合照的人也能从容地留在画面里。技术最后落到了一个很具体的人身上，这个时候就容易理解了。

我们做设计，也可以试着把这一步往前多想一步。拿到一项技术，除了想它能做出什么效果，还能想想用户会在什么时候用上，手里的事情能不能做得更顺。自己说的“以人为中心”，如果能在用户需要的场景落下去，宣传和体验才接得上。

折叠屏这个硬件形态已经出现很多年了，苹果还能在里面找到这样的地方，把它做得让人觉得，手机展开时本来就应该这样。苹果很多产品都会给我类似的感受。那种自然背后的工作量，往往是看了别人的复刻，有对比才更觉得厉害。

它带动其他厂商的能力，也经常体现在这类细节里。新设计刚出来时，往往吐槽不少，过一段时间再看，该抄还是得抄。之前的液态玻璃就有这种感觉。

最开始能看到一些厂商不跟随的表态，后来的情况大家也看到了，类似的视觉效果还是越来越多。

不过，聊到这里，我也会想到我们自己做设计时的场景。

一个方案很好看，评审时还得回答性能、功耗、工程实现和成本的问题。就比如苹果这个动效，可能在评审阶段就被pass掉了，老板会说这个性能不行，成本上去了，收益不行。我们实际工作里，经常会遇到这样的情况。

你看，用户最直接接触到的明明是设计出来的体验，轮到决定要不要投入的时候，设计有时又没有多少话语权。哪怕在大厂里，也未必能把自己想做的东西完整地做出来。

在这种环境里跟随一个已经被验证过的方向，会稳妥得多。效果已经有人做出来，用户也有了反应，团队能看到大概需要投入什么。换成一个谁都没做过的新想法，要承担的风险就大了。

我有时会想，液态玻璃这样的效果，在苹果发布之前，会不会也有国内设计师提过，只是在内部评审时被否掉了，开发就说做不了。等苹果做出来，成了大家都在讨论的设计，这个时候开发就会说也能做了。这种事，天天都在发生。

想到这里，再去看那些让人惊艳的产品，会觉得设计师有创意只是其中一部分。团队愿不愿意给资源，能不能接受一些风险，是否愿意把细节继续打磨下去，都会留在最后的产品里。

苹果在这方面，确实是我觉得做得最好的厂商之一。它把以人为中心的设计，贯彻到了软硬件、交互、视觉和产品介绍里，也让那些原本容易被放弃的小细节，有机会被用户看见。

这次群里那句因为动效想买手机的反馈，我觉得也可以留给我们自己。下次评审一个类似的细节时，除了算它会占多少资源，也多留一点时间，看看它能给用户带来什么感受。说不定也会是一个非常惊艳的设计！