章增安

關鍵詞：圖書館門戶網(wǎng)站;響應式WEB設計;Bootstrap;用戶體驗

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

中圖分類號：G250.76文獻標識碼：A文章編號：1003-1588（2020）05-0086-03

1?背景

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

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

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

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

2.1?高校圖書館門戶網(wǎng)站設計風格

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

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

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

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

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

2.2?響應式Web設計的核心技術

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

2.3?Bootstrap響應式前端框架

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

3?基于響應式Web設計的高校圖書館門戶網(wǎng)站建設

3.1?用戶需求分析