基于響應式的移動門戶網站構建

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

基于響應式的移動門戶網站構建

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

0　引言

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

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

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

1　B2B電商門戶網站改造需求

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

廣告網盟是B2B電子商務領域中，專注于互聯網流量獲取與流量變現，連接需求方與供應方的互聯網廣告交易平臺。其業務流程的閉環依次為客戶聯絡、商務談判、客戶接入、合作開展、數據查看、交易結算。本文以廣告網盟中優盟的網站構建為例，分析多平臺兼容過程中的適配策略方案。

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

圖1　優盟舊版網站首頁

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

圖2　網站用戶訪問流量來源　

圖3　移動端訪問設備類型

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

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

2　移動門戶網站構建策略方案

互聯網行業移動版網站構建策略方案主要分為響應式網頁方案、服務器端適配方案和原生網頁方案（圖4）。三者在自身特性、實現方式與構建成本等方面各有不同。

圖4　移動版網站構建方案

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

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

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

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

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

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

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

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

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

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

3　基于響應式網頁設計的廣告網盟門戶網站

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

圖5　PC門戶頁面架構

圖6　移動端門戶頁面架構

對于頁面布局調整，通過對不同的視口使用不同聲明來實現，對寬度大于768像素的視口，使用媒體查詢為其制定規則［5］，默認頁面布局采用PC版本，對于寬度在768像素以下的視口，默認采用移動設備布局，且不再顯示合作伙伴信息，導航欄采用默認隱藏處理，通過單擊形象化按鈕打開，節省了屏幕空間。

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

圖7　PC頁面高保真效果圖　

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

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

圖9　PC端首頁效果圖

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

圖11　手機端首頁效果圖

4　結語

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

［1］中國互聯網絡信息中心.CNNIC發布《第36次中國互聯網絡發展狀況統計報告》［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］王愉，潘明明.響應式網頁設計初探［J］.北京印刷學院學報，2014，03:13-15.

［5］（美）Ben Frain.響應式Web設計HTML5和CSS3實戰［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-），男，河南洛陽人，碩士研究生，研究方向為服務設計、網站系統設計

2015-10-09

2015-10-20

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

移動網站；響應式網頁設計；廣告網盟；門戶網站

陳錦昌（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..