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

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

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

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

響應(yīng)式是一種新的網(wǎng)絡(luò)頁(yè)面設(shè)計(jì)布局方式,其概念在2010年由伊?！ゑR科特率先提出,為的是給不同終端前的用戶(hù)帶來(lái)較好的移動(dòng)閱讀與使用體驗(yàn)。這種設(shè)計(jì)方式的理念在于,在充分考慮到用戶(hù)可能會(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è)面效果,為用戶(hù)帶來(lái)更好的使用體驗(yàn)?？偟膩?lái)說(shuō),不管是面向PC端的用戶(hù)還是面向移動(dòng)設(shè)備的用戶(hù),在網(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)式的布局方法,從而避免了此類(lèi)問(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)能夠滿(mǎn)足受眾的需要,但是隨著移動(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ì),由于專(zhuān)門(mén)針對(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è)需要用到的媒體查詢(xún)由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ì)高校門(mén)戶(hù)網(wǎng)站的兼容。