行業(yè)動態(tài)響應(yīng)式在網(wǎng)頁設(shè)計中的應(yīng)用

發(fā)布：2019-03-07 12:51:25 瀏覽：5486

互聯(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è)備分別進行圖書館網(wǎng)頁的定制顯然是不切實際的,但是隨著響應(yīng)式網(wǎng)頁設(shè)計概念的提出,問題便有了新的解決辦法,可以為不同設(shè)備終端前的用戶帶來良好的使用體驗。對于大部分的高校而言,其校園門戶網(wǎng)站都是在很早之前開發(fā)的,沒有定期的維護與更新,導(dǎo)致在手機等便攜式移動終端的訪問體驗不理想,現(xiàn)在大部門高校的圖書館網(wǎng)頁在手機端訪問時并不能識別出手機,仍然是以電腦界面的頁面布局呈現(xiàn),可用性非常低,極大的降低了學(xué)生的使用欲望和使用頻率。畢竟,對學(xué)生而言,想要隨時隨地有臺電腦訪問學(xué)校圖書館網(wǎng)站是不現(xiàn)實的,但是幾乎每個大學(xué)生都有智能手機,手機已經(jīng)成為大學(xué)生最為依賴的工具和排名第一位的上網(wǎng)設(shè)備,所以,基于響應(yīng)式思維設(shè)計的高校圖書館網(wǎng)頁可以更加方便大學(xué)生在手機、平板上訪問,為大學(xué)生帶來更好的移動使用體驗。

一、概念解讀與設(shè)計原則

響應(yīng)式是一種新的網(wǎng)絡(luò)頁面設(shè)計布局方式,其概念在2010年由伊桑·馬科特率先提出,為的是給不同終端前的用戶帶來較好的移動閱讀與使用體驗。這種設(shè)計方式的理念在于,在充分考慮到用戶可能會使用的設(shè)備的特性,如分辨率大小、系統(tǒng)差異、屏幕長寬比等,對頁面的排布與圖片的大小進行集中式設(shè)計,再根據(jù)終端特性的不同,智能的選擇頁面排布方式,呈現(xiàn)出極佳的頁面布局效果。當然,設(shè)計網(wǎng)頁時本著移動設(shè)備優(yōu)先級高的原則進行,其主要表現(xiàn)在如下兩個方面:第一個是需要更注重考慮移動設(shè)備本身的特性,鑒于不同的移動設(shè)備的多樣性與差異性,需要優(yōu)先照顧這些設(shè)備的顯示效果,針對性的優(yōu)先設(shè)計。第二是設(shè)計時遵循漸進式的設(shè)計思想,按照設(shè)備顯示大小,逐步優(yōu)化顯示效果,比如在較小的設(shè)備上優(yōu)先突出主要的內(nèi)容,忽略次要信息的顯示,隨著設(shè)備尺寸的增大,可以相應(yīng)的增加一些信息顯示。另外,在進行網(wǎng)頁設(shè)計的過程中,針對不同版本的瀏覽器,需要根據(jù)其特性進行設(shè)計,比如針對高級的瀏覽器可以相應(yīng)的增加頁面效果,為用戶帶來更好的使用體驗。總的來說,不管是面向PC端的用戶還是面向移動設(shè)備的用戶,在網(wǎng)頁設(shè)計時,需要考慮到圖片大小的自由切換、分辨率的自動調(diào)節(jié)等,這樣做的目的是在不同的設(shè)備上都能很好的兼容頁面,而不存在為哪一個設(shè)備進行單獨的網(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)跟進,實現(xiàn)了對自家網(wǎng)站的更新。目前,人們對于其核心技術(shù)的認識已經(jīng)形成了共識,設(shè)計如下所示的3個內(nèi)容。

(一)頁面布局設(shè)計

首先頁面的呈現(xiàn)效果,由于移動設(shè)備進行網(wǎng)頁瀏覽發(fā)展時間較短,大部分的網(wǎng)頁布局都是直接移植PC端的顯示布局,這對于移動設(shè)備來說,體驗是相當不友好的,不僅是體現(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)象,極大的增強了頁面元素在網(wǎng)頁中的適應(yīng)性。

(二)針對不同設(shè)備的響應(yīng)方式

對于響應(yīng)式網(wǎng)頁設(shè)計而言,其核心的技術(shù)之一是在不同設(shè)備中做出的相應(yīng)差別式響應(yīng)。基于響應(yīng)式設(shè)計的網(wǎng)頁,其自身會進行設(shè)備屏幕寬度的自動檢測,根據(jù)檢測到的屏幕寬度數(shù)據(jù),會加載預(yù)設(shè)的CSS文件。而加載響應(yīng)的CSS文件,就會使其調(diào)用相應(yīng)的網(wǎng)頁排版方式。通常,對于CSS文件的加載,可以通過HTML標簽進行加載,也可以通過已有的CSS進行加載,可以根據(jù)需求選擇,需要注意的是,即使是在同一CSS文件里面,也存在著不同的CSS規(guī)則,會依據(jù)設(shè)備的不同分辨率選取不同的規(guī)則,這些規(guī)則會改變網(wǎng)頁的呈現(xiàn)方式與呈現(xiàn)效果,比如網(wǎng)頁的背景色等。由于移動設(shè)備的尺寸大小、分辨率和長寬比的形式要比電腦端更為豐富,所以,需要的網(wǎng)頁排版布局的風格也會更多,如果網(wǎng)頁能夠很好的識別每種設(shè)備的特性。然后調(diào)用相應(yīng)的文件來進行匹配,使得在相應(yīng)屏幕上的內(nèi)容呈現(xiàn)效果盡可能達到在PC上一樣的使用效果。

(三)圖片處理

對于一個網(wǎng)站而言,不能局限于單純的文字內(nèi)容,通常也會包含形形色色的圖片。在傳統(tǒng)的PC上,由于早先都是作為唯一優(yōu)化對象,因此設(shè)計者認為傳統(tǒng)的界面已經(jīng)能夠滿足受眾的需要,但是隨著移動互聯(lián)網(wǎng)的發(fā)展,移動閱讀設(shè)備出現(xiàn),其屏幕尺寸小的屬性使得網(wǎng)頁的顯示效果大打折扣,一些網(wǎng)站為了盡可能的減少大幅圖片對小屏設(shè)備顯示面積,通常會相應(yīng)的縮小圖片的大小,甚至是直接將CSS文件的屬性設(shè)置為空,實現(xiàn)圖片的隱藏。從表層進行分析,其已經(jīng)達到了理想的效果,而深入探究發(fā)現(xiàn),雖然圖片被縮小甚至是隱藏,但是經(jīng)過處理的圖片在加載的過程中并不會相應(yīng)的縮小或是消失,仍舊按照原始文件大小下載,不會節(jié)省時間,更不會節(jié)省流量。目前關(guān)于這個問題尚未形成最佳的解決方案,一般的做法是優(yōu)先加載頁面,然就根據(jù)加載好的頁面布局來確定圖片加載的具體排布方式,比如哪邊的圖片可以加載,哪邊的不需要加載,當然,鑒于頁面加載的過程中可能會形成斷點,通常可以在斷點的位置加載圖片。但是,視頻的處理問題上,與圖片的處理方式不同,在小屏幕上播放視頻的體驗不佳,往往只會在小屏幕上提供視頻的鏈接,這樣就不會對頁面加載造成壓力,而在大屏幕上就可以按比例縮放。

三、網(wǎng)頁設(shè)計過程中的阻礙與難點

在很大程度上,響應(yīng)式網(wǎng)頁設(shè)計解決了傳統(tǒng)網(wǎng)頁設(shè)計在移動設(shè)備上的顯示兼容性問題。由于響應(yīng)式設(shè)計理念的提出,很多原本只能在電腦上才能實現(xiàn)的功能和高效的交互方式,現(xiàn)在可以很方便的在手機端實現(xiàn)。事實表明,很多高校的圖書館網(wǎng)頁設(shè)計上都采用響應(yīng)式網(wǎng)頁設(shè)計的方式,并且反饋的效果也很不錯,由此可以看出,響應(yīng)式設(shè)計網(wǎ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ù)基地,往往需要花費更大的精力才能達到目的,而這一切都會增加成本和時間的投入,延長開發(fā)周期與維護難度。

(二)需要針對移動觸屏設(shè)備進行優(yōu)化

在開發(fā)一些移動端的網(wǎng)站,尤其在開發(fā)諸如手機或者平板電腦等小屏設(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)此功能,只有進行系統(tǒ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)站的兼容。