版式設(shè)計(jì)中的原理和技巧

2019-01-18 3867 0

對于很多設(shè)計(jì)師來說版式設(shè)計(jì)和色彩的掌控看似很難掌握,

但如果你掌握其中的原理和技巧,就能很容易設(shè)計(jì)令人滿意的作品.


 

Visual Line - about 

關(guān)于視覺動線


 

對于視覺動線,也就是眼睛看物體的視覺順序。

在海報畫面上,視覺動線就是圖片元素的信息主次,很多說都遇到過“信息很亂”的評價,

這主要是沒有突出主要元素物體,周邊的元素?fù)屃艘曈X點(diǎn)。

對于不同的媒介,在目的上是相同,在結(jié)構(gòu)上是有區(qū)分的,主要是元素以及視覺主旨的區(qū)別。

例如書籍,UI界面,網(wǎng)頁,KV海報等載體。


 

在整體上設(shè)計(jì)動線分為2大類,一類是具有動態(tài)性和變化性的網(wǎng)站,視頻,UI界面和書籍設(shè)計(jì),

另外一類是海報,書籍封面,等固定畫面形式的設(shè)計(jì)。

將元素整合為點(diǎn),線,面,在視覺上進(jìn)行層次和位置的結(jié)構(gòu)調(diào)整。

在這里需要忽略元素本身的細(xì)節(jié),要從整個格局上看待畫面,看待元素的位置結(jié)構(gòu)。

Visual Line - Apply

視覺動線的應(yīng)用


 

在所設(shè)計(jì)之前,我們都應(yīng)該明白我們設(shè)計(jì)的主題是什么,然后將信息在視覺動線上進(jìn)行組合設(shè)計(jì),需要將元素整合為點(diǎn),線,面,在視覺上進(jìn)行層次和位置的結(jié)構(gòu)調(diào)整。

在這里確認(rèn)好基本信息之后,要從整個格局上看待畫面,看待元素的位置結(jié)構(gòu)。

Layout and Gravity - Type Area 

版面的版心


 

 

版心就是我們所設(shè)計(jì)畫面的安全尺寸。


 

在設(shè)計(jì)的應(yīng)用上,版心具有其獨(dú)特的位置,對于書籍網(wǎng)站等文字性排版的媒介,版心是能規(guī)范視覺,在海報設(shè)計(jì)上,版心主要規(guī)范主信息的位置,給視覺以安全距離。


 

版心的計(jì)算

在標(biāo)準(zhǔn)情況下,(文字的磅值+行間距)x 行數(shù)-行間距=版面的上下尺寸

版心以及版面的分欄

對于是基于版心的基礎(chǔ)上,對整個畫面進(jìn)行標(biāo)準(zhǔn)的網(wǎng)格劃分,以規(guī)范元素的位置,使得整個畫面更加整潔,結(jié)構(gòu)平衡舒適。

Layout and Gravity - The center of gravity

版面的重心


 

重心就是畫面的視覺主體,是畫面的視覺中心。
 


 

在設(shè)計(jì)中“重心”主要是處于一個范圍內(nèi),并不是固定的位置,也不是畫面尺寸的中心。

在畫面中,是需要其他元素進(jìn)行重心平衡。

 

在設(shè)計(jì)中,我們對重心的調(diào)整是很微妙,這也就是我們會不停的嘗試,不停的試錯,總在想找到那最適合的位置,顏色,字體,字號大小等因素.

對于設(shè)計(jì)師來說,我們應(yīng)該本著對自己畫面負(fù)責(zé)的態(tài)度進(jìn)行設(shè)計(jì).

Structure System- Grid systems

網(wǎng)格排版系統(tǒng)


 

主要以垂直和水平來劃分版面的系統(tǒng)。
 

網(wǎng)格排版系統(tǒng)最早是源于印刷的書籍排版上,因?yàn)樵谖淖钟∷⒅?是必須對所有文字信息進(jìn)行標(biāo)準(zhǔn)規(guī)范的編排,以滿足批量印刷的需求.在現(xiàn)在的網(wǎng)絡(luò)環(huán)境中,同樣也需要如此規(guī)范的編排,以減少出錯率,

這也是這幾年網(wǎng)格系統(tǒng)被流行的主要原因。

以垂直和水平的分配方式排列版面元素

網(wǎng)格系統(tǒng)的網(wǎng)格編排主要是

3 x 3

3 x 4

3 x 5

3 欄/ 4欄 / 5欄/7欄/10欄/12欄等

具體的設(shè)置根據(jù)主體設(shè)計(jì)的要求,

以及媒介載體可以自行調(diào)整.

網(wǎng)格系統(tǒng)

網(wǎng)格系統(tǒng)的主要優(yōu)勢是具有通用性,具有模塊性.

軸線式系統(tǒng)

軸線式只有一條,所有元素都放在這軸線的兩邊。

放射式系統(tǒng)

所有元素皆從焦點(diǎn)延伸出來。


漣漪式系統(tǒng)

所有元素皆從中心點(diǎn)環(huán)狀散播開來。

隨機(jī)式系統(tǒng)

元素沒有特定模式關(guān)系,主要以平衡法則進(jìn)行排列。

行進(jìn)式系統(tǒng)

這是把元素層層結(jié)合,沒有固定形式的系統(tǒng)。


模組式系統(tǒng)

將諸多抽象元素變成標(biāo)準(zhǔn)化單元,架接起來。

兩邊對稱式系統(tǒng)

所有文字或元素以左右對稱的形式,安排在一條軸線上。

Layout Reference 

常用板式參考


 

 

Color Composition - Hue

色相


 

色相顧名思義就是,顏色相,也就是外表.
 

對于設(shè)計(jì)師來說,色相這個詞大家都不會陌生的,這就我們?nèi)粘?吹奈矬w顏色會說的,紅/橙/黃/綠/青/藍(lán)/紫

 

色相,在這里有2個色以上的對比,按照角度劃分為,間色/補(bǔ)色/對比色/同類色.

不同的色相,在自然中都有不同的印證,都能喚醒內(nèi)心不同的情感。

Color Composition - Valve

明度


 

明度是指顏色的明亮程度.

 

在明度這里就有我們在設(shè)計(jì)中常用的高級灰,這也是統(tǒng)一色調(diào)的方式.
 

Color Composition - Purity

純度

 


 

純度也是顏色的飽和度,是指這個顏色含有對應(yīng)色相的多少.

這里有一個概念是黑白不算顏色,因?yàn)闆]有色

在對風(fēng)格的把控中,顏色純度的變化,是很容影響風(fēng)格的.

這里會涉及到,不同文化,不同主題等等.

Tonal 

色調(diào)

 


 

長調(diào),在音樂里面主要就是高昂奮進(jìn)的樂章。

短調(diào),主要是一些特定文化的音樂。

在設(shè)計(jì)里面應(yīng)用以品質(zhì)感的氛圍為主,主要做一些背景使用,

以及一些藝術(shù)作品里面。

在設(shè)計(jì)里面主要應(yīng)用范圍是,海報KV,產(chǎn)品展示等主題較強(qiáng)的設(shè)計(jì)。
 

在長調(diào)里面主要需要體現(xiàn)的是高對比,畫面明快,顏色飽和度高的設(shè)計(jì)作品。

 

中調(diào),在音樂中主要是一些過度場景,也有一些特定文化的音樂。

在設(shè)計(jì)里面主要應(yīng)用范圍是,節(jié)日活動,等氛圍性設(shè)計(jì)。
 

短調(diào),主要是一些特定文化的音樂。

在設(shè)計(jì)里面應(yīng)用以品質(zhì)感的氛圍為主,主要做一些背景使用,

以及一些藝術(shù)作品里面。

 

Color Character - Graphic

色彩的圖形


 

色彩對圖形的影響。
 

這也是在設(shè)計(jì)需要對圖形的位置以及體積進(jìn)行微調(diào)的主要原因。


 

Color Character - Weight
 

色彩的重量


 

不同的顏色是具有不同的視覺重量。
 

色彩的體積取決于,色彩的色相,明度,純度。

 

Color Character - Emotion

色彩的情感


 

紅/橙/黃/綠/青/藍(lán)/紫,就是這些色彩來引導(dǎo)我們的情緒。
 

帶動我們的喜怒哀樂,帶動厭惡歡喜。

我們是生活顏色的世界里,不同的顏色能帶動我們不同的情緒,這也是世界如此多彩的原因。

Color Character - Culture

色彩的文化


 

 

色彩的文化性,是由色彩本身的組合和混合產(chǎn)生的。

對于色彩的文化,主要是人類在長期的生活勞動,以及各種活動文化中慢慢演變產(chǎn)生的。

但顏色的組合不一定能代表特定的文化,顏色需要同特定的符號圖形一起,才能彰顯其魅力.


 

色彩的文化性和其特定的形狀也密不可分。


 

Color Character - Texture 

肌理和紋理


 

 

肌理和紋理是由區(qū)別的,我們?nèi)粘Uf的質(zhì)感主要是指對肌理的描述。

Design Style 

常用的風(fēng)格展示


 

品質(zhì)科技

 


 

精致生活

 


 

智能生活

 


 

獨(dú)特匠心

 


 

時尚藝術(shù)

 


 

個性潮流

 


 

天然有機(jī)

 


 

品質(zhì)工業(yè)

 


 

兒童時尚

 


 

節(jié)日活動

 


 


21
評論區(qū)(0)
正在加載評論...