微交互如何提高产品的使用体验

关注我们，获一手游戏运维方案

辉记培根蛋炒饭
辉记培根蛋炒饭，网易游戏视觉设计师，从事过 2C 端和 2B 端的各类型产品的设计，努力学习提升用户体验方面的知识。好设计就是能跟用户互动交流的设计。

前言

在了解微交互之前可先了解《用户体验五要素》，如下图，产品的设计是自下而上一步步的从概念到完成产品。相反用户则是从上而下的顺序来体验产品的，用户可能并不能直接感受到产品的范围层和战略层，但能直接感受到表现层带来的视觉冲击、框架层带来的界面和信息设计、结构层的交互设计和信息架构。所以本文内容主要展开分享微交互如何在这三层中起到作用。

微交互

先看两个微交互的案例，左边案例一：新浪微博的点赞，弹出一个小动画，增加与用户的互动感和视觉冲击，使点赞更形象有趣，让用户爱上点赞。右边案例二：手指画一个心，形成一个点赞，特别有创意和有趣。这都属于在表现层中利用视觉设计吸引用户。

其实很多人会把微交互简单的理解为是动效，实质上，我们通常见到的那些动效只是微交互构成中的一部分，属于反馈层面的视觉表达。

微交互既不是一个酷炫动效也不是一个庞大产品功能，他是产品功能中通过一些微小的交互操作实现功能的细节，这些细节带给用户的是方便和便捷，能更好的提升用户体验。总的来说，微交互给用户带来好的用户体验主要是这几方面：

在用户操作时清晰表达当前状态。
给用户提供愉悦轻松的反馈。
用户自然顺畅得进行了交互动作完成了功能操作，实现了用户目标。
操作结束后看到自己的操作结果。

如何具体设计微交互？

设计一个优秀的微交互体验方案，首先要了解用户，知道用户要达到什么目的，经历哪些步骤，不同情况下的操作环境。用户经过多少步骤从初始达到目标？会有多少种情况？通过微交互的 4 个构成部分触发器、规则、反馈、循环和模式知道：用户会看到触发器，点击触发器-触发规则（交互操作）-得到相应的反馈-经过循环或模式，从而完成了这个功能的使用并对功能有个认知。

通过微交互 4 个主要构成部分转化成更直观的流程图，下面就来一一介绍每个构成的设计和我们可以通过哪些方式优化。

一、触发器

触发器是启动微交互的物理控件，当触发控件后可以启动下一步交互操作。我们常见的触发器是由用户主动去触发的物理控件，比如：控件、按钮、任务栏、图标等。要让人知道功能如何操作，微交互的触发器就要设计得吸引人、让人明白这个操作功能。在设计中也要理解用户要干什么，让触发器的位置跟用户需求相吻合。

用户心智：符合大多数用户的操作习惯，降低用户的理解成本，比如：一个购物车图标，一个标签能让用户直接明白意图。
展示数据：在激活触发器前，最直观得向用户展示最有价值，比如：未读信息的数字展示、进展数据等。

二、微交互规则相应的交互操作

PC 端使用鼠标有点击、按住左键、右键、拖动等操作，手机端有点击、滑动等操作，除了这些还可以增加手势、声音、触觉等方式来强化用户动作，比如苹果手机的按压（3D Touch）、声音（语音交互）、摇动等，可根据设备的属性和相关传感器考虑。

BaseUI：通过左键按住 + 拖动 + 松开左键进行拖动的交互操作
抖音：上滑-下一个视频、右滑-视频信息、左滑-发随拍、双击-点赞、点击-暂停
3D Touch：通过重按操作呼出 APP 的快捷操作

三、微交互反馈

以最简单的按钮常见两种反馈为例：按钮状态变化 — 表明用户干了什么（按了按钮）按了后发生什么（跳转下一页或者结果发生等等）反馈的目的是：帮助用户理解微交互的操作，通过一些反馈的状态告诉用户“刚才做了什么？”，“到了什么阶段？”，“可以干什么？”，“结束时，什么不能干”。反馈的方式也取决于微交互的规则设计、硬件设备的特性、数据接收等。

3-1 制造情感化的个性氛围

在一些产品的文案中会赋予拟人化语气，比如系统显示 500 时的文案是：“嗯 ~ 这个服务器日常抽风…”；根据产品特性建立一套有性格特征的反馈个性文案，增加亲和感。

3-2 视觉、听觉、触觉反馈

利用视觉、听觉、触觉或者它们的组合提升吸引力，激发用户交互的兴趣。

锤子便签：锤子便签的信纸和便签回形针设计做到还原便签原有的样子，最大的亮点是加入打开回形针，删除后信纸像丢进废纸篓等微妙的动效细节，让用户有真实书写便签的沉浸感，赏心悦目。
输入法：打字时，会出现字符的放大预览，防止打错，同时有类似敲击键盘震感的震动反馈。

3-3 实时反馈

让用户看到自己的操作结果使用户预防错误、让用户看到交互进程以及减少反馈信息复杂度，增加操作的掌控感。

四、循环和模式

模式是规则的一个分支，最主要目的就是执行一种不常见的动作。常见的模式就是：设置，用户可以在其中指定一些有关微交互的选项。循环的核心就是：确定微交互的持续时间，也是扩展微交互的生命周期，循环的参数是用户体验的最佳方式，循环由规则指明。

以 iphone 闹钟为例：

用户目标：指定时间闹铃，闹铃什么时候会响
模式：提示用户设置闹铃
循环：多久再响一次

流程图

总结上述微交互主要构成部分得到一个更详细的流程图。流程图包括用户进行操作的一个完整的流程，还有每个流程可以通过什么方式去优化的地方。下面来看具体的案例如何通过微交互设计细节的吧

案例一 BaseUI 多系统访问管理面板

多系统访问管理面板分为「系统高频使用区」、「搜索功能」和「系统分类区」三个部分，用户可在下方「系统分类区」直接打开对应的系统；也可从「系统分类区」拖拽用户使用高频的系统到上方「系统高频使用区」以供用户快捷操作。下面的动图主要演示了将系统从「系统分类区」拖拽用户使用高频的系统到上方「系统高频使用区」的交互操作。下面来分析下是如何通过微交互流程图来进行设计的？