基于響應(yīng)式的移動(dòng)門(mén)戶(hù)網(wǎng)站構(gòu)建

張賀，陳錦昌（華南理工大學(xué)設(shè)計(jì)學(xué)院，廣州 510006）

基于響應(yīng)式的移動(dòng)門(mén)戶(hù)網(wǎng)站構(gòu)建

張賀，陳錦昌
（華南理工大學(xué)設(shè)計(jì)學(xué)院，廣州 510006）

0　引言

根據(jù)中國(guó)互聯(lián)網(wǎng)絡(luò)信息中心（CNNIC）發(fā)布的最新《中國(guó)互聯(lián)網(wǎng)絡(luò)發(fā)展?fàn)顩r統(tǒng)計(jì)報(bào)告》顯示，截止2015年6月，我國(guó)網(wǎng)民規(guī)模達(dá)6.68億，互聯(lián)網(wǎng)普及率為48.8%。其中，手機(jī)網(wǎng)民規(guī)模達(dá)5.94億，使用手機(jī)上網(wǎng)的人群占比達(dá)到88.9%［1］。

隨著手機(jī)網(wǎng)民數(shù)量的不斷攀升與智能移動(dòng)設(shè)備的普及，互聯(lián)網(wǎng)入口分散化的趨勢(shì)日益明顯，手機(jī)、平板電腦等終端成為人們獲取信息來(lái)源的主要入口與途徑。然而，使用移動(dòng)設(shè)備瀏覽傳統(tǒng)PC端的網(wǎng)站內(nèi)容，存在著屏幕尺寸受限導(dǎo)致的內(nèi)容缺失，網(wǎng)速差異造成的加載緩慢，操作習(xí)慣不同造成的瀏覽障礙，技術(shù)標(biāo)準(zhǔn)不同造成的JS、Flash兼容異常等問(wèn)題，很大程度上導(dǎo)致頁(yè)面瀏覽受阻，影響網(wǎng)站信息的傳達(dá)與呈現(xiàn)。

基于此背景，原有的為適應(yīng)電腦端顯示而設(shè)計(jì)的傳統(tǒng)網(wǎng)站頁(yè)面已經(jīng)不能夠在尺寸多樣的移動(dòng)設(shè)備中保持最佳的瀏覽體驗(yàn)。如何優(yōu)化網(wǎng)站頁(yè)面顯示，保持用戶(hù)體驗(yàn)的延續(xù)性，成為越來(lái)越多網(wǎng)站在進(jìn)行門(mén)戶(hù)設(shè)計(jì)時(shí)考慮的重要因素之一。由于商業(yè)模式的不同，網(wǎng)站的目標(biāo)用戶(hù)群體與服務(wù)內(nèi)容各有差異，進(jìn)行移動(dòng)端適配時(shí)采用的方案往往不盡相同。本文以B2B電子商務(wù)網(wǎng)站為例，探討引入響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)，解決移動(dòng)端網(wǎng)站構(gòu)建中多終端適配的策略方案。

1　B2B電商門(mén)戶(hù)網(wǎng)站改造需求

B2B全稱(chēng)為Business to Business，與C2C（Customer to Customer）的大眾化交易不同，特指企業(yè)與企業(yè)間的業(yè)務(wù)合作。B2B電子商務(wù)模式的含義，從參與者角度看，表示商務(wù)活動(dòng)的參與者角色與各角色間相互關(guān)聯(lián)的一種形式，從服務(wù)者角度看，可以理解為電子服務(wù)內(nèi)容及其如何實(shí)現(xiàn)盈利的一種描述形式［2］。B2B電子商務(wù)門(mén)戶(hù)網(wǎng)站，是從企業(yè)合作角度出發(fā)，基于不同領(lǐng)域的商業(yè)類(lèi)型差異，對(duì)業(yè)務(wù)合作的正常開(kāi)展起到促進(jìn)與支持作用的綜合性網(wǎng)站平臺(tái)?；谠擃?lèi)網(wǎng)站面對(duì)的客戶(hù)類(lèi)型多樣，合作信息交換依托網(wǎng)站為載體的背景，考慮到客戶(hù)訪問(wèn)場(chǎng)景與瀏覽設(shè)備的不同，該類(lèi)網(wǎng)站在設(shè)計(jì)時(shí)需要實(shí)現(xiàn)對(duì)PC與移動(dòng)端的全局適配，以保障業(yè)務(wù)的正常開(kāi)展。

廣告網(wǎng)盟是B2B電子商務(wù)領(lǐng)域中，專(zhuān)注于互聯(lián)網(wǎng)流量獲取與流量變現(xiàn)，連接需求方與供應(yīng)方的互聯(lián)網(wǎng)廣告交易平臺(tái)。其業(yè)務(wù)流程的閉環(huán)依次為客戶(hù)聯(lián)絡(luò)、商務(wù)談判、客戶(hù)接入、合作開(kāi)展、數(shù)據(jù)查看、交易結(jié)算。本文以廣告網(wǎng)盟中優(yōu)盟的網(wǎng)站構(gòu)建為例，分析多平臺(tái)兼容過(guò)程中的適配策略方案。

優(yōu)盟原門(mén)戶(hù)網(wǎng)站兩年前建立（圖1），隨著商業(yè)合作的拓展，客戶(hù)類(lèi)型逐漸增多，瀏覽網(wǎng)站時(shí)使用的訪問(wèn)設(shè)備也開(kāi)始多樣化。原網(wǎng)站由于架構(gòu)限制，不具備適配移動(dòng)端設(shè)備的能力，無(wú)法提供最佳的頁(yè)面訪問(wèn)體驗(yàn)，限制了業(yè)務(wù)拓展和客戶(hù)服務(wù)。因此，需要從優(yōu)盟的商業(yè)合作需求出發(fā)，對(duì)門(mén)戶(hù)網(wǎng)站進(jìn)行升級(jí)，以更好地適配移動(dòng)訪問(wèn)設(shè)備。

圖1　優(yōu)盟舊版網(wǎng)站首頁(yè)

從商業(yè)模式角度考慮，優(yōu)盟平臺(tái)網(wǎng)站在商務(wù)合作過(guò)程中，主要承擔(dān)營(yíng)銷(xiāo)與服務(wù)兩大核心功能。營(yíng)銷(xiāo)功能以業(yè)務(wù)介紹為主，定位于合作模式宣傳與新用戶(hù)拓展。該部分主要側(cè)重信息的輸出，呈現(xiàn)方式多為靜態(tài)文案，內(nèi)容展示與頁(yè)面布局是該類(lèi)網(wǎng)頁(yè)設(shè)計(jì)的重點(diǎn)。用戶(hù)交互除登錄模塊外，多采用輕量化設(shè)計(jì)。服務(wù)功能則側(cè)重合作數(shù)據(jù)顯示與客戶(hù)信息獲取，如賬戶(hù)數(shù)據(jù)，付款信息等，交互形式較營(yíng)銷(xiāo)頁(yè)面較多，信息維度也更為多樣。

圖2　網(wǎng)站用戶(hù)訪問(wèn)流量來(lái)源　

圖3　移動(dòng)端訪問(wèn)設(shè)備類(lèi)型

從用戶(hù)行為角度看，分析網(wǎng)站用戶(hù)訪問(wèn)流量來(lái)源可以看出（圖2），來(lái)自移動(dòng)端（手機(jī)+平板電腦）的訪問(wèn)比例已超過(guò)一半，這其中來(lái)自智能設(shè)備的訪問(wèn)用戶(hù)占比超過(guò)66%（圖3）。隨著智能終端成本的不斷下降與移動(dòng)互聯(lián)網(wǎng)發(fā)展的趨勢(shì)，可以預(yù)見(jiàn)這一比例將會(huì)繼續(xù)攀升。

綜合各項(xiàng)分析，廣告網(wǎng)盟移動(dòng)門(mén)戶(hù)與傳統(tǒng)PC門(mén)戶(hù)的訪問(wèn)需求差異體現(xiàn)在：（1）基礎(chǔ)用戶(hù)需求一致，細(xì)分需求側(cè)重不同。合作數(shù)據(jù)查看是二者通用的高頻需求，但對(duì)于移動(dòng)端而言，輕交互模塊使用頻率更高。（2）來(lái)自移動(dòng)端的新訪客更多，對(duì)營(yíng)銷(xiāo)頁(yè)面的關(guān)注與了解意愿更強(qiáng)。針對(duì)上述特性，在構(gòu)建移動(dòng)門(mén)戶(hù)網(wǎng)站時(shí)，選擇合適的構(gòu)建策略尤為重要。

2　移動(dòng)門(mén)戶(hù)網(wǎng)站構(gòu)建策略方案

互聯(lián)網(wǎng)行業(yè)移動(dòng)版網(wǎng)站構(gòu)建策略方案主要分為響應(yīng)式網(wǎng)頁(yè)方案、服務(wù)器端適配方案和原生網(wǎng)頁(yè)方案（圖4）。三者在自身特性、實(shí)現(xiàn)方式與構(gòu)建成本等方面各有不同。

圖4　移動(dòng)版網(wǎng)站構(gòu)建方案

響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)由Ethan Marcotte在A List Apart上提出［3］，是近幾年出現(xiàn)的新的設(shè)計(jì)解決方案。響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)的理念是讓網(wǎng)站頁(yè)面能夠根據(jù)訪問(wèn)設(shè)備、使用場(chǎng)景、用戶(hù)行為的不同，自動(dòng)進(jìn)行內(nèi)容與版式的布局與適配，從而實(shí)現(xiàn)頁(yè)面顯示的最優(yōu)化的方法。采用該方案能夠解決屏幕尺寸受限導(dǎo)致的內(nèi)容缺失及技術(shù)標(biāo)準(zhǔn)不同造成的JS、Flash兼容異常的問(wèn)題，對(duì)PC用戶(hù)的操作習(xí)慣也做了相應(yīng)調(diào)整以實(shí)現(xiàn)兼容。

響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)主要由流式布局（Fluid Grids）、自適應(yīng)圖片（Scalable Images）、媒介查詢(xún)（Media Queries）三樣技術(shù)構(gòu)成［4］。它依靠前端HTML5和CSS代碼，使用百分比布局創(chuàng)建流動(dòng)的彈性界面，同時(shí)使用媒體查詢(xún)來(lái)限制元素的變動(dòng)范圍，使用動(dòng)態(tài)圖片調(diào)整頁(yè)面信息顯示，從而實(shí)現(xiàn)了對(duì)不同參數(shù)的訪問(wèn)設(shè)備進(jìn)行最優(yōu)適配的網(wǎng)頁(yè)解決方案。

響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)的優(yōu)點(diǎn)是：全終端共用一套網(wǎng)頁(yè)代碼，不需要服務(wù)器資源的額外支持，即可實(shí)現(xiàn)移動(dòng)終端平臺(tái)覆蓋的最大化。在開(kāi)發(fā)、運(yùn)營(yíng)、維護(hù)成本經(jīng)濟(jì)高效的基礎(chǔ)上，保持了桌面端與移動(dòng)端用戶(hù)體驗(yàn)的一致性。在移動(dòng)用戶(hù)對(duì)網(wǎng)站的功能和內(nèi)容有著與桌面用戶(hù)高重合度的需求，且網(wǎng)站類(lèi)型偏重信息呈現(xiàn)而輕交互的情景下最為適用。

服務(wù)器端適配方案，是網(wǎng)站服務(wù)器通過(guò)獲取用戶(hù)訪問(wèn)請(qǐng)求中的設(shè)備參數(shù)，由對(duì)應(yīng)組件進(jìn)行識(shí)別并動(dòng)態(tài)生成HTML、JS、CSS、圖像等資源文件并返回，實(shí)現(xiàn)移動(dòng)端顯示。同樣能夠解決頁(yè)面顯示及不同終端的適配問(wèn)題。

服務(wù)器端適配方案的優(yōu)點(diǎn)是通過(guò)判斷設(shè)備參數(shù)返回最適合的展示數(shù)據(jù)，從物理層面真正達(dá)到各個(gè)平臺(tái)的顯示最優(yōu)化，是更加真實(shí)的多終端適配方案。但相較而言，它也有著不能忽視的缺點(diǎn)：前端JavaScript邏輯需要分別對(duì)PC與移動(dòng)設(shè)備兼容，對(duì)User Agent參數(shù)判斷、資源異步加載要求高。此外，由于搜索引擎爬蟲(chóng)對(duì)服務(wù)器相應(yīng)的門(mén)戶(hù)網(wǎng)站支持有限，不利于網(wǎng)站進(jìn)行針對(duì)性的搜索引擎優(yōu)化。由于該方案前后端均需要額外的開(kāi)發(fā)成本，因而沒(méi)有成為行業(yè)通用方案。

原生網(wǎng)頁(yè)解決方案，即獨(dú)立開(kāi)發(fā)移動(dòng)版網(wǎng)站并啟用新的子域名實(shí)現(xiàn)移動(dòng)門(mén)戶(hù)網(wǎng)站搭建，以此和PC版網(wǎng)站區(qū)分。國(guó)內(nèi)部分門(mén)戶(hù)如新浪網(wǎng)（http://m.sina.com）即采用該種方式。該方案對(duì)移動(dòng)端設(shè)備進(jìn)行單獨(dú)設(shè)計(jì)并適配，不受PC網(wǎng)站的束縛。

原生網(wǎng)頁(yè)解決方案由前端服務(wù)器對(duì)訪問(wèn)請(qǐng)求中攜帶的設(shè)備參數(shù)進(jìn)行分析，以URL重定向的方式在移動(dòng)網(wǎng)站和PC網(wǎng)站間選擇并跳轉(zhuǎn)。該方案從物理層面實(shí)現(xiàn)了PC與移動(dòng)訪問(wèn)請(qǐng)求的區(qū)分，能夠提供最佳的訪問(wèn)體驗(yàn)，適合運(yùn)用于用戶(hù)屬性需要清晰區(qū)隔，或受客觀網(wǎng)絡(luò)環(huán)境限制需要對(duì)移動(dòng)版網(wǎng)站進(jìn)行簡(jiǎn)化的條件下。

同樣，該方案也有著先天劣勢(shì)，由于采用兩套架構(gòu)，在網(wǎng)站開(kāi)發(fā)、維護(hù)、運(yùn)營(yíng)投入方面有著較高要求。在國(guó)內(nèi)外PC與移動(dòng)互聯(lián)網(wǎng)逐步融合的趨勢(shì)下，從中長(zhǎng)期角度看采用該方案需愈加謹(jǐn)慎。

廣告網(wǎng)盟門(mén)戶(hù)網(wǎng)站作為B2B電子商務(wù)網(wǎng)站的一種，兼具營(yíng)銷(xiāo)與服務(wù)雙重功能，側(cè)重信息傳達(dá)與效果轉(zhuǎn)化，以文字信息的輸入作為核心交互需求，同時(shí)面向移動(dòng)與桌面用戶(hù)。

通過(guò)對(duì)上述三種方案的分析，結(jié)合廣告網(wǎng)盟門(mén)戶(hù)網(wǎng)站的定位與需求，采用響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)作為兼顧當(dāng)下與未來(lái)移動(dòng)互聯(lián)網(wǎng)趨勢(shì)的門(mén)戶(hù)網(wǎng)站解決方案。

3　基于響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)的廣告網(wǎng)盟門(mén)戶(hù)網(wǎng)站

針對(duì)桌面設(shè)備與移動(dòng)設(shè)備分辨率參數(shù)的不同，進(jìn)行廣告網(wǎng)盟門(mén)戶(hù)網(wǎng)站設(shè)計(jì)時(shí)，采用網(wǎng)格系統(tǒng)完成了不同顯示端的頁(yè)面布局。由于優(yōu)盟主頁(yè)結(jié)構(gòu)較為簡(jiǎn)單，功能劃分清晰，因此可以采用等比例縮減元素尺寸的方法，來(lái)確定門(mén)戶(hù)頁(yè)面架構(gòu)。圖5和圖6分別為PC門(mén)戶(hù)頁(yè)面架構(gòu)和移動(dòng)端門(mén)戶(hù)頁(yè)面架構(gòu)。

圖5　PC門(mén)戶(hù)頁(yè)面架構(gòu)

圖6　移動(dòng)端門(mén)戶(hù)頁(yè)面架構(gòu)

對(duì)于頁(yè)面布局調(diào)整，通過(guò)對(duì)不同的視口使用不同聲明來(lái)實(shí)現(xiàn)，對(duì)寬度大于768像素的視口，使用媒體查詢(xún)?yōu)槠渲贫ㄒ?guī)則［5］，默認(rèn)頁(yè)面布局采用PC版本，對(duì)于寬度在768像素以下的視口，默認(rèn)采用移動(dòng)設(shè)備布局，且不再顯示合作伙伴信息，導(dǎo)航欄采用默認(rèn)隱藏處理，通過(guò)單擊形象化按鈕打開(kāi)，節(jié)省了屏幕空間。

基于響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)，完成了如圖7、圖8所示的PC與移動(dòng)設(shè)備顯示頁(yè)面的高保真原型圖。

圖7　PC頁(yè)面高保真效果圖　

圖8　移動(dòng)頁(yè)面高保真效果圖

對(duì)于不同的訪問(wèn)設(shè)備，網(wǎng)站主頁(yè)可以自動(dòng)進(jìn)行內(nèi)容與版式的布局與適配，實(shí)現(xiàn)頁(yè)面顯示效果的最優(yōu)化。圖9、圖10、圖11分別為優(yōu)盟主頁(yè)在PC端、平板電腦端、手機(jī)端的適配效果。

圖9　PC端首頁(yè)效果圖

圖10　平板電腦端首頁(yè)顯示效果圖

圖11　手機(jī)端首頁(yè)效果圖

4　結(jié)語(yǔ)

經(jīng)過(guò)移動(dòng)版網(wǎng)站構(gòu)建方案分析與驗(yàn)證，優(yōu)盟新版網(wǎng)站采用響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)方案投入開(kāi)發(fā)，解決了移動(dòng)版網(wǎng)站多終端適配的問(wèn)題。相比傳統(tǒng)桌面版網(wǎng)站，響應(yīng)式設(shè)計(jì)在較低的成本下實(shí)現(xiàn)了較快的開(kāi)發(fā)速度和較強(qiáng)的可適配性，為廣告網(wǎng)盟類(lèi)門(mén)戶(hù)的開(kāi)發(fā)提供了新的思路，對(duì)新用戶(hù)獲取與業(yè)務(wù)拓展，將會(huì)帶來(lái)顯著幫助。響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)作為除移動(dòng)App外互聯(lián)網(wǎng)浪潮下的又一趨勢(shì)，以其明顯的優(yōu)勢(shì)正在被各行各業(yè)所接受，隨著響應(yīng)式技術(shù)的成熟，必將會(huì)在更多的領(lǐng)域得以推廣與應(yīng)用。

［1］中國(guó)互聯(lián)網(wǎng)絡(luò)信息中心.CNNIC發(fā)布《第36次中國(guó)互聯(lián)網(wǎng)絡(luò)發(fā)展?fàn)顩r統(tǒng)計(jì)報(bào)告》［EB/OL］.（2015-07-22）.［2015-07-22］.http:// www.cnnic.net.cn/hlwfzyj/hlwxzbg/.

［2］傅翠曉，黃麗華.我國(guó)B2B電子商務(wù)服務(wù)模式的分類(lèi)探討［J］.中國(guó)科技論壇，2010，10:100-106.

［3］Marcotte E.Responsive web design［J］.A List Apart，2010:306.

［4］王愉，潘明明.響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)初探［J］.北京印刷學(xué)院學(xué)報(bào)，2014，03:13-15.

［5］（美）Ben Frain.響應(yīng)式Web設(shè)計(jì)HTML5和CSS3實(shí)戰(zhàn)［M］.王永強(qiáng)，譯.北京:人民郵電出版社，2013:37-39.

Mobile Portal；Responsive Web Design；Advertising Network；Portal Website

Implementation of Responsive Mobile Portal Platform

ZHANG He，CHEN Jin-chang
（School of Design，South China University of Technology，Guangdong，Guangzhou 510006）

1007-1423（2015）30-0048-05

10.3969/j.issn.1007-1423.2015.30.014

張賀（1990-），男，河南洛陽(yáng)人，碩士研究生，研究方向?yàn)榉?wù)設(shè)計(jì)、網(wǎng)站系統(tǒng)設(shè)計(jì)

2015-10-09

2015-10-20

隨著移動(dòng)互聯(lián)網(wǎng)的高速發(fā)展，門(mén)戶(hù)網(wǎng)站是用戶(hù)的高頻使用對(duì)象，如何適應(yīng)不同訪問(wèn)設(shè)備的請(qǐng)求并保證用戶(hù)體驗(yàn)的延續(xù)性成為移動(dòng)門(mén)戶(hù)網(wǎng)站設(shè)計(jì)的關(guān)鍵。響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)從多種解決方案中脫穎而出，為解決門(mén)戶(hù)網(wǎng)站頁(yè)面適配提供一種低成本、高效率的解決方案。以B2B電子商務(wù)網(wǎng)站為例，論證響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)方案在移動(dòng)門(mén)戶(hù)網(wǎng)站構(gòu)建中的高效性。

移動(dòng)網(wǎng)站；響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)；廣告網(wǎng)盟；門(mén)戶(hù)網(wǎng)站

陳錦昌（1956-），男，廣東南海人，教授，研究方向?yàn)楣こ虉D學(xué)、計(jì)算機(jī)圖形學(xué)及 CAD等

With the rapid development of the Internet，how to make web portal adapt to the request from different devices and ensure the user experience becomes the key point when frequently using.Responsive web design provides a low cost and high efficiency solution for web portal from a variety of competitors.Takes the B2B electronic commerce website as an example to analyze the efficiency of responsive design in mobile portal website..