通过微交互实现更好的用户体验 _原型设计

本文概述

微交互的好处
微交互设计最佳实践
解构微交互设计
行动中的微交互：真实世界的例子
了解有关微交互的更多信息

设计产品时, 有许多方法可以改善用户体验, 包括定义角色, 结构良好的信息体系结构以及周到的书面内容。但是, 在设置了此高级结构之后, 较小的交互设计细节就会为用户带来乐趣。
这些细节(称为微交互作用)是产品中旨在实现单一任务并增强自然产品流动性的各个时刻。扫动以刷新数据, 喜欢内容或更改设置都是微交互。它们还可以包括简单的UI动画, 例如, 轻按菜单时滑动菜单的方式, 或轻扫时卡片滑出屏幕的方式。
通常, 用户甚至没有意识地注意到微交互, 但是它们的微妙细节使产品更令人愉悦和易于使用, 因此改善了用户体验。
微交互的好处微交互和UI动画至关重要, 它们可以影响或破坏一个设计, 或者正如家具设计和建筑界的Charles Eames所说：

【通过微交互实现更好的用户体验】细节不是细节。他们进行设计。

文章图片
电子商务微交互, 将产品添加到购物车中(由Elior Helose撰写)
测试和迭代来自用户测试的结果
即使是经验丰富的设计师, 也很少会在第一次尝试时就获得完全正确的设计。因此, 使用用户测试和迭代设计过程是减少产品发布前可用性缺陷的简单方法。
在用户测试阶段, 将测试和分析微交互的可用性, 并在下一个设计阶段进行修订。重复此过程, 直到可用性问题和痛点得到纠正。
遵循微交互的结构
Twitter高级产品设计师Dan Saffer和” 微交互：细节设计” 一书的作者说, 微交互有四个部分。

触发器—触发器启动微交互。一种触发类型是拨动开关, 用于打开和关闭功能。
规则-规则确定微交互如何响应触发器并定义交互过程中发生的情况。例如, 手电筒应用程序使用按钮作为触发器来打开和关闭灯。
反馈-反馈告诉用户微交互过程中发生了什么。反馈的一个示例是带有在线验证的注册表单-如果字段填写正确, 则边框颜色变为绿色, 如果出现错误, 则边框颜色变为红色。这样, 用户可以立即知道对或错。
循环和模式—循环和模式定义了微交互的元规则以及重复使用后微交互的变化方式。例如, 在电子商务中, 当用户之前购买商品时, “ 立即购买” 按钮可能会更改为” 再次购买” 。

文章图片
Google Docs文件名建议
设计微交互的过程与任何设计任务的过程相同：识别用户的痛点并加以解决。在牢记以前的最佳做法的同时, 让我们开始找出问题所在。
用户问题
保持文档井井有条的一种简单直观的方法是简单地用描述性方式命名它们。在大多数文本编辑器中, 即使文件名最终很有可能最终与文件内容相关联, “ 为文件命名” 字段仍为空白。这是一个值得通过微交互解决的过程。
Google的解决方案
Google Docs通过两种方式处理此问题, 具体取决于用户的选择：1)用户可以在输入任何内容之前单击名称字段并立即更改文档名称, 然后将” 无标题的文档” 更改为他们选择的名称, 或者2 )用户输入第一行文字后, Google会自动将其填充为文档名称。用户可以保持原样或更改它。
让我们检查一下详细信息：
扳机
使用” 文件” > ” 另存为” 菜单功能, 或者在台式机应用程序中, 在Mac上按cmd + s(在Windows上为ctrl + s), 可能会有一些触发器来命名文档。但是, 这些方法都没有利用网络的交互性质, 并且它们并不能特别提高用户流量。
相反, Google Docs的主要触发条件是只需单击文档名称字段。字段上的悬停状态显示” 重命名” 工具提示。次要触发器是” 文件” > ” 重命名” , 突出显示名称输入字段。

文章图片
Google文档使用了一个简单但非常有用的工具提示。
规则
规则定义单击触发器后会发生什么。在这种情况下, 文本的第一行将显示为文档名称。但是, 如果用户不想以文本的第一行作为名称怎么办？当用户单击名称输入字段时, 所有文本都将被选择, 并且将通过任何按键删除, 从而使用户易于创建新名称。

文章图片
Google文档突出显示了文档名称, 这使用户可以立即开始创建一个新名称。
反馈
更改输入字段边框的颜色是一种常见的交互方式, 这就是Google文档在此处用于向用户提供即时反馈的方式。

文章图片
更改边框颜色可使用户知道他们要更改的内容。
循环和模式
用户成功创建了文档名称, 并且触发器保持不变, 但有一个关键的区别：该文档现已命名。
此时, 用户可能只希望仅更改几个字母或在名称上添加日期, 而不是更改他们先前定义的全名。在这种情况下, 与以前的规则相反, 突出显示整个文档名称的规则被禁用。

文章图片
设置名称后, Google文档不会突出显示该名称。
结果
定义问题并关注微交互的所有四个部分后, 结果是更加自然, 用户友好的体验。 Google Docs文件命名解决方案可帮助用户使用正确命名的文件保持井井有条, 并简化了文件命名过程。
行动中的微交互：真实世界的例子重新排序任务列表
Apple iOS提醒允许用户点击, 按住并拖动列表项以更改其在列表顺序中的位置, 从而帮助用户保持井井有条, 并消除了多个步骤。

文章图片
更改列表项的顺序就像拖放一样简单。
对社交媒体帖子做出反应
通过单击大拇指按钮或图标来” 喜欢” 内容已成为许多应用程序和网站中常见的UX设计模式。 Facebook通过微妙的微交互在” 喜欢” 之外添加了多个选项, 从而建立了这种交互。

文章图片
Facebook Responses的集合包括Like, Love, Haha, Wow, Sad和Angry。 (由塞思·埃克特(Seth Eckert)提供)
品牌文字突出显示
在大多数浏览器中, 可以覆盖默认的文本选择颜色。宜家使用这种交互模式, 通过以其标志性的黄色和蓝色突出显示文本来添加微妙的品牌细节。

文章图片
宜家以黄色和蓝色品牌颜色突出显示文本。
分享你的位置
Google环聊假设用户想要分享其位置的情况之一是有人发短信” 你在哪里？”
当用户查看此消息时, “ 共享你的位置” 按钮将显示为上下文选项。然后, 他们可以点击该按钮以将其位置的地图自动发送给其他用户。

文章图片
一键分享你的位置(来自TechCrunch)。
滑动选择
微交互可用于回答应用中简单的是或否问题。 Tinder通过让用户向左或向右滑动(否/是)来完成此操作, 具体取决于他们是否喜欢可能的匹配项。

文章图片
运动中的UI微交互：在Tinder上向左滑动表示否, 向右滑动表示是。
搜索扩展
Google收件箱应用程序不仅可以智能地将邮件与文件包进行分组, 还可以通过语音进行搜索, 或者单击即可从最近的联系人中进行选择。

文章图片
当用户的朋友已经在其联系人中时, 他们可以轻松地将其轻松添加到应用程序中。
了解有关微交互的更多信息微交互是改善用户体验的关键部分, 并且有很多资源可用于了解它们的更多信息, 下面列出了其中的一些资源。
要总体上了解有关微交互的更多信息, 请访问Microinteractions, 该网站是Dan Saffer先前提到的” 微交互：设计与细节” 一书的伴侣。在该站点上, 有关于微交互作用的详细说明, 以及有关众所周知的微交互作用的来源的信息, 例如自动校正, 自动完成和剪切粘贴。本书的第一章也可以免费下载。
有关微交互的灵感, 请访问Little Big Details, 这是精选的数字产品微交互集合。它显示了苹果, Trello和StackOverflow等公司如何实现微交互和UI动画的示例。
要了解如何在Framer中创建微交互, 请阅读srcmini Designer, Wojciech Dobry的文章, Framer教程：7个用于改进原型的简单微交互。