清除系统状态，使按钮和控件精明，创建有意义的过渡，强调界面变化，添加快乐细节和hellip;…今天腾讯设计师@月焱瞳这个翻译总结了6个制作精细动态的微交互技巧，建议阅读。

着名魔术师达里尔·菲茨基（Dariel Fitzkee）曾经说过，“魔术在细节和表现上都是如此。”交互式设计也是如此。设计人员热衷于整体结果，但如果细节处理不当，解决方案将会丢失。所有的魔力都隐藏在细节中。这就是为什么精心设计的微互动使体验看起来很好。

清除系统状态

Jakob Nielsen提出了关于界面设计状态的灵感。 “系统应该在合理的时间通过正确的反馈告诉用户将会发生什么。”这意味着用户界面必须继续提供反馈并使用户保持最新状态。韵律。应用程序不应该让用户继续猜测，但应该告诉用户发生了什么。微交互可帮助您通过正确的视觉反馈实现这一目标。

上传和下载数据是应用动态微交互的绝佳机会。

类似的动画，以及众所周知的“下拉刷新”，这种动画已经导致移动设备上的内容设计的创新。愉快的刷新动画总能赢得用户的微笑。

关键点：对于应用程序的程序状态，动画提供实时通知，以便用户可以快速了解正在发生的事情。

使按钮和控件可触摸

用户界面元素和操作元素应该是有形的，即使它们位于屏幕的底部。视觉和动态指导通过及时响应输入和主观操纵动画来弥补这一差距。界面按钮交互可以模仿自包含的真实对象。简单来说，您可以为用户的输入行为提供视觉反馈，以提高界面感知的清晰度。

要点：视觉反馈有助于用户接收信息的自然愿望。用户在应用程序中，随时都感到放心，这很棒。

创建有意义的过渡

您可以使用动画让用户在导航和内容之间平滑导航，解释屏幕上排列的元素的变化，或者增强界面元素的级别。

图标可以在不同的时间以不同的形状发展，提供双重功能。

动态设计是一种通知和取悦用户的手段，有效地吸引用户的注意力。它在移动设备和智能手表上尤其出色。毕竟，正方形之间没有太多信息。

Apple的iOS用户界面就是一个很好的例子。如下图所示，当用户选择文件夹或应用程序时，视图将放大到详细信息视图或直接转到主应用程序界面。

另一个很好的例子：通过颜色变化或元素流来串联两个状态之间的视觉关联。这种动画使切换变得轻松顺畅。

要点：微交互建立页面之间的可视连接，并阐明用户界面。

过渡效果设计很好：《高手之路!设计漂亮有趣的转场动效》

帮助用户开始使用

微交互在信息加载过程中起着重要作用。出色的加载体验和动画，当用户第一次沉浸在应用程序中时，会对用户产生巨大影响。他们在唤起应用程序时突出了最重要的功能和控制，为他们提供指导和教育。

要点：微交互提供信息并帮助用户有效地实现目标。

强调界面变化

微交互可以引导用户的注意力。在许多情况下，动画用于吸引用户注意重要细节（例如查看“通知”）。但是，必须确保动画服务于功能并且在用户的角度来看是体面的。

要点：微交互可以为用户提供良好的视觉指导。

增加愉悦的细节

微交互动画最基本的应用是过渡。但是，App Animation通过突破标准动作的限制真正让用户满意。下面的按钮可以在满足双重功能的同时无缝切换状态：通知用户并让他们感到放心。

要点：关注用户情感，他们在界面互动中发挥巨大作用

在设计微交互时需要考虑

当您的视觉设计包含上述元素时，请关注以下内容：

使您的微交互几乎不可见且功能完全

确保动画是出于服务功能的目的，不要让用户感到尴尬或不安。对于普通和次要操作，建议的响应是适度的。对于低频率的主要操作，响应应该更加重要。

留在心里

微观互动应该经得起长期使用的考验，一见钟情就会变得越来越无聊。

遵循KISS原则

过度设计的微交互可能是致命的。微交互不应超载屏幕信息，导致长时间负载。相反，它应该通过快速传递有价值的信息来节省时间。

不要从头开始

您始终了解目标受众及其背景。使用此信息可以使您的微交互更加精确和有效。

与其他界面元素建立视觉协调

微交互的风格应该与应用程序的整体外观相匹配，以创造和谐的产品感知。

总结

微交互表明，专注于细节可以带来强大的结果。正如查尔斯·埃姆斯（Charles Eames）曾经说过的那样，“细节并未散布在细节中，它们被系列化为设计。”所有设计元素都至关重要。细节使您的应用在竞争中脱颖而出。它们可能是实用的，不显眼的，或令人印象深刻的，能够提供帮助，甚至逗留。

坚持巧妙的设计，记住伟大的设计是一个完整的存在，从宏观功能到微观互动。

« 移动代购源码网站是否需要成为外部链接？将代购源码网站移到链外的正确方法 | 为什么消费者准备好支付您的产品？最后，没买？ »