響應(yīng)式網(wǎng)站UI設(shè)計(jì)探討

王旭 朱光

摘 要：隨著互聯(lián)網(wǎng)技術(shù)的發(fā)展，尤其是移動(dòng)端的快速發(fā)展，互聯(lián)網(wǎng)應(yīng)用極大的方便了我們的生活。響應(yīng)式UI給web前端開發(fā)人員帶來了很多的便利，能夠快速的滿足PC端和移動(dòng)端的網(wǎng)頁構(gòu)建需求。

關(guān)鍵詞：HTML5;響應(yīng)式;UI設(shè)計(jì)

中圖分類號(hào)：TP393.092 文獻(xiàn)標(biāo)識(shí)碼：A

隨著越來越多的智能移動(dòng)設(shè)備加入互聯(lián)網(wǎng)中，移動(dòng)互聯(lián)網(wǎng)成為了互聯(lián)網(wǎng)的重要組成部分。如何能夠在不同的設(shè)備上有效的展示信息，應(yīng)對(duì)不同的設(shè)備尺寸成為UI設(shè)計(jì)的重要內(nèi)容。響應(yīng)式UI設(shè)計(jì)的出現(xiàn)，使得網(wǎng)頁頁面自動(dòng)適應(yīng)不同的分辨率和頁面尺寸，能夠響應(yīng)不同類型的用戶操作，為移動(dòng)設(shè)備提供了更好的體驗(yàn)。

1 使用響應(yīng)式網(wǎng)站UI設(shè)計(jì)的原因

即使是相同PC平臺(tái)，不同顯示器的分辨率仍然是千差萬別，頁面的展示效果將不可預(yù)知，網(wǎng)頁帶給用戶的顯示體驗(yàn)也無法預(yù)知。手機(jī)、ipad、智能電視、智能可穿戴設(shè)備等智能設(shè)備正在不斷增加，設(shè)備的尺寸、分辨率多種多樣，沒有辦法設(shè)置一個(gè)統(tǒng)一的標(biāo)準(zhǔn)。同時(shí)用戶的操作方式也在不斷的豐富，鼠標(biāo)、手寫筆、鍵盤、手指等操作方式的革新也給設(shè)計(jì)者在設(shè)計(jì)交互方面帶來了很大的難度。

響應(yīng)式UI設(shè)計(jì)，能把不同類型的屏幕當(dāng)成頁面的容器，讓頁面像液體一樣在容器中流動(dòng)起來，屏幕的尺寸不同雖然影響頁面的展示形態(tài)，但是不影響頁面的美觀度和內(nèi)容的展示。頁面中的每一個(gè)塊、每一個(gè)圖片、每一個(gè)元素都是靈活可變的，壓面的排版將不受顯示屏大小的限制。同時(shí)能夠接受用戶不同的交互方式并予以響應(yīng)，使用戶的交互體驗(yàn)統(tǒng)一。

2 實(shí)現(xiàn)響應(yīng)式網(wǎng)站UI設(shè)計(jì)的關(guān)鍵技術(shù)

2.1 媒體查詢

媒體查詢技術(shù)在CSS2中就有所體現(xiàn)，如設(shè)計(jì)打印樣式等，在 CSS3中媒體查詢可以讓我們根據(jù)設(shè)備類型和設(shè)備特性對(duì)不同的媒體配置不同的CSS樣式，從而展示出不同的效果。媒體查詢支持IE9以上的主流瀏覽器，如chrome、firefox等，同時(shí)兼容各種智能移動(dòng)設(shè)備，實(shí)現(xiàn)PC端、手機(jī)端、平板端、智能設(shè)備等無障礙瀏覽。

2.2 Javascript前端語言

Javascript（簡(jiǎn)稱“JS”）是一種具有函數(shù)優(yōu)先的輕量級(jí)、解釋型、即時(shí)編譯型的高級(jí)編程語言。Javascript（JS）是一種古老的前端語言，隨著互聯(lián)網(wǎng)技術(shù)的發(fā)展，JS又煥發(fā)了青春，JS具有容易上手、跨平臺(tái)的特性，使其在各種終端大行其道。同時(shí)基于JS的各種框架如JQUERY、VUE.JS等使JS 操作網(wǎng)頁界面元素，響應(yīng)事件等變的更加的簡(jiǎn)單。

3 響應(yīng)式網(wǎng)站UI的設(shè)計(jì)原則

響應(yīng)式UI設(shè)計(jì)首先要摒棄傳統(tǒng)的固定寬度網(wǎng)頁設(shè)計(jì)，要使網(wǎng)頁能夠自動(dòng)適應(yīng)各種設(shè)備的分辨率，同時(shí)能夠響應(yīng)不同的操作如手指拖動(dòng)、縮放等。響應(yīng)式UI設(shè)計(jì)應(yīng)該遵循以下原則：

3.1 摒棄固定大小、寬度等設(shè)計(jì)

減少使用像素等固定大小寬度，使用百分比等來定義塊狀元素和圖片的大小寬度，確保塊狀元素和圖片等多媒體元素能夠完整的顯示，并可以根據(jù)屏幕的大小進(jìn)行縮放。

3.2 內(nèi)容塊可伸縮和可自由流動(dòng)

內(nèi)容塊在設(shè)計(jì)的一定規(guī)則上可以自動(dòng)縮放，如在1 600*900的分辨率和1 024*768分辨率會(huì)根據(jù)屏幕的大小自動(dòng)縮放寬度，如占屏幕寬度的100%等，在不影響整體顯示的情況下，頁面的寬度將變小，但整體的布局也相應(yīng)的縮小展示。

當(dāng)頁面變的足夠窄的情況，如屏幕寬度<768px時(shí)，通過縮放已經(jīng)不能完美的展示內(nèi)容，那么我們可以改變塊的大小，如將一行顯示4列轉(zhuǎn)變?yōu)?行顯示4列，在保證頁面美觀的情況下，通過下移兩行讓頁面變長(zhǎng)的方式來實(shí)現(xiàn)流動(dòng)的效果。

3.3 網(wǎng)頁元素能夠根據(jù)頁面隱藏或顯示

網(wǎng)頁元素的顯示、隱藏可以根據(jù)屏幕分辨率自行調(diào)節(jié)，將有助有保證頁面的整體美觀性。如在屏幕寬度>1 200px的時(shí)候，一個(gè)內(nèi)容塊里面的內(nèi)容將被詳實(shí)的展示出來，當(dāng)屏幕寬度逐步縮小到小于768px時(shí)，文章塊的內(nèi)容如果完全展示的話，會(huì)將該文字塊無限拉長(zhǎng)，影響系統(tǒng)美觀。所以文章塊的內(nèi)容需要根據(jù)父級(jí)元素的大小確定將要顯示的文字?jǐn)?shù)量，對(duì)原有的文字進(jìn)行截?cái)嗷蛘咄耆[藏，用戶可以通過點(diǎn)擊查看詳情進(jìn)而獲得更詳細(xì)的內(nèi)容，從而保證頁面的整體美觀度。

3.4 菜單欄可以收縮和展開

菜單欄承載著網(wǎng)站的功能引導(dǎo)和頁面重定向的功能，響應(yīng)式UI設(shè)計(jì)的菜單欄同樣也應(yīng)具有響應(yīng)式的特質(zhì)。響應(yīng)式菜單同樣可以根據(jù)頁面的分辨率進(jìn)行自我調(diào)節(jié)，如當(dāng)頁面寬度大于768px時(shí)，菜單欄將以橫向水平分布的形式展現(xiàn)，這樣展示的直觀、大方;當(dāng)頁面寬度小于768px時(shí)，菜單欄將收縮為一個(gè)按鈕或一張小圖片，用戶通過點(diǎn)擊按鈕的形式展開下拉菜單欄浮動(dòng)層，從而在不破壞移動(dòng)端頁面布局和結(jié)構(gòu)的情況下完成菜單欄功能引導(dǎo)和頁面重定向的功能。

4 響應(yīng)式網(wǎng)站UI設(shè)計(jì)的優(yōu)缺點(diǎn)分析

4.1 響應(yīng)式網(wǎng)站UI設(shè)計(jì)的優(yōu)點(diǎn)

首先，響應(yīng)式UI設(shè)計(jì)最大的優(yōu)點(diǎn)在于，服務(wù)商只需要開發(fā)一個(gè)網(wǎng)頁就可以完成對(duì)多種設(shè)備訪問的支持，避免了為多種移動(dòng)設(shè)備開發(fā)客戶端的形式來推廣自己的服務(wù)。同時(shí)響應(yīng)式網(wǎng)站UI設(shè)計(jì)可以做到多終端一后臺(tái)，通過一個(gè)網(wǎng)站后臺(tái)的維護(hù)和更新，即可完成對(duì)多個(gè)終端的更新和維護(hù)，從而有效的節(jié)約開發(fā)和維護(hù)的時(shí)間和成本。

其次，響應(yīng)式UI設(shè)計(jì)有很多優(yōu)秀的開源框架可供選擇，開發(fā)時(shí)間和人力成本會(huì)得到有效的縮短和控制。目前流行的框架有Bootstrap、Frozen UI、Layui、Amaze UI、Pintuer等，用戶可以通過簡(jiǎn)單的學(xué)習(xí)就可以通過開源框架的網(wǎng)格系統(tǒng)快速的搭建響應(yīng)式UI設(shè)計(jì)的網(wǎng)站。

第三，響應(yīng)式UI設(shè)計(jì)的網(wǎng)站SEO友好。響應(yīng)式網(wǎng)站支持多種終端，用戶訪問關(guān)注的URL不斷的積累，對(duì)搜索引擎更為友好。

4.2 響應(yīng)式網(wǎng)站UI設(shè)計(jì)的缺點(diǎn)

首先，基于響應(yīng)式UI設(shè)計(jì)的網(wǎng)頁在不同設(shè)備上的體驗(yàn)效果較難統(tǒng)一。響應(yīng)式UI設(shè)計(jì)在設(shè)計(jì)之初，需要對(duì)頁面在不同設(shè)備上的展示效果進(jìn)行細(xì)致的測(cè)試和評(píng)估，如何能夠保障用戶在不同的設(shè)備上獲得相同的用戶體驗(yàn)是響應(yīng)式UI設(shè)計(jì)的難點(diǎn)，比如一副大圖在不同設(shè)備上分別以什么的形式展現(xiàn)，文字的大小在不同設(shè)備上都要加以區(qū)別，哪些設(shè)備展示哪些元素，都是在設(shè)計(jì)的時(shí)候要考慮的內(nèi)容。前端設(shè)計(jì)師需要花大量的時(shí)間對(duì)不同的設(shè)備進(jìn)行測(cè)試、修改，對(duì)不同的設(shè)備訂制相應(yīng)的CSS和JS代碼。

其次，響應(yīng)式設(shè)計(jì)的網(wǎng)站加載速度相比沒有優(yōu)勢(shì)。響應(yīng)式網(wǎng)站需要借助CSS和JS實(shí)現(xiàn)響應(yīng)式內(nèi)容布局，在加載的時(shí)候勢(shì)必要加載更多的JS 和CSS文件，從而導(dǎo)致加載速度減慢。

5 結(jié)論

響應(yīng)式網(wǎng)站UI設(shè)計(jì)是一種全新網(wǎng)站設(shè)計(jì)理念，可以使用戶以較少的成本獲得多種設(shè)備的訪問支持，同時(shí)響應(yīng)性的網(wǎng)頁設(shè)計(jì)仍然在不斷變化，不斷創(chuàng)新，值得我們持續(xù)關(guān)注。

參考文獻(xiàn)：

[1]余躍泓.基于彈性盒子的響應(yīng)式網(wǎng)頁布局[J].信息與電腦，2020，32（10）：181-183.

[2]張麗.以HTML 5+CSS3+jQuery為基礎(chǔ)的響應(yīng)式布局網(wǎng)頁設(shè)計(jì)探討[J].計(jì)算機(jī)產(chǎn)品與流通，2019，36（11）：195+198.

[3]吳永娜，楊春旭，許佳南.基于html5+css3的網(wǎng)頁自適應(yīng)布局設(shè)計(jì)[J].電腦知識(shí)與技術(shù)，2019，15（28）：242-244.

[4]陸郁.淺談CSS3 Media Query的使用方法[J].科技資訊，2019，17（27）：22+24.

[5]趙彥杰，陸冕.柵格系統(tǒng)方法在網(wǎng)頁界面設(shè)計(jì)中的應(yīng)用研究[J].包裝工程，2019，40（18）：95-100+107.