![響應(yīng)式設(shè)計(jì)在圖書(shū)館門(mén)戶網(wǎng)站的應(yīng)用_第1頁(yè)](http://file2.renrendoc.com/fileroot_temp3/2021-7/31/2ae599ab-e0be-4393-9956-04bee9256d64/2ae599ab-e0be-4393-9956-04bee9256d641.gif)
![響應(yīng)式設(shè)計(jì)在圖書(shū)館門(mén)戶網(wǎng)站的應(yīng)用_第2頁(yè)](http://file2.renrendoc.com/fileroot_temp3/2021-7/31/2ae599ab-e0be-4393-9956-04bee9256d64/2ae599ab-e0be-4393-9956-04bee9256d642.gif)
![響應(yīng)式設(shè)計(jì)在圖書(shū)館門(mén)戶網(wǎng)站的應(yīng)用_第3頁(yè)](http://file2.renrendoc.com/fileroot_temp3/2021-7/31/2ae599ab-e0be-4393-9956-04bee9256d64/2ae599ab-e0be-4393-9956-04bee9256d643.gif)
![響應(yīng)式設(shè)計(jì)在圖書(shū)館門(mén)戶網(wǎng)站的應(yīng)用_第4頁(yè)](http://file2.renrendoc.com/fileroot_temp3/2021-7/31/2ae599ab-e0be-4393-9956-04bee9256d64/2ae599ab-e0be-4393-9956-04bee9256d644.gif)
![響應(yīng)式設(shè)計(jì)在圖書(shū)館門(mén)戶網(wǎng)站的應(yīng)用_第5頁(yè)](http://file2.renrendoc.com/fileroot_temp3/2021-7/31/2ae599ab-e0be-4393-9956-04bee9256d64/2ae599ab-e0be-4393-9956-04bee9256d645.gif)
版權(quán)說(shuō)明:本文檔由用戶提供并上傳,收益歸屬內(nèi)容提供方,若內(nèi)容存在侵權(quán),請(qǐng)進(jìn)行舉報(bào)或認(rèn)領(lǐng)
文檔簡(jiǎn)介
1、響應(yīng)式設(shè)計(jì)在圖書(shū)館門(mén)戶網(wǎng)站的應(yīng)用 1背景 高校圖書(shū)館門(mén)戶網(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è)門(mén)戶網(wǎng)站,雖然省時(shí)省力,對(duì)技術(shù)館員的能力要求也相對(duì)較低,但由于源代碼版權(quán)受限,導(dǎo)致擴(kuò)展性極差,一個(gè)微小的變化或功能擴(kuò)展都要尋求外包公司的幫助,給后期維護(hù)帶來(lái)極大不便。當(dāng)前,扁平化設(shè)計(jì)、響應(yīng)式布局以其簡(jiǎn)約的畫(huà)面、整潔的布局、流暢的加載速度及兼容多種設(shè)備屏幕等優(yōu)勢(shì)逐漸成為網(wǎng)站前端設(shè)計(jì)的主流。隨著網(wǎng)站前
2、端技術(shù)的發(fā)展,用戶瀏覽媒體也經(jīng)歷了巨大的變化。目前,智能手機(jī)、平板電腦等都已普及,圖書(shū)館的門(mén)戶網(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)式門(mén)戶網(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)式門(mén)戶網(wǎng)站1-2;北京大學(xué)利用Drupal框架及HTTPS技術(shù)構(gòu)建的安全性極高的門(mén)戶網(wǎng)站,前端也采用了響應(yīng)式設(shè)計(jì)。以遼寧師范大學(xué)圖書(shū)館為例,該館2015年通過(guò)外包方式建設(shè)了Metro風(fēng)格的門(mén)戶網(wǎng)站,由于
3、未取得源代碼授權(quán),后期擴(kuò)展和維護(hù)極其困難,且不支持移動(dòng)媒體的兼容性瀏覽,因此運(yùn)行兩年后決定改版。改版的目的是解決門(mén)戶網(wǎng)站跨平臺(tái)和終端依賴性問(wèn)題,同時(shí)可任意擴(kuò)展和修改網(wǎng)站功能及內(nèi)容。筆者調(diào)研了我國(guó)高校圖書(shū)館門(mén)戶網(wǎng)站建設(shè)的現(xiàn)狀,在分析讀者瀏覽遼寧師范大學(xué)圖書(shū)館門(mén)戶網(wǎng)站的行為數(shù)據(jù)基礎(chǔ)上,提出了一種基于扁平化設(shè)計(jì)、采用響應(yīng)式框架建設(shè)門(mén)戶網(wǎng)站的技術(shù)路線,應(yīng)用于遼寧師范大學(xué)圖書(shū)館的門(mén)戶網(wǎng)站建設(shè)。經(jīng)過(guò)2個(gè)月的自主開(kāi)發(fā),遼寧師范大學(xué)圖書(shū)館的新版門(mén)戶網(wǎng)站于2017年9月10日順利上線運(yùn)行。 2高校圖書(shū)館門(mén)戶網(wǎng)站建設(shè)現(xiàn)狀 2.1高校圖書(shū)館門(mén)戶網(wǎng)站設(shè)計(jì)風(fēng)格。為全面了解我國(guó)高校圖書(shū)館的網(wǎng)站建設(shè)現(xiàn)狀,筆者在2017年5
4、月至6月期間分別通過(guò)臺(tái)式電腦、平板電腦、手機(jī)端等對(duì)部分高校圖書(shū)館的門(mén)戶網(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ì)專門(mén)建設(shè)適合移動(dòng)設(shè)備瀏覽的移動(dòng)版網(wǎng)站。2.1.2Metro設(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ū)館采用的是
5、這種設(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ì)(ResponsiveWebDesign)理念認(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ū)館門(mén)戶網(wǎng)站更加高效、專業(yè)、美觀。目前,我國(guó)已有5所高校圖書(shū)館的門(mén)戶網(wǎng)站實(shí)現(xiàn)了響應(yīng)式布局。2.2響應(yīng)式。Web設(shè)計(jì)的核心技術(shù)當(dāng)用戶瀏覽頁(yè)面時(shí),瀏覽設(shè)備的
6、屏幕分辨率、瀏覽器類型、瀏覽窗口的大小及瀏覽器模式(如極速模式、兼容模式)等因素都會(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.3Bootstrap響應(yīng)式前端框架。Bootstrap是一種響應(yīng)式Web設(shè)計(jì)框架,專門(mén)應(yīng)用于開(kāi)發(fā)響應(yīng)式布局
7、、移動(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ū)館門(mén)戶網(wǎng)站建設(shè) 3.1用戶需求分析。高校圖書(shū)館通過(guò)第三方數(shù)據(jù)統(tǒng)計(jì)插件可獲取讀者瀏覽行為數(shù)據(jù),從讀者使用終端類型、終端分辨率和終端瀏覽器等三個(gè)維度
8、了解讀者的瀏覽行為,為網(wǎng)站界面設(shè)計(jì)、布局選擇及瀏覽設(shè)備兼容性提供了依據(jù)。相關(guān)數(shù)據(jù)顯示,使用非移動(dòng)設(shè)備和移動(dòng)設(shè)備訪問(wèn)圖書(shū)館門(mén)戶網(wǎng)站的用戶分別占76.77%和23.23%。普通臺(tái)式電腦的分辨率大多為1440960,筆記本電腦多為1366768,隨著電腦顯示器越來(lái)越大,19201080分辨率的終端也越來(lái)越多;移動(dòng)終端的分辨率大多為360780,平板電腦分辨率多為1280800,詳見(jiàn)圖1。終端瀏覽器方面,讀者多習(xí)慣使用360瀏覽器、Safari瀏覽器,以及微信、百度、QQ等App內(nèi)嵌的瀏覽器等,詳見(jiàn)圖2。3.2建設(shè)目標(biāo)及思路。高校圖書(shū)館門(mén)戶網(wǎng)站采用扁平化設(shè)計(jì)風(fēng)格,使用Bootstrap響應(yīng)式前端框架,
9、可通過(guò)ASP.net+SQLServer2008完全自主設(shè)計(jì)開(kāi)發(fā),內(nèi)容設(shè)計(jì)應(yīng)突出資源和服務(wù),注重精美與高效,以提升圖書(shū)館的形象;框架編排、色彩搭配及圖片選擇都應(yīng)恰到好處,使網(wǎng)站在保證功能的前提下為讀者帶來(lái)良好的視覺(jué)享受和時(shí)代動(dòng)感。高校圖書(shū)館還應(yīng)注重網(wǎng)站的安全性和穩(wěn)定性,通過(guò)網(wǎng)絡(luò)安全、系統(tǒng)登錄安全、服務(wù)器防火墻策略等多種方式確保門(mén)戶網(wǎng)站安全運(yùn)行;在網(wǎng)站維護(hù)和后續(xù)擴(kuò)展方面提供源代碼的詳細(xì)注釋,開(kāi)發(fā)專門(mén)的平臺(tái)維護(hù)網(wǎng)站;充分考慮網(wǎng)站的擴(kuò)展性,提供視圖、WebService接口等與其他系統(tǒng)對(duì)接;靜態(tài)和Flash展示的頁(yè)面可采用手工方式維護(hù)。3.3網(wǎng)站技術(shù)解決方案。高校圖書(shū)館可在虛擬化系統(tǒng)中配置兩臺(tái)高性能
10、服務(wù)器,一臺(tái)用于備份,一臺(tái)運(yùn)行網(wǎng)站主程序,數(shù)據(jù)庫(kù)服務(wù)器和Web服務(wù)器共用一臺(tái)虛擬化服務(wù)器。高校圖書(shū)館的開(kāi)發(fā)環(huán)境可選擇VisualStudio2012+SQLServer2008,選用Bootstrap框架實(shí)現(xiàn)網(wǎng)站的跨平臺(tái)瀏覽,采用HTML5+DIV+CSS3方式布局頁(yè)面,自行規(guī)劃設(shè)計(jì)界面風(fēng)格及樣式,同時(shí)利用jQuery實(shí)現(xiàn)頁(yè)面的下拉菜單、輪播圖片等效果,通過(guò)Json傳遞網(wǎng)站后臺(tái)和前臺(tái)間的數(shù)據(jù)。門(mén)戶網(wǎng)站建設(shè)完成后,可使用寬屏臺(tái)式電腦、筆記本電腦、平板電腦、手機(jī)等瀏覽設(shè)備進(jìn)行測(cè)試,確保網(wǎng)站能夠跨平臺(tái)瀏覽及與主流瀏覽器(如IE瀏覽器、火狐瀏覽器等)相兼容。3.4內(nèi)容規(guī)劃、版式設(shè)計(jì)及頁(yè)面布局。3.4.
11、1內(nèi)容規(guī)劃。高校圖書(shū)館門(mén)戶網(wǎng)站的內(nèi)容規(guī)劃要突出資源和服務(wù),主界面內(nèi)容應(yīng)充實(shí)而不繁雜,既能體現(xiàn)本站特色,又能滿足用戶需要。3.4.2版式設(shè)計(jì)。高校圖書(shū)館門(mén)戶網(wǎng)站的整體風(fēng)格應(yīng)力求簡(jiǎn)潔清爽,選取藍(lán)色為主色調(diào),版式設(shè)計(jì)應(yīng)突出資源檢索、活動(dòng)公告及最新館藏資源等板塊,并設(shè)置快速鏈接板塊,以圖標(biāo)的形式將讀者最常用的功能顯示出來(lái)。高校圖書(shū)館門(mén)戶網(wǎng)站主頁(yè)版式設(shè)計(jì)詳見(jiàn)圖3。3.4.3頁(yè)面布局。高校圖書(shū)館可采用Bootstrap響應(yīng)式框架布局頁(yè)面,其中快速導(dǎo)航欄、橫幅動(dòng)畫(huà)、專題網(wǎng)站、網(wǎng)站頁(yè)腳版權(quán)等柵格數(shù)值設(shè)置為12;新聞中心、快速鏈接、館藏資源、讀者服務(wù)等柵格數(shù)值設(shè)置為6。查詢媒體定義為四種分辨率,分別為適合屏幕寬
12、度小于768px的手機(jī)瀏覽器、屏幕寬度大于768px小于1000px的平板電腦瀏覽器、屏幕寬度大于1000px小于1440px的筆記本電腦瀏覽器,以及屏幕寬度大于1440px的寬屏臺(tái)式電腦瀏覽器;使用360、Safari、Chrome和IE等主流瀏覽器測(cè)試其兼容性。 4結(jié)語(yǔ) 遼寧師范大學(xué)圖書(shū)館響應(yīng)式網(wǎng)站自上線運(yùn)行以來(lái),較好地解決了多種瀏覽設(shè)備的兼容性問(wèn)題,同時(shí)保證了網(wǎng)站良好的擴(kuò)展性,目前已陸續(xù)增加了信息素養(yǎng)教育、OA資源、投稿指南等服務(wù)功能,以及課程資源網(wǎng)、館員論壇等專題網(wǎng)站,為提高該館的信息服務(wù)水平提供了有力的技術(shù)支持。高校圖書(shū)館建設(shè)響應(yīng)式門(mén)戶網(wǎng)站能最大限度地契合讀者瀏覽設(shè)備的性能與規(guī)格屬性
13、,不僅能夠解決瀏覽媒體的跨平臺(tái)問(wèn)題,還使用戶能夠獲得與設(shè)備相匹配的良好視覺(jué)體驗(yàn)。因此,高校圖書(shū)館應(yīng)將門(mén)戶網(wǎng)站建設(shè)作為一項(xiàng)長(zhǎng)期工程,在注重日常維護(hù)和持續(xù)開(kāi)發(fā)的基礎(chǔ)上不斷提升自主開(kāi)發(fā)能力,打造高水平技術(shù)館員隊(duì)伍,在高校圖書(shū)館與讀者之間架起一座溝通的橋梁。 參考文獻(xiàn): 1鐘遠(yuǎn)薪.響應(yīng)式Web設(shè)計(jì):圖書(shū)館移動(dòng)服務(wù)新方向J.圖書(shū)館論壇,2015(7):93-97. 2畢劍,劉曉艷,張禹.使用響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)構(gòu)建圖書(shū)館移動(dòng)門(mén)戶網(wǎng)站:以云南大學(xué)圖書(shū)館為例J.現(xiàn)代圖書(shū)情報(bào)技術(shù),2015(2):97-102. 3李杰旻,張繼曉.視覺(jué)、交互和功能:以Metro風(fēng)格設(shè)計(jì)分析互聯(lián)網(wǎng)產(chǎn)品設(shè)計(jì)J.設(shè)計(jì),2013(11):113-114. 4王梓瀟.“扁平化”設(shè)計(jì)風(fēng)格在圖書(shū)館網(wǎng)站設(shè)計(jì)上的應(yīng)
溫馨提示
- 1. 本站所有資源如無(wú)特殊說(shuō)明,都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
- 2. 本站的文檔不包含任何第三方提供的附件圖紙等,如果需要附件,請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
- 3. 本站RAR壓縮包中若帶圖紙,網(wǎng)頁(yè)內(nèi)容里面會(huì)有圖紙預(yù)覽,若沒(méi)有圖紙預(yù)覽就沒(méi)有圖紙。
- 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
- 5. 人人文庫(kù)網(wǎng)僅提供信息存儲(chǔ)空間,僅對(duì)用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理,對(duì)用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯,并不能對(duì)任何下載內(nèi)容負(fù)責(zé)。
- 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容,請(qǐng)與我們聯(lián)系,我們立即糾正。
- 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對(duì)自己和他人造成任何形式的傷害或損失。
最新文檔
- 2025年全球及中國(guó)高性能航空涂料行業(yè)頭部企業(yè)市場(chǎng)占有率及排名調(diào)研報(bào)告
- 2025年全球及中國(guó)眼科手術(shù)剪行業(yè)頭部企業(yè)市場(chǎng)占有率及排名調(diào)研報(bào)告
- 2025公路工程進(jìn)度、計(jì)量、合同管理監(jiān)理內(nèi)容
- 餐桌茶幾家具買(mǎi)賣合同
- 年貨物運(yùn)輸合同范本
- 2025合同模板合伙協(xié)議范本
- 大米購(gòu)銷的合同
- 物聯(lián)網(wǎng)系統(tǒng)定制與開(kāi)發(fā)合同
- 水電安裝承包合同樣本
- 聘用合同聘請(qǐng)合同
- 確定項(xiàng)目干系人(表格)
- 渠道管理就這樣做
- 大客戶銷售這樣說(shuō)這樣做
- 精裝修樣板房房屋使用說(shuō)明
- 喬遷新居結(jié)婚典禮主持詞
- 小學(xué)四年級(jí)數(shù)學(xué)競(jìng)賽試題(附答案)
- 魯科版高中化學(xué)必修2全冊(cè)教案
- 《病理學(xué)基礎(chǔ)》知識(shí)考核試題題庫(kù)與答案
- 人口分布 高一地理下學(xué)期人教版 必修第二冊(cè)
- 四年級(jí)上冊(cè)英語(yǔ)試題-Module 9 Unit 1 What happened to your head--外研社(一起)(含答案)
- 子宮內(nèi)膜異位癥診療指南
評(píng)論
0/150
提交評(píng)論