弘成IT教育

7x24小時咨詢熱線

400-660-3310

當前位置 : 好學校 弘成IT教育 學習資訊 資訊詳情

網(wǎng)頁中的柵格化系統(tǒng)

2021-11-24

1,什么是柵格化系統(tǒng)?

柵格系統(tǒng)英文為“grid systems”,也有人翻譯為“網(wǎng)格系統(tǒng)”,其實是一回事。不過從定義上說,柵格更為準確些,從維基百科查到柵格的定義為:柵格設(shè)計系統(tǒng)(又稱網(wǎng)格設(shè)計系統(tǒng)、標準尺寸系統(tǒng)、程序版面設(shè)計、瑞士平面設(shè)計風格、國際主義平面設(shè)計風格),是一種平面設(shè)計的方法與風格。運用固定的格子設(shè)計版面布局,其風格工整簡潔,已成為今日出版物設(shè)計的主流風格之一。

2,網(wǎng)頁中的柵格系統(tǒng)

是以規(guī)則的網(wǎng)格陣列來指導和規(guī)范網(wǎng)頁中的版面布局,使得網(wǎng)頁便于閱讀,讓網(wǎng)頁規(guī)范規(guī)整;

一下網(wǎng)頁使用的是網(wǎng)頁柵格布局,里面的想相關(guān)信息根據(jù)網(wǎng)格做了相應(yīng)對齊;頁面看上會整潔規(guī)范;

柵格

一個標準的柵格系統(tǒng),包括以下部分:

將Flowline的總寬度標記為W, Column的寬度標記為c, Gutter寬度標記為g, Margin的寬度標記為m, Column的個數(shù)標記為N,我們可以得到以下公式:

W = c * N + g * (N - 1) + 2 * m

一般來說,Gutter的寬度是Margin的兩倍,上面的公式可以簡化為:

W = c * N + g * (N - 1) + g = (c + g) * N

將c+g標記為C,公式變得非常簡單:

W = C * N

柵格系統(tǒng)

如果每次設(shè)計前都要計算,那就太麻煩啦,這里推薦幾個網(wǎng)站,可以有效的輔助設(shè)計。

網(wǎng)站

總之,對于內(nèi)容信息不確定導致高度不確定的頁面,在高度層面上就無法做到柵格了。當然,具體的情況還需具體的分析與解決,這就需要設(shè)計師們在實際的應(yīng)用中不斷的總結(jié)經(jīng)驗,不斷實踐了。

收藏
分享到:

相關(guān)課程

相關(guān)資訊

弘成IT教育

弘成IT教育

認證等級

信譽良好,可安心報讀

弘成IT教育

已獲好學校V2信譽等級認證

信譽值

  • (60-80)基礎(chǔ)信譽積累,可放心報讀
  • (81-90)良好信譽積累,可持續(xù)信賴
  • (91-100)充分信譽積累,推薦報讀

與好學校簽訂讀書保障協(xié)議:

  • 100%
  • 442
  • 5909
在線咨詢
;