什么是微交互？他们是如何吸引用户的，你又是如何使用他们的？这是你需要知道的一切
听说过“有时，少即是多”这句话吗？对于微交互，这种说法再正确不过了。它们属于交互设计的保护伞，它们都是关于小细节的——每当用户在应用程序上做手势或点击网站时，微妙的交互。无论是按下时会跳动的小心脏还是选中后变为蓝色的大拇指图标。
微交互无处不在，因为它们提升了用户体验。事实上，大多数时候，除非您是 UX 设计师，否则您甚至都不会意识到自己正在体验这种体验。然而，这些小互动开始塑造用户体验，让我们保持参与，让我们变得清晰，有时甚至让我们微笑。
在这篇文章中，我们将看一些很好的例子，说明如果做得好，微交互可以实现什么，以及如何在原型工具中设计微交互。
微交互如何改善用户体验
当您向开发人员询问微交互时，他们并不总是高兴地尖叫。顾名思义，它们是一系列微型交互，虽然它们可以为开发人员增加一些额外的工作，但结果确实得到了回报。
虽然任何非设计师甚至可能认为它们没什么大不了的，但这实际上与事实相去甚远。微交互 UX 帮助我们部署一系列微小的步骤来改善整体用户体验。原因如下：
它们有助于提高用户保留率
如果处理得当，微交互会刺激大脑中的多巴胺释放，从而创造出小小的愉悦时刻。
这些时刻都有助于改善用户体验并增加用户继续使用您的产品的可能性。这有助于提高您的保留率，就网站而言，还有助于提高返回流量。
他们创造WOW时刻并提升品牌
在增长黑客中，这些时刻也可以引发 WOW 时刻，这是用户在入职阶段确定您的产品适合他们的时刻。
微交互的伟大之处在于，它们还让我们有机会建立我们的品牌个性，给用户留下更深的印象。
它们提高了可用性和直观性
此外，如果处理得当，微交互可以提高可用性。这是因为它们是一种向用户提供持续反馈的方式，通过告诉他们系统正在做什么并让他们知道他们的操作何时被网站或应用程序成功注册。
因此，整个用户体验变得更加直观和互动。
如何为微交互辩护
人们通常需要先看到解决方案，然后才能让他们相信它有效。开发团队中的开发人员、客户和许多其他利益相关者是这种情况。
这就是为什么拥有一个网站原型工具来充分展示您的微交互并准确展示它们将如何以及在何处帮助用户是很重要的。下面，我们包含了一个关于如何在 Justinmind 中轻松设计微交互的部分，以便与您的开发团队分享并对您的用户进行测试。
微交互的类型
有许多类型的微交互是可能的，而且随着技术的进一步进步，这个列表还在不断增加。但是，重要的是要了解基本的微交互，它们是：
点击效果
滑动效果
点击并按住效果
滚动查看
下拉刷新
进度条
错误
声音
按钮状态变化
触
鼠标悬停/悬停效果
滑入/滑出
系统反馈
页面过渡（淡入淡出、爆炸等）
现在让我们来看看上述微交互的一些很好的例子，以及它们在现实生活中的样子。
20 个微交互示例
1. 在 twitter 上关注推文 - 点击效果
每当您点赞评论时，Twitter 都会以它的小心脏的形式为我们提供一个微交互的光辉例子。这个有用的小动画不仅让您在“收到”推文时感到更满意，而且还可以告知您何时何地喜欢该特定评论。
如果每次点赞评论时都没有发生这种微交互，那么您可能不确定是在滚动时不小心按下了它，还是以前喜欢过它。动画发生在那一刻的事实，而不是心形图标只是变成红色，这意味着您了解并正在确认它确实在那一刻发生。
2. Facebook 反应功能 - 长按效果
同样值得一提的是 Facebook 的反应选项。例如，如果您想给评论点赞，只需点击原始的点赞按钮即可点赞某个内容，该图标始终存在于点赞帖子和评论中。
但是如果你点击并按住，你会得到一个完整的交互列表。为了在那一刻增加一点额外的乐趣，每个表情符号都是实时动画和移动的，笑的表情符号实际上是在笑。点按和按住比点按需要的时间稍长，因此 Facebook 通过生成有趣的动画表情符号列表来奖励用户。
3.突出显示表单上的选定字段-点击效果
这个表单微交互示例展示了简单的小细节如何使填写表单更加直观。例如，当前活动的表单（用户输入文本的位置）会略微突出显示，其边框为蓝色。
以这种方式突出显示字段是确认字段已被主动选择并准备好写入的好方法。这已经可以通过闪烁的线来确认，但在充满字段的形式中，更清晰、更有帮助和您可以更好地提供给用户的反馈。
4. Design Season UK - 鼠标悬停效果
Design Season UK在微交互方面做得很好。交互是微妙的，因为微交互应该是这样的。链接带有下划线，当用户将鼠标悬停在链接上时，下划线会稍微向外移动以显示 a) 链接可点击且 b) 他们即将点击该链接。
定义用户可以从中选择的所有类别的按钮从带有黄色文本的黑色背景变为带有黑色文本的白色背景。这些鼠标悬停和悬停有助于减少用户的认知负担，同时还提供流畅、愉快和动态的效果，不会以任何方式产生干扰。
5.山丘光标变化-鼠标悬停效果
你的特斯拉还不够吗？还需要一些配件吗？嗯，这正是 Hills 所提供的。然而，作为 UX 书呆子，我们更感兴趣的是他们在改变光标的微交互上有趣地使用鼠标。
虽然没有任何令人兴奋的事情发生，但光标根据可以对页面上的各种元素执行的操作而变化这一事实提供了一种非常动态和直观的体验。
例如，英雄图像实际上是用户可以滑动的旋转木马。光标发生变化以显示可以在屏幕上拖动图像。向下滚动并将鼠标悬停在更多图像上，您会注意到根据可能发生的交互，光标会发生进一步的变化。在某些图像上，它表示该图像是可以单击的链接或可以放大的图像。
6.Hootsuite磁卡-鼠标悬停效果
Hoostuite也让鼠标悬停在微交互上。他们知道自己在做什么的一个很好的例子是，当用户将光标悬停在其主页上的每张卡片上时，他们会注意到简洁的鼠标悬停效果，该卡片位于折叠下方。
效果微妙且不刺耳，卡片略微向上跳跃，几乎就像被磁力拉向光标一样。这让用户知道卡片是可点击的，并通知他们将点击正确的卡片以获取他们需要的信息。
7.继续应用-鼠标悬停效果
如今，当谈到有趣的 UX/UI 设计时，我们永远不会远离灵感。这个按钮微交互示例演示了一个有趣的概念，即单击按钮继续填写他们想要申请的任何申请。
设计师通过在左侧添加一个元素将其提升到一个新的水平，该元素由一个动态图标组成，当用户将鼠标悬停在按钮上时，该图标从文件夹变为表单。它不仅表明它是可点击的，而且还把原本可能很无聊的按钮变成了一个微小的喜悦时刻。
8. Nike Training Club (NTC) 应用程序：触觉反馈
在耐克训练营的应用程序是使用触觉microinteractions传授反馈通过Apple关注的触觉反馈功能的用户的一个有趣的例子。NTC 以组和锻炼之间的振动形式为用户提供这种反馈。
这是一种让用户知道什么时候该暂停并查看他们正在锻炼时的统计数据的有用方法，但一直注视屏幕可能不切实际。如果您正在听振奋人心的音乐，您可能不希望它被砰砰声和其他噪音打断。它还可以让用户与应用程序保持互动并不断检查它，而不会中断您的锻炼流程。
9.密码错误反馈
这个密码错误微交互之所以被列入名单，仅仅是因为它是如何以一种微妙且不强硬的方式提醒用户他们有问题的杰出例子。
结合运动动画，通过像页面一样抬起元素的一角来稍微改变元素以显示错误符号，这是一种很好的方式，可以让用户以一种有趣的方式一目了然地知道某些地方出了问题。
有时，通过不止一种反应通知用户是好的方法。特别是如果我们考虑到一些用户可能有色差，而一些用户可能很着急。以及稍微改变元素。
10. 殖民火星 - 滚动查看
好吧，我们明天可能不必去火星了。然而，虽然在这个阶段殖民火星似乎仍然是一件遥不可及的苦差事，但让我们花点时间来欣赏一下在火星殖民上使用滚动视图微交互。
当用户向下滚动页面时，火星确实会膨胀。它表明火星越来越近，未来可能不得不殖民它的可能性也是如此。向下滚动页面，您将看到一个极简主义的滚动视图微交互，其中包含在黑色空间中出现和消失的简短易懂的事实段落（就像上面的空间！）。
这样做的方式是让用户感觉他们正在发现事实（就像人类正在发现更多关于空间的信息），因此感觉像是一种奖励。
11.Taskade进度条-系统反馈
Taskade将简陋的进度条翻转过来，创造了一种带来愉悦感的微交互，而不是缓解不耐烦的痛苦。他们没有改变进度条传达的含义，当然，这就是进度。相反，他们只是以不同的方式使用它。
它的工作原理是用户创建他们自己的需要完成的项目或任务清单，当他们检查每个项目时，进度条开始填充每个被检查的项目，并划掉项目。
划掉和填充进度条都会给用户带来愉悦感，因为他们真的觉得自己正在完成工作。它还有助于让他们一目了然地了解剩余的工作量。
12. 3D spinner - 系统反馈
每个人之前都见过旋转器或圆形装载机。这种创新的微调微交互通过包含多个圆圈相互移入和移出的 3D 效果将其提升到一个新的水平。它有点不同的事实意味着用户会从等待屏幕加载以欣赏美丽的动画效果的痛苦的不耐烦中分心。
然而，如果我们对这个 3D 旋转器有一个建设性的批评，那就是它应该放慢一点，如果它移动得太快，快速移动会产生不和谐的效果和令人作呕的效果。
13. WhatsApp：他人代写——系统反馈
如果不提及 WhatsApp、Slack、Discord 和 Skype 等许多消息传递应用程序的微交互，该列表就不会完整，这表明我们的一个联系人正在给我们写信或回复消息。
这样做的原因是它是系统反馈的一个很好的例子，因为它让用户知道他们应该很快就会收到来自那个人的消息，所以他们不会因为他们的消息是否得到回复而陷入困境。
另一个有些用户喜欢或讨厌的微动画是来自 WhatsApp 的蓝色双重检查，用于确认联系人是否看到了您的消息。这是 WhatsApp 系统反馈的另一个精彩例子，它让我们了解此人是否已阅读我们的消息，以便我们知道，即使他们在那一刻没有回应，他们也已经看到了消息的内容。信息。
14. HubSpot bot：他人代写——系统反馈
作为来自消息应用程序的系统反馈的后续，HubSpot对该功能有自己的看法，他们打算创建一个令人愉快的消息传递机器人，看起来像是在实时编写。用户发送一个查询，三个弹跳点表明机器人正在给我们回信。
有趣的是，他们可以将机器人设置为在用户输入评论后立即回复。他们将其延迟一两秒钟这一事实使体验个性化，并使其看起来像是与人类聊天。
15.谷歌助手浮点-系统反馈
在谷歌助理有来自用户的语音命令microinteractions。屏幕底部有两个显着的微交互，四种颜色代表谷歌。
发生的第一个微交互是，当用户说“嘿谷歌”时，颜色形成上下反弹的小点，以表明助手正在倾听。然后，当用户开始说话时，颜色开始代表声波。
这是一种很好的方式，既可以向用户确认应用程序正在收听和接收语音命令，又可以将 Google 的独特品牌融入其中。Siri 也有类似的功能，但声波更具未来感和霓虹灯般的感觉，当用户开始说话时就会启动。
16. Gmail - 滑入/滑出
Gmail 是滑入/滑出菜单的一个很好的例子，因为他们创造了这种令人敬畏的效果，从左到右慢慢地、逐渐地将菜单滑入，而不是让它立即出现，这可能会导致用户感到不愉快的惊讶和在点击一个简单的汉堡包图标后突然面对一个充满选项的菜单，不知所措。
虽然确实有很多应用程序，但 Gmail 是令人难忘的例子之一。因此，它非常适合作为这些类型的微交互设计的基准，特别是因为它是使用 Material Design 方法制作的。
滑动效果的另一个很好的例子是 Gmails 用于存档电子邮件的左滑动微交互。用户所要做的就是在收件箱中的电子邮件项目上向左滑动，然后弹出一个图标，其颜色从调色板的其余部分中脱颖而出。这突出了一个事实，即已经采取了果断的行动，给人一种把事情做完的真正成就感。
17. 拉动彩虹
拉动式微交互设计是用户在想要将更多内容重新加载到屏幕或刷新屏幕时通常习惯的反应。它们通常伴随着一个微调器，然而，这不是一个硬性规定，正如我们从这个动画微交互示例中看到的那样，有一些创新的空间。
主要是动画有循环效果，像这个包含动态循环彩虹效果的微交互，这对用户来说是一种很好的享受，在等待新内容加载时激发积极性，几乎给人一种成就感只需刷新页面或屏幕。
18.拉动刷新品牌强化
这个来自 tubik 的微交互示例是对下拉刷新微交互的另一种尝试，它采用创新的动态微调器设计，几秒钟后，就在加载新内容之前，它会扭曲到公司徽标中。
这是微交互的一个很好的例子，它可以向用户提供反馈，表明事情正在迅速发生，并借此机会将其转变为他们可以加强品牌的时刻。
19. Google Pay卡轮播-刷卡效果
在Google Pay 应用程序上，用户上传的所有卡在打开应用程序并进入主屏幕后立即可见。他们将在可滑动的轮播中展示所有卡片。
这个应用程序是一个很好的通用示例，说明了如何在滑动手势中实现微交互，这与上面的 Gmail 示例略有不同。卡片在类似于现实生活速度的逼真页面上滑过。与向下滚动信用卡列表相比，它的压力也稍微小一些，因为它几乎具有一种俏皮的效果。
他们还关注用户在使用应用程序时可能遇到的各种情况，例如结账时的排队情况。与向下滚动查找某些内容相比，滑动微交互提供了更多的即时性。
20. 放大缩小图片-滚动效果
这个滚动微交互示例中的图像提供了一个有趣的滚动方式。当用户向下滚动页面时，页面上的图像会扩大，并在页面再次停止移动时逐渐缩小。所有这些动态移动都是根据用户滚动页面的速度发生的。
我们喜欢这种微交互，因为它表明即使只是一个简单的更改也可以极大地改善具有大量内容的站点的用户体验，其中滚动等交互很重要。它是众多微交互中的一种，可以加起来并使应用程序看起来更具吸引力。
如何创建微交互
首先，在我们开始考虑在整个产品中实施微交互之前，明确正确的程序很重要。虽然在 UI/UX 设计方面通常没有一成不变的规则，但有好的实践。
设计微交互的实践
在设计微交互时，您应该牢记以下一些事项：
定义将发生什么交互以及持续多长时间
不要让用户将鼠标悬停在元素上以显示更多信息
不要在微交互中淹没你的设计
记住桌面和移动交互之间的差异
尽量保持移动和桌面体验相似
微交互的四部分
最后，考虑微交互的每个部分或阶段对于成功执行至关重要。那些是：
1.触发器：用户或系统会触发微交互吗？如果是系统，它需要什么输入？
2.规则：当用户或系统触发你的微交互时应该发生什么？轻轻一按？鼠标悬停？卷轴？
3.反馈：使用您的微交互向您的用户传达正在发生的事情。页面加载了吗？按钮可以点击吗？是否有其他用户发送消息？
4.循环和模式：提前考虑。
在满足某些条件后，微交互是否仍然可能？
如果一个按钮是灰色的，它是否仍然在鼠标悬停时改变颜色？
在 Justinmind 中进行原型设计和测试微交互
让我们看一个简单但熟悉的微交互。这是我们都习惯看到的东西，我们几乎不再注意到：改变链接的样式。我们都知道。你将鼠标悬停在一个链接上，它会改变颜色以显示它是可点击的。
首先，只需下载 Justinmind 并打开一个新的 Web 原型。将光标指向画布，按“t”键，绘制文本框并输入内容。您还可以通过单击工具栏上的T添加文本。随意将其命名为“链接样式更改”或其他描述性的名称。你也可以选择
选择文本元素，然后单击Add Event。您会发现触发器包括一系列鼠标触发器。在这里，您需要选择On Mouse Over。至于操作，请单击Change Style。
在事件弹出窗口的底部，您会注意到一个下拉菜单，上面写着“选择要更改的样式”。在此下拉列表中，转到Text并单击Color。在“文本颜色”下，选择您希望链接更改为的颜色。
最后，只需单击OK。而已！如果您点击“模拟”按钮并将光标悬停在文本上，您会看到它的行为与您计划的一样。
这可能是一个愚蠢的微交互，但您只需花几分钟的时间，就可以轻松创建一个细节，帮助互联网上的用户。
总结 - 微交互
微交互是用户体验设计师好的朋友，值得向利益相关者传达其重要性。它们是提高用户体验质量的一种几乎看不见的方式，如果实施得当，很少会妨碍到它。知道如何以及何时利用这些微妙的相互作用至关重要。
使用微交互使您的设计更加直观并体现您的品牌个性。使用它们向用户提供反馈，以便他们知道他们的操作正在被注册，并且他们知道系统正在做什么以响应他们的操作。
重要的是，寻找使这些互动尽可能愉快的方法，但不要过度！想想如何通过小的交互转换重要但通用的功能，例如加载、页面刷新、点击、点击和滚动。找到一种方法将这些常规活动变成令人愉悦的时刻，您就赢得了用户体验。