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

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

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

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

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

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

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

001 規(guī)劃近景

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

002 打量遠(yuǎn)景

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

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

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

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

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

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

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

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

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

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

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

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

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

001 用VUE.JS搭積木

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

002 Ant組件庫

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

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

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

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

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

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

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

004 負(fù)載均衡

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

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

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

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

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

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

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

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

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