沈晶晶+張偉

摘 要：隨著移動(dòng)設(shè)備的快速發(fā)展，多終端逐漸被普及到多個(gè)領(lǐng)域。在為終端設(shè)備渲染頁(yè)面的同時(shí)，不僅要兼容傳統(tǒng)頁(yè)面布局，還要達(dá)到響應(yīng)式效果。Bootstrap以其美觀的界面和良好的自適應(yīng)功能被廣泛使用。文中基于Bootstrap框架設(shè)計(jì)實(shí)現(xiàn)農(nóng)業(yè)監(jiān)控系統(tǒng)的響應(yīng)式網(wǎng)頁(yè)，讓用戶可以隨時(shí)隨地了解農(nóng)作物的生長(zhǎng)環(huán)境。

關(guān)鍵詞：響應(yīng)式網(wǎng)頁(yè)；Bootstrap；農(nóng)業(yè)監(jiān)控；多終端

中圖分類號(hào)：TP393 文獻(xiàn)標(biāo)識(shí)碼：A 文章編號(hào)：2095-1302（2017）04-00-02

0 引 言

隨著時(shí)代發(fā)展，新興科技日新月異。為使多終端設(shè)備進(jìn)行網(wǎng)頁(yè)訪問(wèn)，網(wǎng)頁(yè)設(shè)計(jì)不僅需要變得靈活，還要能適應(yīng)渲染它們的各種媒介。Bootstrap[1]框架最大的優(yōu)勢(shì)是響應(yīng)式布局，并且內(nèi)置了多樣化樣式，可以快速應(yīng)用于各種場(chǎng)景。智慧農(nóng)業(yè)的迅速發(fā)展有效提高了作物質(zhì)量，使得智慧農(nóng)業(yè)炙手可熱。而基于Bootstrap的農(nóng)業(yè)監(jiān)控系統(tǒng)的網(wǎng)頁(yè)響應(yīng)式設(shè)計(jì)與實(shí)現(xiàn)，可使用戶方便管理農(nóng)作物的生長(zhǎng)環(huán)境。

1 現(xiàn)代農(nóng)業(yè)的現(xiàn)狀及存在問(wèn)題

現(xiàn)代農(nóng)業(yè)是一個(gè)廣泛的概念，調(diào)整農(nóng)業(yè)產(chǎn)業(yè)結(jié)構(gòu)的同時(shí)轉(zhuǎn)變農(nóng)業(yè)產(chǎn)值增長(zhǎng)方式是目前農(nóng)業(yè)主要的發(fā)展方向。

農(nóng)業(yè)監(jiān)控系統(tǒng)是智慧農(nóng)業(yè)的延伸，依托現(xiàn)代物聯(lián)網(wǎng)技術(shù)，用戶通過(guò)使用多終端設(shè)備就能方便獲取并查看大棚內(nèi)的作物數(shù)據(jù)信息。但農(nóng)業(yè)監(jiān)控系統(tǒng)在網(wǎng)頁(yè)瀏覽的媒介上還存在欠缺，如通過(guò)不同的設(shè)備訪問(wèn)網(wǎng)頁(yè)時(shí)會(huì)為用戶帶來(lái)不同的體驗(yàn)。因此，需要在界面設(shè)計(jì)和美觀方面改善提升。

2 響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)與實(shí)現(xiàn)

針對(duì)以上問(wèn)題，可以使用易推廣的技術(shù)來(lái)搭建農(nóng)業(yè)監(jiān)控系統(tǒng)。計(jì)算機(jī)是用戶Web瀏覽的主要媒介工具，在不斷完善的前端標(biāo)準(zhǔn)下，渲染網(wǎng)頁(yè)花樣百出。而一種新的網(wǎng)頁(yè)設(shè)計(jì)方式也出現(xiàn)了，在兼容傳統(tǒng)固定排版樣式的情況下，可使頁(yè)面自適應(yīng)不同設(shè)備。

2.1 網(wǎng)頁(yè)設(shè)計(jì)

網(wǎng)頁(yè)一般分為固定排版樣式和響應(yīng)式網(wǎng)頁(yè)。傳統(tǒng)固定式網(wǎng)頁(yè)并不能滿足現(xiàn)代多設(shè)備瀏覽的用戶需求，因此伊?！ゑR科特（Ethan Marcotte）[2]提出了響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)。并結(jié)合已有的開(kāi)發(fā)技巧，如媒體查詢等，將其命名為響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)。

Bootstrap主要基于LESS框架[3]構(gòu)建CSS樣式。其具有靈活的響應(yīng)式柵格系統(tǒng)、豐富的組件及定制樣式等優(yōu)點(diǎn)[1]。但Bootstrap通常需要結(jié)合移動(dòng)設(shè)備和最新的瀏覽器才能渲染出效果，因此在傳統(tǒng)瀏覽器上顯示時(shí)可能會(huì)得到不同的效果。例如Chrome瀏覽器支持Bootstrap，但I(xiàn)E瀏覽器則在兼容性上略差。在設(shè)計(jì)響應(yīng)式網(wǎng)頁(yè)時(shí)，一般都采用移動(dòng)設(shè)備優(yōu)先、柵格頁(yè)面布局、內(nèi)聯(lián)樣式等策略，這樣設(shè)計(jì)的網(wǎng)頁(yè)才具有自適應(yīng)特性。

2.2 網(wǎng)頁(yè)實(shí)現(xiàn)

傳統(tǒng)頁(yè)面布局主要由導(dǎo)航欄、頁(yè)腳、主內(nèi)容、左右側(cè)邊欄構(gòu)成，具體如圖1所示。

以農(nóng)業(yè)監(jiān)控系統(tǒng)網(wǎng)頁(yè)為例，可以看出整個(gè)頁(yè)面的信息量并不大，同時(shí)可利用導(dǎo)航欄減少頁(yè)面切換，因此很多傳統(tǒng)網(wǎng)頁(yè)都使用類似經(jīng)典設(shè)計(jì)。但現(xiàn)代互聯(lián)網(wǎng)發(fā)展迅速，數(shù)據(jù)量大，容易造成頁(yè)面擁擠、結(jié)構(gòu)復(fù)雜、操作不便等問(wèn)題，不利于用戶體驗(yàn)。

運(yùn)用百分比來(lái)設(shè)定元素的寬度是設(shè)計(jì)響應(yīng)式的基礎(chǔ)。常見(jiàn)的設(shè)計(jì)如瀑布流設(shè)計(jì)，這種設(shè)計(jì)方式將各元素垂直排列分布，提高了用戶體驗(yàn)。而作為響應(yīng)式頁(yè)面，則應(yīng)適應(yīng)不同尺寸和類型的屏幕，以展示出最好效果。在滿足傳統(tǒng)手機(jī)Web頁(yè)面需求的同時(shí)，運(yùn)用Bootstrap框架調(diào)整頁(yè)面，如圖2所示。

此時(shí)運(yùn)用Bootstrap自身優(yōu)點(diǎn)，將導(dǎo)航欄移動(dòng)至頁(yè)面最頂端，而將內(nèi)容區(qū)域置于中間，兩邊分別為左右側(cè)邊欄，底部為頁(yè)腳。這樣設(shè)計(jì)可充分利用框架特點(diǎn)，自適應(yīng)瀏覽器頁(yè)面。

3 多終端設(shè)備測(cè)試

響應(yīng)式是自適應(yīng)不同的應(yīng)用場(chǎng)景，但在內(nèi)容上保持一致的設(shè)計(jì)方式。將分別在PC終端和移動(dòng)端進(jìn)行測(cè)試。

3.1 PC端測(cè)試

現(xiàn)在瀏覽器呈多樣化，且網(wǎng)頁(yè)渲染效果與瀏覽器內(nèi)核有關(guān)。文中選擇 Trident、Gecko、Blink以及WebKit內(nèi)核在Windows系統(tǒng)上進(jìn)行測(cè)試。由于IE瀏覽器兼容性不好，且對(duì)Bootstrap不支持，故不選擇IE瀏覽器。1 280×780和1440×900的效果圖分別如圖3、圖4所示。

3.2 移動(dòng)端測(cè)試

由于移動(dòng)端設(shè)備的多樣化，需要在不同設(shè)備上進(jìn)行測(cè)試。為此，文中選用Chrome調(diào)試模式模擬移動(dòng)設(shè)備進(jìn)行測(cè)試，效果如圖5和圖6所示。可以看到網(wǎng)頁(yè)在移動(dòng)設(shè)備上顯示時(shí)，導(dǎo)航欄隱藏了，頁(yè)面也呈垂直結(jié)構(gòu)。

通過(guò)以上測(cè)試可知，所有設(shè)計(jì)效果和功能都能正常顯示并應(yīng)用。

4 結(jié) 語(yǔ)

根據(jù)不同測(cè)試結(jié)果分析可知，由于只設(shè)計(jì)了大屏和手機(jī)顯示兩種情況，并且在頁(yè)頭部分使用的元素相對(duì)較多，使得瀏覽器兼容性還存在欠缺，此時(shí)便依賴媒體查詢來(lái)進(jìn)一步自適應(yīng)屏幕大小。另一方面，瀏覽器的快速更新使得響應(yīng)式問(wèn)題逐步得到解決。總體來(lái)看， 雖然響應(yīng)式網(wǎng)頁(yè)還存在一些不足，但網(wǎng)頁(yè)可自適應(yīng)并美觀這一目標(biāo)已經(jīng)達(dá)到，大大提高了用戶對(duì)系統(tǒng)的操作體驗(yàn)。

參考文獻(xiàn)

[1] Bootstrap[EB/OL].[2013-08-15]. http：//www.bootcss.com/

[2] Responsive Web Design[EB/OL].[2014-06-06].http：//alistapart.com/article/responsive-web-design.

[3] LESS CSS [EB/OL].[2014-06-06]. http：//www.ibm.com/developerworks/cn/web/1207_zhaoch_lesscss/

[4]舒后，熊一帆，葛雪嬌.基于Bootstrap框架的響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)與實(shí)現(xiàn)[J].北京印刷學(xué)院學(xué)報(bào)，2016，24（2）：47-52.

[5]王少華.基于Bootstrap的響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)與實(shí)現(xiàn)——以i-太極網(wǎng)站主頁(yè)為例[J].寧波廣播電視大學(xué)學(xué)報(bào)，2016（3）：119-122.

[6]徐衛(wèi)紅.基于Bootstrap框架的響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)與實(shí)現(xiàn)——以電大《網(wǎng)頁(yè)設(shè)計(jì)與制作》網(wǎng)絡(luò)課程為例[J].江西廣播電視大學(xué)學(xué)報(bào)，2016，18（4）：92-96.

[7]陳員義，李藝志.基于Bootstrap響應(yīng)式Web前端研究[J].福建電腦，2015（12）：72-73.

[8]斯珀洛克.Bootstrap用戶手冊(cè)設(shè)計(jì)響應(yīng)式網(wǎng)站[M].北京：人民郵電出版社，2013.