關於柵格系統在設計中的zong'jie

關於柵格系統在設計中的zong

關於柵格系統在設計中的zong

什麼是柵格系統

柵格系統介紹

網格起源印刷設計,現在隨著傳播媒介變化網格系統也延伸到網頁設計(響應式網站)甚至於移動端的設計中了。網格設計是將版面分成不同形式的列或模組組成的垂直或交叉的格子。這些格子可以幫助我們更好的排列所要傳達的內容,管理內容在版面中元素之間的比例。

柵格設計不是簡單的將文字、圖片、圖示圖形等版面中可見元素排列起來,而是遵循畫面結構相互聯絡延伸來的一種形式法則。

它的特點是:

重視比例、秩序還有連續感。

在使用柵格設計時,有效可視區域內的元素儘量對齊格子,並按照格子的劃分參照某種比例有序的分佈和組織。

01

柵格的作用

保持內容的清晰和一致

透過合理的比例、節奏、留白和層級提升版面的閱讀效率,網格系統下有助於在版面中清晰的劃分出來;

提升效率方便協作

多個設計可以分別按照這套柵格系統來處理不同的元件和設計細節。

易於修改和重複使用

柵格幫助設計師將不同的設計元素按照某種比例與聯絡組在一起,來構建更好的產品以此來實現有效的層次結構統一和一致,使設計更有條理。

02

柵格的要素

邊距

安全距離或版心區域,由於展示媒介的不同,安全距離不一樣。

關於柵格系統在設計中的zong

列是網格縱向排布的依據,列數越多縱向排布內容就越細緻,版面的內容就會變得更稠密內容較零碎,一般移動端為6列,網頁設定為12列。

關於柵格系統在設計中的zong

水槽

列與列之間的分隔間距,它有助於分離內容

水槽的寬度可以根據實際情況來設定,當水槽的寬度比安全距離寬時,眼睛向外指向並且存在更多的張力,當水槽的寬度比安全距離窄時,眼睛向內引導並且張力得到緩解。通常如果水槽為X的話,則安全距離通常為 1X 、1。5x、2X、2。5X,也可以根據專案情況進行設定

關於柵格系統在設計中的zong

模組

模組是行和列的交叉形成的獨立空間單元格

關於柵格系統在設計中的zong

最小單位

在制定柵格之前還需要了解一個最小單位,這些柵格都是有這個最小單位組成的。目前比較常用的最小單位有4、5、6也有用8的Materia Design就是基於8作為最小單位。

關於柵格系統在設計中的zong

由於近期比較忙還有下半部分就安排在下一篇

03 制定柵格

04 案例應用。。。。。

關於柵格系統在設計中的zong