我們都知道做網(wǎng)頁(yè)相關(guān)的項(xiàng)目，不管是 C 端的還是 B 端的，往往都會(huì)應(yīng)用響應(yīng)式布局，用了響應(yīng)式布局，就肯定要做柵格系統(tǒng)，才能確保響應(yīng)式的正常執(zhí)行。

但是，移動(dòng)端要不要用柵格，怎么用，就成為很多人困擾的問(wèn)題，我們就用今天這篇分享來(lái)解釋。

一、移動(dòng)端的網(wǎng)格和柵格

了解移動(dòng)端布局、排版設(shè)計(jì)就首先得搞明白網(wǎng)格和柵格系統(tǒng)的區(qū)別。

首先是網(wǎng)格系統(tǒng)，從安卓早期規(guī)范到 Material Design 2 中，谷歌都提倡一套基于 8dp 長(zhǎng)寬（后來(lái)增加了 4dp）的網(wǎng)格系統(tǒng)。

簡(jiǎn)而言之，就是建議設(shè)計(jì)師在制定組件、按鈕、圖標(biāo)等元素大小時(shí)，以這個(gè)網(wǎng)格系統(tǒng)的格子為標(biāo)準(zhǔn)制作，邊緣和參考線對(duì)齊，確保元素的尺寸和間距都是 8 的倍數(shù)。

這么做布局雖然很簡(jiǎn)單，但不符合國(guó)情，以及實(shí)際的應(yīng)用場(chǎng)景以及 iOS 的適配。主要的問(wèn)題是后者，因?yàn)橛?8 建立的網(wǎng)格系統(tǒng)，得畫(huà)布本身是 8 的倍數(shù)才能完美適配，比如安卓標(biāo)準(zhǔn)畫(huà)布 720P 的 1280*720 長(zhǎng)寬。

而多種多樣的安卓設(shè)備與屏幕分辨率中，有非常多是不滿足這個(gè)條件的，蘋(píng)果的手機(jī)就更不用說(shuō)，不是 375，就是 390、393 寬等奇行種……所以這套網(wǎng)格系統(tǒng)是沒(méi)人用的。

而柵格系統(tǒng)則和網(wǎng)格系統(tǒng)不同，網(wǎng)格是把畫(huà)布等分成若干的大小一樣的格子，用于在格子上方填充內(nèi)容。而柵格系統(tǒng)則是在畫(huà)布中添加參考線，讓內(nèi)容的布局可以依據(jù)參考線來(lái)排版。

比如下圖，也是出現(xiàn)在 Material Design 2 中的響應(yīng)式柵格系統(tǒng)。

它的作用和網(wǎng)頁(yè)端的響應(yīng)式柵格是類(lèi)似的，柵格的寬度是可變的，模塊會(huì)隨柵格的變動(dòng)做適配。具體的邏輯就不在這里解釋了，大家可以看我以前寫(xiě)的網(wǎng)頁(yè)響應(yīng)式相關(guān)的分享。

安卓在官方規(guī)范中提出這套系統(tǒng)，和 Bootstrap 的響應(yīng)式規(guī)則基本一樣，包含了斷點(diǎn)的應(yīng)用，主要是為了讓產(chǎn)品只用一套代碼在不同端和屏幕上實(shí)現(xiàn)樣式排版的適配。

比如現(xiàn)在這么多的折疊屏手機(jī)，以及安卓平板，開(kāi)發(fā)者只需要應(yīng)用這套系統(tǒng)，就可以使用一套代碼實(shí)現(xiàn)所有設(shè)備、規(guī)格的自適應(yīng)。

想想很美好對(duì)不對(duì)？但是不做國(guó)外的項(xiàng)目，尤其是只針對(duì)安卓平臺(tái)設(shè)計(jì)的項(xiàng)目，那么這種柵格系統(tǒng)是沒(méi)法應(yīng)用的，下面我們就會(huì)具體解釋下原因。

二、柵格系統(tǒng)的應(yīng)用難題

柵格系統(tǒng)為什么在移動(dòng)端開(kāi)發(fā)中難以應(yīng)用，有多個(gè)因素影響，先簡(jiǎn)單概括一遍：

1. iOS 系統(tǒng)中不自帶柵格系統(tǒng)
2. 大屏適配不能簡(jiǎn)單用響應(yīng)式
3. 項(xiàng)目?jī)?nèi)的頁(yè)面布局差異過(guò)大

問(wèn)題 1. iOS 系統(tǒng)中不自帶柵格系統(tǒng)。這個(gè)是最致命的，因?yàn)槲覀冊(cè)?UI 設(shè)計(jì)中的主要設(shè)計(jì)對(duì)象是以 iOS 規(guī)范為標(biāo)準(zhǔn)的，iOS 中沒(méi)有提供這個(gè)規(guī)范。

理由也很簡(jiǎn)單，iOS 設(shè)備的規(guī)格對(duì)比安卓陣營(yíng)非常少，沒(méi)有這么迫切的響應(yīng)式需求。而早年支持 iPad 端適配的邏輯基本被放棄了，官方顯然也發(fā)現(xiàn)強(qiáng)行讓開(kāi)發(fā)者做響應(yīng)式的設(shè)計(jì)，還不如 iPad 端直接運(yùn)行未適配的手機(jī)端 APP 或直接開(kāi)發(fā) iPad 端的 APP，原因下面說(shuō)明。

問(wèn)題 2. 大屏適配是不適合直接用響應(yīng)式的。如果你們真的有去了解網(wǎng)頁(yè)的響應(yīng)式，就知道響應(yīng)式只能應(yīng)用在非常簡(jiǎn)單的布局結(jié)構(gòu)中，如果項(xiàng)目的內(nèi)容多且雜，那么響應(yīng)式的適配成本遠(yuǎn)遠(yuǎn)大于直接開(kāi)發(fā)多個(gè)版本。

同理，要讓手機(jī) APP 直接用簡(jiǎn)單的響應(yīng)式規(guī)則適配 iPad 端，是非常難用的。因?yàn)獒槍?duì)手機(jī)設(shè)計(jì)的布局是基于手機(jī)的交互習(xí)慣，而 iPad 的交互習(xí)慣不一樣，自然會(huì)用起來(lái)各種別扭。

同時(shí)，復(fù)雜的項(xiàng)目中會(huì)有很多很特殊、花哨的組件設(shè)計(jì)，這些組件如果要用響應(yīng)式的規(guī)則去適配是非常困難的，得考慮一系列適配邏輯，并在切圖環(huán)節(jié)中增加很多工作成本。

所以為什么大廠那些做的很復(fù)雜的產(chǎn)品都不用響應(yīng)式來(lái)開(kāi)發(fā)應(yīng)用，直接無(wú)縫適配 iPad 端？原因就是開(kāi)發(fā)成本太高了，高到寧愿放棄 iPad 端的用戶體驗(yàn)也不愿意做響應(yīng)式。

問(wèn)題 3. 項(xiàng)目?jī)?nèi)的頁(yè)面布局差異過(guò)大。如果你們有認(rèn)真對(duì)比一些大型產(chǎn)品的界面布局，就會(huì)發(fā)現(xiàn)不同的頁(yè)面，還是不同的模塊，布局是不符合統(tǒng)一原則的。

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

這么做是根據(jù)實(shí)際使用場(chǎng)景的需要去放棄統(tǒng)一性，而用了響應(yīng)式規(guī)范來(lái)做，想針對(duì)性調(diào)整就沒(méi)那么容易了。

以上幾個(gè)問(wèn)題，都是柵格系統(tǒng)在移動(dòng)端設(shè)計(jì)中推行的真實(shí)阻力，所以即便大廠的產(chǎn)品也不會(huì)去用。這不是專(zhuān)業(yè)不專(zhuān)業(yè)的問(wèn)題，而純粹是柵格系統(tǒng)是一種解決布局問(wèn)題的工具，如果它產(chǎn)生更多的問(wèn)題，要它何用？

那么拋開(kāi)柵格系統(tǒng)在響應(yīng)式的使用，僅僅站在平面布局的角度用柵格系統(tǒng)有必要嘛？

我的回復(fù)依舊是沒(méi)有，網(wǎng)頁(yè)會(huì)用是因?yàn)楫?huà)布太大了，如果不使用一定的標(biāo)準(zhǔn)去規(guī)范布局和排版，就很難獲得優(yōu)秀的設(shè)計(jì)結(jié)果。而移動(dòng)端的空間實(shí)在太小了，不需要靠這樣的系統(tǒng)去維持布局的穩(wěn)定性。

所以在移動(dòng)端應(yīng)用設(shè)計(jì)中，不要被響應(yīng)式和柵格系統(tǒng)束縛住，只要滿足基本的規(guī)范、體驗(yàn)、視覺(jué)需要即可。

結(jié)尾

這個(gè)問(wèn)題問(wèn)的人太多了，雖然寫(xiě)了分享，但還是建議新手要學(xué)會(huì)從線上的案例找答案。隨便打開(kāi)手機(jī)看幾個(gè)常用的 APP，你就會(huì)發(fā)很多你想要得到的答案就出現(xiàn)了。

后續(xù)會(huì)繼續(xù)更新組件設(shè)計(jì)的分享，如果還有其它移動(dòng)端設(shè)計(jì)的問(wèn)題也可以在設(shè)計(jì)群或留言中發(fā)出來(lái)。

 

文章來(lái)源：優(yōu)設(shè)網(wǎng)    作者：酸梅干超人

分享此文一切功德，皆悉回向給文章原作者及眾讀者.

免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問(wèn)題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

 

藍(lán)藍(lán)設(shè)計(jì)(sillybuy.com )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)、APP界面設(shè)計(jì)、圖標(biāo)定制、用戶體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)、UI咨詢、高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì)，以及相關(guān)的軟件開(kāi)發(fā)服務(wù)，咨詢電話：01063334945。

關(guān)鍵詞：UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司、軟件qt開(kāi)發(fā)、軟件wpf開(kāi)發(fā)、軟件vue開(kāi)發(fā)。