本文從柵格系統(tǒng)、常見(jiàn)的屏幕尺寸、布局方式、內(nèi)容展示4個(gè)章節(jié)，幫你掌握B端的基礎(chǔ)知識(shí)。

更多B端干貨：

一、柵格系統(tǒng)

不介紹起源之類的贅述，我們直接殺入正題，使用最簡(jiǎn)單的、最少的文字為大家詮釋柵格系統(tǒng)的使用和注意事項(xiàng)。

1. 柵格的作用

雖然現(xiàn)在有各種工具比如：Figma、藍(lán)湖、Master Go 等工具可以明確的標(biāo)明元素與元素、板塊與板塊之間的間距，但是在實(shí)際的產(chǎn)品研發(fā)中到視覺(jué)走查這個(gè)過(guò)程總是還是會(huì)有很多差距。

無(wú)限循環(huán)于《設(shè)計(jì)稿——前端開發(fā)——測(cè)試版本——視覺(jué)走查——前端修改——視覺(jué)走查——前端修改——視覺(jué)走查》最后一看感覺(jué)好像差不多，但是又感覺(jué)哪里怪怪的。查看 CSS 樣式發(fā)現(xiàn)很多間距有問(wèn)題。

主要原因在于前端不愿意去花費(fèi)大量的時(shí)間去認(rèn)真看設(shè)計(jì)稿的間距等問(wèn)題（保命）。

而柵格化則可以比較好的解決這個(gè)問(wèn)題，在前端做樣式時(shí)，心里大概有底，對(duì)于元素和元素以及板塊與板塊之間的間距問(wèn)題進(jìn)行比較好的把握。

柵格系統(tǒng)的建立不僅有利于前端開發(fā)，對(duì)于設(shè)計(jì)師與設(shè)計(jì)師之間也可以更好的對(duì)接，提高整個(gè)團(tuán)隊(duì)的效率。

總結(jié)以下三點(diǎn)：

1. 幫助我們實(shí)現(xiàn)更規(guī)范的排版布局和信息分布，使得頁(yè)面呈現(xiàn)出秩序之美。
2. 提高頁(yè)面布局的一致性和復(fù)用性，減少設(shè)計(jì)師在基礎(chǔ)布局上的思考，從而提高設(shè)計(jì)效率。
3. 更好的實(shí)現(xiàn)響應(yīng)式布局，更好地適應(yīng)不同設(shè)備，讓開發(fā)人員能夠更好地還原設(shè)計(jì)效果，避免在多個(gè)版本中重復(fù)進(jìn)行改寫

2. 柵格的構(gòu)成

網(wǎng)格（Grid）：是柵格系統(tǒng)的最小單元，由若干個(gè)單元格組成。

列（Column）：是頁(yè)面上的垂直區(qū)域，一般由若干個(gè)網(wǎng)格單元組成。

水槽（Gutter）：是列與列之間的空間，一般也是由網(wǎng)格單元組成。

邊距（Margin）：是頁(yè)面外部的空間，一般也是由網(wǎng)格單元組成。

柵格總寬（Container）：是頁(yè)面上總的寬度，也就是柵格的總寬。

容器盒子（Container）：是頁(yè)面上所有內(nèi)容的總和，也就是柵格系統(tǒng)的容器

柵格由以上元素組成，當(dāng)然我們?cè)诰W(wǎng)上找參考資料時(shí)可能會(huì)遇到不同的名詞描述。不需要太在意叫法只需要理解柵格的含義就可以靈活運(yùn)用

①網(wǎng)格：Figma 中有可展示網(wǎng)格 —— 同類軟件如：Master Go 或者 即時(shí)設(shè)計(jì)等也有。

網(wǎng)格的建立應(yīng)該按照最小單元——8px 原則

網(wǎng)格的基本組成單元是單元格，這些單元格相互交織構(gòu)成了一個(gè)網(wǎng)絡(luò)。最小的單元格是界面設(shè)計(jì)的基礎(chǔ)單位，所有的界面元素都是在這個(gè)基礎(chǔ)單位上布局和分布的。這個(gè)基礎(chǔ)單位對(duì)于創(chuàng)造性的決策具有非常重要的指導(dǎo)意義。

為何要以 8px 為設(shè)計(jì)單位呢

因?yàn)槟壳拔覀兪褂玫闹髁黠@示分辨率都可以被 8 整除，使用 8 作為最小的單元時(shí)，能夠適配絕大部分的顯示器?？梢源_保設(shè)計(jì)的一致性的同時(shí)保證最終呈現(xiàn)可適配多種尺寸。

網(wǎng)格的設(shè)計(jì)如下圖所示

整個(gè)內(nèi)容設(shè)計(jì)元素與元素、板塊與板塊、間距等都以 8 為倍數(shù)進(jìn)行，如下圖所示：

②列——用于內(nèi)容對(duì)齊，刪格的單位

通常有 12 柵格和 24 柵格也就是 12 列和 24 列，當(dāng)內(nèi)容較多時(shí)選用 12 列，內(nèi)容較少時(shí)選用 24 列。通過(guò)列可控制整個(gè)版面布局的呼吸度和舒適度，過(guò)多或者過(guò)少的列會(huì)導(dǎo)致版面的擁擠和稀疏。

③水槽——列于列之間的分割間距，用于區(qū)分板塊內(nèi)容。

水槽區(qū)域不放任何的板塊和元素內(nèi)容。

水槽的作用與功能：

1. 水槽可以輔助區(qū)塊內(nèi)容的分隔。
2. 水槽的寬度在一定程度也會(huì)影響界面的風(fēng)格。

設(shè)計(jì)師可以根據(jù)實(shí)際的設(shè)計(jì)去進(jìn)行水槽的設(shè)定，越大的水槽意味著更寬的間距和留白。隨著這些年設(shè)計(jì)的流行，推薦使用更大一些的水槽。

④邊距——設(shè)計(jì)內(nèi)容左右兩邊的邊距（禁止放任何元素）

此處區(qū)分移動(dòng)端、PC 端、PC——B端系統(tǒng)不同布局方式去進(jìn)行邊距的設(shè)置，用于控制主要顯示內(nèi)容區(qū)域的布局。

簡(jiǎn)單為大家舉幾個(gè)例子：

移動(dòng)端——2倍圖情況下之前以24px、18px 為邊距，隨著設(shè)計(jì)趨勢(shì)的發(fā)展，現(xiàn)在多種不同的邊距展示如：32px、36px等 可根據(jù)產(chǎn)品的特性進(jìn)行調(diào)整，并沒(méi)有規(guī)定的那么死板

PC 端——PC網(wǎng)頁(yè)多以1200為內(nèi)寬選擇不同的設(shè)計(jì)尺寸，那么空余的左右即為邊距

PC（B 端）——情況比較多樣，分布局情況去進(jìn)行，新手設(shè)計(jì)師可按照16px、24px、32px 去調(diào)整邊距（同PC全屏展示）

⑤柵格總寬——指列加水槽加安全邊距的寬度總和

⑥容器盒子——指頁(yè)面上所有內(nèi)容的總和，在盒子內(nèi)進(jìn)行頁(yè)面布局設(shè)計(jì)（元素、板塊、區(qū)域內(nèi)容等）

容器盒子在 PC-B 端中不包括導(dǎo)航條和左側(cè)菜單，根據(jù)不同的布局只包括內(nèi)容區(qū)域

二、常見(jiàn)的屏幕尺寸

常見(jiàn)的 PC 屏幕分辨率有 1280×800、1600×900、1440×900、1366×768、1920×1080、2560×1440

排名前三的為：1920x1080、1366x768、1440x900，通常情況下我們會(huì)選擇 1440x900 進(jìn)行向下內(nèi)容適配。

以 1440x900 的設(shè)計(jì)尺寸進(jìn)行設(shè)計(jì)哦

簡(jiǎn)單詮釋一下為何選擇 1440x900 而不是選擇使用最多的 1920x1080

B 端設(shè)計(jì)多用于網(wǎng)頁(yè)或客戶端（網(wǎng)頁(yè)居多），設(shè)計(jì)內(nèi)寬 1200 為有效區(qū)域，如果沒(méi)有特殊的要求，向下布局都是遵循這個(gè)原則的。大多數(shù)設(shè)計(jì)師都會(huì)采用 1902x1080 或者 1440x900 去進(jìn)行首屏設(shè)計(jì)。對(duì)于 B 端而言更加建議采用 1440x900，少部分內(nèi)容可單獨(dú) 1920x1080 去進(jìn)行補(bǔ)充設(shè)計(jì)。當(dāng)然并不是 1920 去設(shè)計(jì)會(huì)有問(wèn)題，只是更加建議采用 1440 的設(shè)計(jì)尺寸。

為何采用 1440x900 會(huì)更好呢？因?yàn)樵诓糠纸M件進(jìn)行適配時(shí)往往 1920x1080 的適配會(huì)在很多屏幕上顯得元素過(guò)大。

PS：不知道有沒(méi)有同學(xué)因?yàn)榘凑?1920x1080 去設(shè)計(jì)，最終效果導(dǎo)致彈框顯示過(guò)大，這里涉及到 CSS 樣式等前端知識(shí)就不過(guò)多闡述。直接上圖展示給大家?。。?/p>

以 1920 設(shè)計(jì)彈框：

以 1440 設(shè)計(jì)彈框：

為了保證頁(yè)面呈現(xiàn)給用戶時(shí)保證絕大數(shù)用戶的使用體驗(yàn)，在 1440 上進(jìn)行設(shè)計(jì)之后適配屏幕，并不會(huì)顯得過(guò)于突兀。例：1920 適配到 1024 或者 1280 時(shí)講慘不忍睹，以 1920 和 1440 都可進(jìn)行寬度設(shè)計(jì)向下延伸擴(kuò)展。但是最好按照 1440 設(shè)計(jì)，最后的產(chǎn)出用戶體驗(yàn)會(huì)更好。

三、布局方式

B 端布局中常用的就是上下布局、左右布局、“T”字布局。其他布局基本上是這三者的延伸和拓展。

四、內(nèi)容展示

按照 1440 設(shè)計(jì)之后假定設(shè)計(jì)圖為 A，那么開發(fā)完成后有時(shí)會(huì)出現(xiàn)如 B 的情況，之后需要在視覺(jué)走查部分再進(jìn)行修改。

那么如何能在設(shè)計(jì)階段就避免出現(xiàn)類似的內(nèi)容呢？是因?yàn)槲覀冊(cè)谠O(shè)計(jì)時(shí)并沒(méi)有考慮到瀏覽器導(dǎo)航高度。所以合理的設(shè)計(jì)區(qū)域應(yīng)為

爭(zhēng)取后續(xù)把基礎(chǔ)組件都講述完畢，最后附上一些組件庫(kù)鏈接

1. Ant Design：https://ant.design/index-cn
2. Element UI：https://element.eleme.cn/#/zh-CN
3. Arco Design：https://arco.design