在設(shè)計(jì)行業(yè)中也是要遵循一定的規(guī)則和規(guī)律才能夠設(shè)計(jì)出更美觀更符合用戶需求的界面效果，今天小千就來給大家介紹一下這個(gè)網(wǎng)格系統(tǒng)，學(xué)習(xí)完之后你能夠更好的理解設(shè)計(jì)、完善設(shè)計(jì)。

      什么是網(wǎng)格系統(tǒng)？

      柵格系統(tǒng)英文為“grid systems”，也有人翻譯為“網(wǎng)格系統(tǒng)”，運(yùn)用固定的格子設(shè)計(jì)版面布局，其風(fēng)格工整簡(jiǎn)潔，在二戰(zhàn)后大受歡迎，已成為今日出版物設(shè)計(jì)的主流風(fēng)格之一。

      網(wǎng)格系統(tǒng)，以及其背后的模數(shù)思想在設(shè)計(jì)史上由來已久，在建筑、平面設(shè)計(jì)等領(lǐng)域均可見不同的表現(xiàn)形式。而具體到網(wǎng)頁設(shè)計(jì)上，常用的 Column + Gutter (包含內(nèi)容的寬欄+較窄的間距空間) 源自上世紀(jì) 50 年代成熟的瑞士風(fēng)格平面設(shè)計(jì)（或稱國(guó)際風(fēng)格，International Typographic Style）。

      那簡(jiǎn)單的來說，網(wǎng)格是設(shè)計(jì)的輔助工具，就是在版面上按照預(yù)先確定好的格子，分配文字和圖片的一種版面設(shè)計(jì)方法。

      網(wǎng)格系統(tǒng)有什么用？

      調(diào)節(jié)版面氣氛:加強(qiáng)版面凝聚力使版面更統(tǒng)一化、整體化，也可使版面內(nèi)容更規(guī)整，使網(wǎng)格在版面中的運(yùn)用更加靈活。

      組織版面信息：網(wǎng)格對(duì)版面中的構(gòu)成元素，文字、 圖片等進(jìn)行有的、有序的編排，使版面中的內(nèi)容信息更清晰的呈現(xiàn)，使構(gòu)成元素的編排位置更加的精確，有結(jié)構(gòu)感、節(jié)奏感。

      提升閱讀的關(guān)聯(lián)性:網(wǎng)格系統(tǒng)使版面結(jié)構(gòu)更加清晰簡(jiǎn)潔，能夠有效的保證內(nèi)容的.關(guān)聯(lián)性，使視覺在瀏覽時(shí)有一個(gè)清晰明朗的流程。

      確定信息位置:對(duì)各項(xiàng)元素的位置進(jìn)行有效的組織、編排，能使版面內(nèi)容具有鮮明的條理性、并且可以使版面元素呈現(xiàn)出更為完善的整體效果。

      網(wǎng)格的作用可簡(jiǎn)單的總結(jié)以下幾點(diǎn)

      1、確定版心位置；

      2、快速分割版面；

      3、快速布局結(jié)構(gòu)的作用；

      4、能夠理性、整潔地安排版面元素；

      那如何建立網(wǎng)格系統(tǒng)呢？

      首先，打開我們的PS軟件，點(diǎn)擊菜單里的視圖下的新建參考線版面；

      其次，在彈出的新建參考線版面的彈窗中，根據(jù)比例劃分版面，將文圖形進(jìn)行比例的綜合規(guī)劃，（橫著的線為行數(shù)，豎著的線為列數(shù)），一般情況下可設(shè)置為2的倍數(shù)；

      裝訂線我這邊是設(shè)置的5mm，可根據(jù)我設(shè)置的數(shù)值進(jìn)行適當(dāng)調(diào)整；

      邊距則是天頭，地腳以及左右頁邊距，一般為5的倍數(shù)；

      當(dāng)設(shè)置完成以后，就可以按照網(wǎng)格進(jìn)行分布排版啦。最后要給大家說，網(wǎng)格只是設(shè)計(jì)的輔助，在依賴網(wǎng)格設(shè)計(jì)的基礎(chǔ)上一定要要靈活應(yīng)用哦～讓你的設(shè)計(jì)從此以后具有一定的理論依據(jù)支撐！

      以上就是網(wǎng)格系統(tǒng)的介紹了，最后如果你對(duì)UI設(shè)計(jì)感興趣的話，不妨來千鋒UI設(shè)計(jì)培訓(xùn)班了解一下我們的UI設(shè)計(jì)培訓(xùn)課程，現(xiàn)在咨詢還有免費(fèi)UI設(shè)計(jì)學(xué)習(xí)資料可以領(lǐng)取，趕緊來領(lǐng)取吧。