之前参加了回音分享会，认识了很多新朋友，线下分享时间有限，可能有很多东西没有讲的很透彻，所以整理了一下我当时的 ppt 和想要表达的观点，写了这篇文章，和大家分享一些在产品和交互设计中的一些自己的方法。
一、什么是交互
狭义的交互（Interaction）定义交互主体必须是人本身，而客体可以是产品，环境，服务等等，且不论交互客体是什么，只要主体是人，人和客体去进行交互的时候，一定是人带着心理预期施加一个行为，然后客体会根据这个行为给予一个反馈（没有反馈本质也是一个反馈），而人会根据这个反馈是否符合预期去进行心理修正。如下图所示，这就是我理解的最小交互模型：
当时我举的例子是用翻页器去控制 ppt 翻页：
如上图所示，拆解这一套交互行为：
当我点击翻页器的「下一页」按钮，我点击行为附带的心理预期是「PPT翻往下一页」，然后我点击的时候，遥控器塑胶按钮给到我手指一个物理反馈，证明我按下的行为已经完成了，这是「输出端（我的手）的交互与反馈」，这时候遥控器接收到按钮指令，把指令通过红外线传输到 USB接收器上，接收器把指令传到 PC端然后完成翻页动作，再通过大屏幕传到我的眼（输入端）中，我就可以确认这一次交互反馈是符合预期的。这里有一点想要补充：设备对设备（上图中黑色箭头），也属于广义的交互，只不过现阶段大家研究的交互设计都是狭义的，人为主体的交互。
在我们日用科技产品的早期，有两个东西是无法跳过的，那就是按键手机和 PC电脑：
他们几乎是同步在发展的，而这两个产品的交互行为基本上延续到了触屏手机时代，所以为了弄明白触屏手机的交互，这两个产品是值得讲一讲的。
先看按键手机（就是我们小时候用的非智能手机）：
在按键手机中，最让用户困惑的其实是按键和屏幕之间存在一个映射关系，而不同厂商缺乏一个统一的规范，各家映射规则不一样。大家是否还记得当年的手机说明书那可以说是相当厚，因为说明书必须要给用户建构一个心理模型；比如上图，点击左上角和右上角那两个「-」按钮，其实一一对应的是屏幕左下角的「Goto」和右下角的「Names」。这个一一对应关系作为今天的用户来看应该是很平常而且很易懂的，但是当年没用过手机的人，需要花很长时间阅读说明书，才能够明白物理按键和屏幕上的映射关系，这就是触屏手机很难用的地方，也是很反人性的地方。因为作为用户来说，心智上，我们当然希望所触即所得。
再来看 PC，作为和按键手机差不多一起出现的载体形式，人们操作 PC端人是通过媒介（也就是鼠标+键盘）输入的，其实本质上也是我们通过鼠标在桌面上滑动 x-y 区域对应到电脑桌面上指针的移动来创造屏幕中x-y的映射关系，然后键盘上几十个键配合输入完成操作。
大家发现了么，上述的两种设备其实本身就是在制造一种一一对应的映射关系去完成交互行为，这两种载体从出身开始就是需要很大交互成本的。
随着科技的发展，触屏感应技术推出了之后，印象中触屏手机就是两三年时间就摧枯拉朽的淘汰了按键手机，本质上是干掉了一一对应的交互映射，所按即所得：
触屏手机出现之后，交互专家们不禁要问一个问题了：手和触摸屏到底有多少种交互方式？
答案是有很多种：
越是高阶越是隐藏的交互手势越复杂，所谓的「交互成本」也越高，比如锤子三指滑动换屏保那种，就是利用了高阶交互便捷实现边界功能。那这么看起来，iOS 也好还是所有的安卓手机都好，从用户端而言，就是组合交互手势，让信息更好的传达而已。那么同理，在 App 中也是一样，如果我们了解了每一个交互行为的用户心理预期，对设计工作而言就能做到有的放矢：
我们以「单击」和「滑动」这两个最简单的交互行为举例。
所谓单击手机屏幕，用户其实最核心的是有两个预期：
第一是选中一个元素，比如 Radio组件。第二是逻辑上的 Next，比如点了一件衣服，应该 Next 到衣服的详情；点了付款，应该出现付款流程，点了返回，应该 back 到上一路径点等等。
划动交互也是一样的，用户在一块手机屏幕上单指划划划，用户内心的预期其实也不复杂，最核心的预期也就两点：
第一是查看屏幕外的线索（前提是设计师给用户留下线索了或者是这个 UI组件长得就是可以划动的样子）。第二是查看相邻标签的内容，或者查看同一个标签下的相邻元素，比如 iOS 的 segment controlle组件就是典型例子：
当我们了解了这些之后，我们在实际的设计工作中就可以根据上面这些理论来合理选择 UI组件去呈现对应的信息了。
二、从交互维度合理选择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风格，原因是什么呢？
快手在这个页面，其实承载的关键任务是：「迅速让用户找到感兴趣的点」，它这么设计的本质原因是因为它的截图可以帮助用户判断内容本身，比如第一张图是一个人在打高尔夫，右边是一个工人，然后第二排左边是一个游戏的镜头，右边是一个传递正能量，大家可以很方便的通过图片识别里面的内容，用户更沉浸更聚焦的去选择自己喜欢的，点击进入消费就可以了。但是唱吧的视频截图其实是不能识别里面内容的，大家可以看到，第一张图是一个妹子，第二张图是一个妹子，第三张图还是一个妹子，那用户点击进去的动力在哪儿了？除了这个照片长相之外，更多的其实是文字决定的，是这个人唱的这首歌的歌曲名是不是我喜欢的，或者是这个演唱者的歌手等级。
所以基于这种更深层次的逻辑，唱吧和快手两款产品的这个页面都是为了促进消费转化，但是 UI 长相上完全不同。
我们看第三个例子：