追光而遇,沐光而行 — 天猫精灵光模态设计背后的故事

语言: CN / TW / HK

在如今的智能产品设计中,产品的交互早已不限于图形界面,声与光也成为了重要的信息表达与氛围渲染的方式,于是天猫精灵体验设计团队开始探寻如何借光发挥设计师的创造力。接下来就让我们一起揭秘天猫精灵体验设计团队如何「控光」。

在天猫精灵的产品线中 ,有着不少拥有光 效的产品。从最初的X1到最新的Sound系列,从无屏音箱到美妆镜与氛围线产品,我们在实践中逐渐拓宽光效体验的边界。

光可以传递信息、提升效率:当用户呼唤“天猫精灵”时,产品会进入唤醒状态,除了通过音效进行反馈,亮起的蓝光则进一步增强可感知度,完成信息的传达,提示用户进行下一步操作。

光也可以表达情绪、增强氛围感:听音乐时,从春到冬,从亚马逊夏日森巴到 雷克雅未克唱诗班之颂歌, 不同主题的星环灯效呈现了一个个生动、沉浸的画面,带给用户无限的遐想空间。

从传统设计师到光效设计师,设计师的战场从「像素点」拓展至「LED灯珠」。光效设计的画布是由LED灯组成的灯光阵列,一颗灯珠就代表一颗像素点,而这些“像素点”将通过设计师的魔法幻化出奇光异彩。

2.1 信息传达层——如何通过光效设计表达相应的语义

光作为声音的补充,在智能产品中扮演着辅助信息传达的角色,合理使用光效可以更有效地传递意图、提升交互效率。那么如何确保光效准确地传达我们想要表达的语义呢?

光效的语义传递

首先,光的物理属性可以解构为光通量、光强、照度、亮度、色彩、色温等,而能够被用户感知的视觉元素可以归纳、收拢为:色彩、亮度、变化样式。

我们使用了被广泛认可的愉悦度-唤醒度情感模型来确定光效可以传递给用户什么样的情感信息。根据现有的研究,我们将光与情感的对应关系应用到了光效设计中。当我们想引起用户警觉时,可以使用快速变化、明亮的红光,而当我们想传递平静、愉悦的感受时,则可以使用舒缓、温和的蓝光。

光的语义与社会文化、生活经验也息息相关,例如:蓝色常令人联想到天空、海洋等温和的事物,带来安全的感受;而红色则是自然界中血与火的颜色,常作为警示标识等出现。

除此之外,光还可以通过「映射」的方式传递信息,例如:灯珠数量或亮度与数值的映射、灯珠的位置与空间位置的映射等。

基于这些原理,我们展开了光效的设计,以下为一些应用案例:

  • 连网光效:没有人喜欢等待,因此我们希望等待连网的光效可以缓解用户等待的焦虑。这里使用的不断循环的光效能有效地吸引注意力,让用户感到时间过得更快。色彩缓慢运动的蓝光,起到降低唤醒度、提升愉悦度的作用。当网络连接成功时,两处光源连为一圈,光的快速连接体现了连接,传递了连网成功的语义。

  • 消息通知光效:消息通知光效的作用是提示用户查看消息,需要吸引用户的注意,因此我们选择了唤醒度较高的橙色,并通过闪烁的动态效果再次提升唤醒度。

  • 音量光效:当调节音量时,灯环内的灯珠依次点亮或熄灭,点亮的灯珠数量与音量对应。这里将音量信息映射在了灯光上,用点亮的灯珠数量表示音量的高低。

  • TTS光效:TTS光效使用映射的方式,将灯光亮度与用户音量链接,给予用户实时的反馈。

  • ASR灯光寻向光效:当用户说出唤醒词时,灯光会迅速指向用户的方向,灯光的位置映射着用户的位置,传递了音箱正在聆听的信息。

通过光效设计提升信息传递包容性

包容性设计强调理解用户的多样性,希望能够让更多用户获得良好的体验。

丰富的模态可以有效地提升信息传递的包容性,智能产品可以通过多感官进行信息传递,当用户的某个感官通道受损或被占用时,其他通道依旧可以完成信息传递的任务。除此之外,设计师在进行声光设计时,还可以关注更多的设计细节点,以此来拓宽设计的包容性。

在设计光效的 配色时,我们希望视力正常的用户能快速获得信息的同时,也能尽可能保证少数视障人士对光效信息的接收,这就需要更细致地打磨设计细节。举一个小例子,随着年龄增长,老年人的色觉会逐渐减弱,而高饱和度的色彩相较而言更易被识别,为此我们使用了LED调光电流补偿提升饱和度。

虽然灯光在信息传达上起到了重要的作用,但是当灯光象征的语义过多时,用户需要记住每个灯光传递的信息,这会给用户带来较大的压力。

因此,设计师还应保持一定的克制,可以注意以下原则:

1.轻量化,避免过度的信息反馈对用户造成打扰;

2.简单可记忆,灯光的语义符合用户的直觉;

3.重要信息通过多通道共同传递,配合语音提示。

2.2 情感感染层——如何通过声光进一步影响用户的情感

以「电影感」的声光设计进行情绪表达

成功的开机仪式既可以营造氛围,又能够增加用户好感度。开机仪式就像电影片头,通过声音、画面、灯光的组合,告诉观众正片即将开始,请坐下好好享受,为故事的徐徐道来做好铺垫。在产品设计中,精心设计的开机仪式能营造氛围,让用户快速“入戏”。而「声光」则是营造沉浸氛围感的利器。

「光效」与「低音」是天猫精灵Sound系列首次开机的核心设计元素

通过电影感十足的首次开机体验,突出产品沉浸、通透的音质。选择了一些抽象而空灵的美学元素作为情绪表达的意象,例如「宇宙」、「灵魂」、「海洋」、「风」,通过声音和灯光二者的结合,利用声音的不同音色、频率,灯光的呼吸、快慢的变化、动势、能量等等,将这些意象有机地融入了我们的光效设计中,声与光和谐统一沉浸感的强化,一步步还原了想要呈现的电影感开机。

光效体验的「生命感」设计

“科技越是进化,就越接近生命的形态”——原研哉

智能产品需要进行「生命感」设计,除了语音交互,灯光的变化也可以为智能设备注入灵魂。灯光就像智能设备的神态,让生命更有体感。

我们一直在追求智能产品的拟人化,希望它成为用户生活中的伙伴。要想提升产品的拟人化程度,首先要思考真实的人在此时此刻会有哪些表现,然后再通过设计手段去模拟人的反应,从而赋予产品生命与温度。

以对话场景为例,在生活中听到有人喊我们的名字时,我们会礼貌地转过头回应,看着对方的眼睛认真倾听。希望用户在与智能产品对话时也可以同样感受到被聆听的尊重,为此我们增加了灯光寻向的设计,用光作为音箱的眼睛。当用户说出唤醒词时,灯光会指向用户的方向。

借此传达一种感受:此时此刻,我在认真倾听「你」说话,而不是倾听整个世界。

2.3 技术实现层——如何把硬件能力挖掘到极致去做表达支撑

在软件上完成了光效的设计,问题又来了:如何将光效成功移植到硬件设备上,避免卖家秀和买家秀不符的尴尬呢?光效的完美还原,依赖于设计师对硬件的了解与不断调试的耐心。

首先,光的三原色是红、绿、蓝,相较于方便的 Hex 参数,使用RGB色彩参数表达光的色彩。

下一步便是将RGB色彩参数交给开发进行调试,然而软件上模拟的色彩与硬件上最终呈现的色彩很可能是两回事。灯光经过柔光材料的晕染,再受到物理反射和空间距离的影响,会造成偏色等问题,这时就需要对于色彩更加敏感的设计师来进行调试,还原细腻的色彩变化。

为了呈现更完美的灯光效果,我们 整体设计了70组光效样式,并搭建了简单的光效调试平台,拍摄了100多组光效来对比它们之间细微的差别,力求成功还原光效设计。为此我们进行了以下几个步骤:

1.在色温为6500k的室内环境和硬件同事一起确认白平衡参数:先调试红、蓝、绿、黄、紫、白6种颜色RGB参数对应的发光效果,然后找到偏色规律,做好对应的色彩补偿;

2.由工程团队搭建了简单的光效调试软件,进行实时的动态调节;

3.拍摄记录每一次的色彩参数变化,再进行最终的调整。

用光做设计,需要了解灯光发光的物理原理,洞悉使用的物理材料,知晓光的边界,才能做到真正的「控光」。

天猫精灵主打普惠科技,希望带给更多用户良好的智能产品体验外,还希望产品价格不要过于昂贵,这就对成本有了更高的要求。设计师在其中需要对体验与成本进行平衡,利用有限的硬件条件呈现出最动人的用户体验。

3.1物理柔光平衡成本

为了带给用户带去更有细腻的柔光和高质感的光效体验,这里我们与工业设计师协同探索,通过网点雕刻扩散的方法,让光一点一点弥散出来,达到了肉眼可见的柔光效果。

3.2 通过灯光提升寻向容错率

360°语音寻向是智能音箱的亮点之一。首先介绍一下背后的原理:声音在空气中的传播速度为334m/s,根据声音到达每颗麦克风的时间来计算出声源位置。

为了保证寻向的准确性,通常会使用4或6颗麦克风组成的环型阵列。在这种情况下,使用2颗灯珠作为寻向灯光定点可以带给用户精确寻向的感受。

为了避免寻向错误给用户体验造成负面影响,我们选择了些微牺牲2颗灯珠带来的精确寻向的感受,由2颗灯珠扩增为3颗灯珠作为定点,将寻向的角度由30°扩增至60°。通过扩大寻向的灯光面积,我们提升了寻向的容错率,让用户能够获得一个较为优秀、准确的寻向体验。

光无处不在,相伴于我们的生活,然而光效设计对大部分设计师而言却是片陌生的领域。但未知也意味着无限的可能,相信随着越来越多设计力量的涌入,光效体验表达的可能性也将不断拓宽。

以上是我们在天猫精灵光效设计实践中的小小心得,光效设计的探索之路还很长,希望通过这篇文章可以为大家带来一些启发。