iPhone12 终于发布了，虽然产品被剧透个遍，但是发布会的设计依然精彩。堪称“流畅狂魔” 的 Apple ，发布会和产品站的同样追求“无刷新转场”。

iPhone 12 Pro

01.光影流动感-追随产品材质的文字特效

从 Apple 的网页设计中，不难窥见其一以贯之的形式追随功能的设计理念。每一代的产品站作品，其设计思路、设计风格都与其产品的核心亮点与卖点紧密相扣，这一点在 12 Pro 及 12 两款产品站都充分体现。

文字斜角阴影渐消动效

不锈钢材质了带来的更强的光影感，为了呼应这次采用的“手术级不锈钢材质”，在 12 Pro 的产品站设计中，充满了对光影感的表达。除了最常见的产品渲染图与序列帧之外，很多设计细节也呼应了这一主题。

与一般的文字渐显不同，这次的标题出现动效采用了带有倾斜角度的阴影渐消效果，这种倾角更接近光影移动的质感。
12 Pro 中的小标题统一采用海军蓝加渐变的效果，呼应了有光阴感的手机材质，也可以看出蓝色是这次的主打色。

文字动态炫彩动效

值得一题的是， Apple 已经不是第一次使用文字光影渐变效果了，这一效果在最新一代的 ipad-air 中已有亮眼的表现。
不过不同的是，以艺术与创意为主打理念的 iPad Air 中，文字采用了更为大胆的动态渐变效果，光影感更强，画面更为炫彩活泼；而在 12 Pro 的网站中，这一效果则克制很多，可能是避免与更为抢眼的光影渲染动图产生冲突而造成视觉疲劳。

文字炫彩动效表达 iPad Air 的创意工具属性

02.一致性坚持：视频、图片元素的渐隐动效

图片视频弧形渐隐动效

Apple 严格将光影流动感的一致性从文字、图形上延续到了图片和视频的渐隐动效：12 pro的样张出现或消失，都做了横向半屏的阴影渐变效果，同时配合图片的缩放效果也营造了一种微妙的光影感和流畅感，极度舒适。

渐隐动效在图片视频上的一致性

但是不得不吐槽，有时这样的一致性执行的过于琐碎：为了与小标题视觉上达到统一，按钮也同样采用海军蓝渐变，在线框按钮如此有限的空间，做这样的复杂的处理略却显小气，加上深色背景下的蓝色渐变，较常规的纯白处理反而弱化了按钮的 CTA 能力。

小尺寸的复杂创意表达可以商榷

03.粒子效果营造空间感— 激光雷达的功能表述

激光雷达的功能表述

粒子效果表达激光雷达功能

粒子动画在网页中虽不算新鲜，而且同样的 Apple 为了追求呈现效果，并没有真的以 webGL 实现 3D 粒子效果，而是直接采用了视频的方式，这次的效果依旧很惊艳。
激光雷达（LiDAR）向外发射激光，遇到障碍物后反射回传感器，通过计算激光从发射到接收的时间计算物体的距离信息。持续工作时，通过扫描空间，即可快速成像整个空间。因此，粒子的表达形式极度切合激光雷达的功能，没有色彩这些多余的要素，只有点状元素构成的带有深度的空间，可以说是形式追随功能却又两者兼顾。
tips：粒子效果可以通过 webGL 实现，也可以通过常规的序列帧方案实现，webGL的好处是减少网页大小，可以增加互动；弊端是视觉效果的美感及可控性较弱于序列帧方案。序列帧方案的优缺点则反之。

04.分层差速动效营造 Z 轴空间感，密集创意突显 5G优势

 低成本营造 Z 轴空间感

在xyz轴上同时有动效的播放不仅增加了表达维度，也因为三个维度同时出现动效带来视觉冲击力和空间美感。

低成本且细腻的营造 Z 轴空间感

Apple 一直在网页中探索 z轴空间感的营造，但依旧采用了最为经济的方式以达到性能和表现上的优化，因此这次空间感的营造还是仅通过简单的 css 缩放和差速位移实现，主要集中在 5G 下载以及 iOS 14 模块。
1.为了凸显 5G 的下载速度，通过接连不断从 z 轴飞入的影视作品卡片，暗示数据量之大，同时卡片进入手机时即从下载状态变为下载完成状态，表明下载速度之快。
2.iOS 14 模块，通过手机与大量 App 图标之间的差速移动与缩放，营造了极强的空间感。

iPhone 12 

iPhone 12 在这次外观上的一大卖点是丰富的外壳色彩，因此网站的前一部分的视觉重点，都是以丰富炫彩的颜色，突出这一卖点。除此之外，iPhone 12 在产品站的网站设计中还有以下一些亮点：

01.文字创意动效

这一次 12 的网站的一大亮点是在纯文字动画上，虽然近年来 Apple 在 privacy 模块以及微信公众号的可交互 svg 均有运用这种效果，但这次在两款手机产品站中，尤其是 12，这种效果得到了更好的应用。

OMGGGGG-惊艳的 5G 创意表达

在展现 5G 速度之快的时候，配合左侧手机的数量，G 的数量随着滚动事件逐个增多，一直增加的 5个，5 个 G 暗喻 5G，又以延长音的效果强化了 OMG 的惊讶效果，同时左侧 5 个手机高低排列形成信号的样式，暗喻信号之快令人惊讶。这里的处理，可谓惊艳。

惊艳的 5G 表达

11 trillion operation per second 

在展示芯片运算速度之快时应用了该动画，整个动画节凑极快，以展现运算速度之快；同时 11 与 trillion，以及 operration、per 与 second 之间，进行切换时保留了相似字母，增加了动画的连贯性与趣味性。

近似字形“快闪”表达产品特质

Click - 听觉与视觉的 “通感”

在 12 Pro 和 12 均呈现了这种效果，在展示 magSafe 吸附效果的时候，“Click” 的文字会同步展现一个吸附的效果，强化了 “Click” 这一概念。

声音、文字动效的通感表达产品特质

02.细致的降级效果

敏感的网速降级/升级方案 

Apple 网页的降级一直是其保持其流畅与高质感体验的关键，之前我们已经提到 Apple 会在不同性能的机型上进行降级，而 12 的网站则同时做到在根据网速不同的时候进行降级。
譬如 Big news 与 Mini News 这个模块，在网速较好时，会呈现为一个序列帧动画，动态展示两种尺寸型号的手机；而在网速较差时，这里会降级成上下排布的两个模块，以静态图片的方式呈现。

低网速下降级为两张图片 / 高网速下升级为序列帧动效