通过这篇文章，帮你彻底搞懂微交互

一、微交互到底是什么？

微交互通注于单个事件或者单个任务，这些交互元素遍布于整个 APP 的各个角落。这些微交互存在的目的是户感觉顺畅、愉悦，设计师借此创吸引人或者令人兴的瞬间，或者说，户在这一刻感受到人性。

看看下面的交互吧：

△ Facebook Messenger ，拇指动态表

这个动画是个很典型微交互案例，它实现了三个要功能：

• 呈状态并给予反馈；
• 增强用户操控感；
• 帮用户交互的结果。

二、分解微交互

微交互通常由四部分组的：

• 触：微互的触以是用户触也以是系统自动启动的。用户触的微互通常需要一个动才能启动，而系统触的微互通常是 APP 检测到满某条件才触。
• 规则：规则决定了触发之后会发生么事情。
• 反馈：反馈让用户知道发了什么。任何用户微交互发的时候看到的，听到的，感受到的都反馈。
• 循环和模：循环和模决定了什么状况下微交互会再出现，条件变化时候，微交互会怎么随变化。

三、微交互为何如此重要？

微交互确实是微小的设计元素，但是为何设计师会在这个上面投注如此之多的精呢？这个问题的答案很重要，对于设计师和开发者而言，都应该知道：微交互户更容易解功，它是在情感层面上的设计。

微交互对于产的好处很多：

• 它们让网站更加易导航；
• 它们户更容易和进行互；
• 它们用户提供了交互之后的即时反馈；
• 它们用户以信息提示；
• 它告知用户以素相关的息，比如控件是否是可交互的；
• 它们使得用户体验更加有价值；
• 它们鼓励用户分享、点赞和评论内容；
• 它们更感性，更人性。

精心设计的微互，是谅用户照顾用户的标志。就是为什么微互此受重视，通即时的反馈，用户明白他们该做什么，以及他们做的对不对。

设计恰当的微交互，户对于产和牌有积极的影响，甚至会作到户的行为上，而绝大多数的人并知道这是为么。根据「霍洛效应」，如果户产的某个方面，可会放大至于对整个产都有积极的态，反之亦然。如果够善这一原，在进行产设计的时候够事半功倍，通过适当的细节设计的控制，户更满意。

四、何时使用微交互更好？

通过案例来探讨这个问题。

 UI/UX 设的领域当中，微交互被视作用户之间沟通的重手段，以下7种常见的微交互它们对于用户体验的影响。

1. 滑动交互

滑交互是起点击更直觉更顺畅的一种交互，它有助于户快速切换标签、界面并且获得更多的信息。作为最为见的交互，它会在潜意识中引导户，而户通需要思考就会意识执行。这种交互非有趣，爽快，且令人上瘾。

2. 数据输入

我们很清楚创建新帐号和修改密码类需要大量输的互是烦，经常让用户感到沮丧。诸密码强度的测试和输建议让用户更的推进个程，个程中，尽量借助细节和建议来提升整个输程的验和成功率，让用户主观感受更舒服。

3. 动画效果

动画常常作为交互的一部而存在，它让交互可行，并且给予提升。动画让计更加人格化，许多妙的动效在实际操作中并不会被直注，但是如果缺少它，会让人显受缺失。动效常常作为环节之间的粘剂，让交互和流程更加完整顺滑。值得注的是，动画的目的是吸引用户，但是不能让用户心，或者产生挫败，过于新奇的风格或者动画耗多，都会产生不良的效果，或者让人混淆。

4. 系统状

前系统状态是用户始终应该了解需要了解事情。如用户法感知或者被知到，他们常常会此感到恼，此会关闭网站或者 APP。过微交互让用户确切地了解前系统状态，多长时能完成加载，或者是信息已经被完全提交等等。哪怕是报信息，如足够幽默，样能够维持用户品信任。

5. 让教程有趣

绝多数人都获取信息，获取解决某问题的办法。教程常常用户获得答案的重载体。微交互的加持之下，教程常常能够得到简化，能够加趣，易于理解，好指导用户操作、解决问题。

6. 行召唤

实质上，微交互和行为召唤元素的结合，够更好地推户与 APP 交互，行为召唤的原是通过行为指引、成就感灌输和同心，来吸引户的注意，促使户执行特定的交互。

7. 画效果

动态按钮常常以为一个综合的信息传达的工具来使用，设计师需要关注它的颜、形状、特效、局和纹理，确用户的无缝验。

人类对于及时性的满足有先天的追求。在更大的愉悦面前，观上忽略细节是一种见的倾向，但是这种「忽略」并非看到而是更接于在意，如果缺失了，会感知到。细节是魔鬼。正是有了这些细节上的心设计，才就了伟大的设计和强大的功，这在强户体验上作巨大的贡献。

五、如何设计微交互？

设计微交互对于设计师而言，是一个非令人振奋的事情，因为可尝试的解决方案，并且在探索中发掘户感到惊艳的东西。为了做到这一点，你需要做面的事情：

• 站在用户的角度看待问题，用尽办法让他们明白何使用你的产品。
• 创功性的画，仅要有美感，而且够增强体验。
• 让的用户，用户使用时候的主观感受，决了他们否继续使用下去。如果用户感到愉悦，他们会回。
• 不要让觉烦躁，过多动效可能会让觉头疼，而这个会让用户离开你。
• 使用正常的表述，而不是术术语来表达，因为后者更容易让人觉得沮丧。

六、设计微交互常用的工具

那么设师应该使用什么样的具设微交互呢？下面我根据人验列举出的具：

• 移端：Xcode，Android studio
• 网页端：Framer，CSS动画
• 如你想设计界交互，可以使用 InVision 或者 Marbel
• 如果你想计更详细的交互可以使用 Principle，Adobe CC，Origami Studio，Protopie
• 果你想设计细节互和动画，以使用 After Effects

下面是所计的一些交互：