背屏便利贴

背景

在进一步介绍之前, 我想与你分享一下背屏便利贴背后的故事。

2025年数字系列旗舰发布会定在9月25日。按照惯例, 雷总会在发布会前一到两个月的时候体验新机, 和市场部一起准备发布会上要重点提及的卖点功能。 8月11日, 也就是雷总和市场部会面结束的几天后, 我们接到一个全新功能需求, 总结下来只有两句话:

1. 让用户可以将重要信息 "钉" 在背屏以备随时查看。
2. 要有酷炫的动画。

此时距离发布会还有 6周零3天, 45天, 34个工作日。这期间要完成产品功能设计、UI设计、动效设计、特效设计、研发接入、测试、发布等工作。

设计思路

一般来讲, 一个好的设计背后应该有好的故事。但是 34 个工作日是没时间讲故事的, 只能使出浑身解数从第一天起就向着交付冲刺。

还好需求不算复杂, 整个产品是个单一的串型流程, 包含以下几个步骤:

  用户圈选内容 --> 内容识别 --> 合成背屏图片 --> 在背屏展示 --> 主屏推送通知

既然没法讲故事, 设计的总体思路就是底层发生了什么, 就展示给用户什么, 所见即所得。

1. 圈选内容

圈选内容由上游职能负责, 我暂时不用关心。

2. 内容识别

第一个想法是把选中的内容从屏幕上 "揭下来", 再 "贴" 到背屏上。于是用 Vertex shader 快速实现了下面这个效果。 图片能够随着变形过程发生色彩变化, 揭起来的位置也会和手指点击位置相对应。但最后上线的版本没有使用这个片段, 原因后面再提及。

3. 合成背屏图片

既然产品名称叫 "便利贴", 那就把这张图贴上去吧。于是我用硬件的 AA 图做了一个卡片模型。 设备通知的超级岛特效会带一圈发光的边, 本着从哪儿来到哪儿去的原则, 我在卡片模型上也加了一圈发光边来提供视觉连续性的 clue。

4. 在背屏展示

背屏在背面, 那就让卡片转一圈, 退场时藏到摄像头后面, 这样设备通知出来的时候就可以衔接上。

5. 用动画串起来

再加上一些物理碰撞、光效、颜色、动画, 在48小时内完成了基础的脚手架, 或者说是故事脚本。

设计迭代

1. Fast Iterations

基本的框架搭建完成后, 就可以对每个元素进行细致的打磨。

2. 卡片模型

卡片模型的结构上我也花了一些心思。 通过一些工业设计的小技巧, 让卡片对光照的反射更丰富有趣。 摄像头区域制作了两个斜率不一样的坡度, 让光线有更多的反射路径。 此外卡片的边缘使用了圆角, 让卡片在旋转过程中的高光变化更柔和, 增强质感。

在 Blender 用 Matcap 进行超分辨率预览时可以感知到这些丰富的细节, 虽然实际场景里可能只剩几个像素点。

有时候也会质疑, 这种不到一两个 px 的细节用户真的注意得到吗? 但就像奢侈品一样, 把所有细节都做好, 才是认真对待用户的表现。

3. Bloom

边缘发光是最重要的视觉元素。一开始的方案中, 考虑到移动端性能问题, 我基于渐变模糊的三次插值方案近似拟合了一个 Bloom 效果。 但这种拟合方式是基于 mipmap 的, 一旦发光强度增加就会出现明显的色块, 最终看起来像是 "浮" 在卡片上, 而非作为光源在发光。

AKG4e3 在知乎 分享了 UE 的实时 Bloom 方案。 简单来讲 UE 通过多级 downsample + blur + upsample 的方式确保了发光的连续性和柔和感。 这个方案最具价值的地方是它提出了理想泛光亮度曲线, 我们可以以此为目标去平衡性能与表现。 在下方的对照中列举了方案演进的过程, 优化发光对于画面质感有很好的提升效果。

ver.1

ver.2

ver.3

ver.4

ver.5.final

初始版本

4. 实时高斯模糊

实时高斯模糊在 Hyper OS 系统内已经是一个持续近 4 年的课题了。我在深度参与的过程中有一定的技术积累, 可以直接运用到这个项目中。 具体实现细节因为NDA的原因不方便展示。

Pixel Perfect

不同于游戏, UI 界面对于渲染质量有很苛刻的要求。 一方面手持设备屏幕的显示质量非常高, 用户日常使用时眼睛与屏幕之间的距离非常近; 另一方面大部分场景下 UI 界面元素都是静止的。 这些因素会放大画面中的 visual artifacts, 如锯齿、banding 等都会对界面质感有毁灭性影响。

MSAA OFF

MSAA ON

因此设计过程中需时刻保持 pixel perfect。 过往项目积累的经验让我可以在短时间内拼合多种效果并保持极高的视觉表现。 PBR、光照、Bloom、模糊、色彩管理等等, 任何一帧都经得起暂停, 放大, 逐像素的检查, 这是我比较满意的一点。

另外还有发布会视频和我拍的一些产品图, 欢迎 在这里查看。