个性化阅读
专注于IT技术分析

探索多模式设计– Adob​​e XD教程

本文概述

一位准备在家准备晚餐的母亲在其iPad或SmartTV上打开了一个烹饪应用程序。她使用触摸和语音与应用进行交互, 告诉视频暂停, 快进或重播特定部分。如果选择, 则可以在屏幕上轻按, 而不用使用语音。

使用多交互模式是多模式设计的基础。

在探索多模式设计之前, 让我们从对两种交互类型的基本理解开始:计算机对人的交互和人对计算机的交互。这些交互中的每一个都包括各种模式, 例如语音, 触摸和Taptic反馈。

人机交互

计算机人(或计算机对人)的方式可帮助计算机了解用户的需求。最常见的计算机人形式依赖于视觉, 听觉和触觉能力。一些示例是计算机图形, 音频播放, 电话振动和智能手表Taptic反馈。

人机模式

我们发明了几种与计算机互动的方式。一些示例是键盘, 鼠标, 触摸屏, 触控板和语音识别。在这种情况下, 用户依靠各种机制与计算机通信并命令计算机。

加速度计, 陀螺仪和磁力计等更复杂的示例有助于运动检测。考虑在控制台上打网球并使用游戏板模拟球拍的运动。这带来了更多机会来创建独特且引人入胜的[多模式]用户体验。

多模式界面为设计师提供了增强用户体验的机会。

用于游戏内射箭的Nintendo Switch控制器是多模式界面的一个示例。 (仅限Gameplay)

为什么要进行多模式设计

多模式设计的思想是结合多种模式, 以改善产品的用户体验。由于每个人都以不同的方式和不同的环境使用产品, 因此为用户提供了多种反馈机制, 并提供了多种与计算机交互的方式。

通过采用不同的方式合并和自动执行操作, 设计师使用户的生活更轻松。如果只有一种模式机制, 它将对用户体验产生负面影响, 并且设计将在用户心中”失败”。

一个例子是汽车信息娱乐系统。这些系统大多数都允许用户与语音和触摸进行交互。开车时, 显而易见的选择是使用语音来拨打电话或导航, 但是在停车时, 使用触摸屏或滚轮与系统进行交互最容易。

以下是我们在多模式设计中常见的其他一些示例:

  • 图形用户界面依赖于我们的愿景, 例如与网站或数字广告牌进行交互。
  • 语音用户界面依赖于我们的听觉功能进行交互。这包括任何语音助手, 例如Alexa, Google助手或Siri。
  • 触觉, 手势和动作依赖于我们对触摸(触觉能力)的感知来触发交互。接收消息或向左滑动以跳过歌曲是两个示例。
智能手表是多模式设计的一个很好的例子。

Apple Watch是多模式交互设计的一个很好的例子。 (约翰·谢罗德)

在为有一定限制和残障的人设计时, 多模式设计也很有帮助。

一个简单的多模式设计示例:SmartHome

漫长的一天后, 罗伯特回家。一旦他进入车库一英里, 他的家庭自动化系统就会被触发。系统识别出他已经到达并开始一系列自动动作。例如, 打开灯, 调节加热和冷却, 并关闭警报系统。

接下来, Robert可以使用遥控器, 也可以要求具有AI功能的助手在走进来时调低热量。

复杂的多模式设计经验:健康

现在, 我们能够使用智能设备捕获来自用户的更复杂的输入。我们可以测量压力水平, 心跳, 睡眠周期, 饮水量以及近期血糖水平等输入。

一旦存储了这些输入, 诸如Fitbit和红十字会的急救之类的设备和服务就会以振动警报, 腕部轻敲”轻敲”或声音警报的形式提供有价值的救生警告。

这是多模式设计的更复杂用法, 因为需要正确计算输入与输出的平衡。该设计不得发出任何错误警报, 以免使用户陷入恐慌。

无论是设计简单的还是复杂的多模式体验, 更好地理解多模式设计的最佳方法之一就是着手进行设计。让我们看看如何使用Adobe XD实现这一目标。

在Adobe XD中制作多模式体验的原型

流行的UX设计工具Adobe XD最近在其功能库中添加了语音命令和回放功能。通过利用它们, 我们可以添加诸如语音和音频回放之类的方式来创建多模式用户体验。

举例来说, 让我们为烹饪应用制作移动旅程的原型。厨师正在展示如何烹饪牛排, 人们可以告诉应用程序暂停, 重复或继续使用语音或触摸。

我们首先为演示体验所需的所有屏幕制作原型:

关于如何为多模式设计提供原型的Adobe XD教程

单击以查看完整图像。

Alexa技能的所有屏幕均已设计并绘制。

接下来, 我们添加将模拟语音模态的语音命令。在原型模式下, 我们首先连接第一屏幕和第二屏幕。然后, 我们在触发条件下选择语音, 并在命令条件下写出语音以触发此过渡。如果要添加两个或多个语音命令, 则需要为每个命令添加一个连接器。

Adobe XD原型添加了语音触发器

单击以查看完整图像。

在Adobe XD原型模式下向烹饪应用程序添加语音触发器。

对于下一个屏幕, 我们希望系统回答用户。为此, 我们创建了一个时间触发器并添加了语音播放功能。由于我们想立即做出反应, 因此将时间设置为0秒。

Adobe XD教程显示了原型模式和时间触发器

单击以查看完整图像。

在Adobe XD中添加时间触发器和语音播放模式。

我们还可以添加传统触发器。在此示例中, 我们将在列表的第二个元素上添加一个点击触发器。当用户点击此元素时, 应用程序将前进到下一个屏幕。结合语音命令和触摸命令是使用多模式设计提供更好, 更周到的用户体验的一个很好的例子。

Adobe XD原型教程添加了tap命令

单击以查看完整图像。

在Adobe XD原型模式下添加轻敲模式命令。

接下来, 我们要说明用户如何在应用程序中暂停和继续体验。由于我们在设计该应用程序时考虑了Amazon Echo, 因此我们希望添加语音命令, 例如” Echo, pause”。

Adobe XD原型展示了运行中的多模式设计

单击以查看完整图像。

在方案的此阶段, 视频(以静态图像显示)被暂停。

为了使视频继续播放, 我们将添加语音命令”回声, 继续”来执行相同的操作。

Adobe XD教程展示实际中的多模式设计

单击以查看完整图像。

在方案的此阶段, 在执行语音命令时不再暂停视频(以静态图像显示)。

这是使用语音触发器的多模式设计的基本示例。其他触发器包括点击, 拖动以及使用键盘或游戏板来控制原型。

仅仅因为存在触发器就很容易陷入使用触发器的陷阱。为了在多模式设计中设计更好的用户体验, 设计人员将需要测试并了解哪些交互最有意义, 以及何时进行。

多模式设计和心理模型

使用模式进行设计时, 请务必记住, 用户对如何发生互动有一套预先设想的期望(心理模型)。例如, 大多数用户希望在触控板上或使用鼠标滚轮向下滚动时, 屏幕会向上移动。

请注意, 在许多情况下, 这些思维模型仍在形成。摇动电话就是一个例子。由于某些供应商使用它来”撤消”打字, 而另一些供应商使用它来随机播放歌曲, 因此它仍然是一种晦涩的交互。

选择用于产品设计的方式时, 请务必注意这些思维模型。使用熟悉的方式可以增强用户体验。仍在形成的模式可能会使用户感到困惑并降低体验。

振动模态的多峰设计思维模型实例

微信使用摇动查找你周围的人或识别歌曲。

新兴模式:对话设计

聊天机器人和语音用户界面是吸引人的两种方式。有时称为对话用户界面, 主要重点是文本和语音交互。

聊天机器人可以利用界面来接收诸如文本之类的输入, 并且能够显示图形, 链接, 地图和对话对话框。一些聊天机器人可以通过语音接收命令, 然后将结果显示为文本或使用合成语音。

纯语音交互也正在兴起。可以考虑将Siri或Alexa扩展到智能家居设备, 在该设备中, 用户无需输入任何内容, 而仅与语音进行完全交互。这对设计师来说很重要, 因为几乎所有对话设计经验都是多模式的。

一个很好的例子是来自Maybe的Lily。可以教你中文(和其他语言)并在不同渠道工作的机器人。对话可以在应用程序上进行, 也可以通过与机器人对话来进行。

对话设计带来了多峰设计机会

Lily使用不同的方式通过不同的渠道向用户教授一种新的语言。

摘要

多模式设计使用语音, 触摸, 文本和Taptic反馈, 结合了不同的模式, 以创造更好的用户体验。可以将人机交互与人机交互相结合, 以构建独特的产品体验。

多峰设计也为设计师带来了新的机遇和挑战。诸如Adobe XD之类的工具使使用各种方式对产品进行原型制作变得更加容易, 但是将它们一起使用是一种艺术和科学。

达到完美的平衡, 再加上新模式的出现, 将挑战设计师提高改善用户体验的门槛。

• • •

在srcmini设计博客上进一步阅读:

  • 精确设计– Adob​​e XD评论
  • 探索设计思维批判的原因
  • Chatbot UX –设计技巧和注意事项
  • 聊天崩溃–当聊天机器人失败时
  • 以人为本的设计在产品设计中的重要性
赞(0)
未经允许不得转载:srcmini » 探索多模式设计– Adob​​e XD教程

评论 抢沙发

评论前必须登录!