在如今多終端多設備的場景下，多屏設計成為了當今產品設計中需要考慮的重要一點，也是商業設計中不可或缺的一部分 。柵格系統能夠輔助設計師進行界面排版布局，能夠優化用戶體驗 。本文對該系統設計進行了詳細的介紹，希望對你有所幫助 。
文章插圖
在如今多終端、多設備尺寸的加持下，多屏設計就成了商業設計中不可缺少的一部分，為了讓所用界面的視覺表現出統一性和一致性、同時還在不同系統及不同尺寸的設備上保持良好的用戶體驗，柵格系統就顯得尤為重要，它能輔助設計師制定界面排版布局的方案，以網格的形式將多元素/內容鏈接在一起，很好的做到多平臺、多尺寸的適配，讓設計美感、工作效率都得到了很大的提升 。
一些優秀的產品都在使用柵格去規范界面信息的排版布局，雖然它只是傳統設計方式的一部分，但只要不嫌麻煩，就可以使用柵格系統解決很多設計布局的問題 。
不少設計師都知道柵格的重要性，但礙于對其一知半解，以至于在設計中總有些無從下手，本文筆者將從瀏覽過的大量文章結合自身工作經驗對柵格作出了系統化的總結，希望能幫助初/中級設計師對柵格有一個更深的認識 。
文章插圖
一、柵格的定義及重要性1. 柵格的來源柵格的概念來源于平面設計中的“網格”，早在13世紀，法國建筑師 Villard de Honnecourt 創作了一張圖表，試圖實現“和諧的設計”，這也是繼黃金比例之后，第一次將網格與其結合在一起，以此產生固定比例的頁面布局 。
在18世紀工業革命大規模生產的開始，隨著報紙、傳單等主流印刷品的興起，設計師們需要解決“將不同的信息傳達給不同的人群且能自然瀏覽、還要防止不同部分爭奪讀者的注意力”的問題時，柵格的雛形已然顯現出來 。
20世紀初，設計師們發現使用網格輔助設計印刷作品，可讓排版布局更加清晰、信息傳遞也更加有效，由此演變成了平面設計中的一種方法 。
文章插圖
20世紀中期，約瑟夫·米勒-布羅克曼著作了《平面設計中的網格系統》一書對設計界影響至今 。
由此不難發現，不管是前幾個世紀的印刷刊物、還是如今的互聯網產品界面布局，柵格都可以作為組織信息的工具，幫助設計師實現一致、和諧的信息布局效果 。
2. 什么是柵格柵格和網格的英文都以“Grid”來表示，其本質是為了給版面提供一個基本設計框架，這也是為實現有組織的設計其中方法之一，在平面設計中稱之為“網格”，而在網頁/移動端中更多稱為“柵格” 。
柵格是根據平面中的網格發展而來，通過一定的規律、合理的設置基準線來規范界面中的元素（文本/圖像），讓每個區域能夠相對獨立卻又能相互關聯，形成整個界面，最終呈現出清晰易讀的信息布局 。
3. 為什么要使用柵格首先對用戶來說，使用柵格能讓內容布局具有規律性，通過定義留白、對齊、分割等各種比例關系，不僅能降低用戶認知成本，還能讓信息的展現更加清晰，有效提升用戶的瀏覽、接收效率 。
其次對于研發團隊，柵格通過統一的標準規范對設計師進行約束，協同產出一致性的視覺效果，避免了一人一個樣式的混亂場面，同時減少了部分細節上的溝通，提高決策及產出效率 。在開發過程中，程序員通過有規可循的設計規律，可對部分組件及模塊進行封裝調用，不僅高度還原設計效果、還能提高開發效率 。
另外，在設計Web界面時，使用柵格系統能一稿適配電腦、平板、手機等不同的設備尺寸，合理兼容多端、多系統下的自適應效果 。
文章插圖
二、柵格系統的組成柵格系統并沒有我們想象的那么復雜，它主要由網格、列、水槽、邊距、總寬、容器盒子等組成，只要清楚它們之間的相互關系以及定義即可，下面我們將一一了解：
文章插圖
1. 網格（Gird）網格（Gird）是由基本單位「單元格」構成，也被稱為最小單元格，而柵格則是由一系列規律的網格組成，通常情況下，我們會使用8作為作為柵格中的最小單位，以此進行增量 。
為什么用8為基礎倍數呢？
首先作為偶數，程序進行單位換算后可被整除，避免像素出現小數點；其次，8為增量單位既不會顯得瑣碎、也不會讓內容過于分散，當界面中所有元素都以8為倍數時，其元素大小、間距都有規可循，之前筆者曾寫過一篇「間距」類的文章，感興趣的伙伴可以去看一下 。
推薦閱讀
- 形容家鄉的美好朋友圈句子 形容三月美好的朋友圈句子文案
- 感恩家鄉贊美家鄉的經典語錄
- 家鄉的風俗元宵節作文 家鄉的元宵節作文5篇
- 部落沖突9本部落戰戰術有哪些 部落沖突9本部落戰怎么打
- 清朝狀元林紹棠的家鄉在哪里 清朝狀元林紹棠介紹
- 2021八本最強防御陣圖 部落沖突8本最強布陣
- 如果工作和學習相沖突該怎么選擇 學業和工作沖突怎么回答
- 招聘14薪相當于年終獎嗎 14薪和年終獎沖突嗎
- 部落沖突六本最強陣是什么 部落沖突六本最強陣形
- CMS 偽靜態順序沖突解決方案