響應(yīng)式高校圖書館網(wǎng)頁設(shè)計(jì)初探

孫秀惠

摘 要：隨著移動(dòng)互聯(lián)網(wǎng)的普及，手機(jī)、Pad、Kindle等移動(dòng)設(shè)備越來越多地出現(xiàn)在我們的日常生活中，采用移動(dòng)設(shè)備閱讀已成為當(dāng)代大學(xué)生們獲取信息的主要途徑。而不同的客戶端在訪問傳統(tǒng)的圖書館網(wǎng)站時(shí)會(huì)顯示相同的內(nèi)容，在手機(jī)或Pad這種小屏幕中內(nèi)容縮小顯示，讀者在手機(jī)或Pad的小屏幕上不停地滑動(dòng)，閱讀信息時(shí)放大頁面，查找信息時(shí)再縮小頁面，不斷放大頁面中的交互按鈕才能完成相應(yīng)功能的操作。而采用響應(yīng)式設(shè)計(jì)的高校圖書館網(wǎng)站能夠?yàn)椴煌K端的讀者帶來更加友好的用戶體驗(yàn)。

關(guān)鍵詞：響應(yīng)式設(shè)計(jì) 高校圖書館 移動(dòng)優(yōu)先

中圖分類號(hào)：G25 文獻(xiàn)標(biāo)識(shí)碼：A 文章編號(hào)：1672-3791（2018）03（b）-0198-02

隨著移動(dòng)互聯(lián)網(wǎng)的普及，手機(jī)、Pad、Kindle等移動(dòng)設(shè)備越來越多的出現(xiàn)在我們的日常生活中，采用移動(dòng)設(shè)備閱讀已成為當(dāng)代大學(xué)生們獲取信息的主要途徑。同時(shí)用戶瀏覽網(wǎng)頁的習(xí)慣逐漸從電腦PC端向手機(jī)、Pad等移動(dòng)設(shè)備轉(zhuǎn)變，讀者訪問傳統(tǒng)圖書館網(wǎng)站的習(xí)慣也慢慢由PC端向手機(jī)、Pad等移動(dòng)設(shè)備轉(zhuǎn)變，因此，構(gòu)建新的圖書館門戶網(wǎng)站，顯得尤其重要。但是移動(dòng)設(shè)備多種多樣，不同的設(shè)備有不同的系統(tǒng)平臺(tái)、不同的屏幕分辨率等，為具有不同系統(tǒng)平臺(tái)和不同分辨率的設(shè)備分別創(chuàng)建不同版本的圖書館門戶網(wǎng)站是不現(xiàn)實(shí)的，而且難以維護(hù)。伊桑·馬科特在2010年提出的響應(yīng)式網(wǎng)頁設(shè)計(jì)（Responsive Web Design），能為不同終端的讀者提供了更友好的用戶體驗(yàn)。

1 概念與設(shè)計(jì)思想

響應(yīng)式Web設(shè)計(jì)的理念是：頁面設(shè)計(jì)和開發(fā)應(yīng)該基于用戶行為和設(shè)備環(huán)境（系統(tǒng)平臺(tái)、屏幕大小、屏幕方向等）進(jìn)行相應(yīng)的響應(yīng)和調(diào)整。響應(yīng)式web設(shè)計(jì)，應(yīng)遵循“移動(dòng)優(yōu)先，漸進(jìn)增強(qiáng)”的設(shè)計(jì)原則。“移動(dòng)優(yōu)先”是指因?yàn)楦鞣N移動(dòng)設(shè)備的大小和分辨率的不同，考慮更多的布局和顯示效果，優(yōu)先進(jìn)行移動(dòng)設(shè)備的設(shè)計(jì)，這有助于提升響應(yīng)式Web頁面的開發(fā)效率。“漸進(jìn)增強(qiáng)”指的是按照從小屏幕到大屏幕的順序開發(fā)響應(yīng)式網(wǎng)頁。在小屏幕上，由于顯示空間有限，網(wǎng)頁應(yīng)該突出主要內(nèi)容和表現(xiàn)；隨著屏幕的增大，網(wǎng)頁的顯示效果會(huì)越來越豐富，逐漸增強(qiáng)；在網(wǎng)頁能夠兼容各種版本瀏覽器的情況下，為高級(jí)瀏覽器添加新的效果來改進(jìn)用戶體驗(yàn)。因此，無論用戶是使用PC或其他的移動(dòng)設(shè)備，頁面都能夠自動(dòng)切換圖片大小、分辨率和相關(guān)的腳本特性，以便與不同的設(shè)備相適應(yīng)，也就是說，頁面能夠自動(dòng)響應(yīng)用戶的設(shè)備環(huán)境。響應(yīng)式web設(shè)計(jì)可以與多個(gè)終端兼容，而不是為每個(gè)終端設(shè)置特定版本的網(wǎng)站。于是我們就不必為層出不窮的新設(shè)備再做新的圖書館門戶網(wǎng)站的設(shè)計(jì)開發(fā)了。

2 響應(yīng)式網(wǎng)頁設(shè)計(jì)（Responsive Web Design）的關(guān)鍵技術(shù)

響應(yīng)式網(wǎng)頁設(shè)計(jì)從提出至今，一直不斷蔓延擴(kuò)散。它的核心技術(shù)包含以下3個(gè)方面。

2.1 流式布局

現(xiàn)在用戶使用各種不同的設(shè)備上網(wǎng)，傳統(tǒng)的固定布局給用戶帶來各種不方便，顯示效果也不好，響應(yīng)式設(shè)計(jì)采用流式布局的方法避免了這種問題的出現(xiàn)。流式布局和固定布局的主要區(qū)別是：固定布局是以px為單位的左右固定寬度，流式布局是以百分比為單位的相對(duì)寬度。這里的百分比指的是寬度占其所在元素的百分比。

2.2 媒體查詢

媒體查詢是響應(yīng)式Web設(shè)計(jì)的核心技術(shù)之一，是能對(duì)各種不同的設(shè)備做出不同響應(yīng)的關(guān)鍵。響應(yīng)式設(shè)計(jì)的網(wǎng)站會(huì)自動(dòng)地探測(cè)到屏幕的寬度，再加載相應(yīng)的CSS文件。

這段代碼的意思是：如果屏幕的寬度大于或等于1000px，那么就加載large.css文件。

加載CSS文件有兩種方法：（1）用HTML標(biāo)簽來加載 CSS文件；（2）用現(xiàn)有的CSS文件來加載。

@import url（“tinyscreen.css”）screen and （max-device-width：400px）；

在同一個(gè)CSS文件中也可以根據(jù)不同的屏幕分辨率，選擇不同的CSS 規(guī)則。

@media （max-width：480px）{ body{background：#CCC；} }

這段代碼的意思是：如果屏幕的寬度小于等于480px時(shí)，那么網(wǎng)頁背景顏色呈灰色。

@media screen and （min-width：480px） and （max-width：768px）{

body{background：#F00； } }

這段代碼的意思是：如果屏幕的寬度大于等于480px且小于768px時(shí)，網(wǎng)頁背景顏色呈紅色。

2.3 彈性圖片

許多網(wǎng)站在處理小屏幕設(shè)備上的圖片時(shí)采取簡(jiǎn)單的方法：方法一，設(shè)置圖片的CSS的“顯示”屬性為“空”，從而隱藏圖片；方法二，通過媒體查詢的方法將圖像的縮放比例進(jìn)行簡(jiǎn)單地控制，用這兩種方式處理的圖片仍然會(huì)按原始文件的大小來下載，既沒有節(jié)省下載時(shí)間也沒有節(jié)省流量，所以都無法達(dá)到我們想要的效果。目前最好的方法是先加載頁面，然后根據(jù)頁面的布局來確定哪些圖片加載，根據(jù)不同的設(shè)備圖片容器的寬度來設(shè)置斷點(diǎn)，通過媒介查詢?yōu)椴煌臄帱c(diǎn)提供不同的圖片。

在視頻處理方面，與圖片處理不一樣，小屏幕只提供視頻鏈接，以提高頁面的加載速度。在大屏幕上根據(jù)布局需要按比例縮放，關(guān)鍵是將視頻容器和視頻的長(zhǎng)度、寬度設(shè)置成相同的比例，這樣才可以隨著容器的變化進(jìn)行成比例的調(diào)整。

3 響應(yīng)式高校圖書館網(wǎng)頁開發(fā)可能遇到的問題

3.1 響應(yīng)式網(wǎng)頁設(shè)計(jì)在規(guī)劃階段有些耗時(shí)費(fèi)力

與傳統(tǒng)網(wǎng)站比較而言，響應(yīng)式Web設(shè)計(jì)項(xiàng)目一般要花費(fèi)更多的時(shí)間，在初期階段要投入超過10%?20%的成本。 從圖書館的角度來看，可能需要更多技術(shù)力量的支持才能進(jìn)入最前沿的技術(shù)陣地。

3.2 觸摸屏的特性問題

在開發(fā)移動(dòng)終端，如，手機(jī)或Pad的客戶端樣式時(shí)，觸摸屏的特性需要得到充分考慮，如PC上的Hover（懸停）屬性，我們沒有辦法在觸摸屏上完成相應(yīng)的動(dòng)作。可以使用的解決方案是取消“懸停”功能，禁用“懸停”屬性，并將整個(gè)站點(diǎn)切換到點(diǎn)擊操作以觸發(fā)相關(guān)功能。把滑動(dòng)，放大等手勢(shì)加入到圖片中，更適合觸摸屏的操作習(xí)慣。

3.3 瀏覽器的問題

在實(shí)際操作中發(fā)現(xiàn)，IE8和更早的版本的瀏覽器都不支持響應(yīng)式設(shè)計(jì)的網(wǎng)站。這是因?yàn)槊襟w查詢功能是CSS3提供的功能，所以只有那些支持CSS3的IE版本才能完成響應(yīng)式設(shè)計(jì)。對(duì)于IE8及更早版本的瀏覽器，可以通過提醒讀者升級(jí)瀏覽器版本或加載html5.js、media-queries.js來解決。

4 結(jié)語

使用響應(yīng)式設(shè)計(jì)構(gòu)建網(wǎng)站可以使其在手機(jī)、Pad、PC電腦等多種終端中表現(xiàn)良好，給讀者帶來更好的體驗(yàn)，從而提高讀者對(duì)圖書館網(wǎng)站的滿意度。近幾年，響應(yīng)式web設(shè)計(jì)的應(yīng)用非常廣泛，良好的顯示效果和快捷的訪問速度得到了廣大用戶的普遍認(rèn)可和追捧，將是未來網(wǎng)頁設(shè)計(jì)、開發(fā)的主流方向和趨勢(shì)。國內(nèi)的企事業(yè)門戶網(wǎng)站、大學(xué)門戶網(wǎng)站等都漸漸推出了自己的響應(yīng)式網(wǎng)站門戶，高校圖書館也應(yīng)不斷探索和實(shí)踐，積極參與響應(yīng)式技術(shù)設(shè)計(jì)，為讀者提供更加人性化的服務(wù)和更加完美的用戶體驗(yàn)。

參考文獻(xiàn)

[1] 陳益全，吳多智.斷點(diǎn)在響應(yīng)式網(wǎng)頁設(shè)計(jì)中的應(yīng)用研究[J].微型電腦應(yīng)用，2016，32（5）：41-43.

[2] 張欣輝.響應(yīng)式網(wǎng)頁設(shè)計(jì)的研究[J].電子技術(shù)與軟件工程，2014（18）：57.

[3] 王愉，潘明明.響應(yīng)式網(wǎng)頁設(shè)計(jì)初探[J].北京印刷學(xué)院學(xué)報(bào)，2014，22（3）：13-15.