王旭 朱光

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

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

中圖分類號：TP393.092 文獻標(biāo)識碼：A

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

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

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

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

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

2.1 媒體查詢

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

2.2 Javascript前端語言

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

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

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

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

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

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

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

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

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

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

3.4 菜單欄可以收縮和展開

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

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

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

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

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

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

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

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

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

5 結(jié)論

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

參考文獻：

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

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

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

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

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