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

網(wǎng)頁標題：行業(yè)動態(tài)響應式在網(wǎng)頁設計中的應用
當前URL：http://jinyejixie.com/news/151609.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站設計公司、網(wǎng)站排名、自適應網(wǎng)站、用戶體驗、微信公眾號、面包屑導航

廣告

聲明：本網(wǎng)站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經(jīng)允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯(lián)