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

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

分享文章：行業(yè)動(dòng)態(tài)響應(yīng)式在網(wǎng)頁設(shè)計(jì)中的應(yīng)用
網(wǎng)站網(wǎng)址：http://bm7419.com/news9/151609.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供定制開發(fā)、手機(jī)網(wǎng)站建設(shè)、域名注冊(cè)、微信公眾號(hào)、ChatGPT、網(wǎng)頁設(shè)計(jì)公司

廣告

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