直 敏,高天哲,孫 楊

(盤錦職業(yè)技術(shù)學(xué)院,遼寧 盤錦 124010)

0 引言

社會生活網(wǎng)絡(luò)化是當(dāng)前社會中一個不可避免的網(wǎng)絡(luò)趨勢,也是大數(shù)據(jù)發(fā)展過程中不可忽略的一部分。當(dāng)前網(wǎng)絡(luò)媒介的發(fā)展呈現(xiàn)出了兩種極為不同的趨勢,一方面,小屏移動設(shè)備已經(jīng)成為當(dāng)前網(wǎng)絡(luò)媒介發(fā)展中的主流趨勢,而另外一方面大屏顯示器仍舊在市場中并沒有退出市場,反而普及程度還有所加深。 這兩個不同的趨勢所帶來的一個極為明顯的問題就是在用戶上網(wǎng)時,設(shè)備之間的尺寸差距可謂是越來越大,不同設(shè)備終端其屏幕分辨率差別越來越大,傳統(tǒng)的網(wǎng)頁設(shè)計在當(dāng)前已無法完全滿足需求,而網(wǎng)頁設(shè)計師不可能給每一個設(shè)備都單獨設(shè)計網(wǎng)站,網(wǎng)站開發(fā)者更無法承擔(dān)這樣的高額成本。 這就要求響應(yīng)式網(wǎng)頁設(shè)計確保在不同的移動終端,即無論是電視、電腦、平板、手機等設(shè)備上,都能清晰顯示網(wǎng)頁內(nèi)容,且加載速度更加流暢。

1 響應(yīng)式布局在網(wǎng)頁設(shè)計中的優(yōu)勢與劣勢

響應(yīng)式布局不是為每個終端做一個特定的版本,而是一個網(wǎng)站能夠兼容多個終端,可以為不同終端的用戶提供更加舒適的界面和更好的用戶體驗,其布局結(jié)構(gòu)如圖1 所示。

圖1 響應(yīng)式布局

1.1 響應(yīng)式布局的優(yōu)勢

響應(yīng)式網(wǎng)頁設(shè)計在不同的屏幕上可以自動調(diào)整頁面布局的設(shè)計理念,不僅能夠給用戶帶來更加流暢的體驗,也直接增加了網(wǎng)站的點擊率。 響應(yīng)式網(wǎng)頁設(shè)計,具備多種終端瀏覽的流暢性和高清晰度,使得用戶可以在不同設(shè)備上獲得同樣的體驗,在增強用戶體驗感的同時,能夠確保網(wǎng)頁設(shè)計的質(zhì)量及效果得到極為明顯的提升,切實保障網(wǎng)頁應(yīng)用效果。 響應(yīng)式網(wǎng)頁設(shè)計由于擁有更加獨特的優(yōu)勢,其在全球范圍內(nèi)得到廣泛推廣。 然而在實際操作過程中其仍然存在一定缺陷。為此,設(shè)計人員需要透徹了解其優(yōu)勢與劣勢,才能更好地加以利用。 響應(yīng)式網(wǎng)頁設(shè)計的優(yōu)勢在于其可以根據(jù)用戶終端設(shè)備的尺寸、使用情境以及行為模式進行頁面布局的調(diào)整,以便更好地適應(yīng)在不同設(shè)備端瀏覽頁面的需求,讓播放速度更加流暢、顯示效果更加清晰,更好地適應(yīng)市場發(fā)展的實際需求。 在后續(xù)的維護過程中,響應(yīng)式網(wǎng)頁后臺不會因為某一個新設(shè)備的出現(xiàn)而設(shè)置專門的升級、開發(fā)等煩瑣的流程,極大提升了加載速度,改善了使用體驗。 在后期維護過程中,響應(yīng)式網(wǎng)頁所需要消耗的時間和資金相比于傳統(tǒng)的網(wǎng)頁設(shè)計而言更少。

1.2 響應(yīng)式布局的劣勢

當(dāng)前,響應(yīng)式網(wǎng)頁布局存在極為明顯的劣勢,包括以下兩點:(1)瀏覽器類型支持不足。 由于響應(yīng)式網(wǎng)頁設(shè)計的技術(shù)相對較為新穎和前衛(wèi),如果用戶使用的瀏覽器為IE8 以下,那么用戶在進行網(wǎng)頁瀏覽的過程中,其頁面將無法正常響應(yīng)。 此外,如果該網(wǎng)站的用戶較多,并且仍舊使用的是舊版IE 瀏覽器時,該網(wǎng)站并不適合采用響應(yīng)式設(shè)計方法。 (2)布局范疇局限性極為明顯,響應(yīng)式網(wǎng)頁設(shè)計并不適用于所有類型的網(wǎng)站。例如,一些小型的網(wǎng)頁游戲網(wǎng)站。 如果只是單純對頁面進行響應(yīng)式設(shè)計,那么其內(nèi)容在移動終端使用時,將無法順暢加載出來,顯示效果不盡如人意,該網(wǎng)頁使用響應(yīng)式設(shè)計就失去了意義[1]。

2 響應(yīng)式布局在網(wǎng)頁設(shè)計中的應(yīng)用

在分析響應(yīng)式網(wǎng)頁布局的應(yīng)用時,首先要考慮到響應(yīng)式網(wǎng)頁設(shè)計要求網(wǎng)絡(luò)頁面能夠兼顧PC 端和移動端。 頁面布局可以根據(jù)設(shè)備屏幕的大小進行調(diào)整,并且確保頁面內(nèi)容不會變形,只是布局形式發(fā)生改變。為此,在使用時,響應(yīng)式布局不僅要滿足終端設(shè)備的屏幕顯示要求,而且要達到網(wǎng)頁設(shè)計目標(biāo)中優(yōu)秀的視覺效果,給用戶提供良好的使用體驗,在下一次使用時,能夠提供更優(yōu)質(zhì)的頁面瀏覽和搜索效果,確保在多種設(shè)備端都能以合理的布局展現(xiàn)給用戶。 只有這樣才能給用戶帶來最舒適的體驗。 想要更好地分析響應(yīng)式網(wǎng)頁布局兼顧PC 端和移動端的效果,可以通過圖形按鈕、文字布局、導(dǎo)航等多種元素結(jié)合設(shè)計,通過不同的設(shè)計風(fēng)格了解其應(yīng)用價值以及布局方式[2]。

2.1 媒介查詢

媒介查詢是響應(yīng)式網(wǎng)頁布局的基本方法,這種方式會根據(jù)不同設(shè)備的類型、不同屏幕的寬度以及分辨率對頁面進行最合理的布局。 在使用媒介查詢時,設(shè)計人員可以利用css 代碼第一時間判斷出用戶瀏覽器視口的大小以及用戶瀏覽器所在的區(qū)間,可以針對其所屬區(qū)間進行定義,并且找到相應(yīng)的css 樣式,從而有效控制頁面的元素,使得不同設(shè)備都能夠呈現(xiàn)與自身屏幕相適應(yīng)的最佳頁面布局。 媒介查詢可以了解當(dāng)前設(shè)備的尺寸以及分辨率,并且根據(jù)該設(shè)備的實際情況對網(wǎng)頁進行整體改變,使得彈性布局網(wǎng)頁質(zhì)量得到提升。 彈性布局網(wǎng)頁的視窗單位為百分比,即如果一個頁面左側(cè)有正文區(qū)域,右側(cè)有邊欄,那么兩者的寬度將分別占據(jù)總頁面的70%和25%,而這樣的頁面在PC 端上的分布是相對舒適的,但是在移動端上顯示,則會顯得較為擁擠,媒介查詢存在的目的和作用就是針對這一問題進行判斷。 如果其寬度較寬,則可以選擇70%和25%的比例,而如果寬度不足,則需要調(diào)整設(shè)備顯示的效果,以滿足移動設(shè)備的需求。 以iPhone4 為例,其寬度為320 px,這里可以設(shè)置一個判斷點,在利用媒體查詢時,其規(guī)則為如果頁面小于320 px,則頁面左側(cè)正文區(qū)域和右側(cè)的邊欄需要被其他兩個數(shù)值所覆蓋,分別改為100%和100%,即如果使用iPhone 進行網(wǎng)頁瀏覽,寬度為320 px 能滿足條件,響應(yīng)式頁面所產(chǎn)生的效果則是100%與100%之間的關(guān)系。 為此,左側(cè)的正文區(qū)域和右側(cè)的邊欄會從原本的從左到右橫向并排顯示,變成從上到下的縱向排列。 為此,媒介查詢存在的作用就是根據(jù)不同的設(shè)備調(diào)整顯示效果[3]。 移動端網(wǎng)頁所采用的布局方式是流動布局,而在PC 端,則可以采用固定布局模式。 流式布局是在響應(yīng)式頁面設(shè)計方法出現(xiàn)之前,用來解決不同設(shè)備上頁面布局問題的一種方式,其能夠很好地適應(yīng)各種不同比例的設(shè)備顯示屏。 選擇應(yīng)用流式布局,是以百分比為度量單位實現(xiàn)頁面布局的,突破了原本頁面布局中存在的諸多限制。例如,利用流式布局圖案,可以根據(jù)設(shè)備屏幕的尺寸自動調(diào)節(jié)各種不同視窗的寬度,使得網(wǎng)頁能夠充分地利用寬度頁面空間,保證信息的顯示效果。 大屏幕上不會出現(xiàn)兩側(cè)大面積空白的情況,相比流式布局而言,媒體查詢技術(shù)更加簡單易用,這也是當(dāng)前選擇響應(yīng)式布局方案時更多采用媒體查詢技術(shù)的主要原因。

2.2 文字以及圖片的布局

隨著頁面布局彈性的出現(xiàn),文字和圖片作為頁面最為重要的信息,需要以更加靈活的方式適應(yīng)當(dāng)前頁面布局的變化。 在大多數(shù)情況下,利用rem 來代替?zhèn)鹘y(tǒng)的像素px,能夠讓文字在短時間內(nèi)適應(yīng)縮放的需求。其中rem 的大小是根據(jù)節(jié)點元素的字體大小而形成的,1rem 等于〈html〉的標(biāo)簽字體大小。 在瀏覽器中,一般情況下,開發(fā)人員會將字體大小默認(rèn)為16 px,而如果將〈html〉標(biāo)簽的front—size 設(shè)置為50%,其帶來的最終結(jié)果相當(dāng)于將頁面整體的字體大小設(shè)置為8 px,通過這種方式能夠推算出1rem 等于8 px。 rem 代替像素px 是通過改變〈html〉的標(biāo)簽實現(xiàn)front—size 值來改變rem 值,這就導(dǎo)致一旦頁面發(fā)生了改變,則頁面中所有以rem 為單位的樣式元素都會發(fā)生相應(yīng)的改變,使得頁面無論是放大還是縮小都更加方便,同時也能夠滿足用戶的使用需求。 不僅文字能夠在短時間內(nèi)適應(yīng)頁面變化的需求,而且圖片也會根據(jù)頁面的布局進行自動響應(yīng)。 自動響應(yīng)的圖片是通過JavaScript 腳本第一時間對所有正在使用的設(shè)備進行檢測,計算出該設(shè)備的屏幕分辨率,并且根據(jù)已經(jīng)檢測到的結(jié)果,對相應(yīng)的圖片進行加載,形成一個定向的虛擬目錄,也就是說,當(dāng)服務(wù)器在接收到請求后,會將最適合該屏幕的分辨率的圖片及時地反映出來。 無論是媒介查詢、流式布局或是彈性圖片,其最終的目的都是為響應(yīng)式網(wǎng)頁服務(wù),確保網(wǎng)頁效果能夠在眾多設(shè)備上展現(xiàn)出最佳的效果,其整體效果給人的感受是良性的,并且能夠滿足頁面的設(shè)計需求[4]。

結(jié)合媒介查詢彈性文字和圖片使用方式的分析,響應(yīng)式網(wǎng)頁設(shè)計中常見的幾種布局方式,能夠發(fā)現(xiàn)其包括斷點切換布局、彈性布局以及混合布局、單頁滾動布局等。 所謂斷點切換布局是以像素為基本頁面單位,根據(jù)主流設(shè)備的類型和尺寸來確定斷點,也就是說,使用斷點布局模式設(shè)計出幾套不同的布局寬度,然后根據(jù)瀏覽設(shè)備的屏幕尺寸大小選擇合適的布局方式。 以某頁面為例,該頁面布局為720 px×990 px。

(1)利用頁面斷點為該頁面設(shè)計出3 套不同寬度的布局且當(dāng)設(shè)備屏幕尺寸小于720 px、設(shè)備屏幕尺寸在720 px 到990 px 之間,設(shè)備大屏幕尺寸大于990 px時,這3 種不同寬度的布局需要分別進行匹配,以提高網(wǎng)頁設(shè)計師的整體效率。 但在使用斷點切換布局模式時,設(shè)計人員能發(fā)現(xiàn)這種布局模式的優(yōu)勢在于可以根據(jù)不同的主流設(shè)備確定相對固定的斷點,能夠利用方便模式在使用時最快達到設(shè)計效果,但是由于設(shè)備更新的速度較快,用戶在使用這種模式時仍舊會出現(xiàn)不適應(yīng)該模式的設(shè)備,甚至無法進行良好匹配的設(shè)備[5]。

(2)在使用彈性布局時,這種模式是以百分比為頁面最基本的設(shè)計單位,該頁面具有一定的彈性,能夠適應(yīng)一定尺寸范圍內(nèi)設(shè)備屏幕的瀏覽器,并且能將設(shè)備屏幕空間加以有效利用,其最終目的是展現(xiàn)出最佳的、良好的設(shè)計效果。

(3)混合布局。 混合布局的頁面單位與其名稱一致,是由像素和百分比共同構(gòu)成的。 混合布局同樣能夠在最短時間內(nèi)適應(yīng)一定尺寸范圍內(nèi)的屏幕,并且在屏幕上展現(xiàn)出良好的頁面效果。

(4)單頁布局。 這種布局可以更好地解決PC 端和移動端存在的布局問題。 所謂單頁布局,就是一種滾動式布局,屬于特殊的頁面設(shè)計方法。 這種布局結(jié)構(gòu)非常簡單,僅需要打開一個窗口,所有的內(nèi)容都會在單個頁面上呈現(xiàn),選擇單頁滾動式布局,最大的優(yōu)勢在于可以在短時間內(nèi)吸引用戶的注意力。 這是由于用戶所有的注意力均會放在正在展示的信息上,這種方式能夠讓瀏覽的效果更佳,并且瀏覽的體驗感更好,能夠在瀏覽過程中,第一時間抓住用戶的注意力,使得瀏覽體驗更加具有條理性,并且效率較高。 在單頁設(shè)計中,多數(shù)情況下,其導(dǎo)航利用的同樣是極簡的設(shè)計風(fēng)格,客戶也可以直接隱藏導(dǎo)航,這種方式可以確保頁面整體更加簡潔,在瀏覽頁面時,即使導(dǎo)航?jīng)]有被用戶發(fā)現(xiàn),用戶也不會因為缺少導(dǎo)航而迷失方向。 在使用時,用戶有自己的瀏覽習(xí)慣,大多數(shù)人都會習(xí)慣自上而下地瀏覽,即便沒有導(dǎo)航提示,用戶也會下意識地向下滾動頁面[6]。 為此,單頁滾動布局能夠提高用戶使用體驗,真正滿足當(dāng)前用戶對頁面布局的使用要求。

3 結(jié)語

綜上所述,當(dāng)前我國處于互聯(lián)網(wǎng)時代,各種不同的智能設(shè)備均已接入互聯(lián)網(wǎng),無論是傳統(tǒng)的臺式電腦,還是可移動的平板、手機、智能手表,或是新一代的智能設(shè)備等,都需要通過互聯(lián)網(wǎng)才能使用,而響應(yīng)式頁面是解決當(dāng)前不同設(shè)備打開網(wǎng)頁,界面效果相對較差這一問題最有效、最好的方式。 對于響應(yīng)式頁面設(shè)計而言,它不僅是一種解決設(shè)備差異性的方法,更是一種進行頁面設(shè)計的全新思路,其發(fā)展并不局限于現(xiàn)有的設(shè)計理念以及設(shè)計方法。 在未來,響應(yīng)式頁面設(shè)計能夠兼容層出不窮的全新產(chǎn)品,也可以有效地解決好網(wǎng)站跨設(shè)備問題,給予用戶最佳的體驗。