響應式設計在圖書館門戶網站的應用

導語：響應式設計在圖書館門戶網站的應用一文來源于網友上傳，不代表本站觀點，若需要原創文章可咨詢客服老師，歡迎參考。

1背景

高校圖書館門戶網站是讀者獲取館藏資源最主要的窗口,用戶體驗及美工設計直接影響圖書館信息服務的質量,其建設水平與高校圖書館的信息服務體系規劃、管理者理念、技術館員能力及讀者瀏覽習慣等相關。由于受自身設計理念、技術水平及開發能力限制,高校圖書館普遍采用外包途徑建設門戶網站,雖然省時省力,對技術館員的能力要求也相對較低,但由于源代碼版權受限,導致擴展性極差,一個微小的變化或功能擴展都要尋求外包公司的幫助,給后期維護帶來極大不便。當前,扁平化設計、響應式布局以其簡約的畫面、整潔的布局、流暢的加載速度及兼容多種設備屏幕等優勢逐漸成為網站前端設計的主流。隨著網站前端技術的發展,用戶瀏覽媒體也經歷了巨大的變化。目前,智能手機、平板電腦等都已普及,圖書館的門戶網站設計應充分考慮移動端用戶的訪問需求,使他們能夠在各種瀏覽設備上都有良好的瀏覽體驗。在這種需求背景下,響應式網站設計應運而生,我國高校圖書館在響應式門戶網站建設方面進行了一些嘗試,如:鐘遠薪對圖書館移動服務技術進行對比分析后認為響應式Web設計是圖書館移動服務的一個新方向;云南大學圖書館率先建設了響應式門戶網站[1-2];北京大學利用Drupal框架及HTTPS技術構建的安全性極高的門戶網站,前端也采用了響應式設計。以遼寧師范大學圖書館為例,該館2015年通過外包方式建設了Metro風格的門戶網站,由于未取得源代碼授權,后期擴展和維護極其困難,且不支持移動媒體的兼容性瀏覽,因此運行兩年后決定改版。改版的目的是解決門戶網站跨平臺和終端依賴性問題,同時可任意擴展和修改網站功能及內容。筆者調研了我國高校圖書館門戶網站建設的現狀,在分析讀者瀏覽遼寧師范大學圖書館門戶網站的行為數據基礎上,提出了一種基于扁平化設計、采用響應式框架建設門戶網站的技術路線,應用于遼寧師范大學圖書館的門戶網站建設。經過2個月的自主開發,遼寧師范大學圖書館的新版門戶網站于2017年9月10日順利上線運行。

2高校圖書館門戶網站建設現狀

2.1高校圖書館門戶網站設計風格。為全面了解我國高校圖書館的網站建設現狀,筆者在2017年5月至6月期間分別通過臺式電腦、平板電腦、手機端等對部分高校圖書館的門戶網站進行了訪問,并對其建設風格進行歸類整理,調研結果見表1。2.1.1傳統設計風格。傳統設計風格的高校圖書館網站數量最多,設計以圖文信息為主,適合PC端瀏覽,若通過平板電腦或手機瀏覽會出現滾動條或網頁元素顯示錯位,影響顯示效果。采用傳統設計風格的高校圖書館網站一般還會專門建設適合移動設備瀏覽的移動版網站。2.1.2Metro設計風格。Windows8推出了一個專為觸摸設計服務的最新Metro風格界面,Metro設計風格以簡潔的版式為基礎,將內容本身作為組織和分組排版的方式,刪除了多余的線條和框架[3]。我國部分高校圖書館采用的是這種設計風格,但總體數量不多。2.1.3扁平化設計風格。扁平化設計風格使用簡潔風格的元素和圖標,配色大膽、豐富且明亮,是一種盡量減少裝飾的極簡設計[4]。本次調研中采用扁平化設計風格的高校圖書館有13家。2.1.4響應式網站。響應式Web設計(ResponsiveWebDesign)理念認為網站頁面的設計與開發應根據設備環境(如屏幕尺寸、屏幕定向、系統平臺等)以及用戶行為進行相應的響應和調整[5]。響應式網站只需開發一次就可為所有移動終端提供服務,使圖書館門戶網站更加高效、專業、美觀。目前,我國已有5所高校圖書館的門戶網站實現了響應式布局。2.2響應式。Web設計的核心技術當用戶瀏覽頁面時,瀏覽設備的屏幕分辨率、瀏覽器類型、瀏覽窗口的大小及瀏覽器模式(如極速模式、兼容模式)等因素都會影響瀏覽效果,而響應式Web設計利用媒體查詢、彈性視覺媒體和流動布局等核心技術可保障用戶在瀏覽頁面時將這些因素的影響降到最低[6]。媒體查詢根據媒體類型、屏幕寬度、屏幕比例、設備方向等各種功能特性改變頁面布局;流動布局實現可縮放、可流動的彈性版式,確保在媒體查詢未切換樣式期間布局能適應視窗改變;彈性視覺媒體適應版式布局的變化,可使特定媒體按照規定的布局實現動態調整,三者共同構成了響應式Web設計的核心技術。2.3Bootstrap響應式前端框架。Bootstrap是一種響應式Web設計框架,專門應用于開發響應式布局、移動設備優先的Web項目。Bootstrap框架的核心是柵格系統,其工作原理如下:柵格系統通過一系列行(Row)與列(Column)的組合創建頁面布局,內容應當放置在“列(Column)”內,只有“列(Column)”可以作為“行(Row)”的直接子元素。列(Column)通過指定1到12的值表示內容跨越屏幕的范圍。柵格系統通過定義容器大小平分12份,再調整內外邊距,最后結合媒體查詢就可以制作出強大的響應式柵格系統。

3基于響應式Web設計的高校圖書館門戶網站建設

3.1用戶需求分析。高校圖書館通過第三方數據統計插件可獲取讀者瀏覽行為數據,從讀者使用終端類型、終端分辨率和終端瀏覽器等三個維度了解讀者的瀏覽行為,為網站界面設計、布局選擇及瀏覽設備兼容性提供了依據。相關數據顯示,使用非移動設備和移動設備訪問圖書館門戶網站的用戶分別占76.77%和23.23%。普通臺式電腦的分辨率大多為1440×960,筆記本電腦多為1366×768,隨著電腦顯示器越來越大,1920×1080分辨率的終端也越來越多;移動終端的分辨率大多為360×780,平板電腦分辨率多為1280×800,詳見圖1。終端瀏覽器方面,讀者多習慣使用360瀏覽器、Safari瀏覽器,以及微信、百度、QQ等App內嵌的瀏覽器等,詳見圖2。3.2建設目標及思路。高校圖書館門戶網站采用扁平化設計風格,使用Bootstrap響應式前端框架,可通過ASP.net+SQLServer2008完全自主設計開發,內容設計應突出資源和服務,注重精美與高效,以提升圖書館的形象;框架編排、色彩搭配及圖片選擇都應恰到好處,使網站在保證功能的前提下為讀者帶來良好的視覺享受和時代動感。高校圖書館還應注重網站的安全性和穩定性,通過網絡安全、系統登錄安全、服務器防火墻策略等多種方式確保門戶網站安全運行;在網站維護和后續擴展方面提供源代碼的詳細注釋,開發專門的平臺維護網站;充分考慮網站的擴展性,提供視圖、WebService接口等與其他系統對接;靜態和Flash展示的頁面可采用手工方式維護。3.3網站技術解決方案。高校圖書館可在虛擬化系統中配置兩臺高性能服務器,一臺用于備份,一臺運行網站主程序,數據庫服務器和Web服務器共用一臺虛擬化服務器。高校圖書館的開發環境可選擇VisualStudio2012+SQLServer2008,選用Bootstrap框架實現網站的跨平臺瀏覽,采用HTML5+DIV+CSS3方式布局頁面,自行規劃設計界面風格及樣式,同時利用jQuery實現頁面的下拉菜單、輪播圖片等效果,通過Json傳遞網站后臺和前臺間的數據。門戶網站建設完成后,可使用寬屏臺式電腦、筆記本電腦、平板電腦、手機等瀏覽設備進行測試,確保網站能夠跨平臺瀏覽及與主流瀏覽器(如IE瀏覽器、火狐瀏覽器等)相兼容。3.4內容規劃、版式設計及頁面布局。3.4.1內容規劃。高校圖書館門戶網站的內容規劃要突出資源和服務,主界面內容應充實而不繁雜,既能體現本站特色,又能滿足用戶需要。3.4.2版式設計。高校圖書館門戶網站的整體風格應力求簡潔清爽,選取藍色為主色調,版式設計應突出資源檢索、活動公告及最新館藏資源等板塊,并設置快速鏈接板塊,以圖標的形式將讀者最常用的功能顯示出來。高校圖書館門戶網站主頁版式設計詳見圖3。3.4.3頁面布局。高校圖書館可采用Bootstrap響應式框架布局頁面,其中快速導航欄、橫幅動畫、專題網站、網站頁腳版權等柵格數值設置為12;新聞中心、快速鏈接、館藏資源、讀者服務等柵格數值設置為6。查詢媒體定義為四種分辨率,分別為適合屏幕寬度小于768px的手機瀏覽器、屏幕寬度大于768px小于1000px的平板電腦瀏覽器、屏幕寬度大于1000px小于1440px的筆記本電腦瀏覽器,以及屏幕寬度大于1440px的寬屏臺式電腦瀏覽器;使用360、Safari、Chrome和IE等主流瀏覽器測試其兼容性。

4結語

遼寧師范大學圖書館響應式網站自上線運行以來,較好地解決了多種瀏覽設備的兼容性問題,同時保證了網站良好的擴展性,目前已陸續增加了信息素養教育、OA資源、投稿指南等服務功能,以及課程資源網、館員論壇等專題網站,為提高該館的信息服務水平提供了有力的技術支持。高校圖書館建設響應式門戶網站能最大限度地契合讀者瀏覽設備的性能與規格屬性,不僅能夠解決瀏覽媒體的跨平臺問題,還使用戶能夠獲得與設備相匹配的良好視覺體驗。因此,高校圖書館應將門戶網站建設作為一項長期工程,在注重日常維護和持續開發的基礎上不斷提升自主開發能力,打造高水平技術館員隊伍,在高校圖書館與讀者之間架起一座溝通的橋梁。

參考文獻:

[1]鐘遠薪.響應式Web設計:圖書館移動服務新方向[J].圖書館論壇,2015(7):93-97.

[2]畢劍,劉曉艷,張禹.使用響應式網頁設計構建圖書館移動門戶網站:以云南大學圖書館為例[J].現代圖書情報技術,2015(2):97-102.

[3]李杰旻,張繼曉.視覺、交互和功能:以Metro風格設計分析互聯網產品設計[J].設計,2013(11):113-114.

[4]王梓瀟.“扁平化”設計風格在圖書館網站設計上的應用[D].沈陽:沈陽師范大學,2015.

[5]劉德山,章增安,林彬.HTML5+CSS3:Web前端開發技術(第2版)[M].北京:人民郵電出版社,2018:329-347.

[6]趙建保.響應式Web設計關鍵技術及設計流程[J].電腦知識與技術,2014(5):1066-1068.

作者:章增安 單位:遼寧師范大學圖書館