青島國際家具展歷經(jīng)十余年發(fā)展，在展會(huì)規(guī)模、品質(zhì)、成效和體驗(yàn)上不斷進(jìn)行自我革新，為參展者帶來更高端的展會(huì)體驗(yàn)，現(xiàn)已成為北方同類展會(huì)中的佼佼者。青島國際家具展為全行業(yè)及社會(huì)各界呈現(xiàn)“大不一樣”的高品質(zhì)盛會(huì)，引領(lǐng)整個(gè)北方地區(qū)家具產(chǎn)業(yè)的升級(jí)發(fā)展。

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

標(biāo)梵互動(dòng)作為一家為品牌提供互聯(lián)網(wǎng)營銷解決方案的公司，幫助青島國際家具展進(jìn)行數(shù)字化轉(zhuǎn)型，推動(dòng)青島國際家具展在營銷科技內(nèi)容創(chuàng)意、銷售轉(zhuǎn)化、用戶運(yùn)營、H5定制等方面進(jìn)行升級(jí)，為青島國際家具展構(gòu)建業(yè)務(wù)增長策略、建設(shè)線上參與渠道，搭建用戶使用體驗(yàn)極致的平臺(tái)。 

H5定制也可以理解為手機(jī)端的網(wǎng)頁開發(fā)，且范圍廣而靈活，小程序、APP等都可以嵌入到H5定制進(jìn)行開發(fā)，其跨端能力很強(qiáng)，混合開發(fā)成本小，深受到中大型企業(yè)的歡迎。

H5定制是目前數(shù)字科技所構(gòu)建的互聯(lián)網(wǎng)井噴時(shí)代下具有互動(dòng)形式的多媒體廣告頁面，代表著數(shù)字技術(shù)正在一步步改變?nèi)蛳M(fèi)者的消費(fèi)習(xí)慣及生活方式，同時(shí)，它也具有很強(qiáng)的傳播性及黏性，H5定制在短時(shí)間內(nèi)容易被人記住并理解，后產(chǎn)生長久的潛移默化的影響。

在與青島國際家具展合作中，標(biāo)梵啟動(dòng)成熟技術(shù)服務(wù)團(tuán)隊(duì)，利用自身技術(shù)核心優(yōu)勢(shì)，結(jié)合在業(yè)內(nèi)有相應(yīng)成功案例的加持，為青島國際家具展提供了創(chuàng)造性的解決方案。

001 規(guī)劃近景

項(xiàng)目需求的溝通在合作中起著關(guān)鍵作用。標(biāo)梵從深度訪談了解青島國際家具展需求開始入手，在經(jīng)過公司相關(guān)人員多次頭腦風(fēng)暴，明確項(xiàng)目所需團(tuán)隊(duì)配置，確定了從開發(fā)到使用整個(gè)過程的用戶體驗(yàn)和使用細(xì)節(jié)，制定了項(xiàng)目開展流程的管理方案，對(duì)意外狀況也做了詳細(xì)報(bào)告，初步制定了產(chǎn)品各個(gè)階段完成的時(shí)間節(jié)點(diǎn)。

002 打量遠(yuǎn)景

模擬目標(biāo)用戶群的使用環(huán)境，并對(duì)目標(biāo)用戶群進(jìn)行細(xì)分，并測(cè)試H5定制上市之后所面臨的意外突發(fā)狀況，對(duì)如何處理意外突發(fā)的狀況設(shè)置詳細(xì)的解決方案，估算成本的投入，給客戶提供基礎(chǔ)心靈輪廓。

H5定制從初期設(shè)計(jì)開始的底層邏輯應(yīng)十分清晰。在與青島國際家具展的設(shè)計(jì)中，標(biāo)梵針對(duì)目標(biāo)用戶群體的三大類進(jìn)行主線分析，即購票方式、身份群體、報(bào)名環(huán)節(jié)，確定了主線的模塊后，再進(jìn)入分支中。

例如，我們分析了各類參會(huì)人員的特點(diǎn)。參展商報(bào)名時(shí)，應(yīng)有權(quán)吸引觀眾并邀請(qǐng)公司員工參加展會(huì)。

再例如，當(dāng)面部識(shí)別用于報(bào)名參展時(shí)，面部識(shí)別也同樣可用于入場(chǎng)。此時(shí)，應(yīng)在產(chǎn)品中添加精確的面部識(shí)別算法，以確保用戶的順利使用。

為了從一開始就讓客戶感覺到成品的方向，標(biāo)梵為客戶提供一個(gè)初始原型，給予客戶良好的初始用戶體驗(yàn)。

即使產(chǎn)品的簡(jiǎn)化版本略顯粗糙，但可以方便客戶更直觀地看到產(chǎn)品的核心，如基本功能、用戶交互過程、信息架構(gòu)、交互細(xì)節(jié)、頁面元素等。

雙方溝通過程中，在簡(jiǎn)化版本的基礎(chǔ)上將討論的重點(diǎn)轉(zhuǎn)移至頁面布局和功能改進(jìn)上。通過每一次頭腦風(fēng)暴后思維維度的增加，可以靈活地在原型上添加和減少項(xiàng)目，以完成每次產(chǎn)品初級(jí)迭代后客戶對(duì)結(jié)果的滿意為目的。

經(jīng)雙方確認(rèn)后，才進(jìn)行下一步的高保真模型的原型設(shè)計(jì)，并投入開發(fā)。

越早使用H5定制，展會(huì)的效益就越大，故標(biāo)梵在面對(duì)青島國際家具展H5定制的開發(fā)設(shè)計(jì)中支持提高開發(fā)效率和交付時(shí)間，其次是克服未來產(chǎn)品可能會(huì)面臨的高并發(fā)問題。

對(duì)于一個(gè)H5定制的產(chǎn)品，性能同樣重要，性能是用戶體驗(yàn)不可缺少的重要一環(huán)，當(dāng)我們打開H5定制，就像打開一個(gè)網(wǎng)頁，必須經(jīng)過加載頁面和切換，倘若數(shù)十萬人在一秒鐘內(nèi)同時(shí)注冊(cè)和買票，過程中也需要H5定制滿足活動(dòng)主題、抽獎(jiǎng)、用戶打卡簽到等，如果我們?nèi)匀皇褂靡郧伴_發(fā)的老方案，用戶通常會(huì)沮喪的等待網(wǎng)頁的無響應(yīng)，這對(duì)用戶來說是無法忍受的，用戶的耐心會(huì)逐漸喪失，一部分用戶甚至?xí)苯臃艞壥褂谩?/span>

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

若您并沒有意識(shí)到這個(gè)例子中高并發(fā)問題帶來的恐怖，您可以想象在每年的雙十二，用戶同時(shí)在某一個(gè)網(wǎng)頁搶購?fù)患唐罚瑓s加載無效的感覺。

為了讓青島國際家具展的用戶有更強(qiáng)的使用感，標(biāo)梵集成了多種方法，如引入了輕巧高效的前端組件化方案VUE.JS，采用前端和后端分離技術(shù)提高工作效率，解決負(fù)載均衡和消息池異步化數(shù)據(jù)等問題。

001 用VUE.JS搭積木 

VUE.JS 是一個(gè)輕巧、高性能、可組件化的MVVM 庫，同時(shí)擁有非常容易上手的API，雖然VUE.JS 是一個(gè)新名詞，但對(duì)我們來說也并不陌生。

假設(shè)，我們?cè)谝粋€(gè)項(xiàng)目中，有多個(gè)部分重疊的，并且可以封裝在一個(gè)組件中，則利用VUE.JS 可以實(shí)現(xiàn)組件的重用，以便開發(fā)工程師可以快速使用組件拆分并嵌入整個(gè)接口，這大大節(jié)省了開發(fā)工程師在開發(fā)過程中的工作和時(shí)間。

簡(jiǎn)而言之，VUE.JS 的目標(biāo)是通過盡可能簡(jiǎn)單的API實(shí)現(xiàn)相應(yīng)的數(shù)據(jù)綁定和組合的視圖組件，核心是一個(gè)相應(yīng)的數(shù)據(jù)綁定系統(tǒng)。

002 Ant組件庫 

UI界面決定了用戶打開H5定制第一眼的體驗(yàn)和感受，標(biāo)梵選擇了Ant Design是適用于PC和移動(dòng)終端設(shè)備的UI組件庫，這個(gè)組件庫功能強(qiáng)大且豐富，基本所有能想到的交互功能都可以通過Ant Design來實(shí)現(xiàn)。

Ant Design基于“自然”、“確定性”、“意義”和“增長”四個(gè)設(shè)計(jì)價(jià)值觀，模塊化解決方案降低了冗余生產(chǎn)成本，讓設(shè)計(jì)師專注于更好的用戶體驗(yàn)。

同時(shí)，組件的可視化交互設(shè)計(jì)與前端的集成相輔相成，也適合開發(fā)工程師的工作體驗(yàn)，幫助開發(fā)人員在短時(shí)間內(nèi)創(chuàng)造出外觀優(yōu)良的產(chǎn)品。

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

隨著不同終端的增加，對(duì)開發(fā)者的要求也越來越高。單純的瀏覽器響應(yīng)已經(jīng)不能滿足用戶體驗(yàn)的高要求。很多時(shí)候，我們需要為不同的終端開發(fā)定制版本。

眾所周知，并聯(lián)的工作效率要比串聯(lián)的工作效率高得多。

前后端分離技術(shù)包括分離前后混合代碼，前端JS可以做很大部分的數(shù)據(jù)處理工作，對(duì)服務(wù)器的壓力減小到最小，術(shù)業(yè)有專攻，這樣標(biāo)梵的前端工程師和后端工程師也可以將整合的部分中分離出來，分別可以專注于自己的部分，培養(yǎng)前后端工程師獨(dú)特的技術(shù)特性，而不必等待對(duì)方的工作再完成下一個(gè)環(huán)節(jié)。

前后臺(tái)各盡其職可以最大程度的減少開發(fā)難度，大大提高了工作效率。即便用戶需求有所改變，只要接口不發(fā)生變化，也只需在前端進(jìn)行更改，后端不必更改。此外，分離后的代碼將變得整潔和清晰，比之前也更容易閱讀和維護(hù)。

004 負(fù)載均衡

現(xiàn)在的時(shí)代是一個(gè)網(wǎng)絡(luò)的時(shí)代，網(wǎng)絡(luò)數(shù)據(jù)的使用也達(dá)到了頂峰。

往往數(shù)據(jù)過于龐大時(shí)，會(huì)出現(xiàn)各種各樣的問題，影響用戶體驗(yàn)，如當(dāng)大量用戶到訪青島國際家具展H5定制時(shí)，服務(wù)器必須依靠負(fù)載均衡來提高訪問響應(yīng)速度。

明顯可以看出，這項(xiàng)技術(shù)的目的在于“均衡”。

在將用戶請(qǐng)求發(fā)送到系統(tǒng)后，負(fù)載均衡器規(guī)避了因數(shù)據(jù)過于龐大而出現(xiàn)的問題，它可以以某種方式將請(qǐng)求均勻地分配給多個(gè)節(jié)點(diǎn)，這樣系統(tǒng)中的每個(gè)節(jié)點(diǎn)都可以均勻地處理請(qǐng)求并共同完成工作。

通過負(fù)載均衡器的計(jì)算和分流，讓青島國際家具展H5定制變得規(guī)律、規(guī)矩。該方法通過負(fù)載均衡器的調(diào)節(jié)可以更好的提升系統(tǒng)性能，可以擴(kuò)展服務(wù)器帶寬，提高吞吐量，增強(qiáng)網(wǎng)絡(luò)數(shù)據(jù)處理能力，提高網(wǎng)絡(luò)靈活性，提高用戶訪問質(zhì)量，幫助用戶避免各種單一故障點(diǎn)。

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

隨著業(yè)務(wù)架構(gòu)的發(fā)展，系統(tǒng)之間的系統(tǒng)調(diào)用變得越來越復(fù)雜，在標(biāo)梵開發(fā)工程師眼中，異步化數(shù)據(jù)無疑是解決高并發(fā)問題最重要的幫手。

用戶生成所有認(rèn)證流程、訂單流程、支付流程和大量排隊(duì)占用資源的隊(duì)列。假設(shè)每個(gè)用戶調(diào)用時(shí)間在20毫秒，但同時(shí)乘以300人操作，這段時(shí)間可想而知，對(duì)用戶來說將等待太久，會(huì)導(dǎo)致用戶流失。

對(duì)于串行同步的系統(tǒng)，大量業(yè)務(wù)線程等待服務(wù)器端返回相應(yīng)，系統(tǒng)CPU使用率非常低，無法有效提高性能，這是幾乎所有使用PRC調(diào)用的業(yè)務(wù)都會(huì)遇到的問題。

為了充分利用CPU資源，需要使業(yè)務(wù)盡可能在CPU上運(yùn)行，而不是一直等待同步。在使用異步PRC調(diào)用之后，業(yè)務(wù)線程可以接收和處理更多的順序消息，更充分地利用CPU資源并提高系統(tǒng)性能。

解決性能問題的關(guān)鍵是實(shí)現(xiàn)消息池的異步化。異步化數(shù)據(jù)也用于解決H5定制界面阻塞問題。它可以提高每秒的查詢速率、每秒的響應(yīng)請(qǐng)求數(shù)和最大吞吐量。

標(biāo)梵互動(dòng)成功打造了具有成熟技術(shù)能力的青島國際家具展H5定制優(yōu)秀產(chǎn)品，并付出了計(jì)劃中的更多努力。其中涉及到各種信息調(diào)度，這不僅需要開發(fā)者選擇好的架構(gòu)和技術(shù)，還需要測(cè)試整個(gè)業(yè)務(wù)場(chǎng)景環(huán)節(jié)的峰值。

本次青島國際家具展展會(huì)共有30萬用戶使用標(biāo)梵互動(dòng)開發(fā)的H5定制平臺(tái)，無卡頓、無數(shù)據(jù)丟失、響應(yīng)及時(shí)、體驗(yàn)順暢,用戶體驗(yàn)極致，客戶滿意度極強(qiáng)，此次合作的成功也印證了標(biāo)梵的態(tài)度和初心，始終將互聯(lián)網(wǎng)最新技術(shù)掌握在自己手中，走在新時(shí)代最前沿。

標(biāo)梵互動(dòng)成立8周年，已服務(wù)300多家企業(yè)，標(biāo)新立異，卓爾不凡，幫助企業(yè)個(gè)性化打造具有深度和長遠(yuǎn)發(fā)展意義的互聯(lián)網(wǎng)整合營銷解決方案。