UI設計中柵格是什麼？

1.關於柵格系統的典故

2.什麼是柵格？

柵格系統以規則的網路陣列來指導和規範網頁中的版面布局以及信息分布。柵格系統有時候也稱為網格系統。

網頁柵格系統是從平面柵格系統中發展起來，對於網頁設計來說，柵格系統的使用，不盡可以讓網頁的信息呈現更加美觀易讀、更具可用性，而且對於前端來說，網頁將更加靈活與規範。

在網頁設計中，如果把網頁寬度平均切分為多個網格單元，每個單元之間預留一定的空隙，此時整個頁面就如同一個柵格系統，如圖所示：

3.柵格系統的設計原理及應用

圖中給出了一個標準的柵格系統中所包含的幾個部分，分別是總寬w、列寬c、槽寬g、外邊距幾個部分。這樣總寬的公式如下：

邊距部分不顯示內容的，用於將網頁主題內容和邊緣進行分割。可以改變面數和槽寬，設計出很多柵格系統。常見的柵格系統：

4.柵格系統的優勢

使用柵格系統的網頁設計非常有條理，看上去也很舒服，可以讓整個網站各個頁面的布局保持一致。這能增加頁面的相似度，提升用戶體驗。

最重要的是，它給整個網站的頁面結構定義了一個標準。對於視覺設計師來說，不用再為網站的每一個頁面都想一個寬度或高度了；對於前端開發工程師來說，頁面的布局設計將完全是規範的和可重用的；對於內容編輯或廣告銷售來說，所有的廣告都是規則的、通用的，再也不用做出一套多張不同尺寸的廣告圖了。這對於大型網站的開發和維護來說，能節約不少成本。

文章來源：麥子學院

原文鏈接：柵格化系統- UI設計