什么是響應(yīng)式網(wǎng)頁設(shè)計，其設(shè)計規(guī)范及三大要點介紹
分類: 問答
常識詞典
編輯 : 常識
發(fā)布 : 11-24
閱讀 :279
響應(yīng)式布局可以為不同終端的用戶提供更加舒適的界面和更好的用戶體驗，而且隨著目前大屏幕移動設(shè)備的普及，用“大勢所趨”來形容也不為過。隨著越來越多的設(shè)計師采用這個技術(shù)，我們不僅看到很多的創(chuàng)新，還看到了一些成形的模式。 一、什么是響應(yīng)式？ 響應(yīng)式布局是Ethan Marcotte在2010年5月份提出的一個概念，簡而言之，就是一個網(wǎng)站能夠兼容多個終端——而不是為每個終端做一個特定的版本。這個概念是為解決移動互聯(lián)網(wǎng)瀏覽而誕生的。響應(yīng)式布局可以為不同終端的用戶提供更加舒適的界面和更好的用戶體驗，而且隨著目前大屏幕移動設(shè)備的普及，用“大勢所趨”來形容也不為過。隨著越來越多的設(shè)計師采用這個技術(shù)，我們不僅看到很多的創(chuàng)新，還看到了一些成形的模式。 響應(yīng)式網(wǎng)頁設(shè)計考慮到多平臺、多種屏幕尺寸的情況，可以為不同終端的用戶提供更加舒適的界面和更好的用戶體驗。當(dāng)你不知道用戶使用什么設(shè)備，不知道用戶的屏幕尺寸時，又想達(dá)到較優(yōu)布局，那么可以采用響應(yīng)式設(shè)計。響應(yīng)式網(wǎng)頁設(shè)計就是一個網(wǎng)站能夠兼容多個終端。 二、響應(yīng)式的技術(shù)實現(xiàn)？ 響應(yīng)式網(wǎng)頁設(shè)計由流體布局、媒介查詢、彈性圖片三種技術(shù)實現(xiàn)。 1、流體布局 原特指以百分比為度量單位的布局技術(shù)實現(xiàn)方式。在響應(yīng)式設(shè)計的布局中，不再以像素（px）作為唯一單位，而是采用百分比或者混合百分比、像素為單位，設(shè)計出更具靈活性的布局方式。 2、媒介查詢 媒體查詢可以讓你根據(jù)在特定環(huán)境下查詢到的各種屬性值——比如設(shè)備類型、分辨率、屏幕物理尺寸及色彩等——來決定應(yīng)用什么樣的樣式。通過使用媒介查詢，可以獲取到設(shè)備及設(shè)備的特性，及時的響應(yīng)布局方案，從而解決之前在單純的布局設(shè)計中遺留的問題。 3、彈性圖片 伴隨布局的彈性，圖片作為信息重要的形式之一也必須有更靈活的方式去適應(yīng)布局的變化。擴大研究范圍：除了圖片，還應(yīng)該包括圖標(biāo)、圖表、視頻等信息內(nèi)容的響應(yīng)方式。 三、圖例展示 四、響應(yīng)式的優(yōu)缺點 優(yōu)點： 1、面對不同分辨率設(shè)備靈活性強能夠快捷解決多設(shè)備顯示適應(yīng)問題 2、開發(fā)成本低，門檻低Native APP：Objective-C or Java – 學(xué)習(xí)成本高Hybrid APP： 外殼+Web APP，需安裝。響應(yīng)式Web APP：HTML5+JS+CSS – 門檻低，極易上手，迭代快 3、跨平臺和終端且不需要分配子域雖然可通過監(jiān)測用戶UA來判斷用戶終端后做跳轉(zhuǎn)，但它還是分配了多個域，而響應(yīng)式無需監(jiān)測用戶UA沒有域的切換，只需根據(jù)終端類型來適配不同的功能模塊與表現(xiàn)樣式，它是跨平臺和終端的，1頁面適配多終端。 PC – http://qzone Mobile – http://m.qzone 響應(yīng)式：PC & Mobile – http://qzone 無需跳轉(zhuǎn) 4、本地存儲Web App可以利用本地存儲的特性將重要和重復(fù)的數(shù)據(jù)保存在本地，避免頁面的重復(fù)刷新，減少重要信息在傳輸過程中被泄露，增量傳輸修改內(nèi)容。 缺點： 1、加載需要一定的時間 雖然，它不是一個大問題，在響應(yīng)式設(shè)計中，需要下載一些看起來并不必要的HTML/CSS。除此之外，圖片并沒有根據(jù)設(shè)備調(diào)整到合適大小，而這正是導(dǎo)致加載時間加倍的原因。 2、優(yōu)化搜索引擎 對于響應(yīng)式Web設(shè)計，為搜索引擎確定關(guān)鍵字不是一件容易的事。因為相比一般桌面用戶，移動用戶多采用不同的關(guān)鍵字，修改標(biāo)題及其他事項都比較困難。 3、時間花費 開發(fā)響應(yīng)式網(wǎng)站是一項耗時的工作。如果你計劃把一個現(xiàn)有網(wǎng)站轉(zhuǎn)化成響應(yīng)式網(wǎng)站，可能耗時更多。如果你想要一個響應(yīng)式網(wǎng)站，最好從草圖開始重新設(shè)計。
