手机国产精品一区二区,另类第一页,亚欧在线,日韩一国产极品99热在线播放69_国产美女久久精品香蕉欧美_亚州中文无码aⅤ在线_免费国产v片在线

總監(jiān)分析!為什么移動端設計中不使用柵格系統(tǒng)?|北京藍藍UI設計公司

2023-11-14    周周

總監(jiān)分析!為什么移動端設計中不使用柵格系統(tǒng)?

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

總監(jiān)分析!為什么移動端設計中不使用柵格系統(tǒng)?

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

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

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

總監(jiān)分析!為什么移動端設計中不使用柵格系統(tǒng)?

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

總監(jiān)分析!為什么移動端設計中不使用柵格系統(tǒng)?

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

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

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

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

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

總監(jiān)分析!為什么移動端設計中不使用柵格系統(tǒng)?

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

總監(jiān)分析!為什么移動端設計中不使用柵格系統(tǒng)?

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

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

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

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

柵格系統(tǒng)為什么在移動端開發(fā)中難以應用,有多個因素影響,先簡單概括一遍:

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

問題 1. iOS 系統(tǒng)中不自帶柵格系統(tǒng)。這個是最致命的,因為我們在 UI 設計中的主要設計對象是以 iOS 規(guī)范為標準的,iOS 中沒有提供這個規(guī)范。

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

總監(jiān)分析!為什么移動端設計中不使用柵格系統(tǒng)?

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

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

總監(jiān)分析!為什么移動端設計中不使用柵格系統(tǒng)?

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

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

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

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

總監(jiān)分析!為什么移動端設計中不使用柵格系統(tǒng)?

這么做是根據(jù)實際使用場景的需要去放棄統(tǒng)一性,而用了響應式規(guī)范來做,想針對性調(diào)整就沒那么容易了。

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

那么拋開柵格系統(tǒng)在響應式的使用,僅僅站在平面布局的角度用柵格系統(tǒng)有必要嘛?

我的回復依舊是沒有,網(wǎng)頁會用是因為畫布太大了,如果不使用一定的標準去規(guī)范布局和排版,就很難獲得優(yōu)秀的設計結(jié)果。而移動端的空間實在太小了,不需要靠這樣的系統(tǒng)去維持布局的穩(wěn)定性。

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

結(jié)尾

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

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

 

文章來源:優(yōu)設網(wǎng)    作者:酸梅干超人

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

免責聲明:藍藍設計尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問題,請及時與我們?nèi)〉寐?lián)系,我們立即更正或刪除。

 

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

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

 

分享本文至:

日歷

鏈接

個人資料

藍藍設計的小編 http://m.88yangsc.com

存檔