在設計行業(yè)中也是要遵循一定的規(guī)則和規(guī)律才能夠設計出更美觀更符合用戶需求的界面效果，今天小千就來給大家介紹一下這個網(wǎng)格系統(tǒng)，學習完之后你能夠更好的理解設計、完善設計。
什么是網(wǎng)格系統(tǒng)？
柵格系統(tǒng)英文為“grid systems”，也有人翻譯為“網(wǎng)格系統(tǒng)”，運用固定的格子設計版面布局，其風格工整簡潔，在二戰(zhàn)后大受歡迎，已成為今日出版物設計的主流風格之一。
網(wǎng)格系統(tǒng)，以及其背后的模數(shù)思想在設計史上由來已久，在建筑、平面設計等領域均可見不同的表現(xiàn)形式。而具體到網(wǎng)頁設計上，常用的 Column + Gutter (包含內容的寬欄+較窄的間距空間) 源自上世紀 50 年代成熟的瑞士風格平面設計（或稱國際風格，International Typographic Style）。
那簡單的來說，網(wǎng)格是設計的輔助工具，就是在版面上按照預先確定好的格子，分配文字和圖片的一種版面設計方法。
網(wǎng)格系統(tǒng)有什么用？
調節(jié)版面氣氛:加強版面凝聚力使版面更統(tǒng)一化、整體化，也可使版面內容更規(guī)整，使網(wǎng)格在版面中的運用更加靈活。
組織版面信息：網(wǎng)格對版面中的構成元素，文字、 圖片等進行有的、有序的編排，使版面中的內容信息更清晰的呈現(xiàn)，使構成元素的編排位置更加的精確，有結構感、節(jié)奏感。
提升閱讀的關聯(lián)性:網(wǎng)格系統(tǒng)使版面結構更加清晰簡潔，能夠有效的保證內容的.關聯(lián)性，使視覺在瀏覽時有一個清晰明朗的流程。
確定信息位置:對各項元素的位置進行有效的組織、編排，能使版面內容具有鮮明的條理性、并且可以使版面元素呈現(xiàn)出更為完善的整體效果。
網(wǎng)格的作用可簡單的總結以下幾點
1、確定版心位置；
2、快速分割版面；
3、快速布局結構的作用；
4、能夠理性、整潔地安排版面元素；
那如何建立網(wǎng)格系統(tǒng)呢？
首先，打開我們的PS軟件，點擊菜單里的視圖下的新建參考線版面；
其次，在彈出的新建參考線版面的彈窗中，根據(jù)比例劃分版面，將文圖形進行比例的綜合規(guī)劃，（橫著的線為行數(shù)，豎著的線為列數(shù)），一般情況下可設置為2的倍數(shù)；
裝訂線我這邊是設置的5mm，可根據(jù)我設置的數(shù)值進行適當調整；
邊距則是天頭，地腳以及左右頁邊距，一般為5的倍數(shù)；
當設置完成以后，就可以按照網(wǎng)格進行分布排版啦。最后要給大家說，網(wǎng)格只是設計的輔助，在依賴網(wǎng)格設計的基礎上一定要要靈活應用哦～讓你的設計從此以后具有一定的理論依據(jù)支撐！
以上就是網(wǎng)格系統(tǒng)的介紹了，最后如果你對UI設計感興趣的話，不妨來千鋒UI設計培訓班了解一下我們的UI設計培訓課程，現(xiàn)在咨詢還有免費UI設計學習資料可以領取，趕緊來領取吧。
京公網(wǎng)安備 11010802030320號