前端应用和产品逻辑的核心：交互流

本文转载自微信公众号「神光的编程秘籍」，作者神说要有光  。转载本文请联系神光的编程秘籍公众号。

交互流是前端应用或者说产品中最核心的东西，它不会随着前端技术的发展而改变，而且它也是公司内多个团队共同合作的交集。

可能你不太清楚我这句话是什么意思，接下来我们慢慢理清楚。

什么是交互

网页向用户展示信息，然后在一些元素上监听事件，用户通过一些行为触发这些事件，然后网页展示出更多的信息，这样的过程就是交互。

多个交互串联起来组成交互流，前端应用的功能就是通过不同的交互流来完成的。

比如打开百度首页会展示搜索框，点击搜索框，输入内容会出现搜索的一些提示，按回车后网页上会出现搜索结果。这就是搜索功能的交互流。

前端技术在变，但是前端应用的交互流并没变。

交互是前端发展中不变的东西

在 jquery 时代，我们会通过 ajax 从服务端获取数据，然后通过模版引擎渲染成 dom，从而在网页上展示相应的信息给用户，并且对一些元素绑定事件。

用户通过一些行为触发这些事件，然后网页做 dom 的修改，进而展示更多的信息，也可能是异步的从服务端获取数据，然后再渲染成 dom。

到了 mvvm 时代，数据和 dom 是分离的，我们只需要通过 template 或者 jsx 等 DSL 来描述 dom 和数据的绑定关系，然后只关心数据即可。

从服务端获取数据，前端框架就会自动的渲染出相应的 dom，展示相应的信息给用户，并绑定一些事件。然后用户通过行为触发这些事件，网页会做数据的改变进而改变视图，或者通过某个异步过程从服务端获取数据，然后再自动更新视图。

可以看到，mvvm 做的事情只是分离了数据和 dom，提高了开发效率和代码的可维护性，但是前端应用的交互流并没有变。

前端技术在发展，变的是开发模式，不变的是交互流程。

既然交互是前端应用的核心，那么什么才是好的交互呢?

好的交互是多个团队合作的结果

我当初选择做前端的一个原因就是觉得前端可以做很多很炫的特效，相信很多小伙伴也是这么想的。但是工作以后发现并不是这样，我们做的页面可能会很简洁。

我在百度搜索待过一段时间，当时在维护百度 PC 首页和搜索页，那里有很厉害的设计师，但是整天和他们对的是这个数字要 13 像素，这个文字要 12 像素这种细节，并没有多高大上。

为什么呢?因为产品的交互设计的主要目的是为了促进产品核心逻辑的达成。

就像信息流产品，核心的目的就是让用户不断的看更多的信息，花更多的时间在上面。那交互上就要做成自动滚动的无限的加载，并且字体、排版等要让用户看着比较舒服，推荐的内容要是用户喜欢的。

就像电商产品，核心的目的就是让用户下单，那就要通过图片、文字、视频、直播等多种形式全方位展示商品，并且把购买按钮做的足够大和醒目，引导用户去下单。并且后续推荐的商品也要是用户可能会感兴趣的。

可以看到，整个交互流的设计是要贴合产品的核心功能的，它也是多个团队合作的结果：产品团队负责整体布局和交互流程的设计，UI 团队负责样式，算法团队负责内容的个性化推荐，开发团队负责把它们实现，运营团队负责内容的维护和更新，增长团队负责分析每一环的流量转化率，进而不断优化交互流。

整个公司的各个团队都是围绕产品的核心逻辑来工作的，也就是围绕一条条交互流，并不单是前端要关注的。

交互就是对话

当你和一个销售谈话，你会问他有什么产品，然后他会告诉你有什么，你对某个产品感兴趣，他又会给你详细介绍，你产生了购买的意愿，就会下单。

销售的客户谈话的主要目的就是为了促成下单，这就像电商网站的交互设计的目的是为了让用户下单一样。

其实不只是网站，写文章也是交互的设计过程，你表达了一些内容，读者会产生一些思考，然后你顺着他的思考又表达了一些内容，慢慢引导读者理解你想表达的观点。这也是一种交互流。

所以说，产品的交互设计就像和用户的对话，是为了一步步引导用户去达成产品的核心目的。而前端是则是实现这个交互流的重要一环。

我们前端开发的页面是为了产品服务的，那核心也就是实现这个交互流。完成整个交互流之后，产品才是可用的，在这个基础上再去做体验优化，提升整个交互流的流畅度甚至做一些交互上的小惊喜。这是前端应用的核心也是产品的核心。

总结

网页向用户展示一些信息，并监听事件，用户通过行为触发这些时间，然后网页展示更多的信息，这是一次交互。

多个交互构成的交互流就是产品的核心逻辑，前端应用主要是要实现这个交互流，不管是 jquery 时代还是 mvvm 时代，虽然开发模式在改变，但前端应用的核心并没有变。

交互流也是多个团队共同合作的结果，产品团队、设计团队、算法团队、开发团队、运营团队等，都是围绕着这些交互流来达成产品的目的，来优化体验。

理解了交互流，就能更好的理清前端应用的功能，理清产品逻辑，也能更好的理清公司的商业逻辑和团队的划分。

当前名称：前端应用和产品逻辑的核心：交互流
标题链接：http://www.shufengxianlan.com/qtweb/news48/443198.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联