柵格化原子設(shè)計理論布局思想

時間：2023-09-27 03:54:02 | 來源：網(wǎng)站運營

時間：2023-09-27 03:54:02 來源：網(wǎng)站運營

柵格化原子設(shè)計理論布局思想：

一、柵格化布局的由來

柵格設(shè)計系統(tǒng)（又稱網(wǎng)格設(shè)計系統(tǒng)、標(biāo)準(zhǔn)尺寸系統(tǒng)、程序版面設(shè)計、瑞士平面設(shè)計風(fēng)格、國際主義平面設(shè)計風(fēng)格），是一種平面設(shè)計的方法與風(fēng)格。運用固定的格子設(shè)計版面布局，其風(fēng)格工整簡潔，在二戰(zhàn)后大受歡迎，已成為今日出版物設(shè)計的主流風(fēng)格之一。

字體設(shè)計

1629年，法王路易十四命令成立一個管理印刷的皇家特別委員會，由數(shù)學(xué)家尼古拉斯·加宗（Nicolas Jaugeon）擔(dān)任領(lǐng)導(dǎo)。委員會提出了新字體設(shè)計建議：以羅馬體為基礎(chǔ)，采用方格為設(shè)計依據(jù)，每個字體方格分為64個基本方格單位，每個方格單位再分成36小格，這樣，一個印刷版面就由2304個小格組成。這是世上最早對字體和版面進(jìn)行科學(xué)實驗的活動。也是柵格系統(tǒng)的雛形。

版式設(shè)計

20世紀(jì)50年代，柵格設(shè)計系統(tǒng)終于在前西德與瑞士得到完善。通過瑞士平面設(shè)計雜志的宣傳，將瑞士蘇黎士和巴塞爾兩個城市的設(shè)計家從20世紀(jì)40年代探索的成果全面展示，并影響世界各國，因此也被稱為“瑞士平面設(shè)計風(fēng)格”（Swiss Design）。由于這種風(fēng)格簡單明確，傳達(dá)功能準(zhǔn)確，因而很快得到世界范圍內(nèi)的普遍認(rèn)可，成為戰(zhàn)后影響最大的一種平面設(shè)計風(fēng)格，也是國際最流行的風(fēng)格，因此又被稱為“國際主義平面設(shè)計風(fēng)格”（International Typographic Style）。

網(wǎng)頁設(shè)計

萬維網(wǎng)聯(lián)盟發(fā)布的CSS Grid Layout Module Level 1制定了二維的基于網(wǎng)格的布局體系。

網(wǎng)頁設(shè)計中的柵格化布局已從老舊的表格布局發(fā)展到Css布局。柵格設(shè)計的特點是重視比例、秩序、連續(xù)感和現(xiàn)代感。 以及對存在于版面上的元素進(jìn)行規(guī)劃、組合、保持平衡或者打破平衡，以便讓信息可以更快速、更便捷、更系統(tǒng)和更有效率的讀取；另外最重要的一點是，負(fù)空間的規(guī)劃（即：留白）也是柵格系統(tǒng)設(shè)計當(dāng)中非常重要的部分。

網(wǎng)頁柵格系統(tǒng)可以定義為：

輔助和規(guī)范頁面信息布局，使頁面具有比例、秩序、連續(xù)感和現(xiàn)代感。

下面文中所提到的柵格化均為網(wǎng)頁柵格。

二、柵格化相關(guān)的概念

1、基礎(chǔ)概念

1）、網(wǎng)格 | Grid

網(wǎng)格是構(gòu)成頁面柵格系統(tǒng)的最小單位。一般為8點柵格。

2）、柵格總寬度 | Container

柵格寬度是頁面柵格系統(tǒng)的總寬度。

3）、邊距 | Margin

邊距是柵格外邊距，與屏寬保持合適的安全距離，讓界面左右能保證可讀性和美觀度。

3）、列

一列中包含了列寬（Column Width）以及槽（Gutter）兩部分。

列（Column）

列是柵格的數(shù)量單位，當(dāng)界面設(shè)定好總寬度后縱向等分成幾列，比如 Ant Design 采用的 24 柵格就是有 24 列。

槽（Gutter）

槽是相鄰兩個列寬之間的間隔，通過設(shè)定列的左右內(nèi)邊距（padding）來決定槽的大小，列減去槽的部分為列寬。

槽用來規(guī)范頁面中內(nèi)容間的間距，槽的值越大，頁面中留白部分的面積越多，視覺效果越松散；反之，頁面越緊湊。槽通常設(shè)為定值。

2、區(qū)塊 | Col-n

建立好基礎(chǔ)柵格之后，一塊內(nèi)容通常會占用幾個列，把這個區(qū)域理解為內(nèi)容區(qū)塊，用于承載一個區(qū)域的內(nèi)容。

區(qū)塊從水槽開始到水槽結(jié)束。

三、柵格化原子設(shè)計理論布局思想

柵格化原子設(shè)計理論布局思想：使頁面的所有的元素盡量保持柵格化。

1、布局柵格化

1）、頁面框架




2）、其他容器參考

彈窗框架

抽屜式導(dǎo)航框架

尺寸1

尺寸2

尺寸3

2、業(yè)務(wù)柵格化

指標(biāo)大盤




一般業(yè)務(wù)




表格

四、柵格化的設(shè)置

1、通過Sketch布局進(jìn)行設(shè)置

打開Sketch->視圖->畫布-布局設(shè)置：




2、通過JINGWHALE Sketch插件進(jìn)行自動設(shè)置

選擇頁面的主內(nèi)容區(qū)域，使用Sketch->JINGWHALE->Efficient Tool->Set Grid Layout：

選擇水槽寬度，插件會自動給所選主內(nèi)容區(qū)域添加?xùn)鸥窕?br>

五、與響應(yīng)式布局的關(guān)系

關(guān)于響應(yīng)式設(shè)計通常會有兩個普遍認(rèn)識，即 Aaron Gustafson 與 Ethan Marcotte 分別在 2011 年自己的著作中提出的 Adaptive Web Design (AWD)與 Responsive Web Design (RWD)概念，它們的核心區(qū)別在于 AWD 針對不同的設(shè)備或屏幕尺寸定制化設(shè)計多個固定布局的尺寸，而 RWD 是同一套代碼做彈性的適應(yīng)，本質(zhì)上它們都在解決產(chǎn)品設(shè)計如何適應(yīng)于不同設(shè)備以及不同屏幕規(guī)格的問題。

響應(yīng)式設(shè)計包大致包含設(shè)計策略、設(shè)計模式、實施模式、組件應(yīng)用四個方面的內(nèi)容。而柵格化是屬于設(shè)計模式的一種，它經(jīng)常和相對尺寸單位、屏幕斷點等設(shè)計模式綜合在一起，完成響應(yīng)式設(shè)計。

響應(yīng)式設(shè)計請查看

---

INGWHALE，致力于設(shè)計出最符合用戶體驗的產(chǎn)品。