从交互维度量化用户体验

一、什么是交互

1.狭义的交互定义交互主体必须是人本身，而客体可以是产品，环境，服务等，且不论交互客体是什么，只要主体是人，人和客体去进行交互的时候，一定是人带着心理预期施加一个行为，然后客体会根据这个行为给予一个反馈（没有反馈本身也是一个反馈），而人会根据这个反馈是否符合预期去进行心理修正，这就是最小交互模型：

最小交互模型

以PPT翻页器去控制文档翻页为例，拆解这一套交互行为：

遥控器

当我点击翻页器的下一页按钮，我点击行为此时附带的心理预期是“PPT翻往下一页”，然后我点击的适合，遥控器按钮给到我手指一个物理反馈，证明我按下的行为已经完成了，这是“输出端（我的手）的交互与反馈”，这时候遥控器接收到按钮指令，把指令通过红外线传输到USB接收器上，接收器把指令传到PC端完成了翻页动作，再通过大屏幕传到我的眼（输入端）中，我就可以确认这一次交互反馈是符合预期的。注意设备对设备（黑色箭头）也属于广义的交互，只不过现阶段大家研究的交互设计都是以人为主体的狭义交互。

2.日用科技产品的早期，按键手机和PC电脑几乎是同步发展的，而这两个产品的交互行为基本上延续到了触屏手机时代。

image.png

按钮手机中，最让用户困惑的是按钮和屏幕之间存在的一个映射关系，不同厂商缺乏一个统一的规范，各家映射规则也不一样。当年的说明书很厚，因为说明书需要给用户构建一个心理模型；比如上图点击左上角和右上角 - 按钮，其实一一对应的是屏幕左下角的Goto和右下角的Names。这个一一对应关系作为今天的用户来看是很平常很易懂的，但当年没用过手机的人，需要花时间去阅读说明书。才能够明白物理按键和屏幕上的映射关系，这就是按键手机难用的地方，也很反人性的地方。因为作为用户来说心智上我们希望所触即所得。
PC作为和按键手机一起出现的载体形式，人们操作PC是通过鼠标+键盘媒介进行输入的，其实本质上我们通过鼠标在桌面上滑动x-y区域对应到屏幕上指针的移动来创造屏幕中x-y的映射关系，然后键盘上几十个键配合输入完成操作。

上述两种设备其实本身就是在制造一种一一对应的映射关系去完成交互行为，这两种载体从出生开始就需要很大的交互成本。触屏手机的出现，本质上就是干掉了一一对应的交互映射，即所按即所得：

image.png

手和触摸屏到底有多少种交互方式？

image.png

越是高阶越是隐藏的交互手势越复杂，所谓的交互成本就越高。比如锤子手机三指滑动换屏保就是利用了高阶交互便捷实现边界功能。所以IOS也好还是安装也好，从用户角度而言，就是组合交互手势，让信息更好的传达而已。同理，在APP中，如果我们了解每一个交互行为的用户心理预期，对设计工作而言就能做到有的放矢：

image.png

我们以“单击”和“滑动”这两个最简单的交互行为为例：
a.所谓单击手机屏幕，用户其实最核心的有两个预期：
第一是选中一个元素，比如Radio组件。
第二是逻辑上的Next，比如点了一件衣服，应该Nextdao衣服的详情；点了付款，应该出现付款流程，点了返回，应该back到上一路径点等等。

单击

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

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

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

划动

二、从交互维度合理选择UI组件

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

UI组件

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

这两个UI模块摆在面前，应该能清晰的感受到，左边是一个segment控制下面内容的UI ；而右边是一个所有内容列表的集合页，只不过通过tab聚类而已。
首先第一件事应该想到的是如果采用右边的排列形式就必须要控制Tag的字数；然后由于右边的tag占据了推荐贴的位置，导致推荐贴可能没有左边那种展现形式更加醒目。但是相对的，图右的优势在于，由于竖向排列tag可以让一个屏幕显示更多的tag，可以让用户更方便的定位内容，比如外卖产品之所以用右图这种形式是因为力求一屏展示更多的菜，而且外卖产品的左侧tag一般是一家店铺的菜的品类，用户下滑菜品配合点击品类，点完即走，很方便。淘宝和京东电商类平台也是类似的。

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

第二个例子，UI应该会随着内容而进行调整和优化：

image.png

以唱吧为例，从7.0到8.6之间做了三次改版，可以看到，唱吧团队几乎是损失了屏幕效率来加大了间隔和突出歌名，这是为什么呢？

这是因为页面承载的关键任务不同，对比7.0时候和8.6时候的UI样式，正好是今天快手和唱吧的对比：

大家会发现，这个页面快手（花瓣/Pinest）和唱吧承载的内容都是消费转化，都希望用户点击进去消费内容，但两款产品都做了截然不同的UI风格。快手在这个页面，其实承载的关键任务是：“迅速让用户找到感兴趣的点”，它这么设计的本质原因是因为它的截图可以帮助用户判断视频内容本身，比如第一张图是一个人在打高尔夫，右边是一个工人，大家可以很方便的通过图片识别里面的内容，用户更沉浸更聚焦的去选自己喜欢的进入消费就可以了。但唱吧的视频截图其实是不能识别里面内容的，我们可以看到第一张图是一个妹子，第二张图是一个姑娘，那用户点击进去的动力在哪？除了照片长相外（这就是图片为什么要占据这么大空间），还有文字决定的，是这个人唱的歌曲名是不是我喜欢的，或者是这个演唱者的歌手等级。

所以基于产品深层次逻辑结合用户根本需求，唱吧和快手两款产品的页面都是为了促进消费转化，但UI长相完全不同。

第三个例子，同样组件下，选择不同的交互方式，会使效果完全不同。

比如有一个UI页面，主要由一个tab（ios叫segment controlled）组件控制下面的内容：

我们先假定一个前提：这个app中这个组件不支持横划，只支持点击切换。
现在我假设这是一款已经稳定运营来了一年的产品，为了说明问题，我假设一个理想数据：假设每天有20w的uv访问这个页面，其中分流情况是：

10w UV消费“推荐”下的内容
2w UV消费“生活”下的内容
1w UV消费“段子”下的内容
3w UV消费“美女”下的内容

4w UV消费“游戏”下的内容

这时候，为了优化交互行为，有一天决定把这个tab组件从不可横向划动改成可以划动的（并告诉用户这里可以划动~），然后给你一次机会重新排列这五个tab顺序，你会怎么做？最简单的办法是把五个tab按照用户意愿逐一排列，即：“推荐、游戏、美女、生活、段子”。
这样的排列对于用户是没有问题的，但对于产品没好处。所以有没有更优解？按照用户的消费量，游戏是消费量第二的tab，毫不疑问会排在第二项，这样可以刺激用户滑动行为，然后美女是消费量第三的，我会把他放在第四位，这时候我会把“段子”和“生活”这两个消费率最低的tab分AB test做两个版本放在第三和第五拿去测，以判断之前的“段子”和“生活”是由于自身内容不够优质，还是之前交互成本太低导致的数据较差。

第四个例子。比如一个app的UI如下图，现在假设在运营和市场团队不做任何努力的情况下，单从产品交互的角度，能不能优化上面版块的点击率？

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

如果我们认为，不管是点击右上角的“>”，还是点击六个圆形入口都算完成转化的话，我顶部区域红色组件的入口位置一共有7个。根据长尾理论（堆量），如果我们把这个圆形入口从6个扩展到9个，是不是一定对转化率有正向影响（7+-2）？答案是并不一定：

为什么呢？因为主要是这样的改动会带来一个未知的泳道横划交互，它会产生一定的影响，从用户行为分析如下图，用户看到这个泳道之后可能出现三种行为：

a.“用户完全不滑动”，那入口就从7个变成了7.5个，别的没有变量影响。
b.“用户滑动看完之后，点击某一个或者左上角的>按钮进入”，这是我们想要的操作转化。
c.“用户滑动看了这些圆形入口之后松手，就是布不点击进入”，这是我们不愿意看到的结果。

想到这里，那为什么我们不能让用户直接滑动之后松手就跳转呢？

想到这里，给出一个优化方案如下：给用户一个x轴区间，滑动手势超过那个区间则告诉用户你现在松手默认跳转，用户不愿意跳转也可以回划，只要不足这个x区间就给用户自主选择的机会：

这是一个实战中真实案例，我们把6个圆形入口变成10个，然后用这个“松手跳转”的交互把单元模块的穿透率从21%提升到31%。
当然，一个页面的流量就这么大，一个地方涨了11%，那势必别的地方就会相应的损失11%。一般情况下app首页承担着80%以上的分流工作，根据流量漏斗来看的话每一次引流都会导致其他模块的数据下降，所以设计师们应该要根据运营策略和公司大的产品OKR来合理选用合适的交互组件，已达到想要的目的，还是那句话：小孩才分对错，大人只看利弊。

三、从交互的维度量化用户体验

移动互联网产品设计中，尤其是在中国的app产品，有两大分歧阵营：

1.“扁平（单页面信息层级多）”阵营表示：我们需要产品足够扁平，最好就是三次交互可以触达所有app界面。

2.“简洁（单页面信息层级少）”阵营也表示：我们需要页面信息足够简洁，最好一个页面只完成一个核心人物。

双方你来我往，谁也说服不了谁，如下图，“简洁”反驳“扁平”：你们一点都不尊重席客定律，层级扁平是扁平了，但是相应的页面信息变得越来越多，给用户呈现的干扰就越来越多，用户做出决定的时间也越来越多，所以你们“扁平党”都是垃圾。这时候“扁平”阵营也找到了反驳的论点，他们说你看你页面足够简洁了，但是页面层级很深啊，交互成本这么高，每一次都伴随流失，可用性这么差，你们还有理了，所以“简洁”党才是垃圾！

中国的互联网产品，很难做到既简洁又扁平，这个问题的根源在于永远有那么多信息需要呈现，永远有那么多功能需要添加，这个是中国的激烈市场竞争导致的，并不是说中国的产品就不如国外好，我想讨论的是面对中国现在互联网产品市场现状，如果一款产品非要你站队上面两派阵营，你会选哪一派？我现在选择的是“扁平党”，因为用户面临一款眼花缭乱的app，如果通过市场，运营努力以及自身功能的弱替代性，用户可以经常使用，功能布局信息框架很少改动的前提下，早晚会习惯和适应的，用户会被产品教育。但是如果一些核心的东西不能第一时间暴露在用户眼中，很可能用户就不知道你有这种功能。这就是产品经理为什么什么东西都想展现出来，而不是把一堆东西找个入口集合收起来页面干净清爽好看，用户专注。界面清爽了，你的大功能feature因为设计隐藏没有被发现，不是设计开发测试都白做了么，说好的ROI在哪里？中和简洁与扁平是一件相当困难的事情，在一段复杂多角色的关系中，平衡永远是最高阶的追求。

不论你是设计、产品、还是开发、测试、运营人员，我们都明白用户体验这个词是由N多个维度综合而成的一个过程性评价，它和方方面面都有关系。

那既然是这么专业且牵扯甚广的一个名词，我们真没有办法去量化评价它么？永远不要忘记，用户体验是一个过程，而我们每个人也都是用户本身。我们可以从一段过程这个本质处罚，提供一种普通用户维度比较好用的用户体验评估办法“穷举分析用户行为路径”

比如你是一款外卖产品的设计师，那么用户在不同产品模块下定一个外卖的流程路径大概有多少种，都穷举出来。比如你是一款在线演唱类的产品设计师，那么用户在产品中完成一首歌需要的用户路径到底有多少条，穷举所有路径之后一一优化，让路径变得更加扁平，或许是一个最笨但有效的方案，怎么优化？以淘宝消息页举个例子：

淘宝消息页面有“交易物流”、“通知”、“互动”三个tab，这时候我们假设一个用户三个按钮下面都有消息，用户想要看完这三个消息大概需要几次交互？答案是至少6次：点击第一个进去-返回-点击第二个进去-返回-点击第三个进入-返回，这样的交互显得呆板且冗长，淘宝团队把三个内页集合成一个页面的三个tab形式，大大缩短的交互成本，这就是所谓的“把用户路径变得更扁平”：

多多留心，细节里面有魔鬼

image.png