青島國(guó)際家具展由多家家具行業(yè)協(xié)會(huì)共同主辦，經(jīng)過(guò)十余年發(fā)展，現(xiàn)已成為中國(guó)家具行業(yè)江北第一展，不僅成為北方同類(lèi)展會(huì)中的佼佼者，更引領(lǐng)著整個(gè)北方地區(qū)家具產(chǎn)業(yè)的升級(jí)發(fā)展。

（標(biāo)梵為青島國(guó)際家具展打造數(shù)字化入場(chǎng)券）

標(biāo)梵互動(dòng)為青島國(guó)際家具展建設(shè)線上參與渠道，致力打造高并發(fā)情況下，用戶依舊使用體驗(yàn)絕佳的平臺(tái)。

標(biāo)梵互動(dòng)服務(wù)內(nèi)容：H5定制開(kāi)發(fā)連續(xù)3年優(yōu)化更新

H5是一個(gè)慘遭廣義和狹義概念混淆了的術(shù)語(yǔ)，有時(shí)它是一款宣傳工具的概念，代表著具有互動(dòng)形式的多媒體廣告頁(yè)面；而有時(shí)，它是一個(gè)大的技術(shù)合集概念，代表著HTML5規(guī)范下的多種技術(shù)。

用HTML5來(lái)制作產(chǎn)品非常靈活，它可同時(shí)兼容PC端、移動(dòng)端、Windows、Android與IOS，可輕易移植到不同的開(kāi)放平臺(tái)上，打破如今各行其道的情況。

在與青島國(guó)際家具展合作中，標(biāo)梵啟動(dòng)技術(shù)核心優(yōu)勢(shì)，提供了創(chuàng)造性的解決方案。

001 規(guī)劃近景

與之前同樣，標(biāo)梵先從深度訪談了解需求開(kāi)始入手，技術(shù)部與市場(chǎng)部人員經(jīng)多次頭腦風(fēng)暴，綜合專(zhuān)注度和豐富度，記錄細(xì)節(jié)，與客戶確定了產(chǎn)品的核心功能和開(kāi)發(fā)優(yōu)先級(jí)，初步制定產(chǎn)品各個(gè)階段完成時(shí)間節(jié)點(diǎn)。

002 打量遠(yuǎn)景

為產(chǎn)品的目標(biāo)用戶群分類(lèi)，模擬他們的使用環(huán)境，測(cè)算該產(chǎn)品上市后會(huì)面臨的風(fēng)險(xiǎn)問(wèn)題，對(duì)如何處理這些風(fēng)險(xiǎn)列入重點(diǎn)解決項(xiàng)目，并估算成本投入，提供給客戶心靈輪廓。

設(shè)計(jì)的底層應(yīng)該是清晰的層級(jí)邏輯。標(biāo)梵此次設(shè)計(jì)中，著重分析了來(lái)賓成員的身份群體、購(gòu)票方式、報(bào)名流程三個(gè)大類(lèi)。確定了主線的模塊，再進(jìn)入支流中。

比如，我們分析每種人員的特色，當(dāng)參展商報(bào)名青島國(guó)際家具展時(shí)，他應(yīng)享有拉人的權(quán)限，邀請(qǐng)其公司員工加入展會(huì)。

再比如，當(dāng)使用人臉識(shí)別報(bào)名時(shí)，也可以使用人臉識(shí)別入場(chǎng)，這時(shí)應(yīng)為產(chǎn)品加入精準(zhǔn)的識(shí)別算法，保證用戶的使用流暢。

為了能在一開(kāi)始就感受到成品的方向，標(biāo)梵為客戶提供了初始原型。

它是最終成品的簡(jiǎn)略版，雖然略顯粗糙，但是原型能更直觀呈現(xiàn)出產(chǎn)品的核心，比如基礎(chǔ)功能、用戶交互流程、信息架構(gòu)、交互細(xì)節(jié)、頁(yè)面元素等等。

在雙方溝通時(shí)，原型會(huì)讓討論的重點(diǎn)聚焦在頁(yè)面布局和功能完善上，隨著思考維度的遞增，可以在原型上靈活地加減項(xiàng)目，完成一次次產(chǎn)品的初級(jí)迭代。

當(dāng)雙方確認(rèn)無(wú)誤后，才進(jìn)入高保真模型的原型設(shè)計(jì)，并投入開(kāi)發(fā)中。

H5頁(yè)面越早投入使用，展會(huì)的收益也就越大。標(biāo)梵首要主張拉升開(kāi)發(fā)效率盡早交付，第二則是克服產(chǎn)品未來(lái)會(huì)面對(duì)的高并發(fā)問(wèn)題，為企業(yè)打造專(zhuān)門(mén)的H5定制平臺(tái)。

當(dāng)我們打開(kāi)H5就相當(dāng)于打開(kāi)一個(gè)網(wǎng)頁(yè)，頁(yè)面需要加載，切換也需要時(shí)間，一秒鐘內(nèi)幾百幾千人同時(shí)登錄、報(bào)名、購(gòu)票，說(shuō)不定還要滿足活動(dòng)專(zhuān)題，抽獎(jiǎng)，簽到等等，如果還是沿用之前的開(kāi)發(fā)方案，用戶通常都會(huì)得到一個(gè)苦悶的無(wú)響應(yīng)。

（青島國(guó)際家具展展會(huì)用戶紛紛掃描進(jìn)入H5平臺(tái)）

如果您還沒(méi)有意識(shí)到這個(gè)例子里高并發(fā)帶來(lái)的恐怖，那可以聯(lián)想一下每年雙十一的0點(diǎn)時(shí)，反復(fù)購(gòu)買(mǎi)操作無(wú)效的感覺(jué)。

為了讓青島國(guó)際家具展的用戶擁有絕佳使用感，標(biāo)梵綜合了一系列方法，比如，引入了輕量高效的前端組件化方案VUE.JS，使用了提高工作效率的前后端分離技術(shù)，還有解決高并發(fā)問(wèn)題的負(fù)載均衡與消息池異步化數(shù)據(jù)等等。

001 用VUE.JS搭積木

新的名詞并非遙不可及，我們假設(shè)在一個(gè)項(xiàng)目中，如果有多個(gè)部分是相同的，并可以封裝成一個(gè)組件，那么VUE.JS的組件機(jī)制可以實(shí)現(xiàn)組件的復(fù)用，讓開(kāi)發(fā)工程師們可以像搭積木一樣用組件拼接嵌套出整個(gè)界面，開(kāi)發(fā)過(guò)程省力省時(shí)。

002 Ant組件庫(kù)

UI界面決定了用戶使用的第一感受，標(biāo)梵選擇的Ant Design是一款適合PC端和移動(dòng)端的UI組件庫(kù)，這個(gè)組件庫(kù)非常豐富，基本上所有想到的頁(yè)面交互都可以用Ant Design來(lái)實(shí)現(xiàn)。

（家具展特色鮮明的的界面）

組件的視覺(jué)、交互設(shè)計(jì)和與前端的融合相得益彰，不但能滿足用戶的使用體驗(yàn)，也能滿足開(kāi)發(fā)工程師的工作體驗(yàn)，幫助開(kāi)發(fā)人員在短時(shí)間內(nèi)打造出具有優(yōu)秀外觀的產(chǎn)品。

003 前后端分離技術(shù)

我們都知道，并聯(lián)的工作效率要比串聯(lián)的方式高出許多，前后端分離技術(shù)正是將混合起來(lái)的前后端代碼分開(kāi)，讓標(biāo)梵的前端工程師和后端工程師分別專(zhuān)注自己的部分，不必等待對(duì)方工作結(jié)束后才能進(jìn)行下一項(xiàng)。

哪怕需求有所改變，只要接口不變，也僅須在前端修改，后端無(wú)須跟著行動(dòng)。

而且前后端分離后代碼會(huì)變得整潔清晰，不論是閱讀還是維護(hù)都會(huì)比以前更輕松。

004 負(fù)載均衡

當(dāng)青島國(guó)際家具展的用戶大量到來(lái)進(jìn)行訪問(wèn)時(shí)，服務(wù)器的調(diào)度就需要依賴(lài)負(fù)載均衡提高響應(yīng)速度，解決擁塞問(wèn)題。顯然，這一項(xiàng)技術(shù)的目的在于“均衡”。

用戶請(qǐng)求發(fā)送到系統(tǒng)后，它能通過(guò)某些方式把請(qǐng)求均勻分發(fā)到多個(gè)節(jié)點(diǎn)上，使系統(tǒng)中每個(gè)節(jié)點(diǎn)能夠均勻處理，共同完成工作。

這種方法可以擴(kuò)展服務(wù)器的帶寬、增加吞吐量、加強(qiáng)網(wǎng)絡(luò)數(shù)據(jù)處理能力、提高網(wǎng)絡(luò)的靈活性，提高用戶訪問(wèn)質(zhì)量，幫助用戶避免各種單點(diǎn)失效。

005 消息池異步化數(shù)據(jù)

在標(biāo)梵開(kāi)發(fā)工程師的眼中，異步化數(shù)據(jù)無(wú)疑是解決高并發(fā)的主要幫手。

用戶產(chǎn)生所有的認(rèn)證流程，訂單流程，支付流程，大量的排隊(duì)請(qǐng)求占用著資源，假設(shè)每個(gè)調(diào)用時(shí)間控制在20毫秒內(nèi)返回，乘以300人同時(shí)操作，這個(gè)時(shí)間也會(huì)讓用戶等待得太久了。

解決性能的核心就是實(shí)現(xiàn)消息池的異步化，異步化數(shù)據(jù)同樣用于解決阻塞的問(wèn)題，它能提高每秒查詢率，每秒的響應(yīng)請(qǐng)求數(shù)，拉升最大吞吐能力。

標(biāo)梵以成熟的技術(shù)能力打造出色產(chǎn)品，在所言內(nèi)容之外下了更多功夫。其中牽扯到多種信息調(diào)度，不僅需要開(kāi)發(fā)人員選擇良好的架構(gòu)和技術(shù)，還需要對(duì)業(yè)務(wù)場(chǎng)景的全鏈路進(jìn)行峰值測(cè)試。

這次青島國(guó)際家具展展會(huì)中，共計(jì)三十萬(wàn)用戶使用標(biāo)梵互動(dòng)開(kāi)發(fā)的H5平臺(tái)登陸，其中無(wú)卡頓，無(wú)數(shù)據(jù)丟失，響應(yīng)及時(shí)，體驗(yàn)流暢。這次合作的成功，也印證了標(biāo)梵一直以來(lái)的態(tài)度：永遠(yuǎn)將互聯(lián)網(wǎng)新技術(shù)握在己手。