多模式界面设计-Adobe XD

398 阅读8分钟
原文链接: www.zcool.com.cn


近年来,用户界面正在发生着巨大的变化,现在,语音界面正在逐渐代替图形界面占据主导地位。并迅速成为了我们日常生活中的常见部分。自动语音识别(APS)和自然语言处理(NLP)的发展,已经影响了基于语音的界面的快速发展。


使用语音作为主要界面的产品正变得越来越受欢迎,并且使用人数还在持续增长。现如今,语音交互在汽车领域的应用也已经逐渐普及了。但这是否意味着未来的界面将只是语音?我想在未来,语音不会完全取代图形用户界面。相反,我们将以新的界面格式实现语音,视觉和手势的协同作用:一种支持语音的多模式界面。



语音输入作为人机交互的一种形式,对人们来说是更自然的交互 - 用户在与系统交互时不受限于特定语法;他们可以用许多不同的方式构建他们的输入,就像他们在人类对话中所做的那样。


语音用户界面为用户带来以下好处:


  • 较少的交互成本

  • 免提控制(VUI非常适合用户双手忙碌时)

  • 更具情感化和个性化

  • 可访问性(这一点对于视力不太好的人来说还是很不错的)

  • 三种启用语音的接口(语音代理,比如Siri;纯语音设备,语音优先设备)



多模式接口


在UI设计中使用语音时,不要将语音视为可以单独使用的内容。多模式界面是一种在单个无缝UI中融合语音、触摸、音频和不同类型视觉效果的界面。它比仅依赖于视觉效果或仅依赖于语音的产品更复杂。


当我们在现场音乐会上听音乐时,我们的感官一起工作。 如果消除一种感觉(例如,听觉),体验将会呈现出完全不同的感受。在这里,多模式设计是一种思考和设计将我们的感官能力联系在一起的体验方式,它让通信变得更加人性化。



视觉VS语音


将语音和视觉视为输入和输出的通道非常重要。每个渠道都有自己的优缺点。


让我们从视觉开始。很明显,一些信息在我们看到它时更容易理解,而不是在我们听到它时。下面,我们举例来讲一下:


  • 一长串的选项列表;

  • 数据量大的信息(如图表和图表);

  • 产品信息和产品比较。


但是,对于某些信息,我们可以轻松地依赖口头交流。语音可能适合以下情况:


  • 用户命令;

  • 简单的用户说明;

  • 警告和通知。



设计基于语音的多模式接口


语音是UX设计者最大的挑战之一。尽管它具有新颖性,但设计支持语音的多模式界面的基本规则与我们用于创建视觉设计的规则基本相同。在这里,设计师应该更多的去关心他们的用户。通过有效的方式来解决问题并优先考虑清晰度以使用户的选择更加清晰,减少出错率。但是,多模式接口也有一些独特的设计原则。


  • 首先,你要确保你解决的问题是正确;

  • 创建会话流程(以用户为中心,用户尽量不花费额外的时间学习如何与系统交互);

  • 力求一致性,有助于建立对交互的熟悉程度;

  • 始终提供反馈;

  • 提供会话标记;

  • 让用户知道系统正在听(显示可视指示符);

  • 避免长句;

  • 按顺序提供后续步骤;

  • 建立用户的信任;

  • 个性化和情感化的设计;

  • 不要忽视安全和数据隐私;

  • 有一个强大的错误处理策略(不要责怪用户、提供错误恢复流程、让用户重播信息、提供停止措辞、处理意外的谈话、分析错误策略、连接上下文对话、了解用户行为);

  • 进行可用性测试;

  • 产品开发的早期阶段(使用lo-fi原型进行测试) ;

  • 产品开发的后期阶段(使用hi-fi原型进行测试)。



如何使用Adobe XD创建多模式界面


原型设计是设计过程的基本部分。到目前为止,想要在原型设计中融入语音的设计人员几乎没有可靠的工具,其中最强大的是流程图。而借助Adobe XD,设计人员现在可以访问语音媒体,并可以在原型中使用它。XD在一个应用程序中无缝连接屏幕和语音原型。


Adobe XD团队以一种自然而直观的方式集成语音。设计人员可以使用语音触发器和语音播放来与原型进行交互:


  • 当用户说出特定的单词或短语(话语)时,语音触发器会启动交互。

  • 语音播放使设计人员可以访问文本到语音引擎。XD会讲设计师定义的单词和句子。


XD的优点在于它不会强迫您学习每个语音平台的复杂性。接下来,让我们看看它是如何运作的。对于您将在下面看到的所有示例,我使用了为Amazon Alexa使用Adobe XD UI工具包创建的画板。


假设我们有以下画板:



让我们进入原型设计模式,添加一些语音交互。我们将从语音触发器开始。除了点按和拖动等触发器,我们现在还可以使用语音作为触发器。我们可以将任何图层用于语音触发器,只要它们具有通向另一个画板的手柄即可。我们先把画板连接在一起。



一旦我们这样做,我们将在“触发器”下找到一个新的“语音”选项。当我们选择这个选项时,我们会看到一个“命令”字段,我们可以用它来输入一个话语 - 这就是XD实际上正在聆听的内容。用户需要说出此命令才能激活触发器。



就这样!我们已经定义了我们的第一个语音交互。现在,用户可以说些什么,原型会响应它。但是我们可以通过添加语音播放来使这种交互更加强大。


选择整个第二个画板,然后单击蓝色手柄。选择带有延迟的“时间”触发器并将其设置为0.2秒。根据动作,您将找到“语音播放”。我们将记下虚拟助手对我们说话的内容。


使用Command选项输入话语或说出命令以激活触发器



我们准备测试我们的原型了。选择第一个画板,然后单击右上角的播放按钮将启动预览窗口。与语音原型设计交互时,请确保您的麦克风已打开。然后,按住空格键说出语音命令。此输入触发原型中的下一个操作。在这里,使用自动动画使体验更具动态性。


借助Adobe XD中的“自动动画”功能,可以更轻松地创建具有沉浸式动画过渡的原型。


让我们看看它在我们的设计中是如何工作的。假设我们在Amazon Echo Show中有一个现有的购物清单,并希望使用语音将新对象添加到列表中。复制以下画板:



现在我们在布局中引入一些更改:添加一个新对象。我们可以轻松修改任何属性,如文本属性,颜色,不透明度,对象的位置 - 基本上,我们所做的任何更改,XD将在它们之间进行动画处理。



当您使用“动作”中的自动动画以原型模式将两个画板连接在一起时,XD将自动为每个画板之间的属性差异设置动画。



以下是用户对交互的看法:



需要提及的一件重要事情是:保持所有层的名称相同; 否则,Adobe XD将无法应用自动动画。


结论


我们正处在用户界面革命的曙光中。新一代接口 - 多模式接口 - 不仅可以为用户提供更多功能,还可以改变用户与系统交互的方式。我们可能仍会有显示器,但我们不需要键盘来与系统进行交互。


同时,设计多模式接口的基本要求与设计现代接口的基本要求没有太大差别。设计师需要保持简单的互动,关注用户及其需求, 设计,原型,测试和迭代。



如果您想了解更多的前瞻信息和权威专家普修的专业性建议,就留言联系我们吧!


来源:Nick Babich :Mixing Tangible And Intangible: Designing Multimodal Interfaces Using Adobe XD


用户调研 丨 HMI设计 丨 UE/UI设计 丨 HMI培训 丨 HMI评测 丨 体验咨询