万书网 > 文学作品 > 腾讯产品法 > 如何打造“下意识”交互

如何打造“下意识”交互




唐纳德·诺曼(Donald  Norman)在他的《设计心理学》一书中一针见血地指出了产品可用性设计的四大要素:预设用途、限制因素、匹配和反馈。他提到,“预设用途显示操作方法可能的范围,限制因素则会缩小这一范围”。简单来讲,预设用途用来提示和引导操作,限制因素用来规避错误。预设用途让用户感觉“这条路是对的”,限制因素则在错误的路径上摆好了封路牌。

好的交互设计能让用户“下意识”知道如何使用一个产品。这种下意识,在诺曼看来是一种模式匹配的过程。我认为它至少包含了两个重点:

动作与反馈间有固定的匹配关系,天然互斥最好;

产品模块和潜意识间有自然的匹配关系。

体现第一点的简单例子是汽车的“油门+刹车”组合。油门和刹车都在驾驶者的右下方,右脚不是踩油门就是踩刹车,左右踏板形成了一种互斥的、非此即彼的关系。这样的设计极大规避了用户的误踩踏。试想如果把刹车交由左脚负责,看起来两只脚各管一个更轻松自由,可紧急情况下难免弄错匹配关系而造成灾难。

又比如,微信语音会话的按钮操作方式是“按住”说话,而不是“按一下”说话。按住和释放,构成了一对互斥的动作,而“按一下”和“再按一下”则没什么不同,用户无法判断相似的两个动作分别代表什么,甚至会忘记上一次执行这个动作是讲话还是停止讲话。

不过设计时还是要回归产品本身的特质,具体问题具体分析。比如,微信的语音会话按钮选择“按住”说话的交互,而Instagram里拍摄视频的按钮则选择“按一下”拍摄而非“按住”。其中的关键区别就在于,人们拍摄视频的操作对象是视频画面,注意力焦点全都集中在手机画面上,对进程意识强烈,非常清楚什么时候该执行结束操作;而语音会话时则不然,很少人自始至终盯着手机进度讲话的,这时利用动作的限制因素就显得特别重要。

体现第二点的有趣案例来自我们都很熟悉的微信朋友圈入口位置设置。

不止一次听到有人问:朋友圈为什么要放在“发现”页卡的第一项,而非独自占据整个页卡?如果按用户使用频率判断,朋友圈显然值得一个页卡的分量。另一方面似乎也能为用户节省每次进入的那一次点击。至于“发现”页卡下的其他项目,总可以找到其他的安置位置。

在给出可能的解释前,让我们先来看一个用户调研时遇到的真实案例:请问,在下面两种环境中,哪一种用来做焦点小组访谈可以获得更好的效果?

咖啡厅与会议室环境比较图

没错,是咖啡厅。从心理学角度看,空气中飘荡的咖啡香和轻音乐有助于用户卸下自己的防御意识,进而充分自如地表达自己。秩序井然的大会议室则给人冷静、严肃的感觉,用户很容易将它和“谈判”“正式场合”等词语联系到一起,从而谨慎对待自己将要谈论的话题。

上面这个例子说明,环境和氛围对人们潜意识层影响巨大。

现在回过头来再看看微信朋友圈的例子,试着比较一下两种方案,你的感受是什么?

朋友圈Timeline页放到页卡3展示VS现在的微信发现页比较图

好的产品会仔细区分不同模块的氛围差异,将它们和用户的潜意识联系在一起,建立起自然匹配的关系。

在微信里,这个精心营造的主环境是点对点同步沟通环境,它的标志是实时和高效。朋友圈信息流则是另一个环境场,一个异步沟通的空间。它所展示的内容丰富,但节奏比即时沟通更慢。我们一面阅读朋友们的动态,一面想着分享一点什么。用户完全有权选择要不要走过刚才热热闹闹聊天的主客厅,通过一条走廊、推门进入一个“慢”环境之中。即使那是一个很多人都喜欢进入的房间,但假如它没有门、没有过渡的走廊,用户对产品的整体感受会发生混乱。环境复杂、主次不清的产品无法在用户心智上长久驻留,反而易引发认知压力。当然,这只是一种可能的看法。

最后,打造下意识交互还有一个简单的小技巧——适当运用动效。

比如微信雷达加朋友时,圈状扫描的动效让人直接联想到雷达扫描,从而很快理解这个功能的用途。摇一摇最初发布时也做了一个小动效,那个拿着手机的手最初是晃动的,直到用户熟悉后,后面的版本才改为了静态图片。再比如腾讯手机管家中用于快速内存清理的小火箭动画,也是一例。

不一样的侧边栏设计:表面相似,本质不同

在交互设计中,我们需要充分运用自己的抽象思维,去理解不同设计形态之间的微妙区别,尤其是那些表面相似但本质完全不同的形态。

比如,曾经被Facebook和Path采用过的侧边栏设计(也称抽屉式导航)。这种导航方式至今仍被不少应用采纳,不过如果细心留意,我们会发现:同样是侧边栏,不同的跳转规则决定了不同导航页间的关系。

比如,在QQ和网易云音乐(Android版)中,侧边栏的操作路径按照“展开—进入切换页—返回—主页”的方式,主页的权重明显高于其他页面,像一个常驻的客厅。

而在星巴克和旧版Facebook中,侧边栏的操作路径按照“展开—进入切换页—再展开—进入另一个切换页”的方式,主页的权重和其他页面相同,像多个房间中的一间。

两种交互方式的差别如下图所示。前面这种交互适用于收纳使用频次较低的项目;而后面这种交互方式则不推荐。页面关系过于平等,意味着增多选项,将明显降低操作效率和易用性。事实上,Facebook也及时舍弃了这种交互形态。

QQ与星巴克/Facebook交互方式差别图