響應式在網(wǎng)頁(yè)設計中的應用發(fā)布者：本站     時(shí)間：2020-02-11 10:02:33

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