給設計師講透柵格——看這一篇就足夠了

時間：2023-09-28 23:54:01 | 來源：網(wǎng)站運營

時間：2023-09-28 23:54:01 來源：網(wǎng)站運營

給設計師講透柵格——看這一篇就足夠了：最近做批采商家后臺一期的項目時遇到了一個問題，沒有模版可套的時候，設計咋做？模版是什么，是基于前人的工作成果，縫縫補補修修改改做設計，不經(jīng)意間設計難度就降低了很多。這次做一個新的pc后臺，沒有現(xiàn)成的組件模板套進去，我就無了，慌了，怎么對齊？模塊做多大？怎么才好看？

我的心路歷程：沒導航>居中處理>三個模塊從上到下排>看看規(guī)范的柵格是怎么定義的>就這么做吧先...

當然最后的結果是我們也要加上導航，也沒有居中處理。但在這個過程中，我意識到了從0到1做設計的時候，柵格是個好東西，在很多模凌兩可邏輯弱的設計中，除了“美觀度”這種說辭外，你可以說，這是按照柵格做的！是增加設計邏輯性，更容易說服人的一種方式?？戳藷o數(shù)網(wǎng)文，請教了部門大神發(fā)芽老師以及跟前端大哥聊了一下他們的工作方式以后，我決定要寫一篇東西來總結一下，柵格是什么，柵格怎么用，并立志寫成一篇全網(wǎng)最通俗易懂的柵格說明文。

從網(wǎng)格聊起

柵格，是發(fā)源于平面設計中網(wǎng)格的一種網(wǎng)頁設計工具。簡單了解一下網(wǎng)格，有助于我們接下來理解柵格。網(wǎng)格，簡單講就是把一個頁面分割成既定數(shù)量的方塊，設計內(nèi)容按照這些方塊來進行布局，對齊。我們可以把這些方塊理解為基礎單元，一個頁面被分成一定數(shù)量的這樣的單元，在填充內(nèi)容進去時，我們跟合作團隊溝通的語言就不再是從這個圖片寬高多少，文本多長時換行這樣數(shù)據(jù)維度，而是這個內(nèi)容占了幾個單元?；A單元成了設計的度量衡。如下圖。有的圖片占據(jù)1個單元，有的圖片占據(jù)4個單元，這樣做有什么好處？1，對齊。網(wǎng)格是一個很好的對齊的手段，非常省力。2，版面布局。重要的需要突出的部分占更多個的單元，需要弱化部分的占據(jù)更少的單元，設計就有了起始點，同時能在調(diào)整布局時完美的兼顧整潔有序。3，設計的理由。審美是個主觀的事，當設計師遭遇各方大哥們的挑戰(zhàn)說你這個圖再大一丟丟這個地方再進去點（天知道這個一丟丟是多少?。?，你可以有理有據(jù)的拿出網(wǎng)格這樣一個規(guī)范的設計工具來battle。

由此，我們可以通過網(wǎng)格，來給工作原理一脈相承的柵格下定義：

從功能角度：柵格是讓設計更嚴謹?shù)墓ぞ?，柵格是設計師跟外部溝通的工具。

從屬性角度：柵格是一種布局的方式。

再細分到互聯(lián)網(wǎng)行業(yè)，柵格還是設計跟前端溝通的工具。

細說說柵格

在互聯(lián)網(wǎng)語境下，柵格可以解釋為，以規(guī)則的網(wǎng)格陣列來指導和規(guī)范網(wǎng)頁中的版面布局以及信息分布。由于網(wǎng)頁縱向是無限空間，可以采用間距規(guī)則來約束。而橫向是固定尺寸，1920，1440，960等，我們有必要遵照柵格規(guī)范來合理的布局。劃重點：網(wǎng)格，布局，信息分布。類似網(wǎng)格以方塊作為基礎單元，柵格是以列作為元單位。如下圖。

原理講清楚了，接下來需要講講柵格怎么使用。柵格有三個基本元素，小列，間隙，邊距。

小列。簡單說，小列就是盛放內(nèi)容的區(qū)域，元素就放在這里。小列就是元單位，我們跟外界對話的語言就變成了：這個卡片，這個圖片占了幾個小列而不是多少像素。

如果小列緊密排列密不透風，填充的內(nèi)容就會非常擁擠，因此，我們需要間隙。

間隙。間隙又稱水槽，是兩個小列中間的間距。水槽的作用就是分隔內(nèi)容讓頁面通透的，因此，水槽中不能填充內(nèi)容，即內(nèi)容一定是從小列開始，小列結束。水槽位于兩列小列之間，因此，水槽數(shù)量是小列數(shù)量-1。（這點理解不了的小朋友去回顧一下小學數(shù)學之植樹問題）

（小列+間隙=列的概念我實在不知道有什么用，忘記冗余的知識吧，也歡迎討論。）

設置柵格時，水槽數(shù)值固定，畫面的松散通過調(diào)整小列的數(shù)量實現(xiàn)。網(wǎng)頁內(nèi)容多而細的時候需要更多的小列來讓頁面更加細分，提供給我們更多的布局組合。如下圖。畫面有12小列時，你可以根據(jù)信息量自由選擇6×2,4×3,3×4這樣不同的組合，布局會更加機動靈活，適配性高。列數(shù)多列寬（小列的寬度）自然就小。當你內(nèi)容很少，太多的列數(shù)也大可不必，4列，6列就可以滿足使用。但在很多時候，同公司的產(chǎn)品內(nèi)容密度差異不會特別大，為了設計的統(tǒng)一性，列數(shù)，列寬也可以是固定的。

邊距。邊距也稱為外水槽，是內(nèi)容寬度之外的空白區(qū)域。通常做自適應的距離。例如小屏和大屏之間做響應，就會改變邊距。移動設備的邊距通常為16～32px，在平板電腦和PC端，這個間距通常會差異很大。

柵格實踐

理論講完了，現(xiàn)在說說如何實踐柵格。除去一些柵格插件，我們可以自己在sketch里自己定義。路徑：視圖>畫布>布局設置。

以移動端375屏幕為例，邊距我們定義為16，總寬是我們刪除掉左右邊距32之后的數(shù)值343，列數(shù)可以自己定義，或者根據(jù)公司的規(guī)范，移動端一般為8或者12，PC端和平板端自由度較大，4，8，12，24都是可以被接受的。間距寬度就是水槽，一般也是固定的，移動端一般為8，4也可以接受，PC端和平板端可以是8，16，24，32等等，具體根據(jù)自己信息布局的疏密度來判斷。這些數(shù)值是需要我們計算輸入的，最后的列寬軟件會自己計算出來。

講到這里，你以為你會柵格了嗎？不，你不會。不信大家可以計算一下，按照我舉的那個例子，列寬，他有問題。

[總寬（343）-水槽總寬度（8*11）]/12=?

人工計算列寬是小數(shù)?。?！sketch直接把其四舍五入成最近的整數(shù)了。

列寬出現(xiàn)小數(shù)是非常正常的，固定這么多數(shù)值最后再用除法，沒小數(shù)才怪。但完全沒問題，我們只需要按照整數(shù)處理就好，因為，回顧一下前文，我們根本不需要考慮像素的事，我們的對話語言是，這個卡片，這個圖片占了多少個列！柵格的元單位是小列，我們只需要定義好內(nèi)容中每個模塊所處的列的個數(shù)，前端同學也只會關心這個東西占了幾個列，在整個屏幕中比例如何，像素什么的，他們才不管。事實上，在實際工作中，軟件會自動把這些小數(shù)給攤平，一定會出現(xiàn)有的列多一個像素有的列少一個像素這樣的情況，對于一個像素這樣的差異屏幕上肉眼根本看不出來，只要模塊之間和內(nèi)部是對齊的，和諧的，這就足夠了。

響應式布局和自適應布局

響應式即同一套設計，在不同屏幕尺寸及不同端的展示問題。自適應布局是前端會對不同端寫好幾套設計，后臺會讀取屏幕尺寸然后調(diào)用不同的設計。這其實是跟前端同學的工作息息相關，作為設計師了解一些之后能夠更好的提高自己設計的適配性，同時更好的跟前端同學溝通。

講解之前，需要先引入一個概念，斷點，即隨著屏幕尺寸的縮放設計布局發(fā)生變化的點。如圖。

在響應式布局和自適應布局中，水槽的值一般是固定的，列寬可以變化也可以固定，列數(shù)（小列的數(shù)量）會變化。舉個栗子 ：假設三張卡片分別放在PC端的四列上，平板電腦由于寬度不夠只有三列，則其會顯示兩張卡片，并把第三張卡片進行換行顯示在第二行上。

前端布局的框架邏輯跟柵格有點像但又不完全一樣，我們沒必要了解太深。簡單說布局模式有三種，固定網(wǎng)格，流動網(wǎng)格，混合網(wǎng)格。

固定網(wǎng)格

小列和水槽的寬度是固定不變的，變化的是列數(shù)。當屏幕不斷縮小，設計元素不會有任何變化，頁面會先被裁掉一部分，出現(xiàn)橫向滾動條。直到到了臨界點，會出現(xiàn)內(nèi)容元素的換行，布局改變。再達到一個臨界點，設計的布局又會再次變化。邊距會隨著屏幕的放大縮小而改變。

設計師的任務：具體到什么臨界值柵格的列數(shù)會發(fā)生變化，需要跟開發(fā)說清楚。臨界值設置多少、設置多少個臨界值。

優(yōu)點：設計的還原度是最高的，無論在什么什么屏幕下，核心樣式是保持不變的。

缺點：在小屏下會有滾動條，給瀏覽帶來麻煩，在大屏上左右留白過多，會浪費空間。

流動網(wǎng)格

水槽寬度不變，列寬與列數(shù)會變化。因為列寬變了，即填充內(nèi)容的容器變窄（寬）了，設計元素自然會動態(tài)的放大縮小。到了斷點時會換行，布局也會變化。

設計師的任務：跟前端說明元素的布局樣式，對齊方式，哪些邊距要固定，那些是可以變動的。

優(yōu)點：在不同屏幕下會自動放大或縮小，更充分的利用空間。

缺點：由于列寬是不固定的，樣式可能會發(fā)生變形，設計還原度不高。

混合柵格

混合網(wǎng)格，顧名思義，就是混合了固定網(wǎng)格和混合網(wǎng)格的做法。

跟前端溝通下來，用哪種形式他們會有自己的判斷，設計師也可以提前思考一步，交付給前端的時候更好溝通一些。總的來說，除了需要寫死一些元素的時候他們會關注具體像素，比如導航，一般都是寫死的，在更多時候為了自適應他們更關注的還是比例，列數(shù)。即作為設計師去糾結間隔幾個像素，圖片長寬多少沒有意義，不同屏幕下都會改變的。重要的是要關注內(nèi)容在屏幕中所占的百分比，這是柵格最大的意義。

關于柵格的其他

1.不是所有的元素一定要遵照柵格對齊

柵格是一個大的布局方式，在小的模塊內(nèi)部，依然可以有很大的自由度來讓設計更靈活。如圖，大的模塊按照柵格來對齊，在內(nèi)部可以自由的布局。父級是舒適的對齊的，子級當然可以靈活一些，因為整個元素實際上是在一個不可見的，更大的模塊中。

2.水槽中不放內(nèi)容

柵格應該是小列起小列止，可以跨越水槽但不能止于水槽。因為水槽是畫面的留白，是不同內(nèi)容元素間的分隔，終止在水槽中畫面還怎么呼吸？




3.可以去除邊距，從列開始布局柵格

成熟的B端產(chǎn)品，導航和狀態(tài)欄都是有固定規(guī)范，前端在開發(fā)的時候都會寫死，因此自由區(qū)域只有內(nèi)容區(qū)。而導航和狀態(tài)欄跟內(nèi)容區(qū)的間距一般都能固定下來，這就相當于邊距了，因此我們可以直接在內(nèi)容區(qū)0邊距布局柵格，從小列起始。




寫后感：我是一個有點偏執(zhí)的人，一個事情想不明白我就不想開始，寫這個總結前前后后想了兩周，查了很多資料，輸出的過程太痛苦了?，F(xiàn)在也不覺得自己就完全明白了柵格，但徹底明白點啥多難啊，不跟自己較勁了，開心一點。寫文的過程是痛苦的，但收獲是頗豐的，總結梳理是盡了全力的，內(nèi)容是嚴謹?shù)模ūM力嚴謹），我覺得也夠了，也歡迎大家批評指正，一起交流進步！




參考文章：

看不懂不會用的柵格系統(tǒng)，這篇幫你徹底掌握它

Responsive grid https://designsystem.quickbooks.com/bolt/responsive-grid/

Responsive layout grid https://material.io/design/layout/responsive-layout-grid.html#columns-gutters-and-margins

實例講解：平面設計中的網(wǎng)格系統(tǒng)，怎么用？https://zhuanlan.zhihu.com/p/37392801

交互學姐密絲楊，vx：gardern1 歡迎跟我交流～