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

超全面!聊天机器人的界面交互设计实战经验总结

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

本文主要包含对话式UI,对话式交互,经验分享,聊天机器人等相关知识,希望在学习及工作中可以帮助到您

最近在做智投App的机器人Neo的原型设计,是一个chatbot聊天机器人,整理了一下关于聊天机器人设计的一些心得。

欢迎关注作者的微信公众号:「交互视角」

一.?背景:

这是Neo的第一个版本。Neo通过问答的方式了解用户的基本信息、投资偏好及投资目的等信息,用户通过直接文字回复和点击选项进行回复对话,最终产出供用户参考的资产配置方案。

二.?设计要点:

1. 以问答的方式开始与用户互动,不要让用户一进来就不知道该干什么

机器人进来跟用户寒暄之后需要跟用户进行有效互动,让用户知道接下来能干嘛,不能陷进死胡同里。如果可以的话,机器人应该尽快跟用户表明自己的功能,是一个有明确目的的机器人。

左图中,机器人上来就是打了个招呼,用户不知道该如何回复。并且在用户回复完之后,又无缘无故的不搭理用户。即使用户的问题机器人不知道怎么回答,也要勇于承认,及时给用户反馈。

如果需要问一些用户有可能不太愿意直接回答的问题时,一定要解释清楚问问题的原因以及对于用户的意义是什么。如图中我们需要问用户的真实年龄,虽然有些无理,但是这对于输出资产配置方案很重要。

2. 采用多种方式循序渐进地向用户提问

Neo需要通过对话了解用户的信息,从基本信息收集到投资偏好了解到投资目的的挖掘,超过10道题。

应该循序渐进的方式依次问用户,最好是采用多种形式提问,并形成有效互动,这样才更容易让用户接受。如果直接按部就班提问而不与用户互动,很有可能用户就失去耐心而离开界面。

本版本的Neo采用问答对话、单选题、多选题的方式向用户提问收集用户资料。

3. 用户做了回答以后,机器人要有相应的反馈

如图,当用户选择了退休后在杭州西溪湿地旁时,Neo会回复与杭州相关的会话,让用户觉得Neo是聪明的,是在听他讲话并能做出相应回应的,而不是一个收集数据的机器。

4. 记住用户的答案,下次进来时不需要重新开始对话

如果用户已经做完了Neo的所有问题,产出了具体的配置方案,那么当用户下次再点击进入该会话时,不需要重新从第一个问题开始,而是会记录用户所有问题的答案,并在第一屏给出配置方案的快捷入口。

当然,间隔一段时间之后,用户可以选择重新回答Neo的相关问题,产出新的资产配置方案。

5. 不需要机器人完成所有的任务

机器人只负责手机信息并产出产品配置方案就完成了,用户查看、挑选、申购产品并不是由机器人来完成。

三.?相关交互细节

1. 在对话框中,有些不是用户直接输入回答,而是需要进行选择的。

当遇到单选题时,Neo先说出问题,并在用户会话的那一侧(右侧)显示出选项,这样用户就很自然的选择点击某一个选项,用户点击选择之后,则会将该答案作为对话发出来。用户浏览整个对话时,看上去还是一问一答的对话形式。

下图是单选的交互方式:

一开始设计的时候,是将问题的选项放在Neo那一侧,后来调整为放在右侧,并新增提示语,“请选择一个”。放在左侧作为题目,用户不仔细看,都不知道该操作什么,而放在用户的那一侧,是在想用户暗示,这属于用户输入的部分。如下图:

2. 设计多选题时,当用户选择完多个选项之后,需要点击提交按钮确认之后才形成有效对话。

3. 当Neo询问年龄时,弹出数字键盘,用户只可以输入数字,在键盘上显示出单位“岁”,默认值显示30,引导用户输入,有助于降低用户的出错率。

4. 当机器人在输入内容或运算产出方案时,可能需要一些时间,这时需要向用户展示Neo正在输入或运行,否则用户不知道该做什么,会话是否已经结束。

5. 当用户回答出错时,可以友好的提醒用户。但如果用户一直出错,告知用户答案不正确,及时进入下一题,不要在同一个无问题上纠结太久陷进死胡同。

四. 总结

Neo机器人扮演的是一个投资理财顾问的角色,通过与用户的聊天,收集用户基本信息、投资偏好、投资目标等信息,而这些信息以前都是用户在线下填写相当冗长复杂的表格完成的。并且可以通过对话产出符合用户的资产配置方案。机器人正在潜移默化的改变着各个行业的操作模式。

聊天机器人刚开始可能并不是非常聪明,但是我们可以通过设计来让它尽可能表现得聪明;即使有时候它犯错了或不知道该如何处理与用户的对话,及时告知用户,时刻表明它现在所处的状态,不让用户等待或困惑,也是一种不错的方式。

「对话式交互相关好文合集」

  1. 《图形界面的末路?聊聊未来可能会流行的「对话式交互」》
  2. 《2016年最火的对话式UI,2017年会走向何处?》

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

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

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

优设大课堂

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

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

相关文章

  • 2018-08-23专访微博产品经理:骂之前,先给我个机会解释一下
  • 2018-08-23为了用户!让你的UI更加安全稳妥的5种设计策略
  • 2018-08-23新手科普文!什么是用户界面和体验设计?
  • 2018-08-23设计师该不该跳槽到区块链公司?来看入职的人怎么说
  • 2018-08-23苹果Emoji 设计师:几百个风靡世界的表情是如何创作出来的(有彩蛋)
  • 2018-08-23腾讯高级设计师:交互知识树系列之平台规范
  • 2018-08-23如何写出没有“硬伤”的文案?这里有4个实用技巧
  • 2017-08-06jquery-multiselect在ie6里的一个bug的解决方法
  • 2018-08-23YouTube 终于换Logo啦!来看背后的设计故事!
  • 2018-08-23从零开始设计一款APP之Android设计规范篇

文章分类

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

最近更新的内容

    • 在新窗口打开的跳转菜单 window.open使用介绍
    • 上亿人使用的京东“猜你喜欢”功能是如何设计出来的?
    • 淘宝京东这10个搜索细节,你最喜欢哪个?
    • 盲人站长深恶痛绝的onfocus=”this.blur()”
    • 为什么大家都想学服务设计?来看CEO 的亲身经历!
    • psd切图转换为div+css格式
    • DOM编程艺术第二章
    • CSS--overflow:hidden在项目实例中使用心得分享
    • 关于审查元素与查看网页源码的区别
    • 借鉴别人的海报?得先学会这个平面构成分析法!

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

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