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

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

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

0　引言

根據(jù)中國互聯(lián)網(wǎng)絡(luò)信息中心（CNNIC）發(fā)布的最新《中國互聯(lián)網(wǎng)絡(luò)發(fā)展?fàn)顩r統(tǒng)計(jì)報(bào)告》顯示，截止2015年6月，我國網(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)入口分散化的趨勢日益明顯，手機(jī)、平板電腦等終端成為人們獲取信息來源的主要入口與途徑。然而，使用移動(dòng)設(shè)備瀏覽傳統(tǒng)PC端的網(wǎng)站內(nèi)容，存在著屏幕尺寸受限導(dǎo)致的內(nèi)容缺失，網(wǎng)速差異造成的加載緩慢，操作習(xí)慣不同造成的瀏覽障礙，技術(shù)標(biāo)準(zhǔn)不同造成的JS、Flash兼容異常等問題，很大程度上導(dǎo)致頁面瀏覽受阻，影響網(wǎng)站信息的傳達(dá)與呈現(xiàn)。

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

1　B2B電商門戶網(wǎng)站改造需求

B2B全稱為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ù)門戶網(wǎng)站，是從企業(yè)合作角度出發(fā)，基于不同領(lǐng)域的商業(yè)類型差異，對業(yè)務(wù)合作的正常開展起到促進(jìn)與支持作用的綜合性網(wǎng)站平臺(tái)?；谠擃惥W(wǎng)站面對的客戶類型多樣，合作信息交換依托網(wǎng)站為載體的背景，考慮到客戶訪問場景與瀏覽設(shè)備的不同，該類網(wǎng)站在設(shè)計(jì)時(shí)需要實(shí)現(xiàn)對PC與移動(dòng)端的全局適配，以保障業(yè)務(wù)的正常開展。

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

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

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

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

圖2　網(wǎng)站用戶訪問流量來源　

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

圖5　PC門戶頁面架構(gòu)

圖6　移動(dòng)端門戶頁面架構(gòu)

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

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

圖7　PC頁面高保真效果圖　

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

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

圖9　PC端首頁效果圖

圖10　平板電腦端首頁顯示效果圖

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

4　結(jié)語

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

［1］中國互聯(lián)網(wǎng)絡(luò)信息中心.CNNIC發(fā)布《第36次中國互聯(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］傅翠曉，黃麗華.我國B2B電子商務(wù)服務(wù)模式的分類探討［J］.中國科技論壇，2010，10:100-106.

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

［4］王愉，潘明明.響應(yīng)式網(wǎng)頁設(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àn)榉?wù)設(shè)計(jì)、網(wǎng)站系統(tǒng)設(shè)計(jì)

2015-10-09

2015-10-20

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

移動(dòng)網(wǎng)站；響應(yīng)式網(wǎng)頁設(shè)計(jì)；廣告網(wǎng)盟；門戶網(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..