行業動態響應式在網頁設計中的應用

發布：2019-03-07 12:51:25 瀏覽：5399

互聯網技術發展到今天,為了能夠更好地適應社會發展的需要,人們把關注的焦點放在移動互聯網技術的發展。但是大多數的網頁開發基本都是基于原來的PC端的設計模式,呈現出的頁面布局也與PC端無異,只是將其等比例的縮小,然而這種網頁布局在小屏設備上的使用表現并不理想,并且顯示分辨率低、系統平臺不穩定,針對不同的系統和分辨率的設備分別進行圖書館網頁的定制顯然是不切實際的,但是隨著響應式網頁設計概念的提出,問題便有了新的解決辦法,可以為不同設備終端前的用戶帶來良好的使用體驗。對于大部分的高校而言,其校園門戶網站都是在很早之前開發的,沒有定期的維護與更新,導致在手機等便攜式移動終端的訪問體驗不理想,現在大部門高校的圖書館網頁在手機端訪問時并不能識別出手機,仍然是以電腦界面的頁面布局呈現,可用性非常低,極大的降低了學生的使用欲望和使用頻率。畢竟,對學生而言,想要隨時隨地有臺電腦訪問學校圖書館網站是不現實的,但是幾乎每個大學生都有智能手機,手機已經成為大學生最為依賴的工具和排名第一位的上網設備,所以,基于響應式思維設計的高校圖書館網頁可以更加方便大學生在手機、平板上訪問,為大學生帶來更好的移動使用體驗。

一、概念解讀與設計原則

響應式是一種新的網絡頁面設計布局方式,其概念在2010年由伊桑·馬科特率先提出,為的是給不同終端前的用戶帶來較好的移動閱讀與使用體驗。這種設計方式的理念在于,在充分考慮到用戶可能會使用的設備的特性,如分辨率大小、系統差異、屏幕長寬比等,對頁面的排布與圖片的大小進行集中式設計,再根據終端特性的不同,智能的選擇頁面排布方式,呈現出極佳的頁面布局效果。當然,設計網頁時本著移動設備優先級高的原則進行,其主要表現在如下兩個方面:第一個是需要更注重考慮移動設備本身的特性,鑒于不同的移動設備的多樣性與差異性,需要優先照顧這些設備的顯示效果,針對性的優先設計。第二是設計時遵循漸進式的設計思想,按照設備顯示大小,逐步優化顯示效果,比如在較小的設備上優先突出主要的內容,忽略次要信息的顯示,隨著設備尺寸的增大,可以相應的增加一些信息顯示。另外,在進行網頁設計的過程中,針對不同版本的瀏覽器,需要根據其特性進行設計,比如針對高級的瀏覽器可以相應的增加頁面效果,為用戶帶來更好的使用體驗。總的來說,不管是面向PC端的用戶還是面向移動設備的用戶,在網頁設計時,需要考慮到圖片大小的自由切換、分辨率的自動調節等,這樣做的目的是在不同的設備上都能很好的兼容頁面,而不存在為哪一個設備進行單獨的網頁設計這種費事費時的做法,這就是響應式網頁設計的優勢。

二、網頁設計的核心技術

響應式網頁設計理念提出至今,經過了幾年的發展,這套設計理念發展的已經比較成熟,大部分的主流網頁都已經跟進,實現了對自家網站的更新。目前,人們對于其核心技術的認識已經形成了共識,設計如下所示的3個內容。

(一)頁面布局設計

首先頁面的呈現效果,由于移動設備進行網頁瀏覽發展時間較短,大部分的網頁布局都是直接移植PC端的顯示布局,這對于移動設備來說,體驗是相當不友好的,不僅是體現在操作上的不方便,而且就顯示效果來說也非常的差,很難讓受眾適應,久而久之造成了讀者在移動設備端的體驗不理想。響應式網頁設計采取了流動式的布局方法,從而避免了此類問題。流動布局,不同于一般的固定布局,二者存在的區別如下,所謂固定布局,顧名思義,其頁面顯示的左右寬度是固定的,以px作為其寬度單位。流式布局則不同,其頁面的左右寬度并不會為固定長度而限制,它是一種相對的頁面寬度,其單位是百分比,這里的百分比指的是頁面寬度與其所在元素的比值。簡而言之,相較于傳統固定式的網頁排布,流式布局的網頁排布具備靈活性和自主適應性,其網頁布局的寬度會根據屏幕的大小自動的做出相應的改變,保證不會發生頁面溢出的現象,極大的增強了頁面元素在網頁中的適應性。

(二)針對不同設備的響應方式

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

(三)圖片處理

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

三、網頁設計過程中的阻礙與難點

在很大程度上,響應式網頁設計解決了傳統網頁設計在移動設備上的顯示兼容性問題。由于響應式設計理念的提出,很多原本只能在電腦上才能實現的功能和高效的交互方式,現在可以很方便的在手機端實現。事實表明,很多高校的圖書館網頁設計上都采用響應式網頁設計的方式,并且反饋的效果也很不錯,由此可以看出,響應式設計網頁在相當長的一段時間內都會是最佳的網頁設計方式。即便如此,響應式網頁設計在實際的開發過程中還是暴露出了一些問題,在一定程度上阻礙了它的發展,如何較好的解決這些問題顯得非常重要,它將決定其以后的發展態勢。以下羅列存在的一些常見問題。

(一)時間成本投入的增加

傳統的網頁設計,由于專門針對的是大屏的電腦設備,可以很好的顯示內容,網頁設計的主要內容都被直接呈現在頁面,在系統內部不存在一些隱形的設計,但是響應式網頁設計不同,它是為了解決多設備的兼容性問題、分辨率、小屏優化問題,所以設計的工作量非常大,常常一個界面需要設計多種排布格式以便在實際應用中可以隨著設備的改變做出相應的呈現。雖然在一個設備上并不會全部用到,但是都必須將其設計好并儲存在網站的內部,而這看似額外的設計必然會增加初期的項目時間投入。據統計,在一個響應式的網頁設計項目中,初期所耗費的成本投入超過了總成本的10%-20%。對于高校的圖書館而言,由于其本身的學術特殊性,為了盡可能的構建最前沿的技術基地,往往需要花費更大的精力才能達到目的,而這一切都會增加成本和時間的投入,延長開發周期與維護難度。

(二)需要針對移動觸屏設備進行優化

在開發一些移動端的網站,尤其在開發諸如手機或者平板電腦等小屏設備的網頁時,需要充分考慮便捷性。傳統的鍵鼠操作可以很容易實現的操作轉到這些小屏設備上是只能依靠其觸屏功能來實現,但是由于觸屏可以提供的交互方式極為有限。原先依靠鍵鼠可以輕易實現的操作在觸屏上就會變得繁雜,低效,甚至有一些特殊的功能靠觸屏可能都無法實現,就比如電腦端的懸停功能,在觸屏上暫時不能實現。為了實現同樣的功能,在觸屏設備上據需要花費更多的心思來設計并實現。所謂的響應式網頁設計,更多的工作或者說設計的重心其實是在針對小屏觸摸設備的優化,如果其網頁在移動端設備上能有比肩電腦端的交互體驗,由此可以看出網頁設計非常成功。

(三)瀏覽器的版本兼容性存在問題

在實際的使用中,我們漸漸發現,傳統的瀏覽器對于基于響應式設計的網頁并不友好。在IE8代之前的瀏覽器上都是不支持打開響應式設計網站的,究其原因在于響應式網頁需要用到的媒體查詢由CSS3實現,而在IE8之前,是不支持此項功能。要想實現此功能,只有進行系統升級。當然,也可以通過加載一些特殊文件解決。事實上,我們經常會發現,利用現在的瀏覽器去登陸高校的一些網頁,或多或少存在一些兼容性問題,比如無法輸入內容,無法顯示內容,無法觸發功能按鍵等等,需要一系列繁雜的設置方式才能在現在的瀏覽器上正常的使用高校的網站。即便如此,很多高校依然沒有意識到如何更新自己的網站,而是通過修改瀏覽器的一些隱形設定,來實現對高校門戶網站的兼容。