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

Google对话式交互规范指南(三):设计原则与方法

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

本文主要包含对话式交互,设计规范,谷歌设计等相关知识,Google希望在学习及工作中可以帮助到您

这一小节内容很多,干货满满,提供了非常细致的设计流程与方法的梳理,可以帮助设计师了解如何去思考、开始构建对话交互。在正文之前,还包含一个谷歌对语音设计Tips的讲解视频,图文结合的方式讲述的非常清晰,我也把核心内容听译了出来,配合截图与说明分享给大家。

上篇回顾:《谷歌对话式交互规范指南系列:对话式界面的概念和机制》

以下为设计tips视频的主要内容,视频链接:https://www.youtube.com/watch?v=MSUPVbbhIGA(需要搭梯子),非常建议大家看一下这个视频,讲述的很生动。

首先从宏观角度,引出语言对于人类的意义——各种创新、发明的源泉。语言的诞生历史非常古老,在长久的时间里形成了一些固有的惯例与原则,在设计对话UI时也需要遵循这些原则。以下是对人类的语言、书写、计算机等沟通方式的发展历程梳理。

人类语言的特殊性,决定了对话UI(VUI)的构建与GUI有本质的不同。

之后就引出了对话设计的5个核心要点:

1. 创建用户画像

首先要构思好你的产品品牌理念,举个例子,如果你的产品品牌期望给用户传达快速、高效的意向,那么在设计对话UI时,就需要突出直观、高效、简洁、数据驱动的特点。而如果是更轻松、娱乐化的品牌,那么就可以传达适应性、贴近、亲切的特点。

有了品牌理念,就可以按照几个维度来创建对话UI的Guideline:如对话的节奏、语调、积极性、声音属性、传达印象。

将这些规范明确下来,也有助于设计师与开发在长期的实现过程中,能够有所依据。

2. 突破框架去思考

在定义好对话的品牌意向和基本属性后,不要马上开动设计逻辑。如下图就是我们不推荐的例子:用刻板的逻辑,将机器与用户的场景台词串在一起。

机器与人的对话存在多种多样的可能性,所以并不是像上图那样考虑核心场景就可以了。你需要列举出诸多可能存在的场景,考虑到意外状况,去撰写对话草稿。然后再梳理一个总体的逻辑,如下图,逻辑不需要细化到每个细节、每句对白,重点是要围绕用户的意图展开。

3. 考虑用户场景

设计对话UI需要考虑以下几个场景相关的问题:

  • 用户在哪里?所处的环境是怎样的?
  • 用户正在做什么?
  • 用户使用的是什么设备?
  • 用户的交互体验是怎样的?
  • 用户要完成什么任务?目标是什么?
  • 用户的期望和意图是什么?

试着去满足用户的意图,而不是仅仅考虑满足功能。

4. 对话不存在「出错」的概念

人的表达会存在各种各样的情况,所以不管用户说什么,不要把它当成是一个错误来处理,而是要考虑如何把这转变为一个机会,去推进更顺畅自然的沟通。

5. 站在更高角度去思考

对话UI的使用不仅仅为了好玩,所以不要只是考虑做一个小游戏,而是更多的思考如何让它真正的帮助人们创造价值。Google期望开发者能够一起站在更高的角度,使用这一工具为人们开发更好的产品,创造更好的未来。

以上是视频中的内容概述,一个很简短、概括性的指导。

下面进入正题——本小节的正文主要内容:

我们提倡的设计过程可以帮你在思考用例时更容易,并确保你的对话UI听起来自然,可以作为对开发者创建对话时的可靠参考。

主要步骤包括:

  • 选择正确的用户场景
  • 创建用户画像
  • 撰写对话
  • 进行测试
  • 实现与迭代

一. 构建优质对话体验:选择正确的用户场景

当用户选择对话UI而不是传统UI时,通常会有意识的进行权衡。一般情况下,选择对话UI的场景是他们在户外,没时间看网站上的信息,或是眼睛盯着其他地方,亦或是腾不出双手。

不要试图将现有移动或PC应用直接转换为对话UI。因为对话UI有它自己的节奏和简单的属性,一旦经由其他交互模式演变,就很容易变得复杂。

以下是一些指导原则,可以帮你选择出更适合转化为对话UI的用户场景。

人们可以快速做出回答的场景

这是指那些只需要简单输入的内容,例如基本用户信息、地点、时间与日期。对于用户来说,已经熟知的信息很容易想起来,也比较容易存储,这样你就可以为后续的对话节省时间。

快捷,同时又有强制性操作的场景

这类操作通常可以为用户节省很多时间,使他们获得受益。例如,在几秒钟内订购食品,在30分钟后送达,或是预定搭车,几分钟后出租车会出现在家门口。还有其他的一些便利操作,包括查找答案、快捷计算、记录或跟踪信息,以及任何可以在不中断当前任务的情况下拿出手机或找到一张纸等等。

本身就更适合语音操作的行为场景

某些场景中,你会期望不占用双手去完成任务,例如在做饭的时候听菜谱,或在开车时做笔记。这些类型的用例也能很好的转换到触摸屏幕设备上。因为在这些场景中,与屏幕的交互需要快捷的点击与手势,如果UI能够提供比较快捷、解放双手的交互,就会使操作任务更容易达成。

二. 创建用户画像

在开始设计你的对话之前,首先要思考你期望它听起来如何,要给人传达怎样的感受。如果你要设计一个趣味游戏,你可能会希望采用一种奇特的语气。如果你要创建的是一个新闻阅读器,你也许又会考虑使用更谨慎严肃的语气。

对人物个性的感知

人们会对「媒介」角色(例如虚拟助理)产生像对真人一样的心理反应。我们会本能的将人类个性与性格迁移到数字对话中(无论是语音还是可视的文字对话),哪怕只有很短暂的几秒,也是如此。每段声音都有一个主题,我们会自然而然的在脑海中构建出这个说话者的精神意向。同样的,我们也会像评判一个真正的人那样,去评估程序设计出来的人物特性,不管这些特性是否是有意设计的。

许多人觉得,当他们与那些似乎缺乏交流能力的设备互动时,会显得愚蠢、尴尬。而人类语言具有亲密性和个性化的属性,这些决定了我们通常不会选择使用对话式UI,除非它能提供其他交流模式无法提供的益处。对话式UI的设计应当要符合人们对于一个助手角色(或在谈话中担任的任何角色)的心理模型。而用户研究会帮助引导人们去理解这个模型。所以,我们首先要聚焦到为真实的人而设计,之后再让机器去跟随。

人物画像可以帮助你设计、撰写UI对话,所以要尽早确定,这样就能更容易的决策出正确的用词、语法和句子结构。要记住,无论你是否打算创建用户画像,用户都终将会感知到一个角色,而这一点对你的品牌至关重要,你需要将你期望的被用户感知到的体验串联起来,去有意识的进行设计,而不能把这个机会丢给偶然,听之任之。

三. 撰写对话

现在你确定了用户场景,并构建了用户画像,也许接下来你会想要开始开发,但是一定要拒绝这种冲动。

相反的,你需要用铅笔和纸(或其他你觉得能够写的更快的工具)先构思一下对话。

首先,你可以写一些用户可能会参与其中的独立或多段对话。下面列举了一些思路供你参考:

  • 一个给予用户的「愉悦路径」,即可以用最简单的方式完成任务的路径,不会过于复杂。
  • 其他完成任务的路径,能够使用户完成和「愉悦路径」同样的任务。这可能会是多样化的,因为有的用户会选择一次只说一部分信息,而其他用户可能会一次把信息全说完。
  • 需要进行修复调整的对话场景,例如系统无法支持或不能理解用户的请求。
  • 用户中途退出,以及用户完成任务后对话结束的场景。需要考虑到如何对话的结束足够明确。
  • 对用户的问候语,以及引出对话操作的方式。
  • 当熟悉了对话听起来的感受,就可以开始考虑它出现在屏幕上的方式。Google的操作提供了一系列方式供参考,可以帮你设计在设备上展现的声音和视觉UI元素,以满足体验效果。例如,你可能希望语音助手说出的内容比屏幕展示的更丰富。或是在必要的时候,要针对不同设备创建不同的对话。通常情况下,这种策略是有帮助的,比方说,针对只提供语音体验的设备,去单纯的设计简单的语音交互,如对内容快速重新排序,而对于同时支持语音和屏幕UI交互的设备去设计完整的购物车体验。

使用口语化的表达

也许你会处于好意,使用书面语言来代替口语来设计对话。像是我们通常在书写时会忘记用缩略短语,或使用「this」来代替提到的某种事物,取代口语中,常用的「that」(难道你说话的时候会把“是这样

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

  • 超全面的对话式交互设计流程
  • 想掌握对话式交互?先来学习自然对话的基础知识!
  • 10分钟看懂谷歌语音交互设计规范都讲了些什么
  • Google对话式交互规范指南(九):对话中不存在“错误”
  • Google对话式交互规范指南(七):开启口语表达的力量
  • Google对话式交互规范指南(六):用户对话中的自然惯例
  • Google对话式交互规范指南(五):设计走查清单
  • Google对话式交互规范指南(四):对话UI设计流程与步骤
  • 亚马逊语音交互设计规范(三)Alexa的回应
  • 亚马逊语音交互设计规范(二)用户说的内容

相关文章

  • 2018-08-23更好的表单设计,从这6个设计策略开始
  • 2018-08-23该用哪款字体?来看腾讯小凉的超全中文字体推荐
  • 2018-08-23用苏宁金融的案例,教你学会分析一款App
  • 2017-08-06编制网站首页的基本原则
  • 2018-08-23超全面总结!「完美」的字体系统搭建与维护指南
  • 2017-08-06分享13款优秀的网页线框图设计和制作工具
  • 2018-08-23超全面!如何做好应用程序中的反馈设计?
  • 2018-08-23超全UI设计规范,带你了解规范设计全流程
  • 2018-08-23超实用!西文字体及排版的运用方法(附字体搭配建议)
  • 2018-08-23Uber 设计师:新人和大牛的差距到底在哪里?

文章分类

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

最近更新的内容

    • 写给设计师的AR入门指南之5分钟做一个AR应用!
    • 30个网页设计色彩搭配的优秀案例分享
    • 网易资深设计师:APP应用图标的36个设计方法
    • js、css、html判断浏览器的各种版本
    • 零基础必备:详解十种常见的水彩基本技法+问题总结
    • 我邀请了小米探索实验室的设计总监,和你聊聊智能音箱
    • 使用火狐的web developer禁用网页样式图文详解
    • css代码缩写 div+css布局代码简写规范
    • 这个博主靠P图收获了100多万粉丝,原因竟然是…
    • 超实用!体验设计师如何自建知识体系?

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

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