互聯(lián)網(wǎng)技術(shù)發(fā)展到今天, 為了能夠更好地適應(yīng)社會(huì)發(fā)展的需要, 人們把關(guān)注的焦點(diǎn)放在移動(dòng)互聯(lián)網(wǎng)技術(shù)的發(fā)展。但是大多數(shù)的網(wǎng)頁(yè)開(kāi)發(fā)基本都是基于原來(lái)的PC端的設(shè)計(jì)模式, 呈現(xiàn)出的頁(yè)面布局也與PC端無(wú)異, 只是將其等比例的縮小, 然而這種網(wǎng)頁(yè)布局在小屏設(shè)備上的使用表現(xiàn)并不理想, 并且顯示分辨率低、系統(tǒng)平臺(tái)不穩(wěn)定, 針對(duì)不同的系統(tǒng)和分辨率的設(shè)備分別進(jìn)行圖書(shū)館網(wǎng)頁(yè)的定制顯然是不切實(shí)際的, 但是隨著響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)概念的提出, 問(wèn)題便有了新的解決辦法, 可以為不同設(shè)備終端前的用戶帶來(lái)良好的使用體驗(yàn)。對(duì)于大部分的高校而言, 其校園門戶網(wǎng)站都是在很早之前開(kāi)發(fā)的, 沒(méi)有定期的維護(hù)與更新, 導(dǎo)致在手機(jī)等便攜式移動(dòng)終端的訪問(wèn)體驗(yàn)不理想, 現(xiàn)在大部門高校的圖書(shū)館網(wǎng)頁(yè)在手機(jī)端訪問(wèn)時(shí)并不能識(shí)別出手機(jī), 仍然是以電腦界面的頁(yè)面布局呈現(xiàn), 可用性非常低, 極大的降低了學(xué)生的使用欲望和使用頻率。畢竟, 對(duì)學(xué)生而言, 想要隨時(shí)隨地有臺(tái)電腦訪問(wèn)學(xué)校圖書(shū)館網(wǎng)站是不現(xiàn)實(shí)的, 但是幾乎每個(gè)大學(xué)生都有智能手機(jī), 手機(jī)已經(jīng)成為大學(xué)生最為依賴的工具和排名第一位的上網(wǎng)設(shè)備, 所以, 基于響應(yīng)式思維設(shè)計(jì)的高校圖書(shū)館網(wǎng)頁(yè)可以更加方便大學(xué)生在手機(jī)、平板上訪問(wèn), 為大學(xué)生帶來(lái)更好的移動(dòng)使用體驗(yàn)。
一、概念解讀與設(shè)計(jì)原則
響應(yīng)式是一種新的網(wǎng)絡(luò)頁(yè)面設(shè)計(jì)布局方式, 其概念在2010年由伊桑·馬科特率先提出, 為的是給不同終端前的用戶帶來(lái)較好的移動(dòng)閱讀與使用體驗(yàn)。這種設(shè)計(jì)方式的理念在于, 在充分考慮到用戶可能會(huì)使用的設(shè)備的特性, 如分辨率大小、系統(tǒng)差異、屏幕長(zhǎng)寬比等, 對(duì)頁(yè)面的排布與圖片的大小進(jìn)行集中式設(shè)計(jì), 再根據(jù)終端特性的不同, 智能的選擇頁(yè)面排布方式, 呈現(xiàn)出極佳的頁(yè)面布局效果。當(dāng)然, 設(shè)計(jì)網(wǎng)頁(yè)時(shí)本著移動(dòng)設(shè)備優(yōu)先級(jí)高的原則進(jìn)行, 其主要表現(xiàn)在如下兩個(gè)方面:第一個(gè)是需要更注重考慮移動(dòng)設(shè)備本身的特性, 鑒于不同的移動(dòng)設(shè)備的多樣性與差異性, 需要優(yōu)先照顧這些設(shè)備的顯示效果, 針對(duì)性的優(yōu)先設(shè)計(jì)。第二是設(shè)計(jì)時(shí)遵循漸進(jìn)式的設(shè)計(jì)思想, 按照設(shè)備顯示大小, 逐步優(yōu)化顯示效果, 比如在較小的設(shè)備上優(yōu)先突出主要的內(nèi)容, 忽略次要信息的顯示, 隨著設(shè)備尺寸的增大, 可以相應(yīng)的增加一些信息顯示。另外, 在進(jìn)行網(wǎng)頁(yè)設(shè)計(jì)的過(guò)程中, 針對(duì)不同版本的瀏覽器, 需要根據(jù)其特性進(jìn)行設(shè)計(jì), 比如針對(duì)高級(jí)的瀏覽器可以相應(yīng)的增加頁(yè)面效果, 為用戶帶來(lái)更好的使用體驗(yàn)?？偟膩?lái)說(shuō), 不管是面向PC端的用戶還是面向移動(dòng)設(shè)備的用戶, 在網(wǎng)頁(yè)設(shè)計(jì)時(shí), 需要考慮到圖片大小的自由切換、分辨率的自動(dòng)調(diào)節(jié)等, 這樣做的目的是在不同的設(shè)備上都能很好的兼容頁(yè)面, 而不存在為哪一個(gè)設(shè)備進(jìn)行單獨(dú)的網(wǎng)頁(yè)設(shè)計(jì)這種費(fèi)事費(fèi)時(shí)的做法, 這就是響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)的優(yōu)勢(shì)。
二、網(wǎng)頁(yè)設(shè)計(jì)的核心技術(shù)
響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)理念提出至今, 經(jīng)過(guò)了幾年的發(fā)展, 這套設(shè)計(jì)理念發(fā)展的已經(jīng)比較成熟, 大部分的主流網(wǎng)頁(yè)都已經(jīng)跟進(jìn), 實(shí)現(xiàn)了對(duì)自家網(wǎng)站的更新。目前, 人們對(duì)于其核心技術(shù)的認(rèn)識(shí)已經(jīng)形成了共識(shí), 設(shè)計(jì)如下所示的3個(gè)內(nèi)容。
(一) 頁(yè)面布局設(shè)計(jì)
首先頁(yè)面的呈現(xiàn)效果, 由于移動(dòng)設(shè)備進(jìn)行網(wǎng)頁(yè)瀏覽發(fā)展時(shí)間較短, 大部分的網(wǎng)頁(yè)布局都是直接移植PC端的顯示布局, 這對(duì)于移動(dòng)設(shè)備來(lái)說(shuō), 體驗(yàn)是相當(dāng)不友好的, 不僅是體現(xiàn)在操作上的不方便, 而且就顯示效果來(lái)說(shuō)也非常的差, 很難讓受眾適應(yīng), 久而久之造成了讀者在移動(dòng)設(shè)備端的體驗(yàn)不理想。響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)采取了流動(dòng)式的布局方法, 從而避免了此類問(wèn)題。流動(dòng)布局, 不同于一般的固定布局, 二者存在的區(qū)別如下, 所謂固定布局, 顧名思義, 其頁(yè)面顯示的左右寬度是固定的, 以px作為其寬度單位。流式布局則不同, 其頁(yè)面的左右寬度并不會(huì)為固定長(zhǎng)度而限制, 它是一種相對(duì)的頁(yè)面寬度, 其單位是百分比, 這里的百分比指的是頁(yè)面寬度與其所在元素的比值。簡(jiǎn)而言之, 相較于傳統(tǒng)固定式的網(wǎng)頁(yè)排布, 流式布局的網(wǎng)頁(yè)排布具備靈活性和自主適應(yīng)性, 其網(wǎng)頁(yè)布局的寬度會(huì)根據(jù)屏幕的大小自動(dòng)的做出相應(yīng)的改變, 保證不會(huì)發(fā)生頁(yè)面溢出的現(xiàn)象, 極大的增強(qiáng)了頁(yè)面元素在網(wǎng)頁(yè)中的適應(yīng)性。
(二) 針對(duì)不同設(shè)備的響應(yīng)方式
對(duì)于響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)而言, 其核心的技術(shù)之一是在不同設(shè)備中做出的相應(yīng)差別式響應(yīng)?；陧憫?yīng)式設(shè)計(jì)的網(wǎng)頁(yè), 其自身會(huì)進(jìn)行設(shè)備屏幕寬度的自動(dòng)檢測(cè), 根據(jù)檢測(cè)到的屏幕寬度數(shù)據(jù), 會(huì)加載預(yù)設(shè)的CSS文件。而加載響應(yīng)的CSS文件, 就會(huì)使其調(diào)用相應(yīng)的網(wǎng)頁(yè)排版方式。通常, 對(duì)于CSS文件的加載, 可以通過(guò)HTML標(biāo)簽進(jìn)行加載, 也可以通過(guò)已有的CSS進(jìn)行加載, 可以根據(jù)需求選擇, 需要注意的是, 即使是在同一CSS文件里面, 也存在著不同的CSS規(guī)則, 會(huì)依據(jù)設(shè)備的不同分辨率選取不同的規(guī)則, 這些規(guī)則會(huì)改變網(wǎng)頁(yè)的呈現(xiàn)方式與呈現(xiàn)效果, 比如網(wǎng)頁(yè)的背景色等。由于移動(dòng)設(shè)備的尺寸大小、分辨率和長(zhǎng)寬比的形式要比電腦端更為豐富, 所以, 需要的網(wǎng)頁(yè)排版布局的風(fēng)格也會(huì)更多, 如果網(wǎng)頁(yè)能夠很好的識(shí)別每種設(shè)備的特性。然后調(diào)用相應(yīng)的文件來(lái)進(jìn)行匹配, 使得在相應(yīng)屏幕上的內(nèi)容呈現(xiàn)效果盡可能達(dá)到在PC上一樣的使用效果。
(三) 圖片處理
對(duì)于一個(gè)網(wǎng)站而言, 不能局限于單純的文字內(nèi)容, 通常也會(huì)包含形形色色的圖片。在傳統(tǒng)的PC上, 由于早先都是作為唯一優(yōu)化對(duì)象, 因此設(shè)計(jì)者認(rèn)為傳統(tǒng)的界面已經(jīng)能夠滿足受眾的需要, 但是隨著移動(dòng)互聯(lián)網(wǎng)的發(fā)展, 移動(dòng)閱讀設(shè)備出現(xiàn), 其屏幕尺寸小的屬性使得網(wǎng)頁(yè)的顯示效果大打折扣, 一些網(wǎng)站為了盡可能的減少大幅圖片對(duì)小屏設(shè)備顯示面積, 通常會(huì)相應(yīng)的縮小圖片的大小, 甚至是直接將CSS文件的屬性設(shè)置為空, 實(shí)現(xiàn)圖片的隱藏。從表層進(jìn)行分析, 其已經(jīng)達(dá)到了理想的效果, 而深入探究發(fā)現(xiàn), 雖然圖片被縮小甚至是隱藏, 但是經(jīng)過(guò)處理的圖片在加載的過(guò)程中并不會(huì)相應(yīng)的縮小或是消失, 仍舊按照原始文件大小下載, 不會(huì)節(jié)省時(shí)間, 更不會(huì)節(jié)省流量。目前關(guān)于這個(gè)問(wèn)題尚未形成最佳的解決方案, 一般的做法是優(yōu)先加載頁(yè)面, 然就根據(jù)加載好的頁(yè)面布局來(lái)確定圖片加載的具體排布方式, 比如哪邊的圖片可以加載, 哪邊的不需要加載, 當(dāng)然, 鑒于頁(yè)面加載的過(guò)程中可能會(huì)形成斷點(diǎn), 通常可以在斷點(diǎn)的位置加載圖片。但是, 視頻的處理問(wèn)題上, 與圖片的處理方式不同, 在小屏幕上播放視頻的體驗(yàn)不佳, 往往只會(huì)在小屏幕上提供視頻的鏈接, 這樣就不會(huì)對(duì)頁(yè)面加載造成壓力, 而在大屏幕上就可以按比例縮放。
三、網(wǎng)頁(yè)設(shè)計(jì)過(guò)程中的阻礙與難點(diǎn)
在很大程度上, 響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)解決了傳統(tǒng)網(wǎng)頁(yè)設(shè)計(jì)在移動(dòng)設(shè)備上的顯示兼容性問(wèn)題。由于響應(yīng)式設(shè)計(jì)理念的提出, 很多原本只能在電腦上才能實(shí)現(xiàn)的功能和高效的交互方式, 現(xiàn)在可以很方便的在手機(jī)端實(shí)現(xiàn)。事實(shí)表明, 很多高校的圖書(shū)館網(wǎng)頁(yè)設(shè)計(jì)上都采用響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)的方式, 并且反饋的效果也很不錯(cuò), 由此可以看出, 響應(yīng)式設(shè)計(jì)網(wǎng)頁(yè)在相當(dāng)長(zhǎng)的一段時(shí)間內(nèi)都會(huì)是最佳的網(wǎng)頁(yè)設(shè)計(jì)方式。即便如此, 響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)在實(shí)際的開(kāi)發(fā)過(guò)程中還是暴露出了一些問(wèn)題, 在一定程度上阻礙了它的發(fā)展, 如何較好的解決這些問(wèn)題顯得非常重要, 它將決定其以后的發(fā)展態(tài)勢(shì)。以下羅列存在的一些常見(jiàn)問(wèn)題。
(一) 時(shí)間成本投入的增加
傳統(tǒng)的網(wǎng)頁(yè)設(shè)計(jì), 由于專門針對(duì)的是大屏的電腦設(shè)備, 可以很好的顯示內(nèi)容, 網(wǎng)頁(yè)設(shè)計(jì)的主要內(nèi)容都被直接呈現(xiàn)在頁(yè)面, 在系統(tǒng)內(nèi)部不存在一些隱形的設(shè)計(jì), 但是響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)不同, 它是為了解決多設(shè)備的兼容性問(wèn)題、分辨率、小屏優(yōu)化問(wèn)題, 所以設(shè)計(jì)的工作量非常大, 常常一個(gè)界面需要設(shè)計(jì)多種排布格式以便在實(shí)際應(yīng)用中可以隨著設(shè)備的改變做出相應(yīng)的呈現(xiàn)。雖然在一個(gè)設(shè)備上并不會(huì)全部用到, 但是都必須將其設(shè)計(jì)好并儲(chǔ)存在網(wǎng)站的內(nèi)部, 而這看似額外的設(shè)計(jì)必然會(huì)增加初期的項(xiàng)目時(shí)間投入。據(jù)統(tǒng)計(jì), 在一個(gè)響應(yīng)式的網(wǎng)頁(yè)設(shè)計(jì)項(xiàng)目中, 初期所耗費(fèi)的成本投入超過(guò)了總成本的10%-20%。對(duì)于高校的圖書(shū)館而言, 由于其本身的學(xué)術(shù)特殊性, 為了盡可能的構(gòu)建最前沿的技術(shù)基地, 往往需要花費(fèi)更大的精力才能達(dá)到目的, 而這一切都會(huì)增加成本和時(shí)間的投入, 延長(zhǎng)開(kāi)發(fā)周期與維護(hù)難度。
(二) 需要針對(duì)移動(dòng)觸屏設(shè)備進(jìn)行優(yōu)化
在開(kāi)發(fā)一些移動(dòng)端的網(wǎng)站, 尤其在開(kāi)發(fā)諸如手機(jī)或者平板電腦等小屏設(shè)備的網(wǎng)頁(yè)時(shí), 需要充分考慮便捷性。傳統(tǒng)的鍵鼠操作可以很容易實(shí)現(xiàn)的操作轉(zhuǎn)到這些小屏設(shè)備上是只能依靠其觸屏功能來(lái)實(shí)現(xiàn), 但是由于觸屏可以提供的交互方式極為有限。原先依靠鍵鼠可以輕易實(shí)現(xiàn)的操作在觸屏上就會(huì)變得繁雜, 低效, 甚至有一些特殊的功能靠觸屏可能都無(wú)法實(shí)現(xiàn), 就比如電腦端的懸停功能, 在觸屏上暫時(shí)不能實(shí)現(xiàn)。為了實(shí)現(xiàn)同樣的功能, 在觸屏設(shè)備上據(jù)需要花費(fèi)更多的心思來(lái)設(shè)計(jì)并實(shí)現(xiàn)。所謂的響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì), 更多的工作或者說(shuō)設(shè)計(jì)的重心其實(shí)是在針對(duì)小屏觸摸設(shè)備的優(yōu)化, 如果其網(wǎng)頁(yè)在移動(dòng)端設(shè)備上能有比肩電腦端的交互體驗(yàn), 由此可以看出網(wǎng)頁(yè)設(shè)計(jì)非常成功。
(三) 瀏覽器的版本兼容性存在問(wèn)題
在實(shí)際的使用中, 我們漸漸發(fā)現(xiàn), 傳統(tǒng)的瀏覽器對(duì)于基于響應(yīng)式設(shè)計(jì)的網(wǎng)頁(yè)并不友好。在IE8代之前的瀏覽器上都是不支持打開(kāi)響應(yīng)式設(shè)計(jì)網(wǎng)站的, 究其原因在于響應(yīng)式網(wǎng)頁(yè)需要用到的媒體查詢由CSS3實(shí)現(xiàn), 而在IE8之前, 是不支持此項(xiàng)功能。要想實(shí)現(xiàn)此功能, 只有進(jìn)行系統(tǒng)升級(jí)。當(dāng)然, 也可以通過(guò)加載一些特殊文件解決。事實(shí)上, 我們經(jīng)常會(huì)發(fā)現(xiàn), 利用現(xiàn)在的瀏覽器去登陸高校的一些網(wǎng)頁(yè), 或多或少存在一些兼容性問(wèn)題, 比如無(wú)法輸入內(nèi)容, 無(wú)法顯示內(nèi)容, 無(wú)法觸發(fā)功能按鍵等等, 需要一系列繁雜的設(shè)置方式才能在現(xiàn)在的瀏覽器上正常的使用高校的網(wǎng)站。即便如此, 很多高校依然沒(méi)有意識(shí)到如何更新自己的網(wǎng)站, 而是通過(guò)修改瀏覽器的一些隱形設(shè)定, 來(lái)實(shí)現(xiàn)對(duì)高校門戶網(wǎng)站的兼容。