響應(yīng)式設(shè)計(jì)在圖書(shū)館門戶網(wǎng)站中的應(yīng)用研究

章增安

關(guān)鍵詞：圖書(shū)館門戶網(wǎng)站;響應(yīng)式WEB設(shè)計(jì);Bootstrap;用戶體驗(yàn)

摘?要：圖書(shū)館門戶網(wǎng)站是圖書(shū)館各項(xiàng)服務(wù)的展示窗口和資源獲取入口，用戶體驗(yàn)良好的圖書(shū)館門戶網(wǎng)站可有效提升圖書(shū)館的整體服務(wù)水平。文章調(diào)研了我國(guó)圖書(shū)館門戶網(wǎng)站建設(shè)現(xiàn)狀，提出了基于響應(yīng)式WEB設(shè)計(jì)的高校圖書(shū)館門戶網(wǎng)站建設(shè)方案，以期解決圖書(shū)館門戶網(wǎng)站跨平臺(tái)和終端依賴性問(wèn)題，提升用戶的訪問(wèn)視覺(jué)體驗(yàn)。

中圖分類號(hào)：G250.76文獻(xiàn)標(biāo)識(shí)碼：A文章編號(hào)：1003-1588（2020）05-0086-03

1?背景

高校圖書(shū)館門戶網(wǎng)站是讀者獲取館藏資源最主要的窗口，用戶體驗(yàn)及美工設(shè)計(jì)直接影響圖書(shū)館信息服務(wù)的質(zhì)量，其建設(shè)水平與高校圖書(shū)館的信息服務(wù)體系規(guī)劃、管理者理念、技術(shù)館員能力及讀者瀏覽習(xí)慣等相關(guān)。由于受自身設(shè)計(jì)理念、技術(shù)水平及開(kāi)發(fā)能力限制，高校圖書(shū)館普遍采用外包途徑建設(shè)門戶網(wǎng)站，雖然省時(shí)省力，對(duì)技術(shù)館員的能力要求也相對(duì)較低，但由于源代碼版權(quán)受限，導(dǎo)致擴(kuò)展性極差，一個(gè)微小的變化或功能擴(kuò)展都要尋求外包公司的幫助，給后期維護(hù)帶來(lái)極大不便。

當(dāng)前，扁平化設(shè)計(jì)、響應(yīng)式布局以其簡(jiǎn)約的畫面、整潔的布局、流暢的加載速度及兼容多種設(shè)備屏幕等優(yōu)勢(shì)逐漸成為網(wǎng)站前端設(shè)計(jì)的主流。隨著網(wǎng)站前端技術(shù)的發(fā)展，用戶瀏覽媒體也經(jīng)歷了巨大的變化。目前，智能手機(jī)、平板電腦等都已普及，圖書(shū)館的門戶網(wǎng)站設(shè)計(jì)應(yīng)充分考慮移動(dòng)端用戶的訪問(wèn)需求，使他們能夠在各種瀏覽設(shè)備上都有良好的瀏覽體驗(yàn)。在這種需求背景下，響應(yīng)式網(wǎng)站設(shè)計(jì)應(yīng)運(yùn)而生，我國(guó)高校圖書(shū)館在響應(yīng)式門戶網(wǎng)站建設(shè)方面進(jìn)行了一些嘗試，如：鐘遠(yuǎn)薪對(duì)圖書(shū)館移動(dòng)服務(wù)技術(shù)進(jìn)行對(duì)比分析后認(rèn)為響應(yīng)式Web設(shè)計(jì)是圖書(shū)館移動(dòng)服務(wù)的一個(gè)新方向;云南大學(xué)圖書(shū)館率先建設(shè)了響應(yīng)式門戶網(wǎng)站[1-2];北京大學(xué)利用Drupal框架及HTTPS技術(shù)構(gòu)建的安全性極高的門戶網(wǎng)站，前端也采用了響應(yīng)式設(shè)計(jì)。

以遼寧師范大學(xué)圖書(shū)館為例，該館2015年通過(guò)外包方式建設(shè)了Metro風(fēng)格的門戶網(wǎng)站，由于未取得源代碼授權(quán)，后期擴(kuò)展和維護(hù)極其困難，且不支持移動(dòng)媒體的兼容性瀏覽，因此運(yùn)行兩年后決定改版。改版的目的是解決門戶網(wǎng)站跨平臺(tái)和終端依賴性問(wèn)題，同時(shí)可任意擴(kuò)展和修改網(wǎng)站功能及內(nèi)容。筆者調(diào)研了我國(guó)高校圖書(shū)館門戶網(wǎng)站建設(shè)的現(xiàn)狀，在分析讀者瀏覽遼寧師范大學(xué)圖書(shū)館門戶網(wǎng)站的行為數(shù)據(jù)基礎(chǔ)上，提出了一種基于扁平化設(shè)計(jì)、采用響應(yīng)式框架建設(shè)門戶網(wǎng)站的技術(shù)路線，應(yīng)用于遼寧師范大學(xué)圖書(shū)館的門戶網(wǎng)站建設(shè)。經(jīng)過(guò)2個(gè)月的自主開(kāi)發(fā)，遼寧師范大學(xué)圖書(shū)館的新版門戶網(wǎng)站于2017年9月10日順利上線運(yùn)行。

2?高校圖書(shū)館門戶網(wǎng)站建設(shè)現(xiàn)狀

2.1?高校圖書(shū)館門戶網(wǎng)站設(shè)計(jì)風(fēng)格

為全面了解我國(guó)高校圖書(shū)館的網(wǎng)站建設(shè)現(xiàn)狀，筆者在2017年5月至6月期間分別通過(guò)臺(tái)式電腦、平板電腦、手機(jī)端等對(duì)部分高校圖書(shū)館的門戶網(wǎng)站進(jìn)行了訪問(wèn)，并對(duì)其建設(shè)風(fēng)格進(jìn)行歸類整理，調(diào)研結(jié)果見(jiàn)表1。

2.1.1?傳統(tǒng)設(shè)計(jì)風(fēng)格。傳統(tǒng)設(shè)計(jì)風(fēng)格的高校圖書(shū)館網(wǎng)站數(shù)量最多，設(shè)計(jì)以圖文信息為主，適合PC端瀏覽，若通過(guò)平板電腦或手機(jī)瀏覽會(huì)出現(xiàn)滾動(dòng)條或網(wǎng)頁(yè)元素顯示錯(cuò)位，影響顯示效果。采用傳統(tǒng)設(shè)計(jì)風(fēng)格的高校圖書(shū)館網(wǎng)站一般還會(huì)專門建設(shè)適合移動(dòng)設(shè)備瀏覽的移動(dòng)版網(wǎng)站。

2.1.2?Metro設(shè)計(jì)風(fēng)格。Windows8推出了一個(gè)專為觸摸設(shè)計(jì)服務(wù)的最新Metro風(fēng)格界面，Metro設(shè)計(jì)風(fēng)格以簡(jiǎn)潔的版式為基礎(chǔ)，將內(nèi)容本身作為組織和分組排版的方式，刪除了多余的線條和框架[3]。我國(guó)部分高校圖書(shū)館采用的是這種設(shè)計(jì)風(fēng)格，但總體數(shù)量不多。

2.1.3?扁平化設(shè)計(jì)風(fēng)格。扁平化設(shè)計(jì)風(fēng)格使用簡(jiǎn)潔風(fēng)格的元素和圖標(biāo)，配色大膽、豐富且明亮，是一種盡量減少裝飾的極簡(jiǎn)設(shè)計(jì)[4]。本次調(diào)研中采用扁平化設(shè)計(jì)風(fēng)格的高校圖書(shū)館有13家。

2.1.4?響應(yīng)式網(wǎng)站。響應(yīng)式Web設(shè)計(jì)（Responsive Web Design）理念認(rèn)為網(wǎng)站頁(yè)面的設(shè)計(jì)與開(kāi)發(fā)應(yīng)根據(jù)設(shè)備環(huán)境（如屏幕尺寸、屏幕定向、系統(tǒng)平臺(tái)等）以及用戶行為進(jìn)行相應(yīng)的響應(yīng)和調(diào)整[5]。響應(yīng)式網(wǎng)站只需開(kāi)發(fā)一次就可為所有移動(dòng)終端提供服務(wù)，使圖書(shū)館門戶網(wǎng)站更加高效、專業(yè)、美觀。目前，我國(guó)已有5所高校圖書(shū)館的門戶網(wǎng)站實(shí)現(xiàn)了響應(yīng)式布局。

2.2?響應(yīng)式Web設(shè)計(jì)的核心技術(shù)

當(dāng)用戶瀏覽頁(yè)面時(shí)，瀏覽設(shè)備的屏幕分辨率、瀏覽器類型、瀏覽窗口的大小及瀏覽器模式（如極速模式、兼容模式）等因素都會(huì)影響瀏覽效果，而響應(yīng)式Web設(shè)計(jì)利用媒體查詢、彈性視覺(jué)媒體和流動(dòng)布局等核心技術(shù)可保障用戶在瀏覽頁(yè)面時(shí)將這些因素的影響降到最低[6]。媒體查詢根據(jù)媒體類型、屏幕寬度、屏幕比例、設(shè)備方向等各種功能特性改變頁(yè)面布局;流動(dòng)布局實(shí)現(xiàn)可縮放、可流動(dòng)的彈性版式，確保在媒體查詢未切換樣式期間布局能適應(yīng)視窗改變;彈性視覺(jué)媒體適應(yīng)版式布局的變化，可使特定媒體按照規(guī)定的布局實(shí)現(xiàn)動(dòng)態(tài)調(diào)整，三者共同構(gòu)成了響應(yīng)式Web設(shè)計(jì)的核心技術(shù)。

2.3?Bootstrap響應(yīng)式前端框架

Bootstrap是一種響應(yīng)式Web設(shè)計(jì)框架，專門應(yīng)用于開(kāi)發(fā)響應(yīng)式布局、移動(dòng)設(shè)備優(yōu)先的Web項(xiàng)目。Bootstrap框架的核心是柵格系統(tǒng)，其工作原理如下：柵格系統(tǒng)通過(guò)一系列行（Row）與列（Column）的組合創(chuàng)建頁(yè)面布局，內(nèi)容應(yīng)當(dāng)放置在“列（Column）”內(nèi)，只有“列（Column）”可以作為“行（Row）”的直接子元素。列（Column）通過(guò)指定1到12的值表示內(nèi)容跨越屏幕的范圍。柵格系統(tǒng)通過(guò)定義容器大小平分12份，再調(diào)整內(nèi)外邊距，最后結(jié)合媒體查詢就可以制作出強(qiáng)大的響應(yīng)式柵格系統(tǒng)。

3?基于響應(yīng)式Web設(shè)計(jì)的高校圖書(shū)館門戶網(wǎng)站建設(shè)

3.1?用戶需求分析