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