近期在做web后臺(tái)頁面設(shè)計(jì)，之前的設(shè)計(jì)稿均是基于1920x1080分辨率設(shè)計(jì)的，但是實(shí)際用戶很多是使用1280分辨率的電腦和筆記本，而之前的設(shè)計(jì)稿直接運(yùn)用的話，在小屏?xí)袧L動(dòng)條，需要針對(duì)小屏進(jìn)行適配。
之前對(duì)響應(yīng)式設(shè)計(jì)和柵格屬于一知半解，此次詳細(xì)了解了一下，填了幾個(gè)之前認(rèn)識(shí)不足的誤區(qū)，也感覺柵格和響應(yīng)式設(shè)計(jì)并不是萬能的。
一、響應(yīng)式的目的
二、柵格的目的
三、僅web端的適配
一、響應(yīng)式的目的
響應(yīng)式是2010年推出，主要目的是為了滿足PC — 平板 — 手機(jī)的適配，分辨率跨度較大。
響應(yīng)式布局的三大核心：媒介查詢——根據(jù)當(dāng)前分辨率和可視區(qū)域判斷所處區(qū)間；流式布局——在區(qū)間之間自動(dòng)變換寬度；彈性圖片——圖片縮放保持不變形。
響應(yīng)式的優(yōu)點(diǎn)在于：方便改動(dòng)，因?yàn)樵O(shè)計(jì)時(shí)都是基于一套的。
響應(yīng)式的缺點(diǎn)在于1.需要同時(shí)加載多套CSS，影響加載速度。2.響應(yīng)式最初的目的是從web端降到移動(dòng)端并保證體驗(yàn)，換句話說，實(shí)際移動(dòng)端的體驗(yàn)是類似web端的，完全比不上一開始就基于移動(dòng)端設(shè)計(jì)的。
因此響應(yīng)式在2015-2017年比較火爆，個(gè)人感覺最近幾年開始減少(一個(gè)比較明顯的趨勢(shì)就是網(wǎng)上響應(yīng)式相關(guān)的文章大多是17年左右的，近兩年的文章大多是對(duì)以前文章的復(fù)制黏貼或者總結(jié)）。隨著web端的衰弱和移動(dòng)端的興起，更多公司傾向于為APP端單獨(dú)進(jìn)行設(shè)計(jì)，給用戶更好的體驗(yàn)。
二、柵格的目的
如果要做響應(yīng)式，就需要基于柵格。但不做響應(yīng)式的話，柵格不是必須的，而且柵格對(duì)于開發(fā)和設(shè)計(jì)是有區(qū)別的。
對(duì)開發(fā)者而言柵格是實(shí)現(xiàn)動(dòng)態(tài)布局的手段，類似于百分比布局，實(shí)際需要提前溝通是否引入了bootstrap等。iview和ant design均采用了bootstrap4的規(guī)范，柵格的斷點(diǎn)是1600,1200，992等。柵格主要是針對(duì)盒子的，盒子里的內(nèi)容并不強(qiáng)制柵格。
對(duì)設(shè)計(jì)師對(duì)于柵格的理解源自平面設(shè)計(jì)中的柵格，核心思想是比例。運(yùn)用柵格的目的是得到一種統(tǒng)一性和韻律性的美感，另一方面也有依據(jù)，更容易規(guī)范化。但是設(shè)計(jì)時(shí)往往基于某一分辨率，不容易兼顧多種分辨率。而運(yùn)用柵格后，雖然盒子的比例固定，但內(nèi)容的比例可能會(huì)隨著分辨率變化而失調(diào)，導(dǎo)致不美觀。
因此一方面在具體落地中視角的不同就容易造成偏差，最終影響還原度，繼而增加溝通成本，另一方面柵格更適合多列結(jié)構(gòu)的組件化頁面。設(shè)計(jì)時(shí)盡量多考慮開發(fā)的實(shí)際效果，并且局限于柵格束住了手腳。
三、僅web端的適配
web端的適配有如下的發(fā)展歷史：靜態(tài)布局、流式布局+彈性布局、響應(yīng)式布局。
靜態(tài)布局：用px做單位，設(shè)立min-width。小于最小寬度時(shí)出現(xiàn)滾動(dòng)條，大于寬度時(shí)內(nèi)容居中加背景。
流式布局：寬度采用百分比，高度和文字采用px。比較常見的例子如qq郵箱，阿里云后臺(tái)，百度控制臺(tái)。
缺點(diǎn)是如果屏幕寬度跨度太大，那么大分辨率和小分辨率的樣式可能會(huì)差得很多，1280分辨率顯得偏擁擠而1920以上分辨率顯得太空太散。
一種解決辦法是其中某些內(nèi)容的間距采用固定px而不是百分比。
彈性布局：采用em或者rem，這樣高度和文字也會(huì)縮放。比較常見的比如騰訊視頻，騰訊新聞。
采用@media查詢分辨率，在1280，1440這兩個(gè)斷點(diǎn)切換font-size從而導(dǎo)致整個(gè)版面縮放。而在斷點(diǎn)之間采用流式布局。
響應(yīng)式布局：根據(jù)分辨率設(shè)置斷點(diǎn)，在斷點(diǎn)之間采用靜態(tài)或流式布局。斷點(diǎn)的切換可以變換font-size，也可以改變頁面布局（比如4列變3列）。
結(jié)論：后臺(tái)設(shè)計(jì)一般不考慮移動(dòng)端適配，因此個(gè)人建議后臺(tái)設(shè)計(jì)優(yōu)先考慮流式布局。如果流式布局在1280和1920分辨率難以協(xié)調(diào)，則考慮響應(yīng)式布局。在1440加入斷點(diǎn)，改變布局或者縮小font-size。
