張賀，陳錦昌（華南理工大學設計學院，廣州 510006）

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

張賀，陳錦昌
（華南理工大學設計學院，廣州 510006）

0　引言

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

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

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

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

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

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

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

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

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

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

圖3　移動端訪問設備類型

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

3　基于響應式網(wǎng)頁設計的廣告網(wǎng)盟門戶網(wǎng)站

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

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

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

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

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

圖7　PC頁面高保真效果圖　

圖8　移動頁面高保真效果圖

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

圖9　PC端首頁效果圖

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

圖11　手機端首頁效果圖

4　結(jié)語

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

［1］中國互聯(lián)網(wǎng)絡信息中心.CNNIC發(fā)布《第36次中國互聯(lián)網(wǎng)絡發(fā)展狀況統(tǒng)計報告》［EB/OL］.（2015-07-22）.［2015-07-22］.http:// www.cnnic.net.cn/hlwfzyj/hlwxzbg/.

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

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

［4］王愉，潘明明.響應式網(wǎng)頁設計初探［J］.北京印刷學院學報，2014，03:13-15.

［5］（美）Ben Frain.響應式Web設計HTML5和CSS3實戰(zhàn)［M］.王永強，譯.北京:人民郵電出版社，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-），男，河南洛陽人，碩士研究生，研究方向為服務設計、網(wǎng)站系統(tǒng)設計

2015-10-09

2015-10-20

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

移動網(wǎng)站；響應式網(wǎng)頁設計；廣告網(wǎng)盟；門戶網(wǎng)站

陳錦昌（1956-），男，廣東南海人，教授，研究方向為工程圖學、計算機圖形學及 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..