Alexi

By：Nick Babich
Editor-in-chief of UX Planet (https://uxplanet.org). http://babich.biz
Feb 29, 2016
Translator：Alexi

The best products do two things well: features and details. Features are what draw people to your product. Details are what keep them there. And details are what actually make our app stand out from our competition.

最好的产品只把两件事做好：特性和细节。特性让用户吸引使用你的产品。细节让他们留在产品里，并且还能让我们在竞品中脱颖而出。

Microinteractions are one of the best techniques for giving delightful feedback.
All roads lead to a human-centered design approach, where the user is the prime focus. Often considered accessory or secondary, microinteractions actually create a feeling of well-being once they are discovered by users. As a designer, recognizing the invisibility of microinteractions is just as important as designing them. You have to create something that feels human and accomplishes a task.

微交互式是最好的获得令人愉悦口碑的技术之一。
指引用户集中精力的所有方式方法，都接近以人性为中心的设计。微交互总是被考虑为附件的或额外的，事实上它一旦被用户发现就会创造出一种幸福感。作为设计师，承认（赏识）微交互隐藏的能力与设计它同样重要。你必须创造一些充满人性和做任务一样的事情。

What is a Microinteraction Anyway?

微交互到底是什么？

Microinteractions are the contained product moments that do one small task.
As first described in Dan Saffer’s book Microinteractions, these tiny details typically serve these essential functions:

微交互被包涵在产品的一个小操作的瞬间。
在Dan Saffer的书中第一次这样描述微交互：这些细小的细节通常服务于这些主要功能：

• Communicate feedback or the result of an action.
  传达反馈与操作结果。

• Accomplish an individual task.
  完成一个特别的任务。

• Enhance the sense of direct manipulation.
  增强直接操作的感觉。

• Help users visualize the results of their actions and prevent errors.
  帮助用户察觉他们操作的结果和防止错误。

Some examples of specific microinteractions include:
一些典型的微交互包括：

• The vibration notification together with silent mode icon on display when you switch an iPhone to mute.
  当你将苹果手机调至静音时，震动通知会和屏幕上的静音模式图标一起出现。

• Interface animation that either shows ability to click (a button that changes color when hovered over).
  交互动效要么显示可以点击（一个按钮改变颜色当盘旋在它上面）

Why Microinteractions Work

为什么微交互会有用？

Microinteractions work because they appeal to the user’s natural desire for acknowledgement. The user instantly knows their action was accepted and she wants be delighted by visual rewards. Also microinteractions can guide users in how to work the system.

微交互有用是因为它对用户的自然的渴望认同有吸引力。用户立刻就能知晓他们的操作被接受并且她需要被预约通过视觉馈赠。同样微交互可以指导用户们如何使用产品。

Identifying Opportunities

确认机遇

Part of the beauty of microinteractions is that they can be inserted in a variety of places, around any potential action. In general, though, they tend to come up in the following areas:

大部分动人的微交互能在各种地方让人产生兴趣，包括任何潜在的操作。一般来说，尽管，他们趋向于出现在以下领域：

Show System Status

展示系统形态

The first usability heuristic principle by Jakob Nielsen states: keep your user informed about what is going on. And users expect to get responses immediately. But there are situations when an app needs some time before an action is completed.

Jakob Nielsen 提出的第一可用探索原则：让你的用户知道下一步，并且用户希望得到立刻回应。但是需要一个情况，当app需要一些时间去完成动作时。

So, the interface should keep the user enlightened about what is happening.

因此，界面需要保持用户的注意在正在发生的事。

Or where the user is:
或者用户在哪个界面：

Takeaway: Don’t let your user get bored — keep the user informed and show them progress
总结：不要让你的用户无聊——保持用户获得信息并且展示他们的过程。

Highlight Changes

高亮变化

Sometimes we have to show notifications to make sure the user sees it. Animation can help. It will attract users attention and not let them overlook what you think is important.

有时候我们需要展示提示来确保用户能看见它。动态能帮助这一点。它会吸引用户的注意并且让他们不再忽视你觉得重要的东西。

Takeaway: In many cases animation effects are used for attracting user’s attention to important details. You should use KISS principle — microinteraction is supposed to be small and simple.

总结：许多动效事件的影响被用来吸引用户注意重要的细节。你应该使用KISS原则——微交互应该是细微的和简单的。

Keep Context

联系背景

Use motion to smoothly transport users between navigational contexts, explain changes in the arrangement of elements on a screen. This is especially true for mobile devices and smart watches, because it’s simply impossible to fit a lot of information on one screen.

用平滑的移动切换用户导航场景之间，解释每个在屏幕上安排好的元素变化。这一点在移动设备和只能表上尤为重要，因为不可能简单的安排很多信息在一个屏幕上。

Takeaway: Keep clear navigation between different pages; so the user understands what appeared from where. Transitioning between two visual states should be clear, smooth, and effortless. Unify in a theme — create a unifying theme to tie together all interactions.

总结：在各个不同的页面保持简明的提示；因此用户知道在什么地方出现了什么。两个视觉区域的切换需要简单，平滑和不费力的。统一主题——创建一个统一的主题去将所有交互联系到一起。

Visualize Input

可视化输入

Data input is one of the most important elements of any application. And micro-interactions turn this process into something special. You can use existing elements to deliver feedback.

数据输入是在任何应用中最重要的组件之一。微小的交互让这个过程变得奇妙。你可以用现有的元素去传递反馈。

Takeaway: Microinteractions help reveal information and help user to reach their goal.
总结：微交互协助展示信息并帮助用户到达他们的目的。

Call to Action

唤起操作

Microinteractions have the power to encourage users to actually interact. They can bring empathy in user experience. But make sure the visual cues and animations are appropriate for your users. And keep longevity in mind — will the microinteraction get annoying on the 100th use, or is it universally clear and unobtrusive?

微交互有能力促进用户实际操作。他们能够带来用户体验上的共鸣。但是要确保视觉线索和动效适合你的用户。并在在脑海里保持长久——微交互使用100次会打扰用户或者它足够广泛的简明和不唐突吗？

Things to Remember

要点

• Microinteractions act as facilitators for interactions, with feedback, notifications and instructions.
  微交互做为交互的促进者，提醒和命令的反馈。

• Microinteractions should save time by instantly communicating information in a way that doesn’t bore or distract the user. They should catch the user’s attention like a sly wink.
  微交互能凭借立刻联络信息节省时间，用一种不无聊不打扰用户的方式。他们能想一个狡猾的眨眼一样吸引用户的注意力。

• Knowing your users and the context behind the microinteractions will make them more precise and effective.
  熟悉你的用户和微交互背后的环境可以使他们更准确和有效。

• Microinteractions must survive long-term use. What seems fun the first time might become annoying after the 100th use.
  微交互必须在长期使用中存活。一些第一次用着感觉有意思的事情再用了100次后可能会变的扰人。

• Add humanity to the microinteraction and focus on visual harmony. The motion should feel fluid to make the microinteraction come to life.
  给微交互增加人性以及关注视觉和谐。滑动感觉像流动以至于让微交互有了生命。

Conclusion

总结

Design with care. Think about how people work with and use their devices and mirror common patterns of thought as you design these small bits. Attention to each and every detail is key to your success making human-computer interaction easy to use. Great design has to happen “full-stack”, from functional part down to micro-interactions.
谨慎设计。思考用户是如何与他们的设备工作的，反应出普遍的思考模式做为你设计这些的小细节。注意每一个细节是你成功实现轻松人机交互使用的关键。伟大的设计往往是“全栈”，从功能部分落地到微小交互。