本文转载自微信公众号「神光的编程秘籍」,作者神说要有光 。转载本文请联系神光的编程秘籍公众号。
交互流是前端应用或者说产品中最核心的东西,它不会随着前端技术的发展而改变,而且它也是公司内多个团队共同合作的交集。
可能你不太清楚我这句话是什么意思,接下来我们慢慢理清楚。
什么是交互
网页向用户展示信息,然后在一些元素上监听事件,用户通过一些行为触发这些事件,然后网页展示出更多的信息,这样的过程就是交互。
多个交互串联起来组成交互流,前端应用的功能就是通过不同的交互流来完成的。
比如打开百度首页会展示搜索框,点击搜索框,输入内容会出现搜索的一些提示,按回车后网页上会出现搜索结果。这就是搜索功能的交互流。
前端技术在变,但是前端应用的交互流并没变。
交互是前端发展中不变的东西
在 jquery 时代,我们会通过 ajax 从服务端获取数据,然后通过模版引擎渲染成 dom,从而在网页上展示相应的信息给用户,并且对一些元素绑定事件。
用户通过一些行为触发这些事件,然后网页做 dom 的修改,进而展示更多的信息,也可能是异步的从服务端获取数据,然后再渲染成 dom。
到了 mvvm 时代,数据和 dom 是分离的,我们只需要通过 template 或者 jsx 等 DSL 来描述 dom 和数据的绑定关系,然后只关心数据即可。
从服务端获取数据,前端框架就会自动的渲染出相应的 dom,展示相应的信息给用户,并绑定一些事件。然后用户通过行为触发这些事件,网页会做数据的改变进而改变视图,或者通过某个异步过程从服务端获取数据,然后再自动更新视图。
可以看到,mvvm 做的事情只是分离了数据和 dom,提高了开发效率和代码的可维护性,但是前端应用的交互流并没有变。
前端技术在发展,变的是开发模式,不变的是交互流程。
既然交互是前端应用的核心,那么什么才是好的交互呢?
好的交互是多个团队合作的结果
我当初选择做前端的一个原因就是觉得前端可以做很多很炫的特效,相信很多小伙伴也是这么想的。但是工作以后发现并不是这样,我们做的页面可能会很简洁。
我在百度搜索待过一段时间,当时在维护百度 PC 首页和搜索页,那里有很厉害的设计师,但是整天和他们对的是这个数字要 13 像素,这个文字要 12 像素这种细节,并没有多高大上。
为什么呢?因为产品的交互设计的主要目的是为了促进产品核心逻辑的达成。
就像信息流产品,核心的目的就是让用户不断的看更多的信息,花更多的时间在上面。那交互上就要做成自动滚动的无限的加载,并且字体、排版等要让用户看着比较舒服,推荐的内容要是用户喜欢的。
就像电商产品,核心的目的就是让用户下单,那就要通过图片、文字、视频、直播等多种形式全方位展示商品,并且把购买按钮做的足够大和醒目,引导用户去下单。并且后续推荐的商品也要是用户可能会感兴趣的。
可以看到,整个交互流的设计是要贴合产品的核心功能的,它也是多个团队合作的结果:产品团队负责整体布局和交互流程的设计,UI 团队负责样式,算法团队负责内容的个性化推荐,开发团队负责把它们实现,运营团队负责内容的维护和更新,增长团队负责分析每一环的流量转化率,进而不断优化交互流。
整个公司的各个团队都是围绕产品的核心逻辑来工作的,也就是围绕一条条交互流,并不单是前端要关注的。
交互就是对话
当你和一个销售谈话,你会问他有什么产品,然后他会告诉你有什么,你对某个产品感兴趣,他又会给你详细介绍,你产生了购买的意愿,就会下单。
销售的客户谈话的主要目的就是为了促成下单,这就像电商网站的交互设计的目的是为了让用户下单一样。
其实不只是网站,写文章也是交互的设计过程,你表达了一些内容,读者会产生一些思考,然后你顺着他的思考又表达了一些内容,慢慢引导读者理解你想表达的观点。这也是一种交互流。
所以说,产品的交互设计就像和用户的对话,是为了一步步引导用户去达成产品的核心目的。而前端是则是实现这个交互流的重要一环。
我们前端开发的页面是为了产品服务的,那核心也就是实现这个交互流。完成整个交互流之后,产品才是可用的,在这个基础上再去做体验优化,提升整个交互流的流畅度甚至做一些交互上的小惊喜。这是前端应用的核心也是产品的核心。
总结
网页向用户展示一些信息,并监听事件,用户通过行为触发这些时间,然后网页展示更多的信息,这是一次交互。
多个交互构成的交互流就是产品的核心逻辑,前端应用主要是要实现这个交互流,不管是 jquery 时代还是 mvvm 时代,虽然开发模式在改变,但前端应用的核心并没有变。
交互流也是多个团队共同合作的结果,产品团队、设计团队、算法团队、开发团队、运营团队等,都是围绕着这些交互流来达成产品的目的,来优化体验。
理解了交互流,就能更好的理清前端应用的功能,理清产品逻辑,也能更好的理清公司的商业逻辑和团队的划分。