隨著通訊技術(shù)的飛速發(fā)展以及各種移動設(shè)備的快速普及，使用移動設(shè)備瀏覽網(wǎng)頁的需求變得越來越多。如何在不同尺寸的設(shè)備上以一致、合適的方式顯示內(nèi)容和布局，并且要兼顧開發(fā)的效率就成了所有團隊繞不開的問題。響應(yīng)式設(shè)計因此應(yīng)運而生。
響應(yīng)式設(shè)計的概念
響應(yīng)式設(shè)計的概念最早由Ehan Marcotte在2010年5月份的文章 <響應(yīng)式網(wǎng)頁設(shè)計>中提出。 他強調(diào)：頁面可以根據(jù)用戶的設(shè)備環(huán)境，包括系統(tǒng)，分辨率，屏幕尺寸等等因素，進行自發(fā)式調(diào)整，提供更適合當(dāng)前環(huán)境的閱讀和操作體驗，對已有和未來即將出現(xiàn)的新設(shè)備有一定的適應(yīng)能力。可以說響應(yīng)式設(shè)計能夠完美解決文章開頭提到的問題，小到智能手表的屏幕，大到電視顯示屏，只需要一套代碼就能夠完美兼容，實用且高效。
當(dāng)我們搜索有關(guān)響應(yīng)式設(shè)計的資料時卻發(fā)現(xiàn)大多數(shù)教程都是針對前端開發(fā)工程師撰寫的，有著許多難懂的專業(yè)名詞，讓人望而卻步。
以下筆者通過案例，簡單介紹有關(guān)響應(yīng)式設(shè)計的技巧。
響應(yīng)式設(shè)計的技巧
Ehan Marcotte的文章中提到了三個概念：流動布局（Fluid grids）、媒介查詢（Media queries）和彈性圖片（Scalable images）。這些概念原本指的是實現(xiàn)響應(yīng)式的一些技術(shù)手段，從設(shè)計師的角度，我們可以簡化為以下兩點。
一、分段響應(yīng)
通過拖動瀏覽器的寬度，我們會發(fā)現(xiàn)響應(yīng)式網(wǎng)頁會隨寬度的改變自動調(diào)整布局方式。
需要注意的是，每當(dāng)瀏覽器達到一個寬度節(jié)點，網(wǎng)頁布局就會相應(yīng)發(fā)生較大變化，這就是分段響應(yīng)。這里我們又需要注意兩個要點：
– 寬度節(jié)點應(yīng)該如何確定？
– 達到寬度節(jié)點時頁面布局應(yīng)該如何變化？
1.寬度節(jié)點應(yīng)該如何確定？
寬度節(jié)點來源于前文提到的媒體查詢（Media queries），是前端工程師用簡單的方法，來獲取不同設(shè)備的特征，例如設(shè)備的寬度/高度，窗口的寬度/高度，設(shè)備的手持方向，分辨率等。設(shè)計時也可以采用相同的思路，參考網(wǎng)站用戶的設(shè)備分辨率數(shù)據(jù)，比如手機尺寸、平板電腦尺寸及桌面顯示器尺寸，確保常見設(shè)備寬度能夠落入到某一設(shè)計范圍之內(nèi)。
2.達到寬度節(jié)點時頁面布局應(yīng)該如何變化？
頁面布局的變化可以簡單歸納為三點：內(nèi)容增減、布局調(diào)整、樣式調(diào)整。
內(nèi)容增減–當(dāng)瀏覽器寬度較大時，有足夠的空間展示更多的頁面內(nèi)容。隨著瀏覽器寬度的減小，為了使有限的頁面不至于擁擠，就不得不對原有內(nèi)容進行部分隱藏以滿足整體布局的合理性。
布局調(diào)整–如同前文提到的，當(dāng)頁面空間被壓縮時，其布局方式也需要相應(yīng)變化，最常見的就是布局的行列數(shù)發(fā)生改變。
樣式變更–頁面中的有些模塊，例如導(dǎo)航欄等不能簡單的只隱藏部分內(nèi)容來適應(yīng)瀏覽器的變化，這時就需要調(diào)整其樣式，將整個模塊變更為其他形式展現(xiàn)，以方便小尺寸設(shè)備的使用體驗。
總的來說，分段響應(yīng)就是頁面針對不同的瀏覽器寬度展示不同的布局方式。每個組件都可以根據(jù)具體使用場景應(yīng)用不同的變化類型。
二、動態(tài)布局
解決了分段響應(yīng)的規(guī)則后，接下來需要制定瀏覽器在寬度節(jié)點之間變化時，組件該如何變動，即動態(tài)布局。
這里再次搬出Ehan Marcotte的文章所提到的流動布局的概念，原特指以百分比為度量單位的布局技術(shù)實現(xiàn)方式。這里就不對如流動布局、彈性布局、流體柵格等各種概念做一一說明。筆者就此統(tǒng)為一個大的概念：在響應(yīng)式設(shè)計的布局中，不再以像素（px）作為唯一單位，而是采用百分比或者混合百分比、像素為單位，設(shè)計出更具靈活性的布局方式。
三、其他需要注意的點
首先，要注意的是什么情況下適合采用響應(yīng)式設(shè)計？一切設(shè)計的最終目的都應(yīng)該圍繞著產(chǎn)品體驗這一核心。為了做響應(yīng)式設(shè)計而做響應(yīng)式設(shè)計，往往得不償失。
其次，在搞清楚產(chǎn)品本身的核心用戶體驗之后，選取你的用戶群體所使用的硬件設(shè)備，這個時候你應(yīng)該了解每種設(shè)備所使用的場景，設(shè)備使用的環(huán)境和場景是設(shè)計的重要依據(jù)。
最后，并非所有的內(nèi)容都符合不同設(shè)備的使用場景，比如智能手表就不適合展示大量的文本內(nèi)容。你的產(chǎn)品所覆蓋的設(shè)備組當(dāng)中，每種設(shè)備的使用場景不同，應(yīng)該匹配的用戶體驗也不一樣。比如移動端用戶和桌面端用戶的需求就是不同的，場景差異也很大。
以上就是關(guān)于響應(yīng)式設(shè)計的分享，希望對你有用。
