人工智能对交互设计的影响

人工智能(Artificial Intelligence),英文缩写为AI。它是研究、开发用于模拟、延伸和扩展人的智能的理论、方法、技术及应用系统的一门新的技术科学。人工智能的本质,是数据+算法。人工智能的概念其实已经提出来了60年,中间也经历过很多次虚假的黎明期,为什么说现在人工智能时代真正的黎明呢?这里面有三个原因:首先是大数据和云计算。在数据上,移动互联网的发展,已经把我们生活中的各种信息不断数字化,这些数据储存在云上,就可以被利...

人工智能Artificial Intelligence),英文缩写为AI。它是研究开发用于模拟延伸和扩展人的智能的理论、方法、技术及应用系统的一门新的技术科学。人工智能的本质,是数据+算法。人工智能的概念其实已经提出来了60年,中间也经历过很多次虚假的黎明期,为什么说现在人工智能时代真正的黎明呢?这里面有三个原因:

首先是大数据和云计算。在数据上,移动互联网的发展,已经把我们生活中的各种信息不断数字化,这些数据储存在云上,就可以被利用。

其次是深度学习的算法。深度学习算法的提出,让人工智能在算法上已经非常接近人类的学习能力。

最后是硬件的支持。要进行深度学习,需要大量的并行算力。并行算力基本依靠的是GPUGraphics Processing Unit,图形处理器)。GPU在过去二十多年,因为3D游戏的发展,性能得到了巨大的提升。

人工智能的发展对人机交互产生了革命性的影响,最大的影响就是VUIVoice User Interface,语音用户界面)。VUI其实已经出现了很多年,比如电话银行的语音自助服务,你打进去会读几个选项让你选择,这就是最简单的VUIVUI在人机交互中一直没有得到大的发展,主要因为VUI相对于GUIGraphical User Interface,图形用户界面)非常的低效。机器没法对自然语言进行理解。可以说,人工智能让自然语义理解得到了巨大的进步

人工智能对交互设计会产生哪些影响呢?

. 有边界设计到无边界设计     

当我们设计App界面,交互设计师会穷举用户在固定像素界面内所有可能的操作,一一设计恰到好处的用户反馈。但是对于语音交互用户的输入是没有边界的,用户可能的输入将远远超出你可能的穷举的范围。从单屏交互,到无处不在的交互,万物都可以被数字化,都可以成为我们交互的媒介。从有形的设计到无形的设计,视觉的设计规范在语音设计过程中将完全失效。

. 近场交互到多距离空间交互

     语音交互可主要分为近场交互(例如:度秘/siri)和中场交互(车载)、远场交互(智能音箱)。

多距离场景的有以下几个维度的不同:

1场景特征:在非近场交互的场景下用户可能在其他事情上,而非专注在其他任务,这给如何让用户最小成本的获取当前系统的状态带来挑战,我唤醒了设备吗”  “我可以说了吗每一个节点需求都需要多维度的定义。

2输入方式:常用的输入方式有实体操作(按钮/旋钮等等),触摸,语音,动作,在近场交互时实体与触控是第一选择,而当中远场交互时语音成为输入方式的第一选择。伴随各种智能音箱、或者Iphone X等采用深度摄像头应用的普及,中远场景的动作输入将逐渐成为重要的输入方式之一。

设计建议

1 " 语音交互框架 " 匹配 " 使用场景 "  

语音的交互框架 :

现在回想你让别人帮你把水杯拿过来,你与这个人的交互节点是什么样子的?

首先你要叫他的名字,如果他听到了会回答你 " 干嘛呀 " 或给你个小眼神儿,这时候你知道他在听你说话,你可以继续说了 -" 给水杯拿来 "。他可能需要想想水杯在哪或者问你,当他去拿水杯你会看到他正在行动。将与人的语音交互节点提炼出来,你一定已经可以更容易理解交互框架: 

人工智能对交互设计的影响

如上图所示语音的交互框架由以下四个节点构成,每个节点用户有相应需求:

a. 唤醒:用户有得到 " 是否唤醒语音 " 反馈的需求

b. 输入:用户有得到设备正在 " 听说说话吗 " 的需求(相当于 loading

c. 理解:用户有得到 " 在帮我说事情吗?" 的需求

d. 回答 / 行动:用户有查看任务是否完成的需求

语音的交互框架解释了语音交互流程,等同于触屏设备定义的 " 点击屏幕 "" 双指 pinch" " 摇一摇 "。但是仅仅了解交互框架是远远不够的,比框架更重要的是语音交互场景,在不同场景下以上 " 唤醒、输入、理解、回答 / 行动 " 四个节点有不同设计方式。

语音的交互场景:

语音的交互场景分类近场、中场、远场三大类:

人工智能对交互设计的影响

如上图在三类语音交互场景中,用户的注意力是否集中在任务上和是否有屏幕输出是主要的设计考量因素。

举个例子:在语音交互的第二个节点 - 输入中需要用 " 波形高低 " " 语音响度高度 " 相匹配来给用户正在聆听的反馈,在不同场景下波形要采取不同的设计策略:

车载场景:驾车时用户的视觉注意力被路况占据,这时候一方面需要引入 " " 的一声语音反馈,另一方面需要设计采取更强的视觉波形确保一撇既得。

语音音箱:语音音箱的场景虽然不像驾车场景注意力被强占据,但是它是没有屏幕的,这时候一般会采取带强弱有呼吸感的等效解决反馈的问题。

" 无形 " 的语音能 " 附着 " 在各种设备上,场景也是千变万化的。在设计时要时刻记住 " 唤醒 - 输入 - 理解 - 回答 / 行动 " 的语音交互框架和每个节点的用户需求,关注用户的使用环境,和视觉 / 听觉注意力的占据情况,不要局限只用声音做反馈。

2" 唤醒 " 设计

 唤醒是语音交互的第一步,小米品牌的 AI 音箱选了十多个唤醒词,最后才用了 " 小爱同学 "充分说明了唤醒设计重要性。

主流的唤醒方式有以下 3 三种 - 实体按钮、虚拟按钮、语音唤醒,每种唤醒方式各有特点,适用于不同场景,下面我们来逐一分析一下: 

1. 实体唤醒:优点是能提供触觉反馈,使用场景有两种  

当用户的视觉通道被占据时,例如车载。 近场交互且设备没有屏幕或屏幕处于熄灭状态时,例如在熄屏状态下通过长按 Home 唤醒 siri  

2. 虚拟按钮:虚拟按钮的唤醒方式有两种操作方式 - 点击和长按。两种方式的本质差别有三个 - 与面部距离;操作成本,长按大于点击;微信养成的语音输入习惯使得长按更符合用户习惯。

a. 点击:面部与屏幕距离远,波形反馈可见,能更好的确认设备是否在收音。且成本较小。大多数的近场交互都可以使用。同时车载场景特别适用,试想在驾车情况下让用户长按输入语音简直就是灾难。

b. 长按:离麦克距离比较近,能带来更好的收音效果。可以作为一种辅助的唤醒方式兼容。

3. 语音唤醒

在双手被占据和远距离场景下语音唤醒都是最佳的方式,在设计语音唤醒是要注意以下两个方面:唤醒词的形象 / 注意唤醒后的声音反 / 防止误触发

a. 唤醒词的形象设计:

唤醒词的设计是机器人格的一部分。在平常的社会交往中,高雅、深邃的名字,往往会给人留下美好的印象。庸名俗字则给人一种不愉快的厌恶心理或排斥感。比如静静给人 " 文静,秀气 " 的感觉。" 糖糖 " 给人 " 甜蜜 " 的感觉。

b. 使用反馈音:

语音唤醒一般使用在远场交互场景,这时候用户很难能通过视觉确认是否唤醒了设备,这时要给出语音反馈   — - " " " 我在呢 " 等等

c. 防止误触发:在日常交流中我们每天会说很多重复的字或词如 " "" " " 等等,在设计唤醒词时要避开这些词汇。

3" 听觉形象 " 的体验设计

通过 " 色彩、材质、形状、版式、动效、字体 " 塑造视觉形象,用视觉形象反应产品气质、品牌理念是 GUI 设计师工作之一。人工智能赋予了机器拟人化声音输出的能力,带来的语音设计材料。不同的声音带给用户的感受是不大相同的,低沉的声音给人 " 稳重,成熟的 " 的感觉,尾音语调向上的声音给人 " 愉悦,被尊重 " 的感觉。

如何用 " 音色、节奏、音调、响度 " 的语音设计要素设计恰如其分的听觉形象?

1. " 先设计后开发 " " 先开发后设计 " 一个全新的实现流程

    语音是不可见的,设计师没有 " 语音的 PS" ,在语音形象的设计中必须先有 " 语音基础形象 " 设计师基于语音基础形象进行再设计。例如对百度 FEED 读新闻的体验重新设计时,先进行的是不同新闻情感特色的定义,基于新闻情感收集当量的 " 语料 " 数据,通过深度学习来提取每类语料数据的声音特色形成 " 基础形象 ",在对基础形象进行 " 语调,速度,节奏 " 的微调进行升级形象设计。 

人工智能对交互设计的影响

以上流程可抽象出 " 听觉形象 " 的设计流程 :"定义 - 挑选 - 训练 - 调整 "

人工智能对交互设计的影响

定义:根据内容 / 产品气质 / 品牌愿景定义产品的 " 听觉形象 ",八卦的情感要用 " 戏谑的 ",历史的听觉相应要有 " 沧桑 "

挑选:去语音库里挑选具有定义的听觉形象的语音片段。比如如果要产生的听觉形象是 " 沧桑感 " 时,可以挑选一些单田芳老师语音片段

训练:将大量语音片段交由技术人员进行语音合成训练

微调:通过调整 " 语调、速度、节奏 " 使之给用户的感觉更接近于先前定义的 " 听觉形象 "

2. 保持一致性

视觉的一致性是界面视觉设计的重要原则,在 " 听觉形象 " 的设计中一致性设计原则也十分重要,主要包含以下三个维度 :  

人工智能对交互设计的影响

a. 保持 " 听觉形象 " " 品牌情感 " 的一致性

在进行视觉设计时设计师要通过 " 色彩,形状 " 等设计元素支撑品牌情感,对与大型公司会要求他们的每一个产品遵循一致性的设计规范。进入 " 听觉形象 " 设计时代,当你的产品要使用语音交互时,确保产品的 " 听觉形象 " 与品牌情感保持一致,这将能够强化品牌给用户的印象。

b. 保持 " 听觉形象 " " 用户场景 " 的一致性 :

现在回想一下机场内的语音 " 尊敬的旅客飞往北京的 T343 航班… .",这种语音形象给用户 " 被服务的、受到尊敬 " 的感觉,与用户在机场的场景相一致。而在医院,起码在中国的医院,医疗资源与患者数量极不匹配,患者与医生更像是 " 求助关系 " 而非 " 服务关系 ", 使用过于 " 服务化 " 的语音形象反而会给用户带来强烈的落差感。

c. 保持 " 听觉形象 " " 内容 " 一致性

" 内容 " 本身是具有形象属性的,比如二次元的新闻如果用粗犷的男生读出来一定会很违和。因此在进行设计时要充分考量语音所说的内容与 " 听觉形象 " 相匹配,避免出现违和感。

4利用视觉

     语音交互的最大优势是更加直觉化,可以大大降低用户学习成本。但是语音输出的是线性的,因此它无法同时输出很多内容。这是语音最大的劣势。

      在设计时充分利用视觉与听觉的互补性,听觉记忆时间短暂的,不要用语音输出大量信息,尤其输出的信息是需要用户记忆时。

三、人工智能时代的变与不变 

人工智能给人机交互带来的改变是根本的,传统的人机输入 反馈循环,将逐步过渡到推荐 选择循环。人机交互也将由单向从属关系,向双向训练关系过渡。这种改变将重写设计思维、方法、流程、规范

原创文章,作者:交互精选,如若转载,请注明出处:https://www.iamue.com/36164/

(0)
交互精选交互精选
上一篇 2018-03-28
下一篇 2018-03-28

相关推荐

  • 手机“携号转网”磕绊多,用户体验太遭罪,手机跳槽为何这么难?

    轻点下图  纵横带您“听新闻”携号转网来自新闻纵横00:0005:59工业和信息化部在2010年和2013年,分两批在天津、海南和江西、湖北、云南五个省市,试点手机号码“携号转网”业务。但是到今年初,仍然有试点省份的用户反映,办理过程不如预期的顺利,质疑运营商故意设置障碍。记者调查发现,“携号转网”业务在不同的省份试点效果存在差异,主管部门坦承,有运营商为了挽留用户“搞小动作”,但试点工作整体向前推进,一些技术问题逐步解决。湖北武汉的白...

    2018-04-10
  • 从用户体验到品牌形象,营销的道路有多远?

    在数字化时代,如何提升品牌形象和用户体验,是两个营销的核心问题,品牌形象塑造消费感知,用户体验决定消费忠诚。企业重要的战略资源之一是:优质化的内容。而真正做内容营销的门槛极高,唯有真正强大的IP内容,才具有引爆市场与号召市场的能力。什么是营销IP,即知识产权(Intellectual Property),大IP,本身是产业链也延伸,具有黑洞版的吸金能力,是从招牌、内容、产业链等的延伸式营销。举个目前比较火热的例子,电影《魔兽》,根据网络...

    2018-02-02
  • 《用户体验可视化指南》视频讲书(4)

    这是《用户体验可视化指南》书中第一章的最后一个视频了。继续上个视频继续介绍几种共线图,这次横向比较各种共线图的差异,使用它们的原则和好处。点击视频观看(大约14分钟,推荐室内安静、有wifi环境下播放)兰静同学听后分享这节内容是第一章的精华,一定一定一定要边听边看书本,最好多看几遍。主要分为2个部分:在这节视频中,结合书本第3个大模块中的内容,详细讲解了这5类常见共线图的差异和各自的特色。闭上眼睛想一想,要是还想不起来服务蓝图、体验地图...

    2018-04-07
  • UED建筑品谈 | 昭君博物馆:土木轮回

    📌编辑 | F.项目竣工的下午,一片低黑的云朵重重地飘盖过来,浓烈的阳光穿过云缝狠狠地砸在了和周围土地一样色质的“夯土”表面上,一派陌上苍歌的景象。新的“土木”谦虚地溶嵌在大地之上,迥异的材料体验感却反而没有让建筑消失,熟悉得甚至可以忘记的“土”和“木”。体验变得几分陌生,他们与大地一同构建了令人难忘的场所。这让我想到几米漫画书里的句子:“……看不见的,看见了;遗忘的,记住了。”——曹晓昕主创建筑师曹晓昕中国建筑设计院有限公司副总建筑师...

    2018-02-02
  • Axure实践第二讲

    Axure实践第二讲---如何有效的在工作中引入原型·页面枝干·添枝加叶·画龙点睛在近期的产品需求开发过程中,我们产品小组正式且大量的将原型开发工作投入常规的需求分析工作中,原型的开发对于我们在产品初期的调研、构建都提供了很好的指导。接下来就让本文带你领略:产品与原型的一节课。一、功能结构图(页面枝干)1.切入点是功能结构图(自顶向下)从大的方向上去划分几个大的模块类型,适用于业务功能较为单一且业务逻辑处理流程较为简单,如在做市商系统构...

    2018-03-16
  • Axure RP 7.0软件安装 激活 教程 百度网盘

    点击上方蓝字关注免费领取百度网盘超级会员等部分软件没有贴详细教程和网盘链接,可以给公众号留言发信息,也可加微信:qihai-77当你需要的软件我们没有发布时,可以给我们留言或者加微信:qihai-77反馈哦链接:https://pan.baidu.com/s/1KZcsl-SaEcjPzwvdYQn1oA密码:ws5m有任何需要安装的软件或问题可咨询微信客服:qihai-77链接失效可在公众号留言某某链接失效 或联系微信客服:qihai...

    2018-03-30
  • 圆享——交互设计(1)

    · 品牌形象 · 艺术活动 · 平面设计 ·· 视频多媒体 · 交互设计 ·· Branding · Events · Graphic ·· Vedio · Interaction ·ANIMA iki《ANIMA iki》 获得过第五届“流明奖项”(Lumen Prize),一个巨大的发光悬浮球体。创造沉浸式、有魅力的体验,通过运动、纹理、灯光和声音来探索艺术装置本身与其周边的关系。该球体能够发光,是整个房间里唯一的光源,吸引着游客进...

    2018-04-25
  • Axure RP 8.0软件安装教程及下载地址

    破解文件下载地址在文末,请查看!1.双击AxureRP-Setup.exe安装文件。2.点击Next。3.勾选I Agree,然后点击Next。4.一般是默认安装路径。5.点击Next。6.点击Next。7.等待安装。8.取消勾选!取消勾选!Run Axure RP 8使其处于未选中状态,然后点击Finish。9.在桌面找到Axure RP 8,鼠标右击选择打开。10.点击确定。11.勾选Don’t  show this at star...

    2018-03-27
  • 在Axure中,如何用动态面板实现banner的轮播效果(附Axure教程及软件)

    axure功能太强大,动态面板可能已经搞得你头晕眼花了,更别提7.0版本的中继器了。废话不多说,还是和大家分享一下动态面板实现banner轮播的效果,对动态面板还不熟的,不妨来看看这个效果的制作过程,然后自己试着做一做,绝对增加自己的信心。就拿某宝首页banner轮播效果为例进行说明:1前期线稿图,部件准备01先画个大概的位置线框图,如下图所示,做了3张banner的轮播效果02banner位置的占位符转换为动态面板(鼠标右键,转换动态...

    2018-03-06
  • 交互设计——绘制流程图

    在上一篇文章中了解如何寻找接触点、梳理接触点,在这篇文章中主要就是如何来绘制流程图。现在普遍对流程图的分类有四种:业务流程图、页面流程图、功能流程图、程序流程图。在这主要通过现有的APP分析来进行区分不同流程图以及如何交互设计师或者产品经理选择应该使的流程图。何为流程图在上文中讲到了流程,流程是事物进行中的次序或顺序的布置和安排。流程是自然而然就存在的,它可以不规范,可以不固定,可以充满问题。而流程图的核心就在于如何排布事物进行的次序,...

    2018-05-06