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