設計入門 —UI篇： 什麼是柵格系統(Grid system)？📏
今天來為大家介紹UI設計裡的柵格系統 — 柵格是UI的基石，對於入門新手來說是打好基礎、非常重要的一環。我們來看看柵格到底是什麼和能起到什麼作用：
試想看 — 當您打開手機分別看到這兩個界面，哪個更易於瀏覽和閱讀信息？哪個更方便找到菜單或進行搜索？
界面元素需要綜合視覺和功能上一致的產品體驗，以提升產品的可用性和可學習性。優秀的產品不應該讓用戶在內容和導航中苦惱和迷失方向，產品設計師需要把元素好。
怎麽整理呢？我們可以用這樣一個例子來看：
🤔什麽意思？這個跟剛剛的界面有什麽關係呢？
現在我們來看看這些物件都代表了什麽：
然後我們要找來一個櫃子把它們安放進去。。。
我們所看到的界面其實經過柵格進行排版的處理，要控制布局結構並實現一致且有組織的設計，最有效的方法之一就是應用柵格系統。像剛剛界面的例子，背後是從柵格系統出發的模塊。
經過剛剛的例子相信大家對柵格有了基本的認識，接下來看看更多關於柵格的定義、使用的原因和其構成吧！
什麽是柵格系統？（Grid system）
柵格和布局系統源於印刷設計，是設計傳統的一部分。柵格通過將不同的設計元素綁在一起，以輕鬆實現有效和一致的層次結構，幫助設計師構建更好的產品。如果執行得當，我們的設計將顯得周到且有條理。
基本來說，柵格是一種結構，是一系列將頁面分為列或模塊的線。 這種結構可以幫助設計師在頁面上安排內容。 盡管網格線本身在大多情況不一定是可見的，但該結構可幫助我們在頁面上對齊的元素之間的比例。 柵格將用作頁面布局的框架(framework)， 可以在該框架上組織各種元素，比如：文本部分，圖像以及其他功能性或裝飾性元素。
為什麽要使用柵格系統？
使用柵格系統能夠從以下幾個方面提高了設計的質量（從功能上和美學上）和設計過程的效率：
✔️ 提供體驗一致性
例如小W要通過手機應用發送消息、或預訂酒店房間。提供柵格設計的界 面一致性能讓小W輕松了解在哪裏可以找到下一條信息或下一步應該採取的步驟。
✔️響應式設計
柵格為多設備格局提供動態柵格系統，而 不是固定寬度。使用動態柵格系統可讓小W不管在APP，平板電腦或是電腦等具有不同屏幕尺寸的多個設備上享受一致的體驗。
✔️使設計更易於修改和重覆使用
網格提供了堅實的基礎，可以作為未來新版本的設計基礎骨架。輕鬆地產生完全不同的外觀。同時也讓設計師更一致地管理全局元素之間的比例，例如間距和邊距，而不用人工每個頁面去進行調整。
柵格系統都由什麽組成？
那怎麽開始著手去定柵格呢？
訂立柵格設計師要知道兩個事情：一）什麽格式，二）該採用多少列的柵格系統。根據項目來考慮設計會應用在哪些類型的設備，再訂立一個可延展到每個設備的柵格基礎結構。
柵格系統一共有三種：列柵格，模塊組成的柵格，以及基線柵格。電子產品主要采用的是列組成的柵格。
列組成的柵格可以將內容組織成均勻間隔的垂直列。常見的列柵格示例是12列柵格，因為它可以輕松地把區域劃分為一半：三分之一，四分之一或六分之一。
我們可以根據前面收集得到的用戶需求和流程圖把界面先用紙筆把布局勾勒出來，預想屏幕上將顯示哪些內容。有了草圖，我們可以更好的決定列數。對於新手來說，假如還是不不確定，可以先采用12列柵格，隨著應用經驗增加再決定是否需要更多或更少列的柵格系統。
今天對柵格的介紹到此為止，以後會繼續給大家介紹更多UI和UX相關的知識。希望幫助更多的非設計師入門或對設計加深了解，對已為設計師作溫故之新的作用。Let’s grow together🧡
