響應式網站UI設計探討

王旭 朱光

摘 要：隨著互聯網技術的發展，尤其是移動端的快速發展，互聯網應用極大的方便了我們的生活。響應式UI給web前端開發人員帶來了很多的便利，能夠快速的滿足PC端和移動端的網頁構建需求。

關鍵詞：HTML5;響應式;UI設計

中圖分類號：TP393.092 文獻標識碼：A

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

1 使用響應式網站UI設計的原因

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

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

2 實現響應式網站UI設計的關鍵技術

2.1 媒體查詢

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

2.2 Javascript前端語言

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

3 響應式網站UI的設計原則

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

3.1 摒棄固定大小、寬度等設計

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

3.2 內容塊可伸縮和可自由流動

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

當頁面變的足夠窄的情況，如屏幕寬度<768px時，通過縮放已經不能完美的展示內容，那么我們可以改變塊的大小，如將一行顯示4列轉變為2行顯示4列，在保證頁面美觀的情況下，通過下移兩行讓頁面變長的方式來實現流動的效果。

3.3 網頁元素能夠根據頁面隱藏或顯示

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

3.4 菜單欄可以收縮和展開

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

4 響應式網站UI設計的優缺點分析

4.1 響應式網站UI設計的優點

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

其次，響應式UI設計有很多優秀的開源框架可供選擇，開發時間和人力成本會得到有效的縮短和控制。目前流行的框架有Bootstrap、Frozen UI、Layui、Amaze UI、Pintuer等，用戶可以通過簡單的學習就可以通過開源框架的網格系統快速的搭建響應式UI設計的網站。

第三，響應式UI設計的網站SEO友好。響應式網站支持多種終端，用戶訪問關注的URL不斷的積累，對搜索引擎更為友好。

4.2 響應式網站UI設計的缺點

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

其次，響應式設計的網站加載速度相比沒有優勢。響應式網站需要借助CSS和JS實現響應式內容布局，在加載的時候勢必要加載更多的JS 和CSS文件，從而導致加載速度減慢。

5 結論

響應式網站UI設計是一種全新網站設計理念，可以使用戶以較少的成本獲得多種設備的訪問支持，同時響應性的網頁設計仍然在不斷變化，不斷創新，值得我們持續關注。

參考文獻：

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

[2]張麗.以HTML 5+CSS3+jQuery為基礎的響應式布局網頁設計探討[J].計算機產品與流通，2019，36（11）：195+198.

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

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

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