目錄
一逊移、畫面的層次
1.使用點(diǎn)、線拐叉、面來分割畫面
2.留白
3.在攝影中找層次
二扇商、色彩的層次
1.顏色的對比
2.漸變色的流行
3.多種顏色搭配的控制
三、文字的層次
1.字體的對比
2.文字的對比
在我們做設(shè)計(jì)的時候案铺，很多同學(xué)可能都會遇到一種情況蔬芥，客戶或需求方看完設(shè)計(jì)稿后一邊摸著下巴一邊說：“我總感覺少了點(diǎn)什么...? 你再改改。” 或者說：“太平了”坝茎、“有點(diǎn)單調(diào)”? 其實(shí)這些都是缺乏層次的表現(xiàn)涤姊。
而什么是層次感？
把畫面中的各個元素合理的嗤放、清晰的思喊、有節(jié)奏的組合在一起，使整個畫面看起來更加的舒適次酌、愉悅和協(xié)調(diào)恨课。是不是感覺很深奧？好吧岳服，換句簡單的話來說就是——不多剂公、不少，看起來舒服正好吊宋！
我的這篇文章分為3個章節(jié)纲辽，而每個章節(jié)都有若干細(xì)分的知識點(diǎn)，各位看官請仔細(xì)看哦璃搜！
一拖吼、畫面的層次
1.使用點(diǎn)、線这吻、面來分割畫面
點(diǎn)吊档、線怠硼、面是設(shè)計(jì)中最基本的設(shè)計(jì)元素香璃，學(xué)過平面構(gòu)成的同學(xué)應(yīng)該都有些了解葡秒，連點(diǎn)成線糖权、連線成面星澳、而面縮小到一定程度就是點(diǎn)腿堤。而面的邊界就是線忌堂，線的寬度增加和點(diǎn)擴(kuò)散到一定的面積也就成為面士修。
上面的這幾句話看起來比較復(fù)雜，其實(shí)仔細(xì)想想這就是世界里一切元素的原理甚至是宇宙星空沸移。我們下面來舉個例子雹锣。
? 上圖就基本可以把點(diǎn)、線在辆、面的所有變化全部概括。下面我們來分析一下鸦概。
? 紅圈里的十字元素可以看作為“點(diǎn)”做為整體畫面中的裝飾元素出現(xiàn)。要注意的是所謂的“點(diǎn)”并不只是圓形的哦饮笛。任何在畫面中尺寸和面積相對最小的元素都可以看做成“點(diǎn)”摄狱。而畫面中的小圓點(diǎn)既可以看做“點(diǎn)”媒役，也可以看作“面”交惯。所以連點(diǎn)成面也是沒錯的。
? 黃色圈里的線大家認(rèn)為是什么拳昌？我認(rèn)為它并不是線而是點(diǎn)炬藤。為什么呢？因?yàn)闊o論從它在畫面中的占比還是所起到的作用來看羹膳，它都屬于點(diǎn)的屬性陵像。而線在那醒颖？在綠色塊和紅色塊的交界處泞歉。還有色塊的邊界處。而這正說明了“線”的一個重要的用途——分割挺庞。畫面中的“線”把整個畫面分割成了4個大小不一的區(qū)域挠阁，這種分割讓畫面更加有趣味性也更加有層次感。
而線分割出來的4個區(qū)域也就是元素“面”隘谣。
這個圖例不僅說明了點(diǎn)線面的幾個重要的特征，也證明了點(diǎn)線面并不會因?yàn)樗男螤疃潭ǖ穆敕海菚粩嘧兓摹?/p>
最后總結(jié)一下點(diǎn)線面的一些特點(diǎn)：
點(diǎn)：是最有裝飾性的元素，因此大多情況下在畫面中起到裝飾作用齐莲。
線：除了裝飾作用外還起到對畫面的分割阵难、元素的穿插和對視覺引導(dǎo)的作用呜叫。
面：往往起到穩(wěn)定畫面和承載重要信息的作用。
另外要注意的是：點(diǎn)線面是組合使用的椎工，想想看沒有面的襯托又怎么能顯示出點(diǎn)和線的特征呢？
? 通過這些設(shè)計(jì)案例我們可以分析并總結(jié)出，有效的利用點(diǎn)線面的組合可設(shè)計(jì)出層次豐富的作品斑响。而我們要如何做呢舰罚？——置換臨摹赏陵。借鑒好的設(shè)計(jì)作品的點(diǎn)線面的構(gòu)成元素再加以利用和創(chuàng)新蝙搔。
不錯研究室的課程分享海報(bào)就曾很好的借鑒和置換了下面這幅韓國海報(bào)的形式吃型，并加以創(chuàng)新和變化。當(dāng)我們有時沒有靈感或者在空余的時候做設(shè)計(jì)練習(xí)可以用這種置換的方式，可能在初期你還只能去完全照搬他的版式兴枯，但是隨著設(shè)計(jì)練習(xí)的增加你會逐漸的得心應(yīng)手悠夯。
2.留白
留白是我們設(shè)計(jì)中很常用的手法，留白除了讓畫面整潔夕膀、干凈和透氣外，更是對“面”的更深刻的理解和使用易猫。而現(xiàn)在用的非常廣泛的極簡設(shè)計(jì)就是在留白的處理上用的比較好的一種設(shè)計(jì)類型准颓，這在我上一篇文章《電商設(shè)計(jì)中的極簡設(shè)計(jì)》也詳細(xì)的介紹過炮赦。
我們這里再說一下留白對層次的影響妆艘，先看幾個設(shè)計(jì)案例幌陕。
? 上面的幾個設(shè)計(jì)作品的共同特點(diǎn)就是有大量的設(shè)計(jì)留白洽蛀，并且在留白的同時對畫面的層次進(jìn)行了處理，例如留白與主圖之間的大小對比溜腐，標(biāo)題與補(bǔ)充性文字直接的對比歉糜。
我把上面的圖做了個處理，分成背景層，留白層刽酱，主體模特層润文，標(biāo)題文案層和功能文案層典蝌。從這里我們就能看出這幅設(shè)計(jì)的層次是如何設(shè)計(jì)的了曙砂。大家也不妨把自己喜歡的設(shè)計(jì)這樣分層解構(gòu)，來研究一下設(shè)計(jì)的層次骏掀。
3.在攝影中找層次
現(xiàn)在的設(shè)計(jì)中鸠澈，攝影圖片的使用也是越來越多了，尤其是質(zhì)量高的攝影作品往往能最大限度的提高設(shè)計(jì)的品質(zhì)截驮。但是這是為什么大家想過嗎笑陈？其中一個原因是攝影中也存在著層次。
?這個裝B耳機(jī)大家熟悉吧，這就是用攝影的方式來做的禽额，并且其中近景徙菠，中景，遠(yuǎn)景三個層次全都有。不僅看起來畫面非常細(xì)膩豐富逼龟，而且也品質(zhì)感十足翎碑。
但是如果圖片層次少怎么辦翰蠢？很簡單频鉴，我們可以使用文字來做為圖案元素來增加畫面層次。
二、色彩的層次
1.顏色的對比
使用對比色和反差大的顏色來設(shè)計(jì)也是增加層次感的一個常用方法集绰，因?yàn)橛蟹浅?qiáng)烈的顏色對比，畫面的沖擊力會非常強(qiáng)烈捏肢，給人們的視覺觀感也會更加刺激。
? 黑黃對比是非常經(jīng)典配色方案，雖然只有兩個顏色染坯，但是通過畫面中的文案和圖片的組合也會顯得非常豐富湃鹊，在這種極簡的配色中更加需要對點(diǎn)線面的合理運(yùn)用否則會顯得有些單調(diào)。
? 從上面的設(shè)計(jì)來看求泰，設(shè)計(jì)師在用黑黃配色的時候又用了黃色的對比色——藍(lán)色惹悄，這樣既可以讓畫面的顏色更加豐富不會單調(diào)，又會讓畫面中的一些重要元素凸顯出來库糠，起到強(qiáng)調(diào)作用贬墩。
黃藍(lán)配色和紅綠配色也是經(jīng)常用到的經(jīng)典配色停做，上面兩個案例可以看到，黃藍(lán)配色多用飽和度比較高库北，這樣顯得年輕時尚有科技感少辣，而另一個設(shè)計(jì)是紅綠藍(lán)的配色乾翔，飽和度較低，顯得更加復(fù)古和深沉施戴。
2.漸變色的流行
漸變色已經(jīng)流行了幾年反浓，今年淘寶的手機(jī)app也是以漸變色來設(shè)計(jì)的，可見漸變色的使用范圍也是越來越大了暇韧。而漸變色本身就具有層次豐富的特點(diǎn)勾习，因此浓瞪，使用漸變色加上合理的點(diǎn)線面元素的搭配會在具有沖擊力的同時最大限度的豐富畫面的層次懈玻。
在我們?nèi)粘５脑O(shè)計(jì)中漸變色的使用還是需要更加精心的選擇顏色的色值，一般來說會選擇同色漸變乾颁、鄰近色漸變和對比色漸變涂乌。而漸變的顏色數(shù)量也不宜超過2種。2種以上的漸變色就需要非常強(qiáng)的控色能力來駕馭了英岭。（我這里說的是在同一漸變色里的2種以上的顏色哦）
? 漸變色的使用大多都出現(xiàn)在UI設(shè)計(jì)中湾盒，而隨著UI設(shè)計(jì)的發(fā)展，web端的設(shè)計(jì)诅妹，無論是網(wǎng)頁還是電商也有很多借鑒UI設(shè)計(jì)的設(shè)計(jì)方法和配色方法罚勾。
?
漸變色的配色是可以搭配使用的毅人，例如上圖，都屬于同色漸變尖殃，但是這樣使用有一個規(guī)則丈莺，就是互相搭配的幾個漸變色的飽和度要基本一致，否則會出現(xiàn)顏色“花”的問題送丰。
3.多種顏色搭配的控制
對于多顏色的設(shè)計(jì)我們要做的就是控制飽和度和明度缔俄，盡量使各個顏色的飽和度和明度保持協(xié)調(diào)的一致。無論是清淡的中國風(fēng)器躏，還是濃烈的歐美風(fēng)俐载，都會讓畫面豐富有層次的同時不會“亂掉”、“花掉”登失。
?
? 我們可以看到遏佣，上面的幾個圖例里的顏色非常多，但是為什么我們會感覺非常豐富而又有層次呢揽浙？沒錯贼急，就是飽和度和明度的控制到位。
?
三捏萍、文字的層次
1.字體的對比
字體是我們設(shè)計(jì)中必須使用并且比較難的一個環(huán)節(jié)太抓，但是正式這個讓大家比較鬧心的環(huán)節(jié)會使畫面的層次變得異常豐富，即使在只有文字沒有圖案的時候令杈，只要排版合理也可以得到驚人的效果走敌。
?
? 不同的字體表達(dá)不同的意境和涵義，尤其是中文字體傳承幾千年每一個字都有特定的涵義逗噩。而西文主要是以襯線體和非襯線體的字形裝飾的變化掉丽。時而粗獷，時而纖細(xì)异雁。
?
2.文字的對比
這里的對比包括文字的字體捶障、大小、粗細(xì)纲刀、顏色等等项炼。為什么單單要挑對比來說呢？因?yàn)閷Ρ仁亲钅芾_并體現(xiàn)層次的方法示绊，我們逐個來說锭部。
? 我來那這個作品來分析解構(gòu)一下，30%是文字里面積最大的面褐，也同樣是畫面元素里占比最大的拌禾，通過DISCOUNT VOUCHER的解釋說明這是折扣信息，而這個解釋也是畫面里第二大占比的文字展哭。然后就是下面的時間湃窍、地址闻蛀、電話等信息，使用最小號的文字您市。通過這三種文字大小來把層次拉開循榆，并且一下就得到3個層次，在加上最后面的花紋背景墨坚、白色背景和金色蝴蝶結(jié)總共是6個層次秧饮。另外為了統(tǒng)一畫面，文字的字體都采用了襯線體泽篮。
上面的這兩個海報(bào)也是同樣的道理盗尸，大家可以解讀一下。
字體的顏色帽撑，上面兩個aranya的海報(bào)是個系列泼各，分別把主題文字aranya的顏色換成綠色和藍(lán)色，一方面可以增加文案的層次感亏拉，另一方面可以與視覺主體的顏色統(tǒng)一扣蜻。下面是一些設(shè)計(jì)的案例大家可以試著分析一下。
?
? 最后說一說對齊及塘，對齊是使畫面更加有秩序莽使，看起來更合理且舒服。我們用上面這個海報(bào)來分析一下笙僚。
看這些藍(lán)色的線芳肌，就是這幅海報(bào)的對齊方式。
總結(jié)
其實(shí)層次是在綜合的運(yùn)用了點(diǎn)線面的分割肋层，色彩的搭配和文字的排版而形成的亿笤，并且在大小比例栋猖，顏色選擇，對齊等這些細(xì)節(jié)上精益求精辱姨，層次自然立現(xiàn)。
原文作者：蒸個饅頭
