響應(yīng)式圖書(shū)館門(mén)戶網(wǎng)站設(shè)計(jì)

摘 要：近年來(lái)，隨著計(jì)算機(jī)、互聯(lián)網(wǎng)等現(xiàn)代科技發(fā)展，信息化時(shí)代已然成形，并在很大程度上影響著人們的生產(chǎn)生活。尤其是移動(dòng)互聯(lián)技術(shù)的開(kāi)發(fā)，更是為人類信息交互提供了新的通道，便捷性功能表現(xiàn)更為突出。基于龐大的移動(dòng)終端用戶數(shù)量，圖書(shū)館門(mén)戶網(wǎng)站必須進(jìn)行積極的創(chuàng)新變革，以用戶體驗(yàn)為中心，優(yōu)化設(shè)計(jì)，實(shí)現(xiàn)更大范圍內(nèi)的知識(shí)信息友好交互。本文基于對(duì)響應(yīng)式圖書(shū)館門(mén)戶網(wǎng)站設(shè)計(jì)發(fā)展需求的定位與論述，就其實(shí)現(xiàn)相關(guān)進(jìn)行了探究。

關(guān)鍵詞：圖書(shū)館門(mén)戶網(wǎng)站;響應(yīng)式設(shè)計(jì);技術(shù);發(fā)展

時(shí)至今日，移動(dòng)設(shè)備已然成為了現(xiàn)代人生活中的標(biāo)配，如手機(jī)、電腦等，加速著移動(dòng)圖書(shū)館的發(fā)展，并積累了龐大的用戶群體。基于響應(yīng)式設(shè)計(jì)的高校圖書(shū)館門(mén)戶網(wǎng)站建設(shè)，改變了傳統(tǒng)的網(wǎng)站頁(yè)面布局模式，以獨(dú)特、多變的風(fēng)格提升了視覺(jué)印象，滿足了用戶的個(gè)性化需求，對(duì)增強(qiáng)讀者黏性有著重要的現(xiàn)實(shí)意義，相關(guān)方面的課題研究備受關(guān)注和熱議。

一、發(fā)展需求

知識(shí)經(jīng)濟(jì)時(shí)代，面對(duì)愈加激烈的社會(huì)競(jìng)爭(zhēng)格局，人們的知識(shí)渴求度急速攀升，圖書(shū)館作為重要的知識(shí)資源輸出陣地，由此迎來(lái)了巨大的發(fā)展機(jī)遇。同時(shí)，宏觀信息化生態(tài)下，互聯(lián)網(wǎng)技術(shù)應(yīng)用普及，為信息交互創(chuàng)造了諸多便捷性操作條件，且種類構(gòu)成多樣，日漸積累了十分龐大的受眾群體，成為了圖書(shū)館服務(wù)輸出的主陣地之一。因此，越來(lái)越多的圖書(shū)館開(kāi)始著手信息化建設(shè)，并朝著“移動(dòng)”的領(lǐng)域邁進(jìn)，以迎合社會(huì)主流需求。目前，師生使用手機(jī)、筆記本、PAD等移動(dòng)終端越來(lái)越多，傳統(tǒng)網(wǎng)站建設(shè)并未考慮移動(dòng)設(shè)備的顯示和兼容問(wèn)題，直接影響了用戶體驗(yàn)。一般來(lái)講，對(duì)于上述問(wèn)題的解決，需要設(shè)計(jì)多套網(wǎng)頁(yè)，從而為各種設(shè)備匹配不同的版本，是真正實(shí)現(xiàn)以用戶體驗(yàn)中心的圖書(shū)館服務(wù)發(fā)展關(guān)鍵舉措。在現(xiàn)實(shí)的操作中，由于圖書(shū)館自身的技術(shù)研發(fā)能力有限，移動(dòng)服務(wù)輸出主要依靠第三方平臺(tái)，導(dǎo)致同質(zhì)化現(xiàn)象嚴(yán)重，個(gè)性化定制內(nèi)容稀缺等系列問(wèn)題突出。而響應(yīng)式圖書(shū)館門(mén)戶網(wǎng)站設(shè)計(jì)，則很好地適配了各種尺寸設(shè)備，上述問(wèn)題迎刃而解。所謂響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)，率先由美國(guó)知名網(wǎng)站設(shè)計(jì)師Ethan Marcotte提出，是指可以自動(dòng)識(shí)別屏幕寬度，并做出相應(yīng)調(diào)整的網(wǎng)頁(yè)設(shè)計(jì)，因而能夠兼容更多尺寸規(guī)格的設(shè)備，得到了用戶的廣泛青睞。相較于其他網(wǎng)站設(shè)計(jì)技術(shù)，響應(yīng)式設(shè)計(jì)的開(kāi)發(fā)成本低，且不涉及安裝成本，可進(jìn)行重要和重復(fù)數(shù)據(jù)的本地保存，跨平臺(tái)終端無(wú)需分配子域，保證了訪問(wèn)地址的唯一性，有助于個(gè)性化定制服務(wù)輸出，是圖書(shū)館門(mén)戶網(wǎng)站建設(shè)的未來(lái)方向。

二、遵循原則

響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)開(kāi)通了新的設(shè)計(jì)思維領(lǐng)域，通過(guò)集中創(chuàng)建頁(yè)面的內(nèi)容排版設(shè)計(jì)，使之能夠智能地根據(jù)用戶行為及其使用的設(shè)備環(huán)境進(jìn)行對(duì)應(yīng)布局，包括系統(tǒng)平臺(tái)、屏幕定向以及屏幕分辨率等。友好的用戶體驗(yàn)是響應(yīng)式圖書(shū)館門(mén)戶網(wǎng)站設(shè)計(jì)的初衷所在，并使之功能優(yōu)勢(shì)得到了最大釋放。為了更好地推動(dòng)該項(xiàng)技術(shù)發(fā)展與應(yīng)用，QA公司首席技術(shù)專家David Walker從實(shí)際開(kāi)發(fā)層次總結(jié)了響應(yīng)式網(wǎng)站設(shè)計(jì)的原則，包括建立流動(dòng)布局、使用CSS3、使用自適應(yīng)圖片。其中，建立流動(dòng)布局要求所有容器的寬度必須定義成瀏覽器的百分比。使用CSS3則要求根據(jù)媒體類型及參數(shù)的不同，采取不同的樣式設(shè)計(jì)。使用自適應(yīng)圖片要求圖片不得超過(guò)最大顯示寬度。事實(shí)上，布局適配小屏幕時(shí)的圖片顯示是相當(dāng)清楚的，并隨著分辨率提高，設(shè)計(jì)逐步增強(qiáng)。目前來(lái)講，臺(tái)式開(kāi)發(fā)技術(shù)的發(fā)展已然相當(dāng)成熟，移動(dòng)互聯(lián)網(wǎng)時(shí)代背景下，移動(dòng)終端設(shè)備的應(yīng)用愈加廣泛，是未來(lái)響應(yīng)式圖書(shū)館門(mén)戶網(wǎng)站設(shè)計(jì)的關(guān)重點(diǎn)所在。除此之外，業(yè)內(nèi)公認(rèn)的響應(yīng)式網(wǎng)站設(shè)計(jì)還需遵循宏觀性原則和彈性化原則。具體而言，宏觀性原則要求在響應(yīng)式網(wǎng)站設(shè)計(jì)之初，就需衡量不同類型用戶的需求，選擇一種網(wǎng)頁(yè)盡可能保證其在各種設(shè)備上的顯示效果，并做到合理取舍，從而提升多數(shù)用戶的體驗(yàn)。彈性化原則作為響應(yīng)式網(wǎng)站設(shè)計(jì)的基本遵循，亦是其功能優(yōu)勢(shì)的關(guān)鍵體現(xiàn)，以媒體查詢技術(shù)為依托，在不同尺寸的設(shè)備上呈現(xiàn)出流動(dòng)式的不同顯示效果，并能夠根據(jù)視口大小自動(dòng)調(diào)整顯示位置，盡量做到簡(jiǎn)潔、可視的頁(yè)面布局。

三、核心技術(shù)

響應(yīng)式圖書(shū)館門(mén)戶網(wǎng)站設(shè)計(jì)的核心技術(shù)包括媒體查詢、彈性視覺(jué)媒體和流動(dòng)布局。其中，媒體查詢作為CSS3規(guī)范中的重要模塊，實(shí)現(xiàn)了按設(shè)備特性來(lái)分級(jí)控制的頁(yè)面布局設(shè)計(jì)。在該項(xiàng)技術(shù)支持下，圖書(shū)館門(mén)戶網(wǎng)站可自動(dòng)識(shí)別用戶終端設(shè)備的條件語(yǔ)言，并對(duì)其物理屬性和瀏覽器屬性進(jìn)行檢查，包括寬度、方向等，最終選擇性地供應(yīng)樣式表，允許建立使用相同的HTML文件多個(gè)布局。現(xiàn)階段而言，幾乎所有的瀏覽器都支持CSS3媒體查詢功能，即使一些較為陳舊的網(wǎng)站瀏覽器，亦可通過(guò)一些替代方案解決媒體查詢不支持的問(wèn)題。與此同時(shí)，隨著響應(yīng)式圖書(shū)館門(mén)戶網(wǎng)站瀏覽器的寬度適配變化，其內(nèi)容風(fēng)格、布局及比例等亦會(huì)進(jìn)行相應(yīng)的變更，最大限度地保證了用戶無(wú)縫體驗(yàn)。彈性視覺(jué)媒體處理是保證響應(yīng)式圖書(shū)館門(mén)戶網(wǎng)站效果的關(guān)鍵一環(huán)，包括文字、圖片、視頻、動(dòng)畫(huà)等。隨著5G時(shí)代的到來(lái)，移動(dòng)終端設(shè)備的帶寬得到了很大延展，但仍舊作為其硬傷所在。如果單純地進(jìn)行頁(yè)面布局的響應(yīng)式處理，手機(jī)訪問(wèn)圖片還是PC上的大圖，勢(shì)必會(huì)消耗較大的流量，且請(qǐng)求時(shí)間延長(zhǎng)，一定程度上影響了用戶閱讀興趣。因此，彈性視覺(jué)媒體處理顯得至關(guān)重要，即根據(jù)移動(dòng)終端設(shè)備的屏幕分辨率適配合理的圖形，保證了清晰度和請(qǐng)求時(shí)間。流動(dòng)布局則是通過(guò)浮動(dòng)和百分比寬度來(lái)實(shí)現(xiàn)圖書(shū)館門(mén)戶網(wǎng)頁(yè)布局的“流動(dòng)”，動(dòng)態(tài)重組布局區(qū)塊的同時(shí)，減少了創(chuàng)建的斷點(diǎn)數(shù)，從而保證了呈現(xiàn)效果。在本案研究中，依托bootstrap柵格系統(tǒng)，實(shí)現(xiàn)了一系列行與列的組合，并集合了多種創(chuàng)建好的頁(yè)面布局。

四、實(shí)現(xiàn)路徑

從技術(shù)層次上講，改造舊式網(wǎng)頁(yè)的難度較大，而新建網(wǎng)頁(yè)的開(kāi)發(fā)成本偏高、耗時(shí)較長(zhǎng)，相比之下響應(yīng)式圖書(shū)館門(mén)戶網(wǎng)站設(shè)計(jì)的價(jià)值效益更加突出，可以適配電腦或手機(jī)等不同設(shè)備，靈活性表現(xiàn)更強(qiáng)，能夠給用戶帶來(lái)統(tǒng)一的視覺(jué)體驗(yàn)，增強(qiáng)了其粘度，是推動(dòng)圖書(shū)館服務(wù)持續(xù)發(fā)展的有效路徑。同時(shí)，在本案研究中，基于bootstrap框架有機(jī)地將HTML、CSS和JavaScript整合在一起，賦予了其CSS動(dòng)態(tài)屬性，能夠滿足不同尺寸設(shè)備的顯示要求，并且為了減少工作量，采取前端響應(yīng)式設(shè)計(jì)，加快了開(kāi)發(fā)進(jìn)度，相應(yīng)成本消耗較低。當(dāng)然，響應(yīng)式圖書(shū)館門(mén)戶網(wǎng)站設(shè)計(jì)并非盡善盡美，只兼容IE9以下的瀏覽器，可在新網(wǎng)站建設(shè)中植入判斷模塊，如果檢測(cè)到用戶瀏覽器不支持條件，則自動(dòng)跳轉(zhuǎn)到舊的網(wǎng)站頁(yè)面，從而有效保障了用戶體驗(yàn)。在具體的設(shè)計(jì)實(shí)踐中，還需注重個(gè)性化定制服務(wù)建設(shè)，不斷豐富功能模塊構(gòu)成，如報(bào)名、投票、評(píng)論、視頻、附件上傳等插件，并可設(shè)置不同風(fēng)格的模板，由用戶自定義切換，從而滿足他們的多樣化需求。目前來(lái)講，我國(guó)響應(yīng)式圖書(shū)館門(mén)戶網(wǎng)站設(shè)計(jì)的發(fā)展尚未完全成熟，只有少數(shù)高校完成了開(kāi)發(fā)。正是基于師生用戶需求考量，加之響應(yīng)式圖書(shū)館門(mén)戶網(wǎng)站設(shè)計(jì)的多重功能優(yōu)勢(shì)，應(yīng)當(dāng)?shù)玫皆盒ｎI(lǐng)導(dǎo)層面的高度重視與支持，緊跟時(shí)代潮流，結(jié)合自身實(shí)際情況，逐步加大相關(guān)方面的物力與人才支持，為推動(dòng)新型圖書(shū)館門(mén)戶發(fā)展奠定厚實(shí)的基礎(chǔ)，實(shí)現(xiàn)更高質(zhì)量的服務(wù)輸出，最大限度地釋放圖書(shū)館功能價(jià)值，助力高校科研、教學(xué)等系列工作的有效展開(kāi)。

五、結(jié)語(yǔ)

綜上所述，響應(yīng)式圖書(shū)館門(mén)戶網(wǎng)站設(shè)計(jì)，開(kāi)啟了用戶移動(dòng)閱讀新的體驗(yàn)方式，更為個(gè)性化的版面設(shè)計(jì)，贏得了廣大用戶群體的青睞，是圖書(shū)館門(mén)戶網(wǎng)站建設(shè)的主流趨勢(shì)，在實(shí)際踐行過(guò)程中，依托精準(zhǔn)的需求定位，遵循宏觀性、彈性化等原則導(dǎo)向，充分利用媒體查詢、彈性視覺(jué)媒體以及流動(dòng)布局等核心技術(shù)優(yōu)勢(shì)，實(shí)現(xiàn)更高質(zhì)量的信息服務(wù)輸出，同時(shí)應(yīng)當(dāng)?shù)玫皆盒ｎI(lǐng)導(dǎo)的高度重視與支持，實(shí)現(xiàn)其功能價(jià)值最大化。

參考文獻(xiàn)：

[1]王玥琳.基于響應(yīng)式圖書(shū)館網(wǎng)站構(gòu)建的探討[J].產(chǎn)業(yè)與科技論壇，2016，15（09）：60-61.

[2]曹樹(shù)金，吳育冰.響應(yīng)式Web設(shè)計(jì)及其在圖書(shū)館門(mén)戶網(wǎng)站中的應(yīng)用——以“211”高校圖書(shū)館為例[J].圖書(shū)情報(bào)研究，2016，9（01）：30-34.

[3]馮春英.基于響應(yīng)式Web設(shè)計(jì)的新型圖書(shū)館門(mén)戶網(wǎng)站構(gòu)建[J].圖書(shū)館學(xué)研究，2015（15）：34-40.

作者簡(jiǎn)介：李寧（1977—），男，漢族，重慶長(zhǎng)壽人，館員，研究方向：數(shù)字圖書(shū)館。