• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >心得技巧 > 超全面的对话式交互设计流程

超全面的对话式交互设计流程

作者:Z_Yuhan 字体:[增加 减小] 来源:互联网 时间:2018-08-23

本文主要包含对话式UI,对话式交互,用户画像,经验分享,设计流程,设计语言,语音,语音交互,谷歌设计等相关知识,Z_Yuhan希望在学习及工作中可以帮助到您

Z Yuhan:上一篇文章《想掌握对话式交互?先来学习自然对话的基础知识!》介绍了自然对话的基础概念,学习了谷歌对于人类自然对话的研究和理解。本文将通过一个简单的案例来介绍谷歌推荐的对话式交互设计流程,以及本人对该流程与常规的体验设计流程异同之处的对比分析。

一、设计流程

1.?选择适合的使用场景

对话式交互界面的使用场景通常是简单直观的。当考虑任务场景的时候会想到游戏,因为游戏是低风险的。但是游戏界面的设计必须要能够满足用户的期望,以免使用户感到无聊。

猜数字的小游戏可以作为对话式界面设计的一个很好的例子,不要求用户有任何的背景知识,因此可以用来探索和测试对话式界面设计的边界。

2.?创建虚拟角色画像

考虑如何展示虚拟角色(机器人)的功能、形象。保持一致性、独特的品牌呈现和个性特征。虚拟角色画像可以帮助你设计、撰写对话,所以要尽早确定,这样就能更容易的选择正确的用词、语法和句子结构。

我们猜数字游戏案例的虚拟画像具有以下特征:

  • 乐观、活泼和鼓舞人心。
  • 有吸引力的、机智的推动游戏的进程,鼓励探索。
  • 不那么正式、简单的语言,吸引不同年龄和群体。

我们给它起个名字叫「数字精灵」,赋予它更多个性,并满足用户对于「魔法」含义的理解和对猜数字游戏的内在期望。

需要注意的是,即使你没有赋予你的虚拟角色任何个性特征,用户在与它进行交流时也会感知到一个人物画像。

3.?撰写对话

写下用户可能会经历的不同对话情景。对于「数字精灵」游戏,我们想出了以下对话作为开始,帮助我们理解每段对话的设计思维与最佳实践。

路径1:愉悦路径

这段对话描述了一轮典型的对话,用户猜了三次:

目前为止一切都很顺利,但是我们如果就此停止,开始开发这段「愉悦路径」,那么这个游戏就会变得非常无聊。用户可能在这段对话中猜99次,或者更多(用户猜的数字超出0到100),所以我们有很多机会增加游戏的趣味,持续吸引用户。

路径2:玩两轮的愉悦路径

这段对话描述了用户连续玩了两轮,产生更多猜测的回合:

仔细观察我们是如何将个性特征注入到这段对话中的。与上一段对话相比,这段包括更多的回合对话。这样的设计使游戏更加独特,同时也增加了开发成本来实现这些特殊场景。

路径3:探索性猜测

这段对话描述了用户随机猜测,数字精灵通过暗示来让用户猜中正确的数字(本次答案为23):

让用户一直处于正轨上。因为有些用户会故意测试系统的边界,看机器人如何回复。以上对话通过判断用户的输入变化,做出更加有吸引力的回复,引导用户朝着目标结果前进。

路径4:游戏场景外的对话修复

该路径下用户在进行游戏的过程中突然问了一个与游戏无关的问题:「长城有多长?」,机器人机智的回复用户:「你想要结束该轮游戏吗?」来请求确认,推进对话进程。

路径5:超时的对话修复

在以上对话中,用户长时间没有回应,机器人会根据时间长短主动作出不同的询问,并最终主动结束这轮对话。

路径6:用户连续三次猜了相同的数字

以上对话用户故意连续猜了三次数字50,但是机器人通过判断来给予合适的回复。既然这是一个游戏,我们可以用有趣的方式处理边缘场景,包括引导用户离开当前游戏场景。这些边缘场景值得去认真思考,因为我们的目标用户就是那些容易去「探索系统边界」的人。所以,我们可以更加关注如何去满足他们的这个需求。你也许会发现以上对话的场景与路径3非常相似。当开发实现这些对话时,需要注意这些相似的场景,看是否可以最优化你的代码设计来满足这些场景,同时又能够保留这种多样性。

路径7:用户主动放弃游戏

该对话中,用户主动提出结束游戏,机器人能识别出用户离开的意图,并告诉用户正确的答案。

4.?进行测试

大声的说出来你的对话,用谷歌模拟器工具测试,确保听起来自然。在进行用户测试时,你只需要找到一些开发团队以外的人,让他们在没有任何提示的情况下试用一下。经过几次测试,应该就能发现一些问题,例如哪个对话路径完成起来有困难,或是用户在语音交互时产生的感受。

相关可参考:用户测试的基本步骤

5.?实现迭代

对测试结果进行整理,并用来指导优化之前的设计。两三轮测试优化后就可以进行开发实现了。可以使用 Dialogflow 开发,或者使用自己的开发工具。

二、谷歌对话式交互设计流程VS 体验设计流程

从以上流程当中我们可以看出整体的对话式交互流程与通常的体验设计流程(用户画像、情景分析、设计、测试、开发实现)差异不大。个人觉得不同之处在于:

  • 对话式交互设计不仅需要考虑用户画像,还要考虑到虚拟角色的画像。
  • 撰写对话,在通常的界面设计中并不会涉及到自然语言对话的设计。

总结

我们在进行对话式交互设计的时候可以参考谷歌推荐的设计流程。但是,流程并不是绝对的,不同的团队可能会有自己实践出的流程规范,或者项目的不同阶段也会有不同的考量,时间周期、技术能力等。灵活运用各种设计方法可以帮助我们更合理高效的完成项目的设计任务。

「对话式交互好文合集」

  • 《语音交互设计中,如何创建角色画像?》
  • 《未来的趋势!好的 AI 对话体验应该是怎样的?》
  • 《谷歌对话式交互规范指南系列:对话式交互的概念和机制》
  • 《谷歌是怎么设计语音界面的?这篇总结了对话设计六原则!》
  • 《Google对话式交互规范指南》

================明星栏目推荐================

优优教程网: UiiiUiii.com 是优设旗下优质中文教程网站,分享了大量PS、AE、AI、C4D等中文教程,为零基础设计爱好者也准备了贴心的知识树专栏。开启免费自学新篇章,按照我们的专栏一步步学习,一定可以迅速上手并制作出酷炫的视觉效果。

设计导航:国内人气最高的设计网址导航,设计师必备: http://hao..com

优设大课堂

您可能想查找下面的文章:

  • 超全面的对话式交互设计流程
  • 想掌握对话式交互?先来学习自然对话的基础知识!
  • 谷歌对话式交互规范指南系列:对话式交互的概念和机制
  • 未来的趋势!好的 AI 对话体验应该是怎样的?
  • 超全面!聊天机器人的界面交互设计实战经验总结
  • 总监有话说!2017年大热的对话式交互会成为未来吗?

相关文章

  • 2018-08-23腾讯出品!设计师辅技手册之项目同步管理法
  • 2018-08-23以Apple Music为例,为你解读格式塔7大法则
  • 2018-08-23揭秘一场重大发布会的全方位视觉包装过程
  • 2018-08-23想让字体更有吸引力?来学下字体设计的断舍离!
  • 2018-08-23用超多实例,解析「交互设计七大定律」在设计中的应用(上篇)
  • 2018-08-23用这个方法临摹作品,你的UI自学才最有效!
  • 2018-08-23这3个流行趋势虽然好,但依然要注意这些细节
  • 2018-08-23聊聊市面上的「真伪」设计系统
  • 2017-08-06网站该在什么时候才应该放置广告
  • 2017-09-04lazyLoad图片延时加载

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • UCAN2017回顾!当新技术来临时,设计会发生哪些变化?
    • 泛谈商业产品(一):什么是商业产品?
    • 网易高手:角色权限设计的100种解法
    • 清除css、javascript及背景图在浏览器中缓存的简单方法
    • 网易设计师:为什么要成为全价值链的研究员?
    • 腾讯干货!如何从用户体验设计角度提升产品的安全感?
    • Semantics:Html/Xhtml是否真正符合标准
    • 那些你所不知的CSS ::before 和::after 伪元素用法
    • 即使是最靠下的网站页脚,设计上同样很讲究
    • 印象深刻!日本有哪些让人称赞的设计细节?

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有