基于響應式Web的農(nóng)業(yè)網(wǎng)站設計方法研究

謝 輝，楊曉蓉，張麗萍，屠媛媛

(中國農(nóng)業(yè)科學院農(nóng)業(yè)信息研究所；數(shù)字農(nóng)業(yè)預警技術重點開放實驗室，北京 100081)

?

基于響應式Web的農(nóng)業(yè)網(wǎng)站設計方法研究

謝 輝，楊曉蓉，張麗萍，屠媛媛

(中國農(nóng)業(yè)科學院農(nóng)業(yè)信息研究所；數(shù)字農(nóng)業(yè)預警技術重點開放實驗室，北京 100081)

摘要響應式Web由于其適應全設備的特點，已成為當今網(wǎng)站設計的主流。該研究從對響應式Web的介紹和關鍵技術的分析入手，結合國內外響應式Web應用的現(xiàn)狀，提出了農(nóng)業(yè)網(wǎng)站響應式Web的設計流程，并對頁面布局作出了多種方案分析，為農(nóng)業(yè)網(wǎng)站建設提供參考。

關鍵詞響應式Web；HTML5；CSS3；媒體查詢

截至2014年12月，我國網(wǎng)民規(guī)模達6.49億，全年共計新增網(wǎng)民3 117萬。互聯(lián)網(wǎng)普及率為47.9%，較2013年底提升了2.1個百分點。其中手機網(wǎng)民規(guī)模達5.57億，較2013年增加5 672萬。網(wǎng)民中使用手機上網(wǎng)的人群占比由2013年的81.0%提升至85.8%[1]。明顯可以看出，網(wǎng)絡用戶使用小屏幕設備(如平板電腦、手機)上網(wǎng)已成為趨勢，另外，超大屏幕的顯示器也在快速普及，從而導致上網(wǎng)設備的尺寸差距與日俱增。幾年前網(wǎng)站設計是按照固定寬度進行設計的，以求設計出的網(wǎng)站能適應最常見的顯示器尺寸，如960像素(px)頁面對應1 024像素的屏幕，在更大的屏幕上，網(wǎng)站會簡單地以色條、色塊填充空區(qū)域。當更多用戶在用手機登錄網(wǎng)站后，單獨為手機設計的移動版網(wǎng)站也應運而生。移動版網(wǎng)站針對手機單獨設計，具有一個固定的頁面寬度，適配320像素的屏幕。但隨著電子市場的快速發(fā)展，不同品牌不同屏幕大小的智能手機和平板電腦進入市場，固定寬度的網(wǎng)站設計并不能適應所有的屏幕。面對形形色色的終端，千差萬別的屏幕分辨率，已不太可能為每個屏幕專門設計一個網(wǎng)站。在此背景下，能適應所有尺寸屏幕的響應式Web設計方式應運而生。筆者在對響應式Web的技術要點及國內外應用現(xiàn)狀進行概述的基礎上，結合農(nóng)業(yè)網(wǎng)站的特點，提出了基于響應式Web的農(nóng)業(yè)網(wǎng)站設計流程和模塊布局方案，為農(nóng)業(yè)網(wǎng)站建設提供參考。

1響應式Web設計概述

響應式Web設計結合了媒體查詢、流動布局和彈性視覺媒體等技術手段，是能針對任意設備對網(wǎng)頁內容進行完美布局的一種顯示機制[2]。通過響應式的設計方式，能使網(wǎng)站頁面隨瀏覽設備的不同而自行響應，動態(tài)地調整布局結構和元素的規(guī)格樣式，將相同的內容以不同的布局方式呈現(xiàn)給不同終端的用戶。響應式Web概念設計見圖1。

圖1　響應式Web概念設計Fig.1　Responsive web design chart

1.1響應式Web實現(xiàn)的關鍵技術創(chuàng)建一個響應式Web需要用到HTML5和CSS3。

HTML不是一成不變的，它會隨時修訂以適應新技術的發(fā)展，并加入新特性，每隔幾年就會有新版本的HTML發(fā)布。HTML5的制定開始于2004年，最終規(guī)范于2014年[3]。HTML5 強化了Web網(wǎng)頁的表現(xiàn)性能，更便于交互、多媒體等功能的實現(xiàn)；其次，增加了本地數(shù)據(jù)庫等各方面的標簽以及應用程序接口。

HTML賦予網(wǎng)站中所有內容以結構，CSS則告訴瀏覽器以什么樣式來顯示這些內容。CSS也有不同版本，最新的CSS3版引入了一些新的屬性，最顯著的變化就是增加了媒體查詢功能[4]。

(1)媒體查詢(Media Query)。媒體查詢功能可以讓設計者基于瀏覽網(wǎng)站的設備的特性來應用不同的樣式聲明，可以查詢很多媒體特性，如視口的寬度和高度、屏幕寬度和高度、方向、寬高比和分辨率。查詢者可以訪問MQtest.io 網(wǎng)站(http://mqtest.io/)。

圖2　顯示設備瀏覽器窗口的尺寸Fig.2　Size of display device browser window

圖2精確地顯示了設備屏幕的高度、寬度、設備高度/寬度、屏幕寬高比例、方向和分辨率等數(shù)值。

(2)彈性視覺媒體(Visual Media Elasticity)。視覺媒體主要指文本、圖形、圖像、動畫和視頻等可視媒體。彈性視覺媒體設計的本質是確保視覺媒體適應版式布局的變化，確保頁面上媒體的可讀性。

在響應式Web設計中，以“em”作為量度單位，em的大小由上下文定義的字體大小計算而來，是相對單位而非絕對單位。設計時通常給body標簽設置font-size屬性值后，給其他文本都使用em這個相對單位，這樣在基準字號一定的情況下,該元素的大小就能實現(xiàn)尺寸的自適應。

同樣圖片在處理上，如果要使圖片能根據(jù)分辨率來適應屏幕的大小，而還不失真，頁面設計者要做的只是讓圖片能根據(jù)不同分辨率自適應，可以考慮在不同分辨率下使用不同的圖片，讓圖片在不同尺寸顯示器上自適應，不給圖片設定具體的寬高尺寸，只要在樣式中給該圖片一個widht:100%，這樣圖片就能根據(jù)其父容器的尺寸自動調整了。

(3)流動布局[5](Fluid Grid)。流動布局的含義就是，各個區(qū)塊的位置都是浮動的，不是固定不變的。流動布局其實就是在設計者實現(xiàn)CP終端頁面的基礎上，將一些元素的寬高由原來的固定像素(px)調整為百分比(%)或字體比例(em)[6]。

通過將固定像素布局轉換成靈活的流式布局，確保在媒體查詢未切換樣式期間布局能適應視口改變。流動布局依靠浮動和百分比寬度來實現(xiàn)，浮動實現(xiàn)布局區(qū)塊的動態(tài)重組，百分比寬度實現(xiàn)未到達斷點時的區(qū)塊寬度調整，以減少創(chuàng)建的斷點數(shù)。

1.2 國內外響應式Web發(fā)展狀況響應式Web設計是現(xiàn)今比較流行的一種網(wǎng)站前端開發(fā)技術，它可以根據(jù)用戶使用設備的尺寸調整頁面的布局，使不同設備瀏覽頁面都能達到更加流暢、靈活的效果。響應式Web設計比較適合內容層級簡單、頁面簡潔的網(wǎng)站。響應式Web設計的方法和技術在國外應用的比較普遍，基于響應式Web設計的哈佛大學網(wǎng)站PC端效果及手機端效果見圖3。除此之外，德州農(nóng)機大學等網(wǎng)站也很有特色，并且功能比較強大，運行較穩(wěn)定。

圖3　哈佛大學網(wǎng)站PC端效果及手機端效果對比Fig. 3　Comparison between the PC version and mobile version of Harvard University website

目前在國內響應式設計設計還處于起步的階段，相對于移動站點的開發(fā)和利用，采用響應式設計的網(wǎng)站比較少，其發(fā)展較慢有以下幾點原因：①響應式Web設計的技術比較新穎，不能被 IE8 以下的瀏覽器良好地支持； ②響應式網(wǎng)頁設計正處在發(fā)展階段，這項技術不能應用于所有類型的站； ③響應式網(wǎng)站前期規(guī)劃階段需要投入的時間和精力比較大，后期測試階段比較復雜。

針對手機等便攜設備國內農(nóng)業(yè)網(wǎng)站大多設計了針對性強的移動版網(wǎng)站。比如“中國惠農(nóng)網(wǎng)”(www.cnhnlb.com)的PC端頁面及手機端頁面(圖4)。

圖4　惠農(nóng)網(wǎng)PC端效果及手機端效果對比Fig.4　Comparison between the PC version and mobile version of Huinong website

另外，“中國農(nóng)產(chǎn)品網(wǎng)”(www.zgncpw.com)也采用的相同方法。

移動版網(wǎng)站使用較小的文件，所以可能比加載一個具有響應性的網(wǎng)站更快。在大多數(shù)情況下，移動版網(wǎng)站看起來完全與響應式網(wǎng)站相同，但用戶體驗是明顯不同的。另外，移動版網(wǎng)站并沒有看起來那么獨立，使用者訪問網(wǎng)站是通過 URL 來訪問的，將移動網(wǎng)站和桌面網(wǎng)站分開，如果不使用 RESS 技術，往往也就意味著要維護2個URL。于是，設計者還是得依靠前端或服務器端的一次 “響應”(設備檢測)做 URL 重定向，才能將不同設備的用戶帶到那個為他們準備的網(wǎng)站。

相比較PC端頁面和移動端頁面分別設計的弊端，響應式Web設計則具有以下優(yōu)點：①設計元素很容易被復用，設計成本低；②前端只需要維護一套CSS代碼，維護成本低；③PC端與移動端的設計十分接近，方便用戶使用；④不需要任何服務器端的支持。

2基于響應式Web的農(nóng)業(yè)網(wǎng)站設計

2.1響應式Web設計流程

2.1.1確定上網(wǎng)設備的類型。上網(wǎng)設備調查可以幫助Web設計者了解用戶使用的設備類型、屏幕尺寸、瀏覽器類型及版本。上網(wǎng)設備類型主要調查移動終端(手機、平板電腦)和上網(wǎng)本、筆記本電腦和PC，甚至是信息家電。屏幕尺寸調查主要掌握屏幕的尺寸和長寬比例。

瀏覽器類型調查主要掌握瀏覽器類型、采用內核引擎及版本，通過調查最終確定出一份上網(wǎng)設備支持列表。響應式Web設計的目的在于針對不同設備的屏幕特性進行功能及內容的界面預設，對于用戶不太明確的項目，可選擇桌面顯示器、iPad和主流智能手機作為主要代表性的設備，而不必顧全所有已知的設備規(guī)格類型。

農(nóng)業(yè)網(wǎng)站的外在設計需要符合國家對“三農(nóng)”事業(yè)的要求，為開創(chuàng)農(nóng)業(yè)科技事業(yè)發(fā)展新局面提供，功效一流、結構優(yōu)化、安全可靠的信息化基礎條件和技術保障，要求其內在設計需要使代碼和功能可以靈活而富有彈性，適應響應式設計的需求，同時兼顧后臺維護。因此，前期的站點規(guī)劃非常重要，需要協(xié)調和兼顧外在和內在、前端和后臺的需求。

2.1.2前端響應式流程。 前端響應式流程見圖5。服務器端從客戶端接收到用戶的設備信息之后，由媒體查詢(Media Query)進行用戶設備寬度大小的判斷。根據(jù)反饋的不同的頁面寬度大小，將不同的CSS3元素布局方法傳送到不同尺寸的客戶終端設備上，實現(xiàn)真正的響應式布局。

圖5　前端響應式流程Fig.5　The flow chart of responsive web design

2.1.3響應式設計原則。 響應式網(wǎng)頁的開發(fā)當中需要遵守以下基本原則:

(1)從小屏幕開始。設計應先從最小的屏幕尺寸開始，然后直至最寬屏幕尺寸。因為小屏幕上設計者最終只會使用確實能融入到設計中的內容，它將迫使設計者更關注內容，而不是因為空間較大就把所有內容都隨意堆放在一起。不過首先從小屏幕開始并不意味著在設計過程中就不考慮大屏幕，有時在大、小屏幕間轉換對頁面設計會更有幫助。

(2)觸控優(yōu)先原則。易于手指觸摸的按鈕同樣易于鼠標點擊，但反之則不然。因此為了使界面能夠適用于更多的平臺環(huán)境，應該在觸控優(yōu)先原則的基礎上將原始設計方案進行微調，最終達到一種折中的狀態(tài)，既適合手指觸摸又適合鼠標點擊。

(3)移動優(yōu)先原則。從移動端開始產(chǎn)品的設計工作，能夠讓設計人員關注到對用戶來說什么才是設備上出現(xiàn)的重大問題。同時要特別留意那些不具備跨平臺能力的交互形式，其中最常見的一個問題就是觸屏設備通常無法支持傳統(tǒng)設備當中的鼠標懸停狀態(tài)[7]。

2.2界面布局設計響應式設計的頁面布局基于頁面的設計單位可分為可切換的固定布局、彈性布局和混合布局3種(圖6)。

(1)可切換的固定布局。以像素(px)作為頁面設計單位，參考主流設備尺寸，設計多套不同寬度的布局。通過媒體查詢技術，選擇最合適的寬度布局，如圖6a所示。

(2)彈性布局。以百分比作為頁面設計單位，可以適應所有主流設備的寬度尺寸，并能完美利用有效空間展現(xiàn)最佳效果，如圖6b所示。

(3)混合布局。以像素和百分比兩種單位作為頁面設計單位，可以適應所有尺寸的設備屏幕的寬度要求，并能為不同尺寸設備提供最佳的瀏覽效果，如圖6c所示。

圖6　基于頁面設計單位的響應式Web布局分類Fig.6　Types of responsive web design based on design unit

圖7　響應式Web整體模塊中的內容排布示意Fig.7　Content arrangement in responsive web module

圖6中，可切換的固定布局的設計成本最低，但適應性比較差，而彈性布局與混合布局效果具有響應性，以上3種都是比較理想的響應式布局實現(xiàn)方式。對于不同類型的頁面排版布局需要采用不同的實現(xiàn)方式，其中通欄結構設計更適合采用彈性布局方式，而對于非等分的多欄結構往往采用混合布局的實現(xiàn)方式。

要兼容所有設備，布局響應時不可避免地需要對模塊布局做一些變化，設計者通過媒體查詢功能獲取設備的屏幕寬度參數(shù)，對應改變網(wǎng)頁的布局，這一過程可以稱為布局響應。

頁面中整體模塊布局不發(fā)生變化，而改變內容排布，有如圖7所示的3種方式：

① 模塊中內容的擠壓-拉伸(圖7a)；② 模塊中內容的換行-平鋪(圖7b)；③ 模塊中內容的刪減-增加(圖7c)。

頁面中的整體模塊布局發(fā)生變化，有如圖8所示的3種方式：①模塊位置變換(圖8a)；②模塊展示方式改變，如隱藏-展開(圖8b)；③模塊數(shù)量改變，如刪減-增加(圖8c)。

圖8　響應式Web整體模塊布局變化示意Fig.8　Arrangement change in responsive web module

以上介紹基本包括了響應式設計的常用布局方式，但在實際設計中簡單地使用一種布局方式還是無法滿足需要，也需要頁面設計者在實際設計中結合自身特點使用組合方式進行布局；還要遵循同一斷點保持統(tǒng)一邏輯布局，同時保持簡潔、輕巧的設計原則。

3結語

綜上所述，響應式Web從設計到實現(xiàn)體現(xiàn)了一種高度適應性的設計思維模式，對網(wǎng)站內容的要求只是初級階段的要求，在當今“用戶至上”的互聯(lián)網(wǎng)思維概念下，更好的用戶體驗、為用戶使用習慣打造的瀏覽方式必將成為設計趨勢。農(nóng)業(yè)網(wǎng)站由于面對更廣泛的人群和市場，進行響應式Web設計顯得更有必要。該研究對響應式Web設計的分析和研究為農(nóng)業(yè)網(wǎng)站的響應式設計提供了參考和幫助。響應式設計本身不是目的，如何基于任意設備對頁面內容進行完美規(guī)劃以及簡便的工作流程，最終實現(xiàn)為“三農(nóng)”服務的信息化建設才是信息化研究者更大的課題。

參考文獻

[1] 中國互聯(lián)網(wǎng)絡信息中心(CNNIC)(2015)第35次中國互聯(lián)網(wǎng)絡發(fā)展狀況統(tǒng)計報告[EB/OL].[2015-11-01].http://www.cnnic.cn/gywm/xwzx/rdxw/2015/201502/W020150203456823090968.pdf.

[2] FRAIN B.Responsive web design with HTML5 and CSS3[M].Birmingham:Packt Publishing,2012:10-11.

[3] 劉杰.Web標準設計[M].北京：清華大學出版社，2009.

[4] 叢琳.網(wǎng)頁配色構圖細節(jié)設計[M].北京：人民郵電出版社,2008.

[5] CEDERHOLM D.無懈可擊的Web設計：利用XHTML 和CSS 提高網(wǎng)站的靈活性與適應性[M].劉建寧，譯.2版.北京:清華大學出版社，2009:195-238.

[6] PETERSON C.學習響應式設計[M].文巍，譯.北京：人民郵電出版社，2015.

[7] 施瑩.多樣化設備Web設計解決方案[J].中國科技信息,2013(11)：105-106.

Agricultural website Design method based on responsive web design

XIE Hui, YANG Xiao-rong, ZHANG Li-ping et al (Agricultural Information Institute of CAAS； Key Laboratory of Digita Agricultural Early-warning Technology, Ministry of Agriculture, Beijing 100081)

AbstractWeb design responsive has become the mainstream of web design because of its adaptation to the characteristics of the whole devices. Based on the introduction and analysis of key technologies of web design responsive, we put forward the design process of web design responsive, and gave a variety of solutions to the layout of the pages. In the meantime, references were provided to the construction of agricultural websites according to the current situation of domestic and international applications.

Key wordsResponsive web design; html5; css3; Media query

收稿日期2015-11-30

作者簡介謝輝(1978-)，男，北京人，助理研究員，碩士，從事農(nóng)業(yè)信息技術研究。

基金項目中國農(nóng)業(yè)科學院農(nóng)業(yè)信息研究所2015年度基本科研業(yè)務費專項(2015-J-08)；中國農(nóng)業(yè)科學院科技創(chuàng)新工程項目。

中圖分類號S 126

文獻標識碼A

文章編號0517-6611(2016)02-330-05