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

一、柵格系統(tǒng)

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

1. 柵格的作用

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

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

主要原因在于前端不愿意去花費大量的時間去認真看設計稿的間距等問題（保命）。

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

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

總結以下三點：

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

2. 柵格的構成

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

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

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

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

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

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

柵格由以上元素組成，當然我們在網(wǎng)上找參考資料時可能會遇到不同的名詞描述。不需要太在意叫法只需要理解柵格的含義就可以靈活運用

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

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

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

為何要以 8px 為設計單位呢

因為目前我們使用的主流顯示分辨率都可以被 8 整除，使用 8 作為最小的單元時，能夠適配絕大部分的顯示器?？梢源_保設計的一致性的同時保證最終呈現(xiàn)可適配多種尺寸。

網(wǎng)格的設計如下圖所示

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

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

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

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

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

水槽的作用與功能：

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

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

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

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

簡單為大家舉幾個例子：

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

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

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

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

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

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

二、常見的屏幕尺寸

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

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

以 1440x900 的設計尺寸進行設計哦

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

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

為何采用 1440x900 會更好呢？因為在部分組件進行適配時往往 1920x1080 的適配會在很多屏幕上顯得元素過大。

PS：不知道有沒有同學因為按照 1920x1080 去設計，最終效果導致彈框顯示過大，這里涉及到 CSS 樣式等前端知識就不過多闡述。直接上圖展示給大家！?。?/p>

以 1920 設計彈框：

以 1440 設計彈框：

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

三、布局方式

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

四、內(nèi)容展示

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

那么如何能在設計階段就避免出現(xiàn)類似的內(nèi)容呢？是因為我們在設計時并沒有考慮到瀏覽器導航高度。所以合理的設計區(qū)域應為

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

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

作者：Soul Designer