你的設(shè)計(jì)工具箱里有什么？
確保你的設(shè)計(jì)作品能夠盡可能有效地傳播，你要展示出作品的所有內(nèi)容——即使是那些被遺忘的藝術(shù)課程概念，比如色彩理論和成分組成——要有策略的運(yùn)用它們，而不是只堅(jiān)持你自己喜歡的那幾個(gè)或趕流行的技巧。
這就是視覺的層次結(jié)構(gòu)：使用你設(shè)計(jì)工具箱中的所有資源——顏色、對(duì)比、字體、間距、和其他基本原則——來組成和優(yōu)化你的作品內(nèi)容。
視覺層次結(jié)構(gòu)的一個(gè)最重要的功能是幫助作品建立一個(gè)焦點(diǎn)，當(dāng)觀眾開始瀏覽你設(shè)計(jì)作品時(shí)給他們一個(gè)入口點(diǎn)，并且讓他們能夠看到你要展示的最重要的信息在哪里。
讓我們回顧一些不同的方式，通過突出我們的設(shè)計(jì)元素，來創(chuàng)建一個(gè)清晰的具備焦點(diǎn)和動(dòng)態(tài)的視覺層次:
1.使用大小來加強(qiáng)（或削弱）可見性
你有沒有聽過“會(huì)哭的孩子有奶吃”？換言之：最大的設(shè)計(jì)元素最吸引眼球。擴(kuò)大一個(gè)對(duì)象的大?。ㄆ涑叽纾┖鸵?guī)模（它與其他對(duì)象的大小關(guān)系）是提高它視覺重要性最簡單直接的方法。
這里，Erin Lancaster通過增大設(shè)計(jì)元素使傳播主題立馬變得清晰，這包括同時(shí)增大夾頁排版和使用大幅照片等方法。
Erin Lancaster
另一方面，一些設(shè)計(jì)元素沒那么重要或者你想把它弱化，可以通過減小它的大小來使它不那么明顯，以此來降低它的視覺層次。
就像任何的設(shè)計(jì)準(zhǔn)則一樣，平衡和適度都是關(guān)鍵。一個(gè)太大的視覺焦點(diǎn)會(huì)毀掉一個(gè)設(shè)計(jì)，而一個(gè)太小的次要信息則會(huì)損害其可用性。］
2.色彩和對(duì)比度：對(duì)觀眾注意力直接的吸引
在視覺上最能引起我們注意的就是色彩，特別是當(dāng)它被有意圖地用在特別重要的信息傳達(dá)或者圖像當(dāng)中。比如像紅色或者黃色這樣明亮的色彩，不管它是出現(xiàn)在道路兩旁的交通標(biāo)志上還是掛在當(dāng)?shù)乜Х瑞^門頭上的招牌上，我們都很難不去注意到它。
99U
然而，如果你想把彩虹當(dāng)中出現(xiàn)的所有顏色都用于設(shè)計(jì)中，當(dāng)你忽略其中任何一種顏色都有可能影響視覺層次的構(gòu)建。這也是我們提倡帶使用盡可能少的顏色并且?guī)в心康男缘氖褂盟年P(guān)鍵原理所在。
從另一個(gè)角度來說，在色彩和對(duì)比度的設(shè)計(jì)上，也有很多創(chuàng)造性的方法可以應(yīng)用于引導(dǎo)觀眾的視線，包括：
色溫：色彩可以是冷的（就像藍(lán)色和綠色），暖的（例如紅色、橘色和黃色），也可以是中性的（比如黑色、白色、灰色，有些時(shí)候出現(xiàn)的棕色或米色）。色溫的混搭，特別是出現(xiàn)高對(duì)比度的時(shí)候，能夠產(chǎn)生很大的視覺吸引力。
這份由設(shè)計(jì)工作室Zee設(shè)計(jì)的劇場海報(bào)，融合了生動(dòng)跳躍的暖調(diào)橘色和明亮的冷調(diào)藍(lán)色，使用這樣引人注目的撞色，強(qiáng)化了色溫的對(duì)比度，這樣的色彩搭配就產(chǎn)生了非常有趣的視覺效果。
Zee
維持在一個(gè)色相可以更好的幫助設(shè)計(jì)進(jìn)行視覺上的銜接。比如Keith Johnson的傳單和網(wǎng)頁橫幅特征就不是創(chuàng)建視覺重點(diǎn)，而是用了相近的顏色來統(tǒng)一設(shè)計(jì)。
Keith Johnson
色值：顏色的色值指的展示為顏色的亮或暗。像色溫一樣，不同色值的顏色可以通過互相搭配，產(chǎn)生戲劇性的效果，而相似的色值的顏色則會(huì)有更均等的視覺重量。
在下面的設(shè)計(jì)中， Brad Vetter為了演出而設(shè)計(jì)的凸版印刷海報(bào)中背景顯示了兩種類似光照的柔和色調(diào)。與之相對(duì)比，深海軍藍(lán)被用來強(qiáng)調(diào)標(biāo)題——出演的藝術(shù)家。
Brad Vetter Design
飽和度：一個(gè)極其純的顏色，其明度是100%飽和，越接近灰色，就越不飽和。采用明亮的或柔和的顏色（一種單一的顏色或者與別的顏色相配合）是在設(shè)計(jì)中實(shí)現(xiàn)高對(duì)比或者低對(duì)比的重要策略。
在 Jason Booher的書籍封面設(shè)計(jì)，用于提亮視覺的醒目紅色與標(biāo)題相呼應(yīng)。標(biāo)題能夠更加突出是因?yàn)樗恼w背景色是一個(gè)褪色的中性色彩。這個(gè)作品還展現(xiàn)了色溫之間的對(duì)比——暖色和中性色。
Jason Booher
03. 排版的層次結(jié)構(gòu)：從3個(gè)層次來組織你的設(shè)計(jì)
對(duì)于任何以文字為主的設(shè)計(jì)，文字排版層次是視覺層次中一個(gè)不可忽視的部分。若想了解文字排版層次最基本的概念，只要去想想那些報(bào)紙或者雜志文章里面的標(biāo)題，子標(biāo)題和正文。
From Canva’s “Why Every Design Needs Three Levels of Typographic Hierarchy”
這個(gè)將文字分為3層次的方法能用個(gè)任何的設(shè)計(jì)里面（從名片到網(wǎng)站）。讓我們?cè)诟敿?xì)的了解一下每個(gè)層次并看看他們通?？赡鼙挥迷谀睦?。
第一層次：一般來說，你排版中的第一層次會(huì)是最重要的內(nèi)容，這些內(nèi)容應(yīng)該是你設(shè)計(jì)中最容易被看到的元素
第二層次：第二層次的元素一般是為了整合你的設(shè)計(jì)，或者把相關(guān)的信息鏈接起來。它們不能跟你的第一層級(jí)的元素一樣出眾，但是應(yīng)該很清楚的指導(dǎo)閱讀者區(qū)分設(shè)計(jì)中不同的部分和引導(dǎo)讀者。
第三層次：對(duì)于一個(gè)文字的排版，第三層次一般是指完整的信息，目的或者是設(shè)計(jì)的細(xì)節(jié)。它可以是長的或者短的（比如一整片文章，一個(gè)簡短的注釋，一個(gè)簡介）。但是這部分主要考慮其強(qiáng)烈的可讀性，即使文字的大小看起來稍微小。
想獲得更深入的文字排版層次指導(dǎo)，請(qǐng)點(diǎn)擊這個(gè)網(wǎng)址：Why Every Design Needs Three Levels of Typographic Hierarchy
04. 字體：仔細(xì)選擇字樣類別和風(fēng)格
排版層次不是文字排列時(shí)需要考慮的唯一一個(gè)方面。您的字體本身的外觀 - 字體類別（無襯線，襯線字體，腳本，或裝飾）和樣式（粗體，斜體，小盤股等） - 這些因素決定是否造就好的設(shè)計(jì)
可以把字體想象作為人格類型。你知道有些是響亮而華麗的，有些是安靜，但有趣的，其他的一些是靈活的，適用在什么地方，取決于跟誰搭配。
適當(dāng)?shù)厥褂眠@些特性（使之與你項(xiàng)目中的內(nèi)容相匹配），并有策略地提升你的設(shè)計(jì)。雖然排版層次將整合你的設(shè)計(jì)，使之便于瀏覽，文體的選擇則有助于提升設(shè)計(jì)的整體氣質(zhì)，并創(chuàng)建一個(gè)自然的強(qiáng)調(diào)方式。
例如，Duane Smith在他的名片設(shè)計(jì)里面使用了不同字體的搭配，其中包含了（襯線字體，無襯線，并在頂部有點(diǎn)腳本），利用其大小，顏色和氣魄，以幫助特定元素（如他的名字和電話號(hào)碼 ）在畫面中跳躍出來。
Duane Smith
這是可行的，因?yàn)檫x擇不同的字體可以互相彌補(bǔ)——他們并不沖突，而且多虧了他們清晰的層級(jí)才不會(huì)造成注意力的混亂。此外，大寫的文字能夠提升小號(hào)字體設(shè)計(jì)的可見性，就像名片展示的那樣。
Atomicdust的書的封面則不是相近的字體，而是結(jié)合了兩種截然不同的字體，有意的將手寫體的和另一種傳統(tǒng)襯線設(shè)計(jì)放在一起以從視覺上表明書的標(biāo)題，并創(chuàng)造了一個(gè)清晰的焦點(diǎn)。
Atomicdust
5．間距：讓你的布局平衡、流暢以及焦點(diǎn)明確
通常，在設(shè)計(jì)中最容易忽視的卻很重要的原則是白色區(qū)域的大小和留白手法。當(dāng)你在你的設(shè)計(jì)布局中沒有提前為留白區(qū)域做準(zhǔn)備，尤其是你努力去填充盡可能多的信息的時(shí)候，很大可能你最終會(huì)得到一個(gè)亂七八糟、混亂不堪的設(shè)計(jì)。這是因?yàn)榱舭自谀愕脑O(shè)計(jì)中是能夠幫你分離組織元素，讓其看起來有條理，布局平衡的必要元素。
你可能之前看到過：一個(gè)網(wǎng)站或傳單被信息、文字和圖像塞得滿滿的，你甚至不知道你應(yīng)該從哪開始看起。不要?jiǎng)?chuàng)造出像那樣在瀏覽順序上雜亂無章的設(shè)計(jì)，這樣會(huì)趕走你的來訪者。
時(shí)刻計(jì)劃著空白區(qū)域，這是至關(guān)重要的事，如：
·讓瀏覽者的眼睛有一片休憩的區(qū)域以及暢游設(shè)計(jì)的路徑。
· 將版面分為幾部分（這樣做一方面能保持良好的間距，另一方面是能減少空間，從而把相關(guān)內(nèi)容連接的更緊密）
David Salgado 和 Mariana Perfeito兩者在編輯設(shè)計(jì)上，，版面的各個(gè)部分之間都留下了大量的空白區(qū)域，同時(shí)將有關(guān)聯(lián)的內(nèi)容組合在一起。最終得到一個(gè)整潔并平衡式的設(shè)計(jì)。
David Salgado 和 Mariana Perfeito
· 分離焦點(diǎn)
出自Design Womb的這種真空包裝設(shè)計(jì)運(yùn)用了豐富的色彩，花紋的背景，圍繞在該產(chǎn)品品牌名稱的白色區(qū)域周圍，直接引導(dǎo)著你的焦點(diǎn)］
Design Womb
06.構(gòu)圖：確定你的設(shè)計(jì)結(jié)構(gòu)
你能通過我們之前提到的一些技術(shù)方法制作的布局來引導(dǎo)訪問者，但是，大部分設(shè)計(jì)更受益于整體結(jié)構(gòu)或者組織規(guī)律——這就是我們熟知的構(gòu)圖。
藝術(shù)家已經(jīng)使用構(gòu)圖技巧已經(jīng)有幾個(gè)世紀(jì)了，它們大部分還在今天使用。讓我們來看一看一些最常用的構(gòu)圖方法。
三分法：三分法是一種動(dòng)態(tài)的構(gòu)圖方法，你的焦點(diǎn)預(yù)先不是放在中心點(diǎn)上。
相反，這條規(guī)則把整體布局分成一個(gè)網(wǎng)格，（三條相同距離的水平線和三條相同距離的垂直線）然后，把焦點(diǎn)放在一條線上，或者放在四個(gè)相交點(diǎn)其中一點(diǎn)上。
Cover Design Studio
奇數(shù)法則：這個(gè)法則告訴我們3往往更好。一個(gè)創(chuàng)意的周圍有一個(gè)奇數(shù)的對(duì)象（或許焦點(diǎn)被其他兩個(gè)或者四個(gè)項(xiàng)目圍繞，如下）總是比一個(gè)偶數(shù)在視覺上看起來更有趣和令人高興。
Charlotte Cheetham/Manystuff
隱藏的韻律：這會(huì)是一個(gè)非常有效的指明重要信息和提供簡明設(shè)計(jì)方案的技巧。怎樣創(chuàng)造這種具有動(dòng)感的設(shè)計(jì)？視覺導(dǎo)向線。
導(dǎo)向線不必是實(shí)實(shí)在在的線條（即使它們可以是實(shí)實(shí)在在的線條）。它們或以實(shí)物、形狀、重疊式設(shè)計(jì)元素、正負(fù)形交疊的狀態(tài)出現(xiàn)，或者其余任何能創(chuàng)造一種定向運(yùn)動(dòng)的形式。
最常見的除水平的、垂直的，對(duì)角的導(dǎo)向線以外，還有S曲線、Z字形線。Z字形線性版式是一種普及的網(wǎng)頁布局基礎(chǔ)，是利用"Z"的形狀為閱讀模式的方式。
具體應(yīng)用方式可參考下圖：
Jake Hill
Vince Frost
若想得到創(chuàng)造動(dòng)態(tài)成分從而給你的設(shè)計(jì)以完美的線條流動(dòng)感的靈感，推薦閱讀《設(shè)計(jì)原則：掌握創(chuàng)造作品的流程及節(jié)奏》
如何檢驗(yàn)?zāi)愕囊曈X層次效果
我們希望這篇文章的指引能夠讓你明白建立明確的視覺層次在你的設(shè)計(jì)項(xiàng)目中的重要性。
我們?cè)谖恼轮刑峒昂芏嗟姆椒?，都是用來?qiáng)調(diào)你設(shè)計(jì)中的某些部分的不錯(cuò)的工具。但是，提醒一句：過多的強(qiáng)調(diào)點(diǎn)很容易會(huì)破壞整個(gè)視覺的層次效果。
視覺強(qiáng)調(diào)不能使用在過多的設(shè)計(jì)元素中。否則，所有的東西都變得一樣了。當(dāng)所有的東西都被突出，那也就意味著沒有一樣?xùn)|西能夠被突出。層次建立的基礎(chǔ)是要強(qiáng)調(diào)某些元素，同時(shí)削弱某些元素。
但是，如果你不確定你的視覺層次是不是你想要的效果，那怎么辦呢？有一個(gè)簡單的辦法，來隨時(shí)檢驗(yàn)?zāi)愕脑O(shè)計(jì)效果，不需要任何特別的工具。就是使用可靠的“瞇眼測試”：
靠后坐，遠(yuǎn)離一點(diǎn)你的電腦。然后瞇眼看你的設(shè)計(jì)，這樣所有的細(xì)節(jié)都變得模糊，你只看見大概的輪廓。觀看什么東西被突出？突出的部分是不是你想觀眾第一眼關(guān)注的東西？如果是，那么你的視覺層次是不錯(cuò)的。如果不是，那么可能需要返回設(shè)計(jì)中，做一些別的嘗試來調(diào)整。
現(xiàn)在，你已經(jīng)擁有了一些技巧和手法去建立一個(gè)吸引人的視覺層次了，去好好的使用他們吧～祝福你們?cè)谠O(shè)計(jì)中找到自己永恒的快樂。
