前端應(yīng)用和產(chǎn)品邏輯的核心:交互流
本文轉(zhuǎn)載自微信公眾號(hào)「神光的編程秘籍」,作者神說(shuō)要有光 。轉(zhuǎn)載本文請(qǐng)聯(lián)系神光的編程秘籍公眾號(hào)。
交互流是前端應(yīng)用或者說(shuō)產(chǎn)品中最核心的東西,它不會(huì)隨著前端技術(shù)的發(fā)展而改變,而且它也是公司內(nèi)多個(gè)團(tuán)隊(duì)共同合作的交集。
可能你不太清楚我這句話是什么意思,接下來(lái)我們慢慢理清楚。
什么是交互
網(wǎng)頁(yè)向用戶展示信息,然后在一些元素上監(jiān)聽(tīng)事件,用戶通過(guò)一些行為觸發(fā)這些事件,然后網(wǎng)頁(yè)展示出更多的信息,這樣的過(guò)程就是交互。
多個(gè)交互串聯(lián)起來(lái)組成交互流,前端應(yīng)用的功能就是通過(guò)不同的交互流來(lái)完成的。
比如打開(kāi)百度首頁(yè)會(huì)展示搜索框,點(diǎn)擊搜索框,輸入內(nèi)容會(huì)出現(xiàn)搜索的一些提示,按回車(chē)后網(wǎng)頁(yè)上會(huì)出現(xiàn)搜索結(jié)果。這就是搜索功能的交互流。
前端技術(shù)在變,但是前端應(yīng)用的交互流并沒(méi)變。
交互是前端發(fā)展中不變的東西
在 jquery 時(shí)代,我們會(huì)通過(guò) ajax 從服務(wù)端獲取數(shù)據(jù),然后通過(guò)模版引擎渲染成 dom,從而在網(wǎng)頁(yè)上展示相應(yīng)的信息給用戶,并且對(duì)一些元素綁定事件。
用戶通過(guò)一些行為觸發(fā)這些事件,然后網(wǎng)頁(yè)做 dom 的修改,進(jìn)而展示更多的信息,也可能是異步的從服務(wù)端獲取數(shù)據(jù),然后再渲染成 dom。
到了 mvvm 時(shí)代,數(shù)據(jù)和 dom 是分離的,我們只需要通過(guò) template 或者 jsx 等 DSL 來(lái)描述 dom 和數(shù)據(jù)的綁定關(guān)系,然后只關(guān)心數(shù)據(jù)即可。
從服務(wù)端獲取數(shù)據(jù),前端框架就會(huì)自動(dòng)的渲染出相應(yīng)的 dom,展示相應(yīng)的信息給用戶,并綁定一些事件。然后用戶通過(guò)行為觸發(fā)這些事件,網(wǎng)頁(yè)會(huì)做數(shù)據(jù)的改變進(jìn)而改變視圖,或者通過(guò)某個(gè)異步過(guò)程從服務(wù)端獲取數(shù)據(jù),然后再自動(dòng)更新視圖。
可以看到,mvvm 做的事情只是分離了數(shù)據(jù)和 dom,提高了開(kāi)發(fā)效率和代碼的可維護(hù)性,但是前端應(yīng)用的交互流并沒(méi)有變。
前端技術(shù)在發(fā)展,變的是開(kāi)發(fā)模式,不變的是交互流程。
既然交互是前端應(yīng)用的核心,那么什么才是好的交互呢?
好的交互是多個(gè)團(tuán)隊(duì)合作的結(jié)果
我當(dāng)初選擇做前端的一個(gè)原因就是覺(jué)得前端可以做很多很炫的特效,相信很多小伙伴也是這么想的。但是工作以后發(fā)現(xiàn)并不是這樣,我們做的頁(yè)面可能會(huì)很簡(jiǎn)潔。
我在百度搜索待過(guò)一段時(shí)間,當(dāng)時(shí)在維護(hù)百度 PC 首頁(yè)和搜索頁(yè),那里有很厲害的設(shè)計(jì)師,但是整天和他們對(duì)的是這個(gè)數(shù)字要 13 像素,這個(gè)文字要 12 像素這種細(xì)節(jié),并沒(méi)有多高大上。
為什么呢?因?yàn)楫a(chǎn)品的交互設(shè)計(jì)的主要目的是為了促進(jìn)產(chǎn)品核心邏輯的達(dá)成。
就像信息流產(chǎn)品,核心的目的就是讓用戶不斷的看更多的信息,花更多的時(shí)間在上面。那交互上就要做成自動(dòng)滾動(dòng)的無(wú)限的加載,并且字體、排版等要讓用戶看著比較舒服,推薦的內(nèi)容要是用戶喜歡的。
就像電商產(chǎn)品,核心的目的就是讓用戶下單,那就要通過(guò)圖片、文字、視頻、直播等多種形式全方位展示商品,并且把購(gòu)買(mǎi)按鈕做的足夠大和醒目,引導(dǎo)用戶去下單。并且后續(xù)推薦的商品也要是用戶可能會(huì)感興趣的。
可以看到,整個(gè)交互流的設(shè)計(jì)是要貼合產(chǎn)品的核心功能的,它也是多個(gè)團(tuán)隊(duì)合作的結(jié)果:產(chǎn)品團(tuán)隊(duì)負(fù)責(zé)整體布局和交互流程的設(shè)計(jì),UI 團(tuán)隊(duì)負(fù)責(zé)樣式,算法團(tuán)隊(duì)負(fù)責(zé)內(nèi)容的個(gè)性化推薦,開(kāi)發(fā)團(tuán)隊(duì)負(fù)責(zé)把它們實(shí)現(xiàn),運(yùn)營(yíng)團(tuán)隊(duì)負(fù)責(zé)內(nèi)容的維護(hù)和更新,增長(zhǎng)團(tuán)隊(duì)負(fù)責(zé)分析每一環(huán)的流量轉(zhuǎn)化率,進(jìn)而不斷優(yōu)化交互流。
整個(gè)公司的各個(gè)團(tuán)隊(duì)都是圍繞產(chǎn)品的核心邏輯來(lái)工作的,也就是圍繞一條條交互流,并不單是前端要關(guān)注的。
交互就是對(duì)話
當(dāng)你和一個(gè)銷(xiāo)售談話,你會(huì)問(wèn)他有什么產(chǎn)品,然后他會(huì)告訴你有什么,你對(duì)某個(gè)產(chǎn)品感興趣,他又會(huì)給你詳細(xì)介紹,你產(chǎn)生了購(gòu)買(mǎi)的意愿,就會(huì)下單。
銷(xiāo)售的客戶談話的主要目的就是為了促成下單,這就像電商網(wǎng)站的交互設(shè)計(jì)的目的是為了讓用戶下單一樣。
其實(shí)不只是網(wǎng)站,寫(xiě)文章也是交互的設(shè)計(jì)過(guò)程,你表達(dá)了一些內(nèi)容,讀者會(huì)產(chǎn)生一些思考,然后你順著他的思考又表達(dá)了一些內(nèi)容,慢慢引導(dǎo)讀者理解你想表達(dá)的觀點(diǎn)。這也是一種交互流。
所以說(shuō),產(chǎn)品的交互設(shè)計(jì)就像和用戶的對(duì)話,是為了一步步引導(dǎo)用戶去達(dá)成產(chǎn)品的核心目的。而前端是則是實(shí)現(xiàn)這個(gè)交互流的重要一環(huán)。
我們前端開(kāi)發(fā)的頁(yè)面是為了產(chǎn)品服務(wù)的,那核心也就是實(shí)現(xiàn)這個(gè)交互流。完成整個(gè)交互流之后,產(chǎn)品才是可用的,在這個(gè)基礎(chǔ)上再去做體驗(yàn)優(yōu)化,提升整個(gè)交互流的流暢度甚至做一些交互上的小驚喜。這是前端應(yīng)用的核心也是產(chǎn)品的核心。
總結(jié)
網(wǎng)頁(yè)向用戶展示一些信息,并監(jiān)聽(tīng)事件,用戶通過(guò)行為觸發(fā)這些時(shí)間,然后網(wǎng)頁(yè)展示更多的信息,這是一次交互。
多個(gè)交互構(gòu)成的交互流就是產(chǎn)品的核心邏輯,前端應(yīng)用主要是要實(shí)現(xiàn)這個(gè)交互流,不管是 jquery 時(shí)代還是 mvvm 時(shí)代,雖然開(kāi)發(fā)模式在改變,但前端應(yīng)用的核心并沒(méi)有變。
交互流也是多個(gè)團(tuán)隊(duì)共同合作的結(jié)果,產(chǎn)品團(tuán)隊(duì)、設(shè)計(jì)團(tuán)隊(duì)、算法團(tuán)隊(duì)、開(kāi)發(fā)團(tuán)隊(duì)、運(yùn)營(yíng)團(tuán)隊(duì)等,都是圍繞著這些交互流來(lái)達(dá)成產(chǎn)品的目的,來(lái)優(yōu)化體驗(yàn)。
理解了交互流,就能更好的理清前端應(yīng)用的功能,理清產(chǎn)品邏輯,也能更好的理清公司的商業(yè)邏輯和團(tuán)隊(duì)的劃分。