移動端設計究竟要不要用柵格系統？柵格系統為什么在移動端開發中難以應用？不少從事移動端設計的人員可能或多或少都被這些問題困擾過。這篇文章里，作者便做了回答和分析，一起來看看吧。

我們都知道做網頁相關的項目，不管是 C 端的還是 B 端的，往往都會應用響應式布局，用了響應式布局，就肯定要做柵格系統，才能確保響應式的正常執行。

但是，移動端要不要用柵格，怎么用，就成為很多人困擾的問題，我們就用今天這篇分享來解釋。

一、移動端的網格和柵格

了解移動端布局、排版設計就首先得搞明白網格和柵格系統的區別。

首先是網格系統，從安卓早期規范到 Material Design 2 中，谷歌都提倡一套基于 8dp 長寬（后來增加了 4dp）的網格系統。

簡而言之，就是建議設計師在制定組件、按鈕、圖標等元素大小時，以這個網格系統的格子為標準制作，邊緣和參考線對齊，確保元素的尺寸和間距都是8的倍數。

這么做布局雖然很簡單，但不符合國情，以及實際的應用場景以及 iOS 的適配。主要的問題是后者，因為用8建立的網格系統，得畫布本身是8的倍數才能完美適配，比如安卓標準畫布 720P 的 1280*720 長寬。

而多種多樣的安卓設備與屏幕分辨率中，有非常多是不滿足這個條件的，蘋果的手機就更不用說，不是 375，就是 390、393 寬等奇行種……所以這套網格系統是沒人用的。

而柵格系統則和網格系統不同，網格是把畫布等分成若干的大小一樣的格子，用于在格子上方填充內容。而柵格系統則是在畫布中添加參考線，讓內容的布局可以依據參考線來排版。

比如下圖，也是出現在 Material Design 2 中的響應式柵格系統。

它的作用和網頁端的響應式柵格是類似的，柵格的寬度是可變的，模塊會隨柵格的變動做適配。具體的邏輯就不在這里解釋了，大家可以看我以前寫的網頁響應式相關的分享。

安卓在官方規范中提出這套系統，和 Bootstrap 的響應式規則基本一樣，包含了斷點的應用，主要是為了讓產品只用一套代碼在不同端和屏幕上實現樣式排版的適配。

比如現在這么多的折疊屏手機，以及安卓平板，開發者只需要應用這套系統，就可以使用一套代碼實現所有設備、規格的自適應。

想想很美好對不對？但是不做國外的項目，尤其是只針對安卓平臺設計的項目，那么這種柵格系統是沒法應用的，下面我們就會具體解釋下原因。

二、柵格系統的應用難題

柵格系統為什么在移動端開發中難以應用，有多個因素影響，先簡單概括一遍：

1. iOS 系統中不自帶柵格系統
2. 大屏適配不能簡單用響應式
3. 項目內的頁面布局差異過大

問題1. iOS系統中不自帶柵格系統

這個是最致命的，因為我們在UI設計中的主要設計對象是以 iOS 規范為標準的，iOS 中沒有提供這個規范。

理由也很簡單，iOS 設備的規格對比安卓陣營非常少，沒有這么迫切的響應式需求。而早年支持 iPad 端適配的邏輯基本被放棄了，官方顯然也發現強行讓開發者做響應式的設計，還不如 iPad 端直接運行未適配的手機端 APP 或直接開發 iPad 端的 APP，原因下面說明。

問題2. 大屏適配是不適合直接用響應式的

如果你們真的有去了解網頁的響應式，就知道響應式只能應用在非常簡單的布局結構中，如果項目的內容多且雜，那么響應式的適配成本遠遠大于直接開發多個版本。

同理，要讓手機 APP 直接用簡單的響應式規則適配 iPad 端，是非常難用的。因為針對手機設計的布局是基于手機的交互習慣，而 iPad 的交互習慣不一樣，自然會用起來各種別扭。

同時，復雜的項目中會有很多很特殊、花哨的組件設計，這些組件如果要用響應式的規則去適配是非常困難的，得考慮一系列適配邏輯，并在切圖環節中增加很多工作成本。

所以為什么大廠那些做的很復雜的產品都不用響應式來開發應用，直接無縫適配 iPad端？原因就是開發成本太高了，高到寧愿放棄 iPad 端的用戶體驗也不愿意做響應式。

問題3. 項目內的頁面布局差異過大

如果你們有認真對比一些大型產品的界面布局，就會發現不同的頁面，還是不同的模塊，布局是不符合統一原則的。

比如淘寶中的這些頁面，左右的間距是不一致的，或者間距的規格是不同的。

這么做是根據實際使用場景的需要去放棄統一性，而用了響應式規范來做，想針對性調整就沒那么容易了。

以上幾個問題，都是柵格系統在移動端設計中推行的真實阻力，所以即便大廠的產品也不會去用。這不是專業不專業的問題，而純粹是柵格系統是一種解決布局問題的工具，如果它產生更多的問題，要它何用？

那么拋開柵格系統在響應式的使用，僅僅站在平面布局的角度用柵格系統有必要嘛？

我的回復依舊是沒有，網頁會用是因為畫布太大了，如果不使用一定的標準去規范布局和排版，就很難獲得優秀的設計結果。而移動端的空間實在太小了，不需要靠這樣的系統去維持布局的穩定性。

所以在移動端應用設計中，不要被響應式和柵格系統束縛住，只要滿足基本的規范、體驗、視覺需要即可。

三、結尾

這個問題問的人太多了，雖然寫了分享，但還是建議新手要學會從線上的案例找答案。隨便打開手機看幾個常用的 APP，你就會發很多你想要得到的答案就出現了。

后續會繼續更新組件設計的分享，如果還有其它移動端設計的問題也可以在設計群或留言中發出來。

下次再賤~?