Hi，我是彩云。網格系統，這個設計方法大家應該都聽過，但很多人在實際項目中用到的不多，原因有很多：可能是項目太趕覺得麻煩，可能是自己不夠理解原理不會用，還有些人覺得是用了反而設計被束縛了。
但其實從我的經驗來看，這個設計方法用好了會非常高效，能快速幫你做出正確的設計決策，輸出高質量設計稿。今天這篇文章，應該是把這個方法講的最通俗易懂的了，大家可以收藏并認真看看，文章不難，聰明的你肯定可以學會。
剛接觸一個新的項目可能會讓人感到興奮，但同時也就意味著你將從一個空白的頁面開始。問題來了，我們該如何開始？或先做什么呢？
將基本框架和布局按規則放在一張空白頁面上，能提供進一步設計頁面的結構支撐。當涉及到交互設計（網站、登陸頁面、APP 等）時，基本布局可以使用網格系統進行編排。網格系統將幫助你布局好元素之間的高寬比例及間距，使信息設計更加美觀易讀。
網格系統是由一系列水平和垂直交叉參考線構成，將頁面分割成若干個有規律的列或格子，再以這些格子為基準，控制頁面元素之間的對齊和比例關系，從而搭建出一個具有高度秩序性的頁面框架。
網格系統的目的并不是為了限制你的設計，而是為了幫助你有序布局，讓各個頁面元素之間更加規范且統一。使整個頁面更加規范整潔，易于用戶理解，提高用戶體驗。
1. 設計布局排版更快，更容易
擁有一個你可以遵循的結構會讓一切更加效率。它有助于以正確的方式調整所有元素的大小，測量它們之間的水平和垂直距離，并在不同的形狀和大小之間建立平衡。當你擁有將所有內容連接在一起的結構基礎時，制作像素完美的設計就會容易得多。
2. 頁面整潔且統一
在網格系統中創建元素可以使整個設計具有秩序和節奏感，便于用戶閱讀。用戶喜歡和諧一致的設計，不喜歡分散且凌亂的信息碎片。即使是元素之間的統一間距這樣的小細節也可以使設計具有更強的凝聚力。
3. 響應式設計
在這個時代，響應式設計意味著任何數字創作(產品)都可以跨越多個終端設備——從小型智能手機到大屏幕電視。在所有這些情況下，設計應該看起來像素完美緊湊、優雅且易于理解。網格可以幫助你重新安排所有元素在所需的屏幕尺寸，但同時保持差不多的布局結構。
4. 設計師和開發合作更輕松
當你將設計稿交接給開發時，如果希望設計能被開發人員高度還原的話，那么設計稿中最好用到網格系統，開發看到設計后立即就懂得如何調整元素之間的間距和大小，以及它們如何在一個部分之后連接到另一個部分。網格可以幫助設計師和開發之間在沒有直接指導或不必要的混亂的情況下更好地達到期望的結果。
列通常被定義為網格系統在垂直方向上的塊。它們是從頁面頂部到底部具有相同大小的垂直部分，它們的目的是規定寬度和每行元素的數量。最常用的系統是 PC 端的 12 列網格、平板電腦的 8 列網格和移動設備的 4 或 2 列網格。單個列單元的寬度通常在 60-80px 之間，這將進一步確定所需的容器寬度。
列的圖形顯示
行是從頁面左側到右側的相同大小的水平單位。它們很少與列網格系統一起使用，因為元素的高度通常由它們的內容量來定義。
水槽是列和行之間相同大小的空白空間，提供了呼吸空間并幫助定義元素之間的相等距離（水平和垂直）。它們的大小通常為 10-30 px。
水槽圖形顯示
邊距（或容器邊距）是指頁面左側和右側、網格列之外的空白區域。它們為包含的元素提供了呼吸的空間，并與屏幕尺寸一起縮小，直到下一個斷點。在 PC 端和平板電腦上，它們的大小取決于列網格系統的寬度。對于移動設備上，它們的寬度范圍在 10-20 像素之間。
側邊距的圖形顯示
這是最著名的網格系統，有一個有效的數學解釋。數字 12 很容易被 1、2、3、4、6 和 12 整除，這為設計多種尺寸的元素提供了很大的靈活性。
此外，開發人員通常使用 Bootstrap 網格，它也是基于 12 網格系統，它創建了我們的自適應生態系統。還有更多類型的網格，比如 8 列網格，無水槽網格等等，但是我們將主要關注 12 列網格的示例和規則。
12 列網格中元素大小的示例
1. 將元素放入列內，并在元素之間留出相等的呼吸空間。不要將元素延伸到水槽中。
水平間距的注意事項
2. 不要忘記水平上下間距并盡量保持一致，特別是對于重復元素。
相同的垂直間距
3. 卡片或圖像等盒狀元素很容易在網格內定義，但處理開放的元素有時會很棘手。因此，在某些情況下需要添加額外的內部填充以避免它們看起來擠在一起。
內邊距的注意事項
4. 父元素中較小的元素不受網格規則的約束。只要父元素被成功定位，它里面的元素就可以有自己的布局。
父元素中的較小元素不遵循網格規則
5. 對于某些頁面，也不必總是使用所有 12 列。如果沒有足夠的內容，或者它視覺上看起來感覺更好，例如使用 10 或 8 欄(從 12 欄中)就可以了。這尤其適用于頁面有大量文字內容，因為從頁面的一邊到另一邊全是文字內容距離太長對于閱讀體驗來說會比較差，因為它將更難閱讀和定位。
Microtica(https://microtica.com/）網站就是利用的 12 網格系統其中的 8 列設計出來的頁面
6. 響應式通常的適配路徑是從大屏幕上的 12 列網格，到小筆記本上的 8 列網格，再到移動設備上的 4 列或 2 列網格。當從大屏幕切換到小屏幕時，要注意水槽的大小，因為它們應該比大屏幕上的小。如果你在更大的屏幕上設置為 30px，那么在移動端 10 或 15px 就足夠了。
響應式柵格示例
偶爾，“跳出網格”被認為是正確的做法。當你確保所有東西都在網格內并且都對齊后，不要害怕讓部分元素從網格中跳出來，讓設計更有設計感。
打破網格規則的一些示例
1）頭部元素
如果頭部元素超出了網格的邊界，它可能會看起來更好。只是要注意不要將元素(如 logo 或菜單)放置得離頁面邊緣太近。你可以通過在兩邊設置至少 50px 的邊距來實現這一點。
Lexi Home(https://lexihome.io/）網頁示例
2）特色模塊
當其他一切元素都被適當地組織起來時，這些全寬部分通過打破節奏來產生更好的效果。這些部分中的一些內容仍然可以遵守規則。
MapLabs
3）裝飾元素
為設計增加美學價值的形狀和形式可以在頁面的任何地方放置。來自頁面外部，有時幾乎沒有碰到網格，或者在一些元素之間或后面。它們被放置在那里是為了讓設計更有趣，而不是被限制在網格線內。
Slack’s website
4）跳出網格系統的圖片
這是一個常見的例子，圖像沒有一個固定的矩形形狀，或者如果一些元素超出了圖片。這讓他們在視覺上更有吸引力，因為他們從人群中脫穎而出。這也適用于只占屏幕一半的圖像，而另一半是文字。
Lexi Home
5）其他情況
當你真正理解并適應網格時，一個全新的視角將會打開。你將開始到處“打破規則”，而設計仍然會看起來有條理和平衡。只要努力更深入地學習網格系統，它就會告訴你什么時候應該堅持使用它，什么時候可以讓某些部分從網格中突破!
實際工作中，你可能需要一些時間來適應網格系統，并遵守它的規則，同時保持創造性和出色的視覺設計。然而，我可以肯定地說，網格系統是迄今為止我在設計學習過程中學到的最好的東西。它給了我可以遵循的指導方針，但同時，它允許我在每個設計中編織自己的觀點，同時也考慮到開發者的觀點。三全其美的設計方法，非常值得學習并掌握。
彩云注：分享一個小技巧，在 sketch 中也很方便的使用網格設置，在視圖-畫布-布局設置（或按快捷鍵 control+command+L）中可以設置網格參數，然后打開顯示布局（或按快捷鍵 control+L），可以直接設置網格，如下圖所示
歡迎關注作者的微信公眾號：「彩云譯設計」
復制本文鏈接 文章為作者獨立觀點不代表優設網立場，未經允許不得轉載。
熱評 Sylvie Z