一、什么是柵格1. 柵格的由來柵格就是網(wǎng)格，就是這種有規(guī)律的格子。
哈哈，這樣一說是不是就很接地氣了。英文翻譯過來就是網(wǎng)格，至于現(xiàn)在為什么叫柵格就不得而知道。
柵格最早是應(yīng)用于平面設(shè)計中，產(chǎn)生于二十世紀初的西歐，完善于五十年代的瑞士，通過有規(guī)律的網(wǎng)格來指導版面布局。 柵格設(shè)計的在屏幕端的應(yīng)用也十分廣泛，不光為設(shè)計服務(wù)，對響應(yīng)式開發(fā)也起到了很大的作用。雖然開發(fā)小哥說的柵格和我們理解的不太一樣，但也減少了溝通成本。 2. 網(wǎng)格Grid網(wǎng)格是構(gòu)成頁面柵格系統(tǒng)的最小單位。PC端我們一般用8作為網(wǎng)格的最小單位。
為什么用8？ 盡量保持單位是偶數(shù)，這樣在頁面放大或者放大或者縮小時還能保持清晰。在保證偶數(shù)的前提下，使用“ 2、4、6、8、10、12… ”作為最小單位都是可以的。 通常情況下PC端橫向是固定的，縱向是可以滾動的。根據(jù)2019年中國PC端分辨率端統(tǒng)計，“4、8”只有不能被1366整除，其他都可以。由于4過于小，普通用戶從視覺上不容易分辨差別，所以我們選用8作為最小單位。之后所有的數(shù)值都使用8的倍數(shù)。 3.欄Columns和槽Gutters欄（Columns）是呈放內(nèi)容區(qū)域。 PC端通常有12柵格或24柵格，意思就是縱向有12欄或24欄。 槽（Gutters）是兩個欄中間的間距。槽的數(shù)量比欄的數(shù)量少一個。 假設(shè)是柵格寬度是W、欄的寬度是C、槽的寬度是G。有N個欄，就有N-1個槽，則可以推斷出算出W=N*C+（N-1）G。 忘掉 欄+槽=列的概念（個人感覺沒有作用，有不同見解的歡迎討論。）
為什么用12或24欄？ 12欄和24欄都是PC端較常用的，移動端用4欄的居多，分的越細可變化的內(nèi)容越豐富。但過于細也會使頁面變得很碎，差異感和韻律感降低。12或24欄可以被2等分、3等分、4等分、6等分、12等分，還能按 1:2:1 、 1:3:2 、 1:2:2:1……等比例分割，提供了足夠豐富的變化。 以下是京東首頁的截圖，應(yīng)該是采用了12柵格，并且分別采用了2等分、四等分、六等分、2:6:2:2 、 2:10 。
4. 邊距Margin柵格寬度外的邊距，通常做自適應(yīng)的距離，例如：小屏和大屏之間做響應(yīng)，就會改變邊距。
5. 柵格寬度 Container柵格寬度是需要柵格設(shè)計區(qū)域的寬度，不是顯示器寬度。
舉例：假設(shè)我們以1920px的屏幕為畫板作圖、使用24列柵格。設(shè)定欄的寬度為32px4（個原子單位），槽的寬度為16px（2個原子單位）。 則柵格寬度W=24列 x 32欄寬 + 23 列x 16槽寬=1136px，其余寬度做自適應(yīng)處理。 在1920屏寬下如下圖所示：
應(yīng)用原則：
二、為什么用柵格1. 不用柵格設(shè)計行不行？ 行！行，不用柵格沒問題。很多優(yōu)秀作品都沒有刻意的遵守傳統(tǒng)的柵格，反而顯得更加靈動。但是打破規(guī)則前得知道規(guī)則才行。 2. 使設(shè)計更有規(guī)律和邏輯基于柵格設(shè)計，按一定的規(guī)律把文字和圖片排列在頁面之中，使版面不光具有視覺感官的美感，也具有嚴謹?shù)倪壿嫼鸵欢嵚伞?/p> 3. 利于團隊協(xié)作有了統(tǒng)一的柵格標準，就可以解釋為什么“這個寬度要用120px，那個寬度不能用140px……”之類的問題。設(shè)計團隊之間溝通成本就大大降低，同時也能提高團隊作業(yè)的一致性。 4. 響應(yīng)式設(shè)計現(xiàn)在人們使用的設(shè)備不在局限電腦或者手機，用戶可能使用任何尺寸的設(shè)備來訪問我們的設(shè)計。所以我們不能為單一的設(shè)備來設(shè)計，怎么動態(tài)的構(gòu)建我們的設(shè)計、響應(yīng)不同尺寸的設(shè)備，是設(shè)計師在起初就應(yīng)該考慮的。 三、柵格系統(tǒng)如何響應(yīng)的1. 什么是響應(yīng)式設(shè)計通俗的講就是：為了讓設(shè)計在各種尺寸的設(shè)備上都保合理、持美觀，用戶無論用手機、平板、電腦使用我們的產(chǎn)品時都有良好都體驗。檢測到不同的屏幕尺寸的時候改變柵格的一些數(shù)值，變成我們預(yù)先設(shè)計的樣式，這就是響應(yīng)式設(shè)計。 2. 柵格是怎么響應(yīng)的（1）固定柵格 欄和槽的寬度是固定不變的，不隨屏幕的大小而變化。到一定的臨界值的時候柵格列數(shù)會發(fā)生變化。 假設(shè)在我們以1920的屏幕大小為畫板，柵格寬度是1136，看到的如下圖：
在2560的屏幕下看頁面，兩側(cè)的留白就會變大，中間的內(nèi)容保持不變。如下圖：
在1024的屏幕下看頁面，就會出現(xiàn)橫向滾動條，頁面仿佛被截斷一樣。如下圖：
在更小的屏幕下，柵格的列數(shù)會發(fā)生變化。但無論怎么變化，欄和槽的寬度是不變的。如下圖：
在臨界值之間設(shè)計的布局不會改變。具體到什么臨界值柵格的列數(shù)會發(fā)生變化，需要跟開發(fā)說清楚。臨界值設(shè)置多少、設(shè)置多少個臨界值要根據(jù)實際情況來制定。 優(yōu)點：設(shè)計的還原度是最高的，無論在什么什么屏幕下，核心樣式是保持不變的。 缺點：在小屏下會有滾動條。在大屏上左右留白過多，有點浪費空間。 （2）流動柵格 欄的寬度是變化的，隨屏幕的大小而變化。槽的寬度固定不變。到一定的臨界值的時候柵格列數(shù)會發(fā)生變化。 假設(shè)在我們以1920的屏幕大小為畫板，柵格寬度是1136。看到的如下圖：
在2560的屏幕下看頁面，槽的寬度保持不變，欄的寬度發(fā)生改變。如下圖：
在1024的屏幕下看頁面，槽的寬度保持不變，欄的寬度發(fā)生改變。如下圖：
問題來了，這樣一算欄的像素就不但不是偶數(shù)，而且還不是整數(shù)了，怎么辦，屏幕該怎么顯示呢？沒關(guān)系，有的卡片可能是351個像素，有的是356個像素，這樣1像素的差距在屏幕上很難看出差別來，為了在不同大小的屏幕上適配，這1像素是可以忍受的。 需要把子元素內(nèi)的布局樣式，那些是可以變動的地方跟前端說明即可。（例如：當連變化時，卡片內(nèi)的圖標保持左對齊，左邊距不變。文字左對齊，每行的文字數(shù)量自適應(yīng)。） 優(yōu)點：在不同屏幕下會自動放大或縮小，更充分的利用空間。 缺點：由于欄寬是不固定的，樣式可能會發(fā)生變形。文字可能會變成多行或者超長的一行。 （3）混合柵格 在同一頁面中可以分成多個區(qū)域，每個區(qū)域做不同柵格類型。
四、從0建立后臺柵格系統(tǒng)1. 確定柵格的基準根據(jù)自家的業(yè)務(wù)場景定下最小單位和柵格數(shù)量，我們以8為最小原子單位距離，之后所有的數(shù)值是8的倍數(shù)，柵格數(shù)量采用12舉例。 2. 確定柵格區(qū)域后臺系統(tǒng)和網(wǎng)頁不同，往往邏輯復雜、數(shù)據(jù)量大，同時需要獲取、比對很多的信息。 信息以表格、表單居多，所以屏幕的寬度就顯得很重要了，寸土寸金。所以通常選中全部填充的樣式，舍棄兩側(cè)留白的樣式。 我們選擇設(shè)備比例最多1920×1080為畫板。（這里主要將縱向柵格，暫不考慮瀏覽器自身的標簽欄和菜單欄的高度） 制定如下的樣式，數(shù)值僅供參考，照搬的請慎重。
3. 放置內(nèi)容在欄內(nèi)放置內(nèi)容，內(nèi)容不能在開始和結(jié)尾不能在槽里，內(nèi)容的高度也需要保持8的倍數(shù)。
4. 響應(yīng)策略（1）大/小屏幕響應(yīng) 當屏幕變大時，左側(cè)藍色菜單欄保持寬度不變（固定柵格）。右側(cè)柵格區(qū)域的槽保持不變，欄等比例擴大。（流動柵格） 當屏幕變小時，左側(cè)藍色菜單欄保持寬度不變（固定柵格）。右側(cè)柵格區(qū)域的槽保持不變，欄等比例縮小。（流動柵格）
（2）平板響應(yīng) 當屏幕小到平板的尺寸時候，柵格區(qū)的內(nèi)容就無法正常顯示了，十分影響體驗。于是就是改變柵格的數(shù)量，變成6列柵格，同時菜單欄收縮簡要模式，這樣就完成了平板端的適配。
（3）手機響應(yīng) 當屏幕是iPhone8、8P…等手機尺寸時候，柵格區(qū)就改為更少的柵格，同時菜單欄變?yōu)闈h堡按鈕。還可以把一些內(nèi)容做隱藏處理，例如常見的咨詢客服、相關(guān)推薦等。
5. 小結(jié)
作者：Iron設(shè)計邦；微信公眾號 IRON設(shè)計邦 本文由 @Iron設(shè)計邦 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，。 題圖來自Unsplash，基于CC0協(xié)議。 給作者打賞，鼓勵TA抓緊創(chuàng)作！ |
|
|
