移動(dòng)響應(yīng)式Web設(shè)計(jì)與構(gòu)建

文/康玉忠 曾文英 陳杰

1 響應(yīng)式Web設(shè)計(jì)

所謂的“響應(yīng)式Web設(shè)計(jì)”，它是指在網(wǎng)站建設(shè)過程中，利用響應(yīng)式Web設(shè)計(jì)技術(shù)構(gòu)建設(shè)計(jì)網(wǎng)站，使網(wǎng)頁內(nèi)容在PC、平板電腦以及智能手機(jī)上能，根據(jù)用戶交互行為以及設(shè)備系統(tǒng)、屏幕尺寸作相應(yīng)的響應(yīng)，并能正常的顯示內(nèi)容。

響應(yīng)式Web設(shè)計(jì)首先應(yīng)該遵循移動(dòng)優(yōu)先原則，交互設(shè)計(jì)應(yīng)以移動(dòng)端為主，由移動(dòng)端擴(kuò)展PC端，頁面需要兼容不同終端。響應(yīng)式Web設(shè)計(jì)我們應(yīng)該考慮先針對(duì)移動(dòng)終端小屏幕進(jìn)行設(shè)計(jì)，然后針對(duì)PC機(jī)大屏幕進(jìn)行設(shè)計(jì)。通過流式布局（Fluid Grids）創(chuàng)建流動(dòng)的彈性布局界面，自適應(yīng)圖片（Scalable Images）調(diào)整頁面的圖片顯示，利用媒介查詢（Media Queries）技術(shù)選擇樣式，調(diào)整布局元素的范圍，實(shí)現(xiàn)網(wǎng)頁對(duì)不同終端設(shè)備的最優(yōu)適配解決方案。

2 響應(yīng)式模塊布局設(shè)計(jì)

按照“移動(dòng)優(yōu)先”的設(shè)計(jì)思想，首先利用DIV+CSS技術(shù)實(shí)現(xiàn)響應(yīng)式整體布局，在設(shè)計(jì)網(wǎng)頁過程中添加詳細(xì)顯示內(nèi)容，最后階段對(duì)頁面進(jìn)行裝飾美化。在設(shè)計(jì)網(wǎng)頁布局的過程中，先按規(guī)范設(shè)計(jì)2-3個(gè)固定寬度做為響應(yīng)的模板，以寬度最窄的作為移動(dòng)手機(jī)終端框架，再依次設(shè)計(jì)出中等、最寬的頁面。網(wǎng)頁根據(jù)屏幕大小，模塊設(shè)計(jì)布局，采用單列布局、雙列布局、三列布局顯示，使用戶在瀏覽時(shí)有較好的體驗(yàn)。如圖1所示。

3 響應(yīng)式網(wǎng)頁開發(fā)技術(shù)

3.1 流式布局

頁面采用彈性設(shè)計(jì)來自動(dòng)響應(yīng)屏幕的變化和調(diào)整頁面布局。采用CSS設(shè)置容器的浮動(dòng)屬性，來適應(yīng)流式定位，自動(dòng)適應(yīng)寬度的變化。如當(dāng)屏幕寬度不夠，一行放不下多個(gè)區(qū)塊時(shí)，就會(huì)浮動(dòng)出現(xiàn)在下層，形成雙欄布局。

圖1

3.2 媒體查詢

媒體查詢是響應(yīng)式設(shè)計(jì)的關(guān)鍵技術(shù)，利用media自動(dòng)探測屏幕寬度，媒體查詢的實(shí)現(xiàn)主要通過link標(biāo)簽和@media規(guī)則，根據(jù)查詢條件加載相應(yīng)的CSS樣式局定位文件，從而達(dá)到為不同的終端設(shè)備自動(dòng)調(diào)整頁面的目的。如代碼：

對(duì)于瀏覽器不支持CSS媒體查詢功能，如IE8及以下版本，可通過加載外部加載html5shiv和respond.min文件，支持CSS媒體查詢。如代碼：

3.3 彈性圖片

基于“響應(yīng)式圖片”的思想，移動(dòng)終端在瀏覽大圖片時(shí)會(huì)消耗大量流量而影響網(wǎng)頁面加載速度，響應(yīng)式設(shè)計(jì)網(wǎng)頁時(shí)可以考慮使用兩種圖片，通過javascript腳本來檢測屏幕的分辨率，引用不同的CSS樣式，調(diào)用不同分辨率的圖片，如在PC上使用分辨率較大的圖片，在移動(dòng)終端上調(diào)用分辨率較少的圖片。響應(yīng)式網(wǎng)頁還可以設(shè)置相對(duì)值，實(shí)現(xiàn)圖片的自動(dòng)縮放。

4 觸屏交互設(shè)計(jì)

觸摸屏的交互方式有相應(yīng)設(shè)計(jì)規(guī)范，觸屏設(shè)備對(duì)點(diǎn)擊范圍要求不同，如導(dǎo)航列表設(shè)計(jì)放在頁面右側(cè)或右下角，因?yàn)槎鄶?shù)人習(xí)慣用左手把持設(shè)備，右手點(diǎn)擊交互操作；手機(jī)操作多以滑動(dòng)為主，滑動(dòng)式操作讓用戶體驗(yàn)過程更加流暢。觸摸屏的交互設(shè)計(jì)采用程序優(yōu)化，利用虛擬鍵盤可以改變輸入法布局，還能提供常用的命令，起到智能、輔助輸入作用，增強(qiáng)用戶體驗(yàn)效果。

5 動(dòng)態(tài)元素設(shè)計(jì)

動(dòng)態(tài)的元素比起靜態(tài)的文字訊息更能吸引用戶，移動(dòng)終端視窗較小，用戶不必從上到下滾動(dòng)頁面尋找信息。以Cinemagraphs取代GIF動(dòng)態(tài)圖加入，讓觀眾可以更深入的參與網(wǎng)站，Cinemagraphs是靜態(tài)照片中神奇的細(xì)微運(yùn)動(dòng)技術(shù)，是動(dòng)態(tài)攝影和靜態(tài)圖片的結(jié)合，與GIF動(dòng)畫的不同在于它只包含一個(gè)動(dòng)態(tài)元素。隨著VR技術(shù)普遍，越來越多企業(yè)將虛擬現(xiàn)實(shí)技術(shù)、視頻融入網(wǎng)站，豐富了信息，給觀眾更獨(dú)特的體驗(yàn)。