微交互对产品起着很大的作用，作为产品功能的引导和各种类型的信息反馈，可以以多种形式融入帮助用户完成产品和单个任务的产品要素。 本文对微相互作用进行了详细的分析，为进一步认识微相互作用带你去了。
另一方面，微交互是指将焦点放在完成单个任务或单个事件上，以帮助用户集中精力完成特定任务的产品元件。 这些要素遍布APP的每个角落。 微交互是指触发反馈组，触发功能元素后，通过系统状态的变化做出针对性的系统响应，通过用户界面的变化向用户传递相关信息。
丹萨夫在《微交互》一书中有以下记述。 这些小细节通常具有以下基本功能：
传达反馈和行动的结果。 完成单独的任务。 提高直接操作感。 帮助用户可视化操作的结果，并防止错误。 完整的微交互闭环过程通常包括四个部分：触发器、规则、反馈、循环和模式。
微交互触发可以由用户触发或系统自动触发。 用户触发的微交互一般仅由用户自发发起的动作行为触发，诸如手势操作、语音交互等。 系统触发的微交互只有在系统满足设定的条件时才触发。 规则是指用户或系统触发后会发生什么。 反馈是让用户知道发生了什么并做出选择。 循环和模式决定着在什么情况下微相互作用会再次出现。
二、交互设计与微交互的区别交互设计是交互设计(英文Interaction Design，简称IxD或IaD )、“交互数字产品、环境、系统交互设计不仅在数字领域，在非数字领域也有应用，如探索用户与产品的交互。 交互设计通常涵盖设计、人机交互和软件开发领域。 交互设计位于定义人造物体行为方式( the “interaction”，即人造物体在特定场景中的反应方式)的界面中。
——来源：维基百科
也就是说，交互设计就是人与人、机器、系统、环境等交互的外在表现的设计。 交互设计师需要通过分析用户的心理模型和用户的行为等，设计出符合用户认知模型的用户交互流程和功能框架，帮助用户顺利使用产品。 微互动专注于单个任务或单个事件而设计，是产品功能体验的提升。 其目的是让用户在使用产品的同时产生喜悦和惊讶，提高产品体验。
无论是交互还是微交互，它们都不是功能，而是依赖于某个功能或场景而存在的，需要能够明确表达用户使用产品前后的各种状态和反馈。 在用户未察觉的情况下顺利进行产品的功能操作，实现用户的目标。
三、微交互的作用微交互对产品有很大的作用，它可用于功能引导，如能提示用户点赞、评论、转发分享等，操作后即时反馈同时，可以增加用户与产品的交互，提高产品的用户体验。
根据“全息效应”，如果用户喜欢产品的某一方面，这种喜欢程度可能会被放大，从而对整个产品产生积极的态度。 反之亦然。 配合“空心效果”，细节设计得恰到好处，不仅可以花时间设计产品，还可以提高用户的满意度。
3.1显示系统状态的微交互灵活性，可以插入产品的各个角落。 最常见的是“显示系统状态”，它与“尼尔森可用性定律”相呼应，使用户了解当前系统的状态。 让我们看一下静音操作的示例。
很明显显示系统状态的界面会让你感到更舒服。 这是微交互在产品设计中的作用之一，使用户了解系统的当前状态。 通过向用户传达透明系统的运行状态，使用户感受到强烈的参与感。
3.2鼓励用户参与微交互是非常互动的，可以鼓励参与实际交互，促进用户与产品之间的交互。 通过在产品中加入适合用户群体的微互动动画，可以给用户体验带来共鸣。 但是，考虑到交互式动画的“长期性”，需要保证它在被多次使用后仍然是被爱的。
作者： Jeremy Lefebvre
3.3错误预防错误预防是《尼尔森十大可用性定律》中的错误防范原则，重点是消除容易出错的情况，提供二次确认操作。 微交互的作用是将反馈传递给用户，通过可撤销原则和防止重用原则为用户提供良好的用户体验。
3.3.1可撤销原则
在使用产品的过程中，误操作是不可避免的，因此产品需要方便用户撤销误操作。 这样，用户就不用花很多力气去解决最初不想做的事情了。 微交互是可撤销的最佳方法，因为它可以直观地通知用户系统状态发生了什么变化。
例如，用APP点外卖的时候，我们的选择可能有很多不确定性。 每种商品被选中后都会有添加到购物车的导购视频，提醒用户注意界面的潜在变化，告诉用户购买的商品都存放在里面，购买了很多商品后，发现部分是不需要的，于是购买清单这种处理方式给用户带来了很大的便利，提高了产品体验。
3.3.2防重原则
为了防止重复，APP场景最多的肯定是表单信息的提交。 当表格中有大量需要填写的信息时，在填写并提交后告知输入了哪些信息是错误的，实在是太可惜了。 为了避免这种情况，在填写表格时，可以加入一些防止错误输入的小反馈，从而很好地解决问题。 另外，如果输入格式错误、存在不需要的信息等错误输入，可以立即收到错误输入的反馈，通过发现并解决问题，给用户带来好的结果
3.4更改突出显示在某些使用场景中，需要显示系统通知，以便用户可以识别。 此时，可以利用微型互动动画，引起用户的注意。 但在设计微交互动画时，必须注意不要过于复杂。 微型互动动画必须小而简单。 也就是说，达到吸引用户注意力的目的，不会过度影响用户对产品的正常使用。
作者： Jon Anto
3.5可视化输入用户在使用产品的过程中，经常遇到信息输入的场景，往往这些操作步骤简单枯燥。 为了提高输入操作的整体体验，可以结合微型交互动画处理和反馈信息的输入。 通过加入微交互，不仅可以明确内容信息的层次，还可以帮助用户实现目标。 在整个过程中用户的主观感受会更加舒适。
作者： Ayoub kada
3.6接口关联可以使用相同的元素增强操作之间的一致性，增强操作体验的便捷性，达到减少用户流失的目的。 相同的元素包括前后页面通用的元素(例如图像和单词)和在同一页面中具有逻辑操作关系的两个元素。
作者： Alexander Kontsevoy
四、微力效应微力效应是一种功能效应，不同于影视游戏等领域具有娱乐属性的体验效应，功能效应具有清晰的逻辑针对性，聚焦于了解用户当前所处的状态和解决产品问题。 动态融合可以让产品设计更人性化，很多微交互效果在实际操作中不会被用户注意到，但如果缺乏，会让用户感到明显的缺失感。
动态效果往往作为各交互之间的有效连接手段，使整个产品的交互和过程更加完整和流畅。 产品动态嵌入的目的是吸引用户，但不能让用户分心。 例如，如果将动态添加到整个产品首页的元素中，并移动所有元素，用户会看到哪里呢？ 这恰恰相反。 另外，不要太复杂或使用特殊的动画效果。 这些容易给用户带来不良的产品体验。
五、微交互效果设计原则良好的微交互效果，在设计上要有克制清晰的任务目标，并且自然流畅。 设计微交互效果时，应遵循以下三个核心原则：
抑制度：控制效果的持续时间和出现频率，不增加额外的操作成本，不干扰用户产品的正常使用。 焦点清晰：强调，逻辑性强，给用户充分的显示时间。 自然流畅：要保证视觉的连续性，不卡住、不闪烁、不跳跃。 为了明确效果和实现目标，设计时需要注意以下几点。
)1)引导用户注意
设计时请考虑到您想有效地将用户的注意力吸引到产品的哪里。
)2)效果目标
有效的目标必须考虑以下各项之一：
a .使用效应器引起用户注意时，必须考虑用户是否需要立即注意到效应器的变化并立即采取行动。
b .当不同状态之间使用特定的元件转变时，维持视觉连续性。
c .使用动态效果显示用户注意范围内不同元素之间的层次关系。
)3)出现频率
必须明确交互在一个会话中发生的次数。
)4)触发机制
触发机制分为两种用户直接出发和间接出发，需要明确触发机制是哪一种。
a .用户操作后，直接触发交互式动画。 例如，Hover事件触发了按钮的动画效果
作者： Aaron Iker
b .用户交互后，间接触发交互式动画。 例如，当用户向下看界面时，可以触发页面内容加载的效果。
作者： Saptarshi Prakash
六、微交交互效应的时间问题效应是服务于产品的，所以效应的好坏对用户体验有着重要的影响。 有效的设计不能以自我满足的观点进行设计。 你需要遵循一定的设计原则和相关约束。 因为你设计的效果能否最终落地还得靠开发商的开发。 在动态设计中时间是非常重要的设计核心，在动态设计时需要考虑响应时间和持续时间两种时间类型。
6.1响应时间响应时间是指用户执行操作与出现反馈之间的时间间隔，不同触发机制的响应时间限制不同。
a .直接触发用户交互的反馈理想情况是响应时间在100毫秒以内。
b .如果用户操作间接触发的反馈，响应时间将在2秒以内。 超过2秒时，用户会感觉失去了控制权，在1秒左右的时间内，用户会暂时进入心跳状态，集中精力获取系统响应。
c .如果反馈超过2秒，则应设计负载效应，告知用户系统正在努力执行任务。
d .如果反馈结果时间在2~9秒以内，需要使用循环加载效应，趣味化的设计形式，可以缓解用户等待带来的焦虑和不满。
e .如果反馈结果的时间超过10秒，则必须使用具有进度条指示意义的加载样式。 由于可以给用户带来对等待时间的心理期待，加载速度的变化对用户满意度的影响非常大。 如果进度快，最后慢，用户会不耐烦。 如果开始得晚，最终快，用户的内心会非常兴奋，因为这超出了用户的心理预期。
6.2持续时间避免微交流效果持续时间过长，避免占用用户太多时间，影响用户阅读和操作效率。 负载效应以外类型的效应持续时间控制在500ms以内。 如果用户希望清晰地捕捉元素的变化过程，持续时间需要超过200ms； 如果用户认为元素的瞬间变化也能接受，持续时间可以控制在200ms以内。
例如，鼠标的Hover事件，动态效果几乎瞬间发生，用户不会感到奇怪，感觉系统响应非常快。
微交互效应的具体持续时间不仅受元素自身大小和动态效应复杂度的影响，还受动态效应目标和运行动态效应设备的影响。 由于不同的机器有性能差异，即使是相同的动画效果，性能好的机器也能完美顺畅地动作，但性能差的机器会产生卡顿，自然会延长持续时间。
a .小元素的微小变动效果通常在200~300ms以内。
B .大元素的复杂波动效应，时间可以延长到400~500ms。
C .运动快速的运动效果容易引起用户的注意，同时也节约时间。 如果运动元素位于用户视线之外，则可以使用能在短时间内对元素产生重大变化的动画效果，例如变化范围大的元素的位移动画，以引起用户的注意。 当运动元素已经在用户视线范围内时，为保证视觉连续性，动画效果过度完成即终止，避免分散用户注意力。
D .运动慢运动效果对用户注意力的影响较弱，适合非用户直接触发的场景。 如果效果不是直接由用户触发的，而且不希望分散或分散用户的注意力，则可以控制长期变化较少的动画效果。
根据装置的不同，有效的持续时间也不同。 另外，不同的装置屏幕尺寸和性能也不同，因此理想的持续时间也不同。 一般来说，移动设备的屏幕越大，有效的移动距离也越大，因此持续时间也应该越长。 在可穿戴设备上的有效期比手机快约30%，在平板电脑上的有效期比手机慢约30%。
对于台式设备，可移动性设计得比移动设备更简单、更快，一般持续时间为150-200毫秒。 在桌面机器上，如果可动效果过于复杂的话，容易发生纸箱和丢帧，所以迅速的应对可以很好地避免这个问题。
效应器的出现时间比入场时间短。 效果在入场时需要让用户获得效果想传达的信息，所以必须很慢，但效果出现时用户在这个点已经完成了任务，表示不需要效果要素，所以为了节约用户的时间，需要素材。
七、常见的效果类型在微交互效果设计中，只要位置、缩放、旋转、透明度四个基础属性能够满足目标需要，就不需要添加其他属性，影响设备上的效果的流畅度为了在加速和减速的运动过程中更自然地协调运动效果，有必要调整他们的运动节奏。 也就是曲线的调节。 属性变化分为线性变化和曲线变化。
7.1线性变化的线性变化属性具有等速和突然停止的特点，常用于与物理属性无关的瞬态效应或速度恒定的循环效应。 线性变化常常会令人尴尬和不自然，因此不应应用于与物理属性相关的动态效果。
例如，如果小球体振子的运动呈线性变化，则整体运动节奏看起来非常可疑。 因此，与物理特性相关的运动需要使用曲线变化，使整体运动具有节奏感。
7.2曲线的变化曲线包括多种类型，而缓动曲线在微交互效应设计中应用最为广泛，效果最为自然。 缓动曲线包括标准曲线、减速曲线、加速曲线、锐化曲线。
a .标准曲线( Ease In Out )是最常见的缓动曲线，运动因素在运动初期快速加速运动，然后缓慢减速。 常用于将元素从一个位置移动到另一个位置。 例如，当元素进入或离开屏幕时，屏幕上的其他元素会发生偏移时，建议使用。
b .减速曲线( Ease Out )多用于元素从画面外进入画面时，元素以全速进入画面，逐渐减速到达指定的目标位置。
c .加速曲线( Ease In )多用于元素离开屏幕，元素离开屏幕的时间比元素进入屏幕的时间短。
d .锐化曲线。 锐化曲线类似于标准曲线，也称为Ease In Out。 元素加速和减速变化较快，主要用于现有元素离开屏幕后返回的情况。
八、微交互设计常用工具目前微交互设计的工具有很多。 列举一下作为设计师可以得到的工具。 例如，帧x、打印、AE、Origami Studio、Protopie和Figma。 对于哪个工具好用没有相对的评价标准，选择只是针对个人的需求和易用性。 如果熟悉代码，建议使用Framer X。 控制性非常高，可以在实机中体验实际的效果。 如果想要简单易用，请选择Principle、简单有效的交互式创建工具，或者想要创建任何细节的交互式动画，请选择After Effects。
以下是这些交互式动画设计工具的介绍。
8.1 Figma这个工具可以实现简单的交互效果，轻松表达页面之间的逻辑操作关系，对于产品和交互设计师来说非常方便，云同步功能也不需要各种备份。
8.2 After Effects这个工具在设计上可能不熟悉。 可以通过AE制作很多充满细节的交互效果和动画作品。 基础位置、旋转、透明度和缩放属性也可以创建许多动画效果。 软件的高度可控性对设计师的要求更高，最终的效果如何是全屏设计师的经验和软件熟练程度，用AE制作交互效果需要耐心和创造性。 唯一不好的地方可能是不能真实体验效果了。
8.3 Principle是一种轻量级的交互式动画制作工具，简单易用受到很多设计师的欢迎，但该工具只能在Mac电脑上使用。 对于缩放、平移、界面跳转等简单的交互效果，可以连接移动设备体验效果。 配合AE制作交互式动画，简直是完美的组合，弥补了AE不能直接体验效果的缺点和Principle不能制作复杂效果的缺点。
8.4 Protopie界面看起来像Principe的工具，但功能比Princple更完善，很多触发器和反应动作可以满足你想做的大多数交互效果。 另外，支持陀螺仪、指南针、声音等移动设备传感器，通过传感器的触发实现视差效应、指南针与语音的相互作用等动能效应可以说非常强大。
8.5 Framer X可以方便地利用Framer构建网站，无需输入代码，也可以实现自适应布局。 目前与Figma相通，通过插件将Figma的文件导入到Framer中制作交互效果很容易实现。 目前，一些设计师已经将一些网站模板开源，供大家经常使用。 而且，如果你熟悉React代码的话，你可以更加致力于网站的建设，实现很多有趣的交互效果。
作为设计师，你可以用这个工具构建属于自己的个人网站。 不需要代码知识就可以一键发布。 只是，访问速度可能有点慢，但效果非常好，对找工作非常有用。
8.6 Origami StudioOrigami Studio是新一代的原型设计神器，将设计好的交互效果直接传递给移动端的APP origami live，通过移动设备进行离线浏览，实现交互效果此外，工具本身还提供了对相机、振动功能等多种设备基本功能的调用，可以产生逼真丰富的原型交互效果
与其他原型设计软件相比，Origami Studio具有更丰富的界面和可控参数，可以导出效果并保存在手机中，可以随时随地进行效果演示。
工具是实现想法的手段，想法的想法是最重要的，所以掌握多少设计工具不需要执念。 不要做设计中的万金油，而要做领域深耕的人造黄油。
九、微交互的总结是一种产品元素，能够帮助用户集中精力完成单个任务或单个事件。 微交互和交互设计是有区别的，交互重视产品的功能框架和用户的操作流程，微交互的目的是让用户在使用产品的同时产生喜悦和惊讶，提高产品的体验
微交互作为产品功能的引导和各种类型的信息反馈，常常以各种形式穿插在产品的各个角落。 例如，显示系统状态和接口跳转之间的关联。
微交互效果应遵循抑制程度、清晰聚焦、自然流畅三个设计原则，此外还要注意效果目标、出现频率和触发机制等问题，使效果具有清晰的用途，达到预期目标针对微交互效应的响应时间和持续时间，需要根据用户触发类型、反馈结果提示时间、以及操作设备类型进行综合判断，选择适合用户行为习惯的最佳时间。 在动态设计中，请注意选择属性变化的曲线类型。 曲线类型不同，效果的感受也不同。
每个人都有不同的微型交互效果工具选择。 每种工具都有自己的优点，大多数情况下，多种工具会协作以达到一种效果。 在工作中我们想要的只是结果，用什么工具完成其实并不重要。
作者：王雨_Vision，公众号： RVDesign
本文由@王雨_Vision原创发表，每个人都是产品经理。 未经许可禁止转载
标题来自Unsplash，基于CC0协议
本文的观点只有代表本人，每个人在产品经理平台上只提供信息存储空间服务。
