2023-6-9 高勁
什么是柵格？我這里就不做說明了。很多優(yōu)設(shè)的文章都寫的很清晰了。這篇文章僅從我最開始接觸柵格所遇到的困惑和部分設(shè)計師始終糾結(jié)的點來和大家一起討論討論。
B 端到底用什么尺寸進(jìn)行設(shè)計？
要弄清楚用什么尺寸設(shè)計，首先要確定布局。我們常用的就是上下布局、左右布局、“T”字布局。其他布局基本上是這三者的延伸和拓展。上下布局一般是固定頂部，有點類似于 PC 網(wǎng)頁設(shè)計，實際上也差不多。現(xiàn)在的B端設(shè)計中很多都會搭配著這種布局用，比如幫助中心、消息通知，客戶入網(wǎng)申請等（這些我都遇見并做過）。左右布局和“T”字布局，一般固定左側(cè)，右側(cè)區(qū)域做自適應(yīng)。
我們看一下百度統(tǒng)計最新出來的當(dāng)前計算機(jī)分辨率數(shù)據(jù)，從統(tǒng)計的數(shù)據(jù)中可以看出，小尺寸的屏幕是越來越少了。但是不是我們就要用最小的尺寸或者用份額最大的 1920 進(jìn)行設(shè)計了？
顯然不是按照這個維度來確定尺寸的。對網(wǎng)頁設(shè)計來說，設(shè)計師差不多都知道有一個 1200 有效內(nèi)容區(qū)域的說法。如果沒有特殊要求，上下布局也是遵循這個原則的。設(shè)計師中絕大部分，包括我很多同事平時基本上用的 1920 和 1440 兩種尺寸來進(jìn)行設(shè)計。對于 B 端來說，不管你采用 1920 或者 1440，在做上下布局頁面定寬設(shè)計的時候，遵循 1200 有效內(nèi)容區(qū)域這個原則就是沒有問題的，看了很多文章上面舉例了 960、990、1024、1156 等等，大家都不用糾結(jié)，沒有特殊要求，這些都沒啥問題。
上下布局在 B 端設(shè)計中是一個補(bǔ)充，有的可能有，有的可能沒有，所以用 1920 還是 1440 最好還是根據(jù)左右布局來，保持統(tǒng)一。兩年前我看過一篇大廠寫的布局的文章，用的是 1280 的尺寸，記得是說因為考慮縮小瀏覽器會發(fā)生遮擋或者擠壓（別問我為啥還記得，因為當(dāng)時對于尺寸糾結(jié)的太厲害，至今難以忘懷），現(xiàn)在因為技術(shù)等方面的發(fā)展，個人認(rèn)為再用 1280 的做已經(jīng)不合適了。1440 的尺寸目前做中后臺是比較通用的，大家也可以參考看一下螞蟻 Ant Design。至于 1920 的用來設(shè)計 B 端行不行呢？我認(rèn)為也是可以的，我就用過，也沒用戶反饋說顯示有問題，我就當(dāng)他沒問題了。不過我還是建議大家在做 B端設(shè)計的時候用 1440 的來做，特別是用戶群很復(fù)雜的情況下，方便低分辨率的電腦查看。當(dāng)然如果我們給某一企業(yè)做定制服務(wù)，那就沒尺寸的問題了，照著客戶電腦尺寸來就行了。
現(xiàn)在有很多插件可以進(jìn)行布局，軟件一般也有自帶布局功能。這里不做陳述：
這里介紹我常用的 sketch 布局。
這里我也創(chuàng)建了一個 1440 的網(wǎng)格系統(tǒng)，供大家參考，大家也可以根據(jù)自己的實際情況去建立自己的網(wǎng)格。
頂部高度沒有特殊要求建議不要超過 100px，我一般就是 60-80px 內(nèi)設(shè)定的；左側(cè)可以根據(jù)目錄內(nèi)容自己設(shè)定一下，一般 200 多就差不多了。邊距我一般設(shè)定 20px、24px。這樣再對剩下的距離做柵格就行了，列寬保持偶數(shù)即可。
有時候做柵格的時候會遇到一部分列寬是 42px，一部分列寬是 43px，這種設(shè)定也是可以的，回歸到柵格系統(tǒng)的意義，柵格本質(zhì)上不是為了保證像素級精確，而是為了保證瀏覽視覺級別的秩序、協(xié)調(diào)與統(tǒng)一，所以大家沒有必要糾結(jié)。
“沒有絕對正確的柵格設(shè)計，只有最適合的柵格設(shè)計”，希望這篇文章可以幫助對柵格有疑惑的設(shè)計師們，同時也期待大家留言，大家一起學(xué)習(xí)探討。
文章來源：優(yōu)設(shè)網(wǎng) 作者：神經(jīng)蛙
免責(zé)聲明：藍(lán)藍(lán)設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計( www.wtxcl.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)
藍(lán)藍(lán)設(shè)計的小編 http://www.wtxcl.cn