想让交互更走心？这4种可见状态微交互技巧一定要学会

典的尼尔森十启发式当中，「系统状态可见性」可以如今交互设计领域当中，最为重要的原则之一。通过向户展现当前的状态，户拥有对系统的控制权，建立户对于产的信任感，这是这种设计启发式的最重要的值之一。

但，到可靠、易用，系统状态展的技巧很讲究的。这里梳理了4种常用的方法，结合了不少实用的案例，希望对所帮。

1、展示用户位置、进度的视觉反馈

1.1、户知道自己在哪

没有人会迷失方向，但是无论在现实生还是在数字领域当中，这种情况都会发生。户知道他们在哪里是创建良好导航体验的键。应程序和都应该凸显当前的导航项，帮助户了解他们在的位置。

Google 的导航栏设计

1.2、要经过多步骤来成任务

这是一个非基本的操作，通过展现步骤数量，帮助户来预估成这个过程需要的时间。

Selecto 的调查问卷的设计

2、辅助用户交互的视觉反馈

数字界面毕竟是现实世界中的真实硬件机构，户更多只借助交互过程中的即时视觉反馈来确定是否成了操作，即时的视觉反馈因此显得非重要。

即时的视觉反馈让用户的操作得到了视觉的「认可」，从强化了「确信感」，这样一一回的确认可以避免错误的发，比如可以避免用户因「感觉点下去」反复点击。

这视觉反馈设计，最常见范例是击按钮按下微交互动画，它告知用户「系统已捕捉到点击交互了」。

AliAli 所设的悬停点击动画

是在某些状况下，按钮视觉反馈有很多不呈现形，有更多可见、可理解新形态，可以在原有基础上探索更多可能性，比如下

2.1、单击赞按钮

Spread love, not viruses ，作者  Charles Patterson

2.2、关按钮

这关按钮不仅点击动效，且色彩按钮标识也随之改变，清晰表明状态，甚至兼顾到了视觉障碍用户

Switcher XLIV , 作者 Oleg Frolov

2.3、书签按钮微交互

这书签按钮通过色彩的虚实变化呈书签已添加的状态，颇巧妙。

Bookmark interaction，作者 Oleg Frolov

2.4、添加购车微交互

这种况下，视觉反馈非常明确且优告知用户已添加到购车里面了。

咖啡下单动效，作者 Nhat M. Tran

3、呈现系统状态的视觉反馈

3.1、系统正忙于么事情

当系统正在载，正在执行，正在行的过程中，通过效来告知户系统并没有停止，而是正忙于执行某件事情，是避免户误解的手。在户等待的过程中，通会实无限载的效（一般使在低于10s的操作中）：

对于超过10s的更长的执行过程，无限载的效会显得令人沮丧，这个时候实进条会更好：

这些视觉反馈很大程上降低了系统给人的确定感。

对于移动端应用，初始加载阶段所使用的启动动画界面，否精设，决了用户对于整产品的第一印象，优秀的初始加载动画能够将用户的注意力从焦躁的待中解出。

Logo 闪屏 ，作者 Gleb Kuznetsov✈

3.2、内加载

当用户需时间加载内的时候，建议使用一种特殊的的器「界面骨架」展。这种临时的内器不仅能够帮用户速了解界面的整体框架，构建用户预，并且能够后台速加载数据，渐式帮用户获得信息。

内加载，作者 Ginny Wood

这设计于移动端和桌端设计样适用：

界骨架加载动效，作者 Shane Doyle

4、触发事件

4.1、通知提醒

效的通知提醒，能帮用户意识到新的事发。多数时候，我们建议设师使用微妙的动画行通知，因动画效果会自然吸引用户的注意力，人类的眼的动态视觉其实非常强的。

Aleksei Kipin 设的通知动效

4.2、提示用户采取行动

很多况下，用户界面中会很多方会需用户提交信息。比如，需用户提交表单，或者用户创建了一密码，但复杂度不足需修，或者填写邮箱订阅信息的时候，邮箱格式出错，。使用当的视觉反馈总能够加效将问题告知用户。

内联邮箱验证机制，作者 Derek Reynolds

结语

让用户掌控感，就用户创造好的体验。很多设方案中，视觉反馈会因种种原因被削弱了，甚至被忽略了。但当用户 UI 行交互的时候，望度可动性其实高度依赖于这些动效微交互，这设师需设出优秀视觉反馈效果的原因所。