1.3.36

如何设计语音助手视觉形象

Recommanded by editor
深圳/UI设计师/5年前/8145浏览
如何设计语音助手视觉形象Recommanded by editor
Hicyy

全文3000字,阅读时长看你速度。

作者注:本文成文于2019年中,文中例举了主流手机端,车机端UI中的语音形象设计案例,并对其进行大致地对比归类和演化路径分析。时隔一年再回看,文中所表达的一些观点得到了验证,于是顺带更新了一些案例,以使文章更具时效性和参考价值。


如何设计语音助手视觉形象

——语音助手视觉形象设计调研与分析

 

大纲

一、案例展示

二、案例分析

三、总结

四、福利

 

前言

 

大家聊AI也聊挺久了,细心的你们一定也发现了除了以沙雕闻名的Siri,各家的语音助手也越来越会刷存在感,你们看小爱同学、天猫精灵、小度小度都在某音上唇枪舌战斗智斗勇。此外,原来那些浓眉大眼的第三方APP,都悄悄加上了自己的小助手。如高德地图的一毛,手机建行的机器人,还有夸克浏览器也有了一个大眼仔。以至于我不得不担心在不久的将来,这些APP都要内置一个养成游戏,每天要打开N个APP给这些小可爱们喂饭加水铲屎… 

 

| 左图为夸克大眼,右上角高德地图一毛,右下建行机器人

 

 

哈哈,脑洞开大了。说回正题,这反映出来的一个趋势是:语音助手愈来愈从幕后被推到台前,在AI浪潮下被寄予更高的期待(也可能是App功能丰富到一定程度,Bug也愈来愈少,产品经理灵感枯竭就开始来折腾设计师了/坏笑/)。

 

那接下来让我们来看看目前常见的语音助手都长啥样。以下案例是本人对主流手机和车机(汽车中控)UI中的语音助手形象的不完全整理,有部份时间跨度较长,可能早已变了模样。另外,案例分析和总结中的表述也仅代表个人观点,欢迎理性讨论!

 

 

 

一、案例展示

 

1.手机端语音助手

 

罗列了iPhone Siri、微软小娜、Hello Google、三星Bixby、小爱同学等主流手机语音助手形象。




2.车机端语音助手

 

列举了搭载YunOS的智能后视镜、斑马系统以及蔚来汽车等一众新势力造车品牌的语音助手形象。 

 

undefined

| 原动效设计可参看链接:https://www.ui.cn/detail/230109.html


 

undefined

| 原动效设计可参看链接:https://www.ui.cn/detail/230109.html


 

undefined

undefined

| 原动效设计可参看链接:https://v.autohome.com.cn/v-2159708.html


 

undefined

 

undefined

undefined

| 原动效设计可参看链接:http://www.iqiyi.com/w_19s3u8znd1.html

 

 

 

二、案例分析

 

1.风格类型

 

通过对以上案例中语音形象的造型和风格进行简单归类,可以得出以下三种基础类型——传统型、抽象型和拟人型,通常这三种类型类型之间有界线也会有一定程度的融合(如Hello Google的基础造型是传统的麦克风,但状态变化时生动的动画转场却表现出一些抽象性)。

 

undefined

 

传统型特征:麦克风造型、声音波形、颜色单调、扁平、二维、加载转圈;

抽象型特征:形状不规则、光效、流动感、色彩丰富、三维、球体、生动、酷炫;

拟人型特征:IP化、生动、机器人造型、小动物造型、五官明显、卡通化、表情分明、卡哇伊。

 

 

 

 

2.类型演化

 

结合语音形象的历史版本来看(可自行查找),能得出三种风格类型之间常见的演化路径——由传统型到抽象型/拟人型。

 

undefined

| 上图是Siri从2011~2016年间的演化过程

 

| 上图是思必驰语音助手Lyra(天琴)2015~2019的演化过程

 

 

 

3.类型优劣势

 

从功能性/实用性、设计感/艺术性两大维度我们可以细化出五个评判维度来对这三种类型做一些对比分析,这五个维度分别是:状态辨识度、品牌个性、AI属性、设计潮流、亲和力。

 

状态辨识度:表示用户对语音助手形象当前外观所对应的工作状态(待唤醒、倾听、加载)的理解容易程度,辨识度高则意味着用户认知成本低;

品牌个性:表示品牌或形象本身的调性、气质的独特性,是区别于其他品牌的重要特征;

设计潮流:即时尚度,表示形象的设计是否符合大众审美潮流,是否接近行业当前的较高水准;

AI属性:即人工智能属性,表示语音助手的视觉形象也应体现出智能。比如科技感、未来感、神秘感,如精灵般全能、神奇、能施展魔法;

亲和力:即视觉上给用户的距离感,亲和力强能给用户亲切可靠的感觉,能从感性体验方面培养用户粘性。

 

undefined

 

通常来说,传统型的设计风格在状态辨识度上表现较好,麦克风造型图标作为功能入口认知成本低,波形动画暗示声波接收来表现倾听/收音状态使用户易于理解,常见的旋转动画表现加载状态也符用户心智。但缺点也十分明显,麦克风的具象造型会使语音形象在造型设计上难以摆脱桎梏,从而较难表现品牌个性和增强品牌辨识度。另外,传统型的设计比较难体现设计潮流(说人话就是土),也更难表现出语音助手的AI属性(说人话就是看起来不太聪明的亚子)。

 

抽象型设计因其造型和动效常见于科幻电影,所以在表现AI属性、品牌个性和设计潮流都很有优势,但在体现功能入口和工作状态的辨识度上却相对较差,较高的学习成本和“科技的冰冷”也会削弱语音形象的亲和力。

 

| 还是这个图,一般人从左往右看——麦克风,波形,啥?

 

拟人型设计则在亲和力方面拥有天然的绝对优势(当然你画了一个爹不疼妈不爱的丑娃娃也不会有什么亲和力,除非它是哪吒),人类对人脸的辨识能力经过几千万年的进化,因此在状态辨识度上拟人型设计通常也表现较好。但在设计潮流方面,拟人型设计更容易让人感觉复古(你们是否还记得早期的Windows Office套件里那个浓眉大眼的回形针?又是否还记得当年瑞星杀毒软件的那个小狮子?);AI属性的体现程度也跟拟人形象本身的设计水准更强相关(说人话就是画一个麦克风做语音形象智不智能可能看不太出来,画一个娃娃蠢不蠢一眼就能看穿)。同时,拟人型设计在体现品牌个性方面限制也比较大,除非品牌自有IP(如企业吉祥物),对其进行扩展就能作为一个语音形象,否则在可爱的小动物们都已经被各家互联网公司瓜分完了的现状下,大概只能挑那些不太可爱的了。另外,过分具象的拟人型设计会限定用户对其其它维度人设的预期,比如你怎么也不能想象一个软萌可爱的宝宝一张口是郭德纲的声音吧?如果是语音形象是一个球或是一支麦克风,这种对人设的预期的反差是不是就不那么大了?


| 这些logo,把动物园都快凑齐了

 

| 道理我都懂,可这是个啥?选动物要趁早!

 

 

 

4.案例类型占比

 

结合上述案例以及对目前行业观察,传统型、抽象型、拟人型分别在移动端和车机端的大致占比如下: 

 

undefined

 

移动端以手机为主,其作为电子消费品类的科技前沿产品,语音形象更倾向于突出其AI属性以及设计潮流下的审美取向,以增加产品卖点和迎合用户审美趣味;另一方面,手机软硬件迭代速度快、周期短,目标用户更年轻化,对产品特性包容性更强,手机厂商在做决策时试错成本更低,因此在移动端风格大胆、概念化的抽象型语音形象设计居多。

 

车机端的话,从汽车厂商角度来看,传统汽车品牌由于知名度较高,在与外宣强相关的形象设计方面会比较谨慎;另外传统汽车上市周期较长,软硬件更新迟缓,且厂商在互联网化运营方面也缺乏经验,因此主客观上语音形象的设计风格会比较保守。从用户的角度来看,汽车作为一个移动空间,语音形象则更倾向于体现情感化设计,不需要过分激发用户的猎奇心理,这对相较于移动端用户更为年长的传统汽车用户群体来说,在设计上表现出亲和力更为重要。他们对新生事物接受度相对较低,保持语音交互早期的、学习成本低的、传统型麦克风造型的语音形象(语音按钮)似乎更为稳妥。

 

而新势力造车的车企背景则多拥有互联网经验,目标用户也更年轻化,因此不论在表现汽车的科技感、AI属性方面,还是在打造移动空间的情感化体验方面都有更多手段。比如他们通常选择以拟人化的形象来传达情感、拉近与用户的距离并表现品牌个性,相对于传统汽车厂商来说这是一种进步,在这里我们看到了移动端与车机端设计风格两极的融合。

 

 

 

三、总结

 

1.有界线、有融合

 

结合案例中移动端语音形象设计以及对车机端语音形象设计的大体印象,可以将语音形象的设计风格类型分为三大类——传统型、抽象型、拟人型,这三种类型有界线也有融合,并非完全矛盾对立或者泾渭分明,融合多种类型风格的设计通常能扬长补短,做到功能性/实用性与设计感/艺术性的平衡。

 

2.从传统型到抽象型/拟人型

 

从时间维度上看,这三种类型基本遵循“传统型——>抽象型/拟人型”的演化路径。在假设各家语音助手形象设计风格是经过市场调研/验证的前提下,抽象型设计风格在移动端(手机端)更符合当下的时代需要和审美潮流,也更能为厂商和用户创造价值。而拟人型的语助设计风格则在车机端作为打造情感化体验的重要手段而倍受青睐。设计常常就是作有限选择,而不总是在推倒重建,但围绕的都是我们的初衷和目标。

 

3.注重品牌个性、强调智能、关注情感体验

 

结合风格类型演化路径及类型优劣势,可以看出业内对语音形象的设计愈来愈注重品牌个性的表达,愈来愈强调AI的概念,也愈来愈重视科技产品的人文关怀和情感体验,这也体现出传统机械命令式语音控制向现代人工智能智能型对话的变迁过程。

从案例分类上看,移动端的语音助手形象设计风格偏好已趋于一致:用抽象化设计来强调AI属性和品牌个性。车机端的语音形象设计则依旧以传统型为主,拟人型也正在变得备受推崇。随着语音技术的升级、互联网汽车的发展对出行体验个性化、智能化、情感化的需要,将会有更多的设计资源从成熟的互联网/移动端向汽车相关行业倾斜,他们将带来全新的设计理念和紧跟潮流的设计风格,完成车机端语音形象设计的革新换代。

 

 

 

四、福利

 

看到这里,一定有盆友会问:“不是说好教我做语音形象设计的吗,怎么通篇都是理论?”没有理论怎么编故事呢。嘿嘿嘿,当然实操也是必不可少的,下面就是三大设计风格的中传统型、和抽象型语音形象设计的基础教程(均为本人原创,在本公众号历史消息中也能找到):

 

1. 5步打造语音麦克风变形动画

https://www.ui.cn/detail/386822.html

 

 

2. AE+AI 10分钟打造AI助手形象动效(无插件)

https://www.zcool.com.cn/article/ZNzE2OTg0.html

undefined

 

 

3. 5分钟打造3D螺旋曲线动效

https://mp.weixin.qq.com/s/Np2WAHkgruhU4BDEfRkWdQ

 

 

4.N步打造拟人语音形象,这个还没写,先看个预告,大家有兴趣的话下回再更新了。

 

 

最后的最后,如果这篇文章能帮到你,请动动您的发财小手点个赞哦~


 


111
阅读原文
|
Report
|
212
Share
评论
in to comment
Add emoji
喜欢TA的作品吗?喜欢就快来夸夸TA吧!
Be the first to comment
Log in