从交互维度量化用户体验

狭义的交互定义交互主体必须是人本身，而客体可以是产品、环境、服务等等，且不论交互客体是什么，只要主体是人，人和客体去进行交互的时候，一定是人带着心理预期施加一个行为。

文/Seany

之前参加了回音分享会，认识了很多新朋友，线下分享时间有限，可能有很多东西没有讲的很透彻，所以整理了一下我当时的ppt和想要表达的观点，写了这篇文章，和大家分享一些在产品和交互设计中的一些自己的方法。

Part – I 什么是交互

狭义的交互（Interaction）定义交互主体必须是人本身，而客体可以是产品、环境、服务等等，且不论交互客体是什么，只要主体是人，人和客体去进行交互的时候，一定是人带着心理预期施加一个行为。

然后客体会根据这个行为给与一个反馈（没有反馈本质也是一个反馈），而人会根据这个反馈是否符合预期去进行心理修正。

如下图所示，这就是我理解的最小交互模型：

当时我举的例子是用翻页器去控制ppt翻页：

如上图所示，拆解这一套交互行为：

当我点击翻页器的“下一页”按钮，我点击行为附带的心理预期是“PPT翻往下一页”，然后我点击的时候，遥控器塑胶按钮给到我手指一个物理反馈，证明我按下的行为已经完成了，这是“输出端（我的手）的交互与反馈”。

这时候遥控器接收到按钮指令，把指令通过红外线传输到USB接收器上，接收器把指令传到PC端然后完成翻页动作，再通过大屏幕传到我的眼（输入端）中，我就可以确认这一次交互反馈是符合预期的。

BTW这里有一点想要补充：设备对设备（上图中黑色箭头），也属于广义的交互，只不过现阶段大家研究的交互设计都是狭义的，人为主体的交互。

在我们日用科技产品的早期，有两个东西是无法跳过的，那就是按键手机和PC电脑。

他们几乎是同步在发展的，而这两个产品的交互行为基本上延续到了触屏手机时代，所以为了弄明白触屏手机的交互，这两个产品是值得讲一讲的。

先看按键手机（就是我们小时候用的非智能手机）：

在按键手机中，最让用户困惑的其实是按键和屏幕之间存在一个映射关系，而不同厂商缺乏一个统一的规范，各家映射规则不一样。大家是否还记得当年的手机说明书那可以说是相当厚，因为说明书必须要给用户建构一个心理模型。

比如上图：点击左上角和右上角那两个“-”按钮，其实一一对应的是屏幕左下角的“Goto”和右下角的“Names”。这个一一对应关系作为今天的用户来看应该是很平常而且很易懂的，但是当年没用过手机的人，需要花很长时间阅读说明书，才能够明白物理按键和屏幕上的映射关系，这就是触屏手机很难用的地方，也是很反人性的地方。

因为作为用户来说，心智上，我们当然希望所触即所得。

再来看PC，作为和按键手机差不多一起出现的载体形式，人们操作PC端人是通过媒介（也就是鼠标+键盘）输入的，其实本质上，也是我们通过鼠标在桌面上滑动x-y区域，对应到电脑桌面上指针的移动来创造屏幕中x-y的映射关系，然后键盘上几十个键配合输入完成操作。

大家发现了么，上述的两种设备其实本身就是在制造一种一一对应的映射关系去完成交互行为，这两种载体从出身开始就还是需要很大交互成本的。

随着科技的发展，触屏感应技术推出了之后，印象中触屏手机就是两三年时间就摧枯拉朽的淘汰了按键手机，本质上是干掉了一一对应的交互映射。

所按即所得：

触屏手机出现之后，交互专家们不禁要问一个问题了：手和触摸屏到底有多少种交互方式？

答案是有很多种：

越是高阶越是隐藏的交互手势越复杂，所谓的“交互成本”也越高，比如：锤子三指滑动换屏保那种，就是利用了高阶交互便捷实现边界功能。

那这么看起来，IOS也好还是所有的安卓手机都好，从用户端而言，就是组合交互手势，让信息更好的传达而已。那么同理，在App中也是一样，如果我们了解了每一个交互行为的用户心理预期，对设计工作而言就能做到有的放矢。

我们以“单击”和“滑动”这两个最简单的交互行为举例：所谓单击手机屏幕，用户其实最核心的是有两个预期。

• 第一是选中一个元素，比如：Radio组件。

• 第二是逻辑上的Next，比如：点了一件衣服，应该Next到衣服的详情，点了付款，应该出现付款流程，点了返回，应该back到上一路径点等等。

划动交互也是一样的，用户在一块手机屏幕上单指划划划，用户内心的预期其实也不复杂，最核心的预期也就两点：

• 第一是查看屏幕外的线索（前提是设计师给用户留下线索了或者是这个UI组件长得就是可以划动的样子）；

• 第二是查看相邻标签的内容，或者查看同一个标签下的相邻元素，比如：iOS的segment controlle组件就是典型例子。

当我们了解了这些之后，我们在实际的设计工作中，编程客栈就可以根据上面这些理论，来合理选择UI组件去呈现对应的信息了。

Part – II 从交互维度合理选择UI组件

我们在设计工作中，选择UI组件，本质上就是选择信息的呈现形式。每一个常见的UI界面和UI组件，都一定也满足上面所说的最小交互模型。

在这里我举一些例子说明。

第一个例子：同样的内容，选择不同的UI组件呈现，给用户呈现的是完全不同的产品结构。

大家看下面这张图：

这两个UI模块摆在大家面前，大家应该能清晰的感受到，左边是一个segment控制下面内容的UI；而右边是一个所有内容列表的集合页，只不过通过tab聚类了而已。

第一件事应该想到的是：如果需要采用右边的排列形式，就必须要控编程制tag的字数。然后由于右边的tag占据了推荐贴的位置，导致推荐贴可能没有左边的那种展现形式更加醒目。

但是相对的，图右的优势在于，由于竖向排列tag可以让一个屏幕显示更多的tag，可以让用户更方便的定位内容，比如：外卖产品之所以用右边这种形式，是因为力求一屏展示更多的菜，而且外卖产品的左侧tag一般是一家店铺的菜的品类，用户下滑菜品配合点击品类，点完即走，很方便（京东和淘宝电商类平台也是类似的）。

但是，比如：今日头条，新闻类客户端只能采用左边的这种形式，因为新闻类客户端是需要用户长时间沉浸的，比如：用户选中一个“体育”的tag之后，一般要沉浸的看好久好久，用户需要沉浸在这个tag下的内容中，那这个时候显然用右边这种设计方式，让tag常驻屏幕左侧是不合适的。

再来看第二个例子，就是UI应该会随着内容而进行调整和优化。

这里举一个唱吧的例子：唱吧从7. 0 到8. 6 之间做了三次改版，大家可以看到，唱吧团队几乎是损失了屏幕效率来加大了间隔和突出了歌名，这是为什么呢？

这是因为页面承载的关键任务不同，大家对比着7. 0 时候和8. 6 时候的UI样式，正好是今天快手和唱吧的对比。

大家会发现：其实这个页面，快手和唱吧承载的内容都是消费转化，都希望用户点击进去消费内容，但是两款产品做了截然不同的UI风格，原因是什么呢？

快手在这个页面，其实承载的关键任务是：“迅速让用户找到感兴趣的点”，它这么设计的本质原因是因为它的截图可以帮助用户判断内容本身。

比如：第一张图是一个人在打高尔夫，右边是一个工人，然后第二排左边是一个游戏的镜头，右边是一个传递正能量，大家可以很方便的通过图片识别里面的内容，用户更沉浸更聚焦的去选自己喜欢的点击进入消费就可以了。

但是唱吧的视频截图，其实是不能识别里面内容的，android大家可以看到：第一张图是一个妹子，第二场图是一个妹子，第三张图还是一个妹子，那用户点击进去的动力在哪儿了？

除了这个照片长相之外，更多的其实是文字决定的，是这个人唱的这首歌的歌曲名是不是我喜欢的，或者是这个演唱者的的歌手等级。

所以基于这种跟深层次的逻辑，唱吧和快手两款产品的这个页面都是为了促进消费转化，但是UI长相上完全不同。

我们看第三个例子：

同样组件下，选择不同的交互方式，也会使得效果完全不同，比如：现在有一个UI页面，主要由一个tab（iOS叫segment controlled）组件控制下面的内容，样子长这样。

我先假定一个前提：这个app中的这个组件不支持横划，只支持点编程客栈击切换。

好了，现在我假设这是一款已经稳定运营了一年的产品，为了说明问题，我假设一个理想数据：

假设每天有20W的uv访问这个页面，其中分流情况是：

• 10Wuv消费“推荐”下的内容；

• 2Wuv消费“生活”下的内容；

• 1Wuv消费“段子”下的内容；

• 3Wuv消费“美女”下的内容；

• 4Wuv消费“游戏”下的内容。

这时候，为了优化交互行为，有一天决定把这个tab组件从不可横向划动改成可以划动的（并且告诉用户这里可以滑动了哟~），然后给你一次机会重新排列这五个tab顺序，你会怎么做呢？

最简单的办法当然是把五个tab按照用户消费意愿逐一排列，即：“推荐、游戏、美女、生活、段子”。

这样排列当然没有任何问题，但是还有没有更优解呢？

我给出的解决办法是这样的，大家评判一下：

按照用户的消费量，“游戏”是消费量第二的一个tab，毫无疑问我会把它排在第二项，这样可以刺激用户划动行为，然后“美女”是消费量第三的，我会把他放在第四位。

这时候我会把“段子”和“生活”这两个消费率最低的tab，分AB test做两个版本，放在第三和第五位拿去测，以判断之前的“段子”和“生活”是由于自身内容不够优质，还是之前交互成本太低导致的数据较差。

最后我们来看第四个例子：

一个app，他的UI张如下图所示的这个样子：

现在假设在运营和市场团队不做任何努力的情况下，单从产品交互的角度，能不能优化上面这个版块的点击率？

首先我们来分析一下页面架构：

如果我们认为，不编程管是点击右上角的“>”，还是点击留个圆形入口都算完成转化的话，我们现在的这个红色的UI组件，入口位置一共有 7 个。根据长尾理论，如果我们把这个圆形入口从 6 个扩展到比如九个，是不是一定对转化率有正向影响？