響應式布局在網頁設計中的應用

直 敏,高天哲,孫 楊

(盤錦職業技術學院,遼寧 盤錦 124010)

0 引言

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

1 響應式布局在網頁設計中的優勢與劣勢

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

圖1 響應式布局

1.1 響應式布局的優勢

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

1.2 響應式布局的劣勢

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

2 響應式布局在網頁設計中的應用

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

2.1 媒介查詢

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

2.2 文字以及圖片的布局

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

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

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

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

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

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

3 結語

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