版式設(shè)計(jì)的網(wǎng)格系統(tǒng)
學(xué)會(huì)和理解如何排版是成為一個(gè)設(shè)計(jì)大師超級(jí)重要的一部分。小編知道很多同學(xué)們平時(shí)在做排版設(shè)計(jì)的時(shí)候經(jīng)常是全憑感覺(jué)調(diào)了一兩個(gè)鐘頭后,自己都麻木了,判斷不了是好是壞,最后導(dǎo)出一張自己感覺(jué)貌似還可以的版本。為了避免這樣的問(wèn)題,小編來(lái)教大家一個(gè)技巧就是排版助力,網(wǎng)格系統(tǒng)。
01 /頁(yè)邊距設(shè)置
在講網(wǎng)格之前,我需要先提一提頁(yè)邊距的問(wèn)題。很多人在設(shè)計(jì)版式時(shí)都忽略了頁(yè)邊距,頁(yè)邊距是對(duì)版面整體效果產(chǎn)生很大的影響。頁(yè)邊距太小,會(huì)給人很壓迫,透不過(guò)氣的感覺(jué),頁(yè)邊距過(guò)大又會(huì)導(dǎo)致文本稀疏,閱讀體驗(yàn)不完整的感受。

先看看幾種常反的錯(cuò)誤
第一種,頁(yè)邊距設(shè)置不合理導(dǎo)致版心偏高;
第二種,版心偏低,導(dǎo)致整體畫(huà)面下沉,且有種要掉出畫(huà)板的感覺(jué),
第一二種的頁(yè)邊距設(shè)置是一樣的,所以這樣的設(shè)置不大合理。

第三種,是最最常見(jiàn)的,盡管設(shè)置頁(yè)邊距合理,但過(guò)于均勻?qū)ΨQ,會(huì)導(dǎo)致畫(huà)面呆板,總覺(jué)得缺少了點(diǎn)什么。
第四種,這種設(shè)置是比較合適的,我們的閱讀習(xí)慣是從左到右的,這樣的設(shè)置比較舒服。右邊間距比左邊大1倍,下邊的設(shè)置也是,比上邊大一倍。不過(guò)需要說(shuō)明,設(shè)置前不盲目,還是要先判斷這樣的設(shè)置是否符合自己的設(shè)計(jì)需求,這個(gè)適合一般文學(xué)出版物,雜志,海報(bào)之類。
02 /8格網(wǎng)格用法
大家可以看到上面那個(gè)示例,把內(nèi)容分為8個(gè)版塊,這就是網(wǎng)格最基本的用法,叫做8格網(wǎng)格系統(tǒng)。


8格網(wǎng)格是最容易上手的,只需要通過(guò)對(duì)8種不同尺寸的圖片和文字信息進(jìn)行組合,就可以解決許多簡(jiǎn)單的問(wèn)題,這時(shí)如果能再加上一點(diǎn)設(shè)計(jì)師的小小想象力,畫(huà)面就已經(jīng)很生動(dòng)了。
8格網(wǎng)格一般已經(jīng)滿足了基本版式需求,上圖中,有4種窄長(zhǎng)的圖和4種寬幅的圖片,根據(jù)實(shí)際情況配合設(shè)計(jì),隨后唯一要注意的,就是設(shè)計(jì)選擇圖片和字體的能力了。


03 /20格網(wǎng)格用法
20格網(wǎng)格系統(tǒng)給設(shè)計(jì)師排版更多的可能性,拓寬了思路。
排版是的終極目標(biāo),是信息整理和信息合理傳達(dá),一級(jí),二級(jí),三級(jí),讓閱讀者有一種滿意的視覺(jué)感受,而不是單純的視覺(jué)沖擊。


網(wǎng)格系統(tǒng)給我們一個(gè)科學(xué)的辦法來(lái)留白,國(guó)畫(huà)中留白講究的是氣韻、呼吸,而我們的版式中一樣需要呼吸,上面的例子中,段落與段落之間大量的留白,卻又有科學(xué)依據(jù)在背后支撐,雖然文字特別多,但是給人的感覺(jué)特別舒服。


當(dāng)有了網(wǎng)格之后,設(shè)計(jì)師在排版之前會(huì)有意識(shí)挑選圖片了,和按照比例需求進(jìn)行裁切


如果圖片與圖片的間隔是均勻的,那么無(wú)論是圖大圖小,都是有一種舒適感。讀者的閱讀是可以引導(dǎo)的。


如果把上面這幾張版式抽象一下來(lái)看,其實(shí)就只有正方形和長(zhǎng)方形,這樣簡(jiǎn)潔利索的畫(huà)面會(huì)有一種大氣感。這里特別提醒,在圖片過(guò)渡到下一張圖或者下一段文本,中間可以加插一小句文字,不讓視覺(jué)跳躍太突兀。


其他20格網(wǎng)格系統(tǒng)使用案例
不管8格,20格,還是32格,沒(méi)有高級(jí)或者基礎(chǔ)之分,只有合不合適。選擇符合設(shè)計(jì)需求的網(wǎng)格系統(tǒng),提高設(shè)計(jì)效率才是我們的目的。
平時(shí)多練一練,不至于在實(shí)戰(zhàn)的時(shí)候措手不及。慢慢的,你內(nèi)在的版式修為會(huì)蹭蹭蹭往上漲的。
8格網(wǎng)格一般已經(jīng)滿足了基本版式需求,上圖中,有4種窄長(zhǎng)的圖和4種寬幅的圖片,根據(jù)實(shí)際情況配合設(shè)計(jì),隨后唯一要注意的,就是設(shè)計(jì)選擇圖片和字體的能力了。


03 /20格網(wǎng)格用法
20格網(wǎng)格系統(tǒng)給設(shè)計(jì)師排版更多的可能性,拓寬了思路。
排版是的終極目標(biāo),是信息整理和信息合理傳達(dá),一級(jí),二級(jí),三級(jí),讓閱讀者有一種滿意的視覺(jué)感受,而不是單純的視覺(jué)沖擊。


網(wǎng)格系統(tǒng)給我們一個(gè)科學(xué)的辦法來(lái)留白,國(guó)畫(huà)中留白講究的是氣韻、呼吸,而我們的版式中一樣需要呼吸,上面的例子中,段落與段落之間大量的留白,卻又有科學(xué)依據(jù)在背后支撐,雖然文字特別多,但是給人的感覺(jué)特別舒服。


當(dāng)有了網(wǎng)格之后,設(shè)計(jì)師在排版之前會(huì)有意識(shí)挑選圖片了,和按照比例需求進(jìn)行裁切


如果圖片與圖片的間隔是均勻的,那么無(wú)論是圖大圖小,都是有一種舒適感。讀者的閱讀是可以引導(dǎo)的。


如果把上面這幾張版式抽象一下來(lái)看,其實(shí)就只有正方形和長(zhǎng)方形,這樣簡(jiǎn)潔利索的畫(huà)面會(huì)有一種大氣感。這里特別提醒,在圖片過(guò)渡到下一張圖或者下一段文本,中間可以加插一小句文字,不讓視覺(jué)跳躍太突兀。


其他20格網(wǎng)格系統(tǒng)使用案例
不管8格,20格,還是32格,沒(méi)有高級(jí)或者基礎(chǔ)之分,只有合不合適。選擇符合設(shè)計(jì)需求的網(wǎng)格系統(tǒng),提高設(shè)計(jì)效率才是我們的目的。
平時(shí)多練一練,不至于在實(shí)戰(zhàn)的時(shí)候措手不及。慢慢的,你內(nèi)在的版式修為會(huì)蹭蹭蹭往上漲的。
本文地址:http://m.irelandcustomcontracting.com/tutorial/di299.html
您可能還喜歡
- Macaron 馬卡龍系色譜 ;附HC(16進(jìn)制碼
- 7個(gè)手機(jī)版網(wǎng)頁(yè)設(shè)計(jì)的原則
- 折紙多邊形網(wǎng)頁(yè)背景效果制作教程
- 龐門(mén)正道:好好玩耍的點(diǎn)線面(上)
- 網(wǎng)頁(yè)設(shè)計(jì)中的常見(jiàn)頁(yè)面布局方式
- WAP APP的柵格設(shè)計(jì)
- 八種很漂亮的排版方法和技巧分享
- 網(wǎng)頁(yè)設(shè)計(jì)的首屏標(biāo)準(zhǔn)你了解多少?
- 字體大寶庫(kù):40款為網(wǎng)頁(yè)設(shè)計(jì)師準(zhǔn)備的時(shí)
- 視覺(jué)設(shè)計(jì)分享—專題頁(yè)面設(shè)計(jì)篇
- 專訪:石墨文檔產(chǎn)品總監(jiān)羅穎
- UI設(shè)計(jì)不得不知的移動(dòng)端UI尺寸適
- 光音移動(dòng)設(shè)計(jì)規(guī)范 — 表單類
- 體驗(yàn)設(shè)計(jì)中的排序問(wèn)題
- 網(wǎng)頁(yè)設(shè)計(jì)精粹 網(wǎng)頁(yè)中那些迷人的按
- aliued:響應(yīng)式設(shè)計(jì)的現(xiàn)狀與趨勢(shì)
- 10個(gè)智能對(duì)象處理的ps技巧
- 網(wǎng)頁(yè)UI - 原子設(shè)計(jì)理論(上)
- 如何通過(guò)設(shè)計(jì)提升banner點(diǎn)擊率?
- 晉小彥視覺(jué)設(shè)計(jì)系列文章(二):全屏