我們常常說：內(nèi)容就像水，可適應(yīng)于各種各樣的媒介。

    作為設(shè)計(jì)師，剛接觸多媒介的頁面設(shè)計(jì)時(shí)，很容易對(duì)內(nèi)容如何在媒介與媒介之間流動(dòng)無從下手、閱讀了大量的資料也很難抓住重點(diǎn)。所以今天我根據(jù)自己的實(shí)戰(zhàn)經(jīng)驗(yàn)，幫助大家理解和制作響應(yīng)式網(wǎng)頁。

響應(yīng)式網(wǎng)頁設(shè)計(jì)是什么？

    響應(yīng)式網(wǎng)頁設(shè)計(jì)，通常縮寫為RWD（Responsive Web Design）。

    響應(yīng)式網(wǎng)頁設(shè)計(jì)是一種網(wǎng)頁設(shè)計(jì)的技術(shù)，這種設(shè)計(jì)可使網(wǎng)站在不同的設(shè)備（從桌面電腦顯示器到移動(dòng)電話或其他移動(dòng)設(shè)備）上瀏覽時(shí)對(duì)應(yīng)不同分辨率皆有適合的呈現(xiàn)，減少用戶進(jìn)行縮放、平移和滾動(dòng)等操作行為。

RWD實(shí)現(xiàn)的原理是什么？

    網(wǎng)頁的頁面由 1. APP bar、2. Navigation、3. Body 組成。

cr: Google material design

    當(dāng)每個(gè)部分都有相應(yīng)的響應(yīng)規(guī)則時(shí)，就可以保證頁面的流動(dòng)性。例如在保持在屏幕里的占比恒定、不同范圍內(nèi)對(duì)應(yīng)不同的恒定值。

設(shè)計(jì)師如何設(shè)計(jì)RWD規(guī)則？

1、選定解析度

    在設(shè)置規(guī)則之前，我們首先需要確定承載我們產(chǎn)品的大多是哪些載體，是移動(dòng)手機(jī)？還是網(wǎng)頁？確定好主要載體之后，就可以選擇一些該載體的常見解析度做圖。

    該網(wǎng)站提供當(dāng)今最常用的解析度的統(tǒng)計(jì)數(shù)據(jù)：

    pc端：1920*1080（21.7%）、1366*768（20.1%）、1536*864（9.7%）

    移動(dòng)平板端：768*1024（43.6%)、1280*800（7.2%）、800*1280（5.7%）

    移動(dòng)手機(jī)端：360*640（11.3%）、414*896（7.8%）；360*780（6%）

2、設(shè)計(jì)節(jié)點(diǎn)和規(guī)則

    了解常用解析度之后，并不需要將所有常用尺寸都畫一遍，只需要根據(jù)業(yè)務(wù)需要來設(shè)計(jì)節(jié)點(diǎn)和規(guī)則即可：

     節(jié)點(diǎn)

     有兩個(gè)比較重要節(jié)點(diǎn)：pc尺寸減小到移動(dòng)平板尺寸的節(jié)點(diǎn)、移動(dòng)平板尺寸減小到移動(dòng)手機(jī)尺寸的節(jié)點(diǎn)。

     規(guī)則

    根據(jù)網(wǎng)頁的內(nèi)容，設(shè)置規(guī)則。例如頁面的邊距：

    設(shè)置固定邊距，中間的內(nèi)容隨屏幕尺寸變化而變化

     又或者設(shè)置內(nèi)容在屏幕里的百分比，內(nèi)容的布局大小隨屏幕尺寸的變化而變化