作品太單調(diào)?三招提升設(shè)計(jì)層次感

有時(shí)候做設(shè)計(jì)總覺(jué)得缺少了點(diǎn)什么,差了一點(diǎn)什么感覺(jué),畫(huà)面好像有些單調(diào),太平了……這些原因通常是缺乏層次的表現(xiàn)。

層次感是什么?

把畫(huà)面中的各個(gè)元素合理的、清晰的、有節(jié)奏的組合在一起,使整個(gè)畫(huà)面看起來(lái)更加的舒適、愉悅和協(xié)調(diào)。是不是感覺(jué)很深?yuàn)W?好吧,換句簡(jiǎn)單的話來(lái)說(shuō)就是——不多、不少,看起來(lái)舒服正好!

我的這篇文章分為3個(gè)章節(jié),而每個(gè)章節(jié)都有若干細(xì)分的知識(shí)點(diǎn),各位看官請(qǐng)仔細(xì)看哦!

初步理解,先來(lái)看看文章大綱:

一、畫(huà)面的層次

1.使用點(diǎn)、線、面來(lái)分割畫(huà)面

2.留白

3.在攝影中找層次

二、色彩的層次

1.顏色的對(duì)比
2.漸變色的流行

3.多種顏色搭配的控制

三、文字的層次

1.字體的對(duì)比
2.文字的對(duì)比

*******

一、畫(huà)面的層次

1.使用點(diǎn)、線、面來(lái)分割畫(huà)面

點(diǎn)、線、面是設(shè)計(jì)中最基本的設(shè)計(jì)元素,學(xué)過(guò)平面構(gòu)成的同學(xué)應(yīng)該都有些了解,連點(diǎn)成線、連線成面、而面縮小到一定程度就是點(diǎn)。而面的邊界就是線,線的寬度增加和點(diǎn)擴(kuò)散到一定的面積也就成為面。

上面的這幾句話看起來(lái)比較復(fù)雜,其實(shí)仔細(xì)想想這就是世界里一切元素的原理甚至是宇宙星空。我們下面來(lái)舉個(gè)例子。

上圖就基本可以把點(diǎn)、線、面的所有變化全部概括。下面我們來(lái)分析一下。

紅圈里的十字元素可以看作為“點(diǎn)”做為整體畫(huà)面中的裝飾元素出現(xiàn)。要注意的是所謂的“點(diǎn)”并不只是圓形的哦。任何在畫(huà)面中尺寸和面積相對(duì)最小的元素都可以看做成“點(diǎn)”。而畫(huà)面中的小圓點(diǎn)既可以看做“點(diǎn)”,也可以看作“面”。所以連點(diǎn)成面也是沒(méi)錯(cuò)的。

黃色圈里的線大家認(rèn)為是什么?我認(rèn)為它并不是線而是點(diǎn)。為什么呢?因?yàn)闊o(wú)論從它在畫(huà)面中的占比還是所起到的作用來(lái)看,它都屬于點(diǎn)的屬性。而線在那?在綠色塊和紅色塊的交界處。還有色塊的邊界處。而這正說(shuō)明了“線”的一個(gè)重要的用途——分割。畫(huà)面中的“線”把整個(gè)畫(huà)面分割成了4個(gè)大小不一的區(qū)域,這種分割讓畫(huà)面更加有趣味性也更加有層次感

而線分割出來(lái)的4個(gè)區(qū)域也就是元素“面”。

這個(gè)圖例不僅說(shuō)明了點(diǎn)線面的幾個(gè)重要的特征,也證明了點(diǎn)線面并不會(huì)因?yàn)樗男螤疃潭ǖ?,而是?huì)不斷變化的。

最后總結(jié)一下點(diǎn)線面的一些特點(diǎn):

點(diǎn):是最有裝飾性的元素,因此大多情況下在畫(huà)面中起到裝飾作用。

線:除了裝飾作用外還起到對(duì)畫(huà)面的分割、元素的穿插和對(duì)視覺(jué)引導(dǎo)的作用。

面:往往起到穩(wěn)定畫(huà)面和承載重要信息的作用。

另外要注意的是:點(diǎn)線面是組合使用的,想想看沒(méi)有面的襯托又怎么能顯示出點(diǎn)和線的特征呢?

通過(guò)這些設(shè)計(jì)案例我們可以分析并總結(jié)出,有效的利用點(diǎn)線面的組合可設(shè)計(jì)出層次豐富的作品。而我們要如何做呢?——置換臨摹。借鑒好的設(shè)計(jì)作品的點(diǎn)線面的構(gòu)成元素再加以利用和創(chuàng)新。

上面兩個(gè)設(shè)計(jì)第一個(gè)是不錯(cuò)研究室的課程分享海報(bào),這個(gè)海報(bào)就很好的借鑒和置換了下面這幅韓國(guó)海報(bào)的形式,并加以創(chuàng)新和變化。當(dāng)我們有時(shí)沒(méi)有靈感或者在空余的時(shí)候做設(shè)計(jì)練習(xí)可以用這種置換的方式,可能在初期你還只能去完全照搬他的版式,但是隨著設(shè)計(jì)練習(xí)的增加你會(huì)逐漸的得心應(yīng)手。

2.留白

留白是我們?cè)O(shè)計(jì)中很常用的手法,留白除了讓畫(huà)面整潔、干凈和透氣外,更是對(duì)“面”的更深刻的理解和使用。而現(xiàn)在用的非常廣泛的極簡(jiǎn)設(shè)計(jì)就是在留白的處理上用的比較好的一種設(shè)計(jì)類型,這在我上一篇文章《電商設(shè)計(jì)中的極簡(jiǎn)設(shè)計(jì)》也詳細(xì)的介紹過(guò)。

我們這里再說(shuō)一下留白對(duì)層次的影響,先看幾個(gè)設(shè)計(jì)案例。

上面的幾個(gè)設(shè)計(jì)作品的共同特點(diǎn)就是有大量的設(shè)計(jì)留白,并且在留白的同時(shí)對(duì)畫(huà)面的層次進(jìn)行了處理,例如留白與主圖之間的大小對(duì)比,標(biāo)題與補(bǔ)充性文字直接的對(duì)比。

我把上面的圖做了個(gè)處理,分成背景層,留白層,主體模特層,標(biāo)題文案層和功能文案層。從這里我們就能看出這幅設(shè)計(jì)的層次是如何設(shè)計(jì)的了。大家也不妨把自己喜歡的設(shè)計(jì)這樣分層解構(gòu),來(lái)研究一下設(shè)計(jì)的層次。

3.在攝影中找層次

現(xiàn)在的設(shè)計(jì)中,攝影圖片的使用也是越來(lái)越多了,尤其是質(zhì)量高的攝影作品往往能最大限度的提高設(shè)計(jì)的品質(zhì)。但是這是為什么大家想過(guò)嗎?其中一個(gè)原因是攝影中也存在著層次。

這個(gè)裝B耳機(jī)大家熟悉吧,這就是用攝影的方式來(lái)做的,并且其中近景,中景,遠(yuǎn)景三個(gè)層次全都有。不僅看起來(lái)畫(huà)面非常細(xì)膩豐富,而且也品質(zhì)感十足。

但是如果圖片層次少怎么辦?很簡(jiǎn)單,我們可以使用文字來(lái)做為圖案元素來(lái)增加畫(huà)面層次。

二、色彩的層次

1.顏色的對(duì)比

使用對(duì)比色和反差大的顏色來(lái)設(shè)計(jì)也是增加層次感的一個(gè)常用方法,因?yàn)橛蟹浅?qiáng)烈的顏色對(duì)比,畫(huà)面的沖擊力會(huì)非常強(qiáng)烈,給人們的視覺(jué)觀感也會(huì)更加刺激。

黑黃對(duì)比是非常經(jīng)典配色方案,雖然只有兩個(gè)顏色,但是通過(guò)畫(huà)面中的文案和圖片的組合也會(huì)顯得非常豐富,在這種極簡(jiǎn)的配色中更加需要對(duì)點(diǎn)線面的合理運(yùn)用否則會(huì)顯得有些單調(diào)。

從上面的設(shè)計(jì)來(lái)看,設(shè)計(jì)師在用黑黃配色的時(shí)候又用了黃色的對(duì)比色——藍(lán)色,這樣既可以讓畫(huà)面的顏色更加豐富不會(huì)單調(diào),又會(huì)讓畫(huà)面中的一些重要元素凸顯出來(lái),起到強(qiáng)調(diào)作用。

黃藍(lán)配色和紅綠配色也是經(jīng)常用到的經(jīng)典配色,上面兩個(gè)案例可以看到,黃藍(lán)配色多用飽和度比較高,這樣顯得年輕時(shí)尚有科技感,而另一個(gè)設(shè)計(jì)是紅綠藍(lán)的配色,飽和度較低,顯得更加復(fù)古和深沉。

2.漸變色的流行

漸變色已經(jīng)流行了幾年,今年淘寶的手機(jī)app也是以漸變色來(lái)設(shè)計(jì)的,可見(jiàn)漸變色的使用范圍也是越來(lái)越大了。而漸變色本身就具有層次豐富的特點(diǎn),因此,使用漸變色加上合理的點(diǎn)線面元素的搭配會(huì)在具有沖擊力的同時(shí)最大限度的豐富畫(huà)面的層次。

在我們?nèi)粘5脑O(shè)計(jì)中漸變色的使用還是需要更加精心的選擇顏色的色值,一般來(lái)說(shuō)會(huì)選擇同色漸變、鄰近色漸變和對(duì)比色漸變。而漸變的顏色數(shù)量也不宜超過(guò)2種。2種以上的漸變色就需要非常強(qiáng)的控色能力來(lái)駕馭了。(我這里說(shuō)的是在同一漸變色里的2種以上的顏色哦)

漸變色的使用大多都出現(xiàn)在UI設(shè)計(jì)中,而隨著UI設(shè)計(jì)的發(fā)展,web端的設(shè)計(jì),無(wú)論是網(wǎng)頁(yè)還是電商也有很多借鑒UI設(shè)計(jì)的設(shè)計(jì)方法和配色方法。

漸變色的配色是可以搭配使用的,例如上圖,都屬于同色漸變,但是這樣使用有一個(gè)規(guī)則,就是互相搭配的幾個(gè)漸變色的飽和度要基本一致,否則會(huì)出現(xiàn)顏色“花”的問(wèn)題。

3.多種顏色搭配的控制

對(duì)于多顏色的設(shè)計(jì)我們要做的就是控制飽和度和明度,盡量使各個(gè)顏色的飽和度和明度保持協(xié)調(diào)的一致。無(wú)論是清淡的中國(guó)風(fēng),還是濃烈的歐美風(fēng),都會(huì)讓畫(huà)面豐富有層次的同時(shí)不會(huì)“亂掉”、“花掉”。

我們可以看到,上面的幾個(gè)圖例里的顏色非常多,但是為什么我們會(huì)感覺(jué)非常豐富而又有層次呢?沒(méi)錯(cuò),就是飽和度和明度的控制到位。

三、文字的層次

1.字體的對(duì)比

字體是我們?cè)O(shè)計(jì)中必須使用并且比較難的一個(gè)環(huán)節(jié),但是正式這個(gè)讓大家比較鬧心的環(huán)節(jié)會(huì)使畫(huà)面的層次變得異常豐富,即使在只有文字沒(méi)有圖案的時(shí)候,只要排版合理也可以得到驚人的效果。

不同的字體表達(dá)不同的意境和涵義,尤其是中文字體傳承幾千年每一個(gè)字都有特定的涵義。而西文主要是以襯線體和非襯線體的字形裝飾的變化。時(shí)而粗獷,時(shí)而纖細(xì)。

2.文字的對(duì)比

這里的對(duì)比包括文字的字體、大小、粗細(xì)、顏色等等。為什么單單要挑對(duì)比來(lái)說(shuō)呢?因?yàn)閷?duì)比是最能拉開(kāi)并體現(xiàn)層次的方法,我們逐個(gè)來(lái)說(shuō)。

我來(lái)那這個(gè)作品來(lái)分析解構(gòu)一下,30%是文字里面積最大的,也同樣是畫(huà)面元素里占比最大的,通過(guò)DISCOUNT VOUCHER的解釋說(shuō)明這是折扣信息,而這個(gè)解釋也是畫(huà)面里第二大占比的文字。然后就是下面的時(shí)間、地址、電話等信息,使用最小號(hào)的文字。通過(guò)這三種文字大小來(lái)把層次拉開(kāi),并且一下就得到3個(gè)層次,在加上最后面的花紋背景、白色背景和金色蝴蝶結(jié)總共是6個(gè)層次。另外為了統(tǒng)一畫(huà)面,文字的字體都采用了襯線體。

上面的這兩個(gè)海報(bào)也是同樣的道理,大家可以解讀一下。

字體的顏色,上面兩個(gè)aranya的海報(bào)是個(gè)系列,分別把主題文字aranya的顏色換成綠色和藍(lán)色,一方面可以增加文案的層次感,另一方面可以與視覺(jué)主體的顏色統(tǒng)一。下面是一些設(shè)計(jì)的案例大家可以試著分析一下。

最后說(shuō)一說(shuō)對(duì)齊,對(duì)齊是使畫(huà)面更加有秩序,看起來(lái)更合理且舒服。我們用上面這個(gè)海報(bào)來(lái)分析一下。

看這些藍(lán)色的線,就是這幅海報(bào)的對(duì)齊方式。

總結(jié)

其實(shí)層次是在綜合的運(yùn)用了點(diǎn)線面的分割,色彩的搭配和文字的排版而形成的,并且在大小比例,顏色選擇,對(duì)齊等這些細(xì)節(jié)上精益求精,層次自然立現(xiàn)。

有了這三招設(shè)計(jì)理論,以及這么多的優(yōu)秀平面設(shè)計(jì)作品案例,希望你對(duì)層次感有所認(rèn)識(shí),以后設(shè)計(jì)時(shí)可以參考本文的方法。

如果覺(jué)得本文有用,請(qǐng)點(diǎn)個(gè)贊哦

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書(shū)系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容