前端应用和产品逻辑的核心：交互流
The following article is from 神光的编程秘籍 Author 神说要有光
可能你不太清楚这句话是什么意思，接下来我们慢慢讲清楚。
什么是交互
网页向用户展示信息，然后在一些元素上监听事件，用户通过一些行为触发这些事件，然后网页展示出更多的信息，这样的过程就是交互。
多个交互串联起来组成交互流，前端应用的功能就是通过不同的交互流来完成的。
比如打开百度首页会展示搜索框，点击搜索框，输入内容会出现搜索的一些提示，按回车后网页上会出现搜索结果。这就是搜索功能的交互流。
前端技术在变，但是前端应用的交互流并没变。
交互是前端发展中不变的东西
在 jQuery 时代，我们会通过 Ajax 从服务端获取数据，然后通过模版引擎渲染成 DOM，从而在网页上展示相应的信息给用户，并且对一些元素绑定事件。
用户通过一些行为触发这些事件，然后网页做 DOM 的修改，进而展示更多的信息，也可能是异步的从服务端获取数据，然后再渲染成 DOM。
到了 MVVM 时代，数据和 DOM 是分离的，我们只需要通过 template 或者 jsx 等 DSL 来描述 DOM 和数据的绑定关系，然后只关心数据即可。
从服务端获取数据，前端框架就会自动渲染出相应的 DOM，展示相应的信息给用户，并绑定一些事件。然后用户通过行为触发这些事件，网页会做数据的改变进而改变视图，或者通过某个异步过程从服务端获取数据，然后再自动更新视图。
可以看到，MVVM 做的事情只是分离了数据和 DOM，提高了开发效率和代码的可维护性，但是前端应用的交互流并没有变。
前端技术在发展，变的是开发模式，不变的是交互流程。
既然交互是前端应用的核心，那么什么才是好的交互呢？
好的交互是多个团队合作的结果
笔者当初选择做前端的一个原因就是觉得前端可以做很多很炫的特效，相信很多朋友也是这么想的。但是工作以后发现并不是这样，我们做的页面可能会很简洁。
笔者在百度搜索待过一段时间，当时在维护百度 PC 首页和搜索页，那里有很厉害的设计师，但是整天和他们对的是这个数字要 13 像素，这个文字要 12 像素这种细节，并没有多高大上。
为什么呢？因为产品的交互设计的主要目的是为了促进产品核心逻辑的达成。
就像信息流产品，核心目的就是让用户不断看更多的信息，花更多的时间在上面。那交互上就要做成自动滚动的无限的加载，并且字体、排版等要让用户看着比较舒服，推荐的内容要是用户喜欢的。
就像电商产品，核心的目的就是让用户下单，那就要通过图片、文字、视频、直播等多种形式全方位展示商品，并且把购买按钮做得足够大和醒目，引导用户去下单。并且后续推荐的商品也要是用户可能会感兴趣的。
可以看到，整个交互流的设计是要贴合产品的核心功能的，它也是多个团队合作的结果：产品团队负责整体布局和交互流程的设计，UI 团队负责样式，算法团队负责内容的个性化推荐，开发团队负责把它们实现，运营团队负责内容的维护和更新，增长团队负责分析每一环的流量转化率，进而不断优化交互流。
整个公司的各个团队都是围绕产品的核心逻辑来工作的，也就是围绕一条条交互流，并不单是前端要关注的。
交互就是对话
当你和一个销售谈话，你会问他有什么产品，然后他会告诉你有什么，你对某个产品感兴趣，他又会给你详细介绍，你产生了购买的意愿，就会下单。
销售的客户谈话的主要目的就是为了促成下单，这就像电商网站的交互设计的目的是为了让用户下单一样。
其实不只是网站，写文章也是交互的设计过程，你表达了一些内容，读者会产生一些思考，然后你顺着他的思考又表达了一些内容，慢慢引导读者理解你想表达的观点。这也是一种交互流。
所以说，产品的交互设计就像和用户的对话，是为了一步步引导用户去达成产品的核心目的。而前端则是实现这个交互流的重要一环。
我们前端开发的页面是为了产品服务的，那核心也就是实现这个交互流。完成整个交互流之后，产品才是可用的，在这个基础上再去做体验优化，提升整个交互流的流畅度甚至做一些交互上的小惊喜。这是前端应用的核心也是产品的核心。
总结
网页向用户展示一些信息，并监听事件，用户通过行为触发这些事件，然后网页展示更多的信息，这是一次交互。
多个交互构成的交互流就是产品的核心逻辑，前端应用主要是要实现这个交互流，不管是 jquery 时代还是 mvvm 时代，虽然开发模式在改变，但前端应用的核心并没有变。
交互流也是多个团队共同合作的结果，产品团队、设计团队、算法团队、开发团队、运营团队等，都是围绕着这些交互流来达成产品的目的，来优化体验。
理解了交互流，就能更好地理清前端应用的功能，理清产品逻辑，也能更好地厘清公司的商业逻辑和团队的划分。
RECOMMEND
推荐阅读
推荐语：经典内容、全新设计、全彩印刷、全球畅销！Ajax之父经典著作新版，用最简洁的语言系统化地诠释了以用户为中心的设计思想。涵盖了关于用户体验以及为什么它如此重要、认识这些要素、战略层、范围层、结构层、框架层、表现层以及要素的应用等。用清晰的说明和生动的图形分析了以用户为中心的设计方法来进行Web设计的复杂内涵。关注于思路而不是工具或技术，使你的网站具备高质量体验的流程。
推荐语：全新升级、全彩印刷、全球畅销。第11届Jolt生产效率大奖获奖图书，被Web设计人员奉为圭臬的经典之作第2版全球销量超过35万册，美亚网站的网页设计类图书的销量排行佼佼者，访客至上的Web和可用性设计秘笈。这是一本关于Web设计原则而不是Web设计技术的书，用幽默的语言为你揭示Web设计中重要但却容易被忽视的问题，只需几个小时，你便能对照书中的设计原则找到网站设计的症结所在，令你的网站焕然一新。
书讯 | 1月书讯（下）| 2022年的第一本书书讯 | 1月书讯（上）| 2022年的第一本书资讯 | 省政协委员、南京大学人工智能学院院长周志华：科研学习探索最重要的是“兴趣”和“勤奋”书单 | 6本书，读懂2022年最火的边缘计算干货 | 如何用数字化构建企业的“韧性”？收藏 | 为什么现在还有985高校给大一上C语言课？上新 | 【新书速递】金融领域可解释机器学习模型与实践