还记得Mate X2那张动态壁纸吗?原来是这样设计的!


【手机中国新闻】今年2月 , 华为发布了新一代折叠旗舰——华为Mate X2 。 当时很多人都为该机“双旋水滴铰链”的设计所惊艳 , 但除此以外 , 那朵随屏幕展开而缓缓绽放的蓝色花朵相信也给不少人留下了深刻的印象 。 这样一朵小花 , 如何让它在屏幕中栩栩如生?对此 , 华为的UX设计师有故事要说 。
还记得Mate X2那张动态壁纸吗?原来是这样设计的!
本文插图
Mate X2“静谧池畔”动态壁纸
6月15日 , 华为心声社区发文 , 讲述了一名华为UX设计师创作Mate X2“静谧池畔”动态壁纸的心路历程 。 原来 , 这名设计师拿到Mate X2的样机后 , 就决心为其设计一张动态壁纸 , 最终在风景(插画绘本效果)、海浪(海水冲过沙滩的流动)、花朵(花徐徐开放)方案中选择了最后一个 。
如何模拟花开?这是摆在设计师面前的一个难题 。 与动画片类似 , “静谧池畔”是通过一张张静态的图片连续播放呈现出来的 。 其中每一朵花都是先用手绘构建出花的色彩与形状 , 对整体的造型、动态姿态的关键部分进行绘制 , 再结合三维技术把每一片花瓣进行重新建模 , 让花蕊把花开动效进行抽象重构 。
【还记得Mate X2那张动态壁纸吗?原来是这样设计的!】
还记得Mate X2那张动态壁纸吗?原来是这样设计的!
本文插图
Mate X2“静谧池畔”静态图片
然而 , 在内部beta用户测试中 , 一位用户对这张动态壁纸点评到:“花朵的绽放和闭合都有点机械 , 不太自然 。 ”
还记得Mate X2那张动态壁纸吗?原来是这样设计的!
本文插图
Mate X2“静谧池畔”最终效果
幸好华为还有很多压箱底的东西 , 设计师通过一个华为自研的小工具 , 估模型分析每一帧画面之间的差异 , 发现人眼对画面中某个元素的位移和画面亮度变化感知最为明显后 , 只要将这两个参数设定为关键指标 , 就能根据模型模拟用户感知的流畅性体验 , 精细化地对每一帧进行细微的修改 。 即使是很细微的角度变化 , 也能有明显的视觉感知 , 符合人的心理预期 , 这样花朵就“活”了过来 。