微交互:好产品的秘密

好的产品都有俩共性,一就是好的功能特性,二就是注重细节。功能特性能够将目标用户吸引过来,<!--more-->细节则是留住用户的法宝,而经过本司机多年的观察,实际上在功能特性同质化严重的今天,能够帮助我们在激烈的竞争中胜出的往往是大家常常视而不见的小细节。

交互设计,甚至可以说是所有设计类型的工作,其实都走在以人为中心进行设计的道路上。用户,也就是人,应该获得我们最最首要的关注。微交互经常被设计师们看成是次要,或者是锦上添花性质的东西,然而对于用户来说,微交互或许有着更加深层次的意味。作为一名设计师,能否看到得到这些难以察觉的微交互小细节更你会不会做好的微交互一样重要。设计师们应该要能够做出这些非常以人为本,而又真正能够帮助用户达成目标的设计。

###那什么是微交互呢? 微交互是包含于产品内,在某个特定的瞬间完成某个小任务的动作。 微交互在Dan Saffer的著作Microinteration中被首次提出。下面说几个经常能够施展你的微交互设计才华的点:

  • 向用户传递一个动作的反馈和结果。
  • 帮助完成一个独立的小任务。
  • 增强操作感
  • 让用户的操作得到视觉化以防止误操作。

这里给大家带上两个可能已经说烂了,但却足够教科书式的例子:

*当你把iPhone调到静音,手机会震动同时屏幕上也会出来这个小icon以提示手机已进入静音模式。 iPhone

*当你还没点赞的时候,将鼠标停在小红心的上面,它的颜色会改变,以暗示自己是可点击的。 facebook

###微交互为什么有效 回答这个问题之前,先跟大家又来复习一下心理学,人们在面对自己不了解不熟悉的东西的时候会感到没有安全感。而微交互之所以会有效,是因为它设计出来的根本是为了满足了人类对事物总是想要了解知道得更多的原始欲望,用户希望在操作之后的瞬间能够得到视觉上令人愉悦的反馈,以表示用户的操作的结果。微交互还能在一定程度上指导用户正确地使用产品。

###发现能够应用微交互的点 从设计的角度来讲,微交互有(keng)趣(die)的点在于看起来好像哪里都能加上,每个位置都需要微交互一下。那么下面就具体来说说几个业界常见的使用手法:

显示当前状态

写尼尔森十大可用性原则的那个尼尔森说过:要一直让用户明确知道当前是什么状态,当前在什么位置,用户也非常期望操作能够得到迅捷的反应。但是有些情况下用户就是需要等待一下,例如进度条加载什么的。这时候我们就考虑做一些微交互,让这些本来那么无趣的东西变得至少不至于让人抓狂。 progress

或者是告诉用户已经完成到哪里了: reading

总结:别让用户感到郁闷,要尽量用好的办法来告诉用户当前的进度。

引导注意点的转移

当一些消息来了的时候,比如一则推送什么的,我们首要做到的是让人家能够看得到。这里比较适合使用小动画,运动的事物总是能够很好地获得用户的注意力。 notification

许多情况下使用动画元素都是为了能够吸引用户的注意力,然而在微交互的范畴里面,我们需要特别留意 KISS 原则 的应用,微交互内使用的动画应该是足够轻巧和简单的。

情景切换

用一些丝滑柔顺的动效来做转场,为用户阐明面前这屏界面的元素的排列。这一点对于一些小尺寸设备尤为重要,因为我们无法在同一屏内展示太多的信息,所以我们需要一个有意义的转场来说明一些东西,比如:这个界面是怎么来的,这个页面又是怎么退出的,等等。 transition

确保用户知道是怎么来到这个界面的,这样也是为了让用户时刻知道自己的所在。转场的动效应该是明确清晰而且容易理解的。

输入视觉化

数据的输入是无趣的,但是不能否认这或许是一些产品最最重要的功能之一。应用上微交互,能让整个输入的过程变得更加清晰易懂一些,或更特别一些。 credit

微交互本身的作用就是让信息传递这个过程更加高效,那么也就能让用户以更加高效的方式完成任务。

激励用户

微交互也能够用于对用户进行诱导和激励,它能让用户与产品之间产生更多的共鸣。但是要确保这个方面的微交互都是适合的,不要搞了一些词不达意,根本不是这么回事的东西出来。还有另外一点非常重要,或许这也应该是所有微交互设计上都应该考虑的一个原则:当用户在使用了一百次之后,会否对这个微交互元素感到厌烦?这非常值得考虑。 encourage

在这一点上的使用需要多考虑用户但是的情感状态,需要整个产品的环境和用户调研得来的数据来作为设计的根据。

###你需要记住的事

  • 微交互之于交互设计扮演的是一个辅助工具的角色,常用在和反馈、通知或者发出指令这几个点上。

  • 微交互本身不应该是你炫技的地方,它的本意是为了更高效地传递信息,应该用最简单的方法来获取用户的注意力,微交互不需要复杂冗长的动效。

  • 使用微交互的时候,是特别需要将整个软件的结构和对用户的了解纳入考虑的,这样才能够得到我们所说的提高效率的微交互。

  • 微交互要经得起时间的考验,我们不要那些第一回看起来很有趣,但是见多了之后却很烦人的微交互。

  • 微交互不能破坏整个界面视觉上的平衡,加入使用上了动效的话,请确保动效的流畅性。

###结论 微交互设计要以对用户的关怀为出发点,站在用户的角度想想用户是怎么与产品进行交互的。对所有细节都有足够的关注,是你做出更好的人机交互方式的最好的办法。好用又好看,是成功的产品的秘诀。