今天小編為大家分享平面設計師必備的視覺層次指南，教程很不錯，希望大家喜歡！

版權申明：本文原創作者DATS翻譯組，感謝DATS翻譯組的原創經驗分享！

你的設計工具箱里有什么？

確保你的設計作品能夠盡可能有效地傳播，你要展示出作品的所有內容——即使是那些被遺忘的藝術課程概念，比如色彩理論和成分組成——要有策略的運用它們，而不是只堅持你自己喜歡的那幾個或趕流行的技巧。

這就是視覺的層次結構：使用你設計工具箱中的所有資源——顏色、對比、字體、間距、和其他基本原則——來組成和優化你的作品內容。

視覺層次結構的一個最重要的功能是幫助作品建立一個焦點，當觀眾開始瀏覽你設計作品時給他們一個入口點，并且讓他們能夠看到你要展示的最重要的信息在哪里。

讓我們回顧一些不同的方式，通過突出我們的設計元素，來創建一個清晰的具備焦點和動態的視覺層次:

1.使用大小來加強（或削弱）可見性

你有沒有聽過"會哭的孩子有奶吃"？換言之：最大的設計元素最吸引眼球。擴大一個對象的大?。ㄆ涑叽纾┖鸵幠＃ㄋc其他對象的大小關系）是提高它視覺重要性最簡單直接的方法。

這里，Erin Lancaster通過增大設計元素使傳播主題立馬變得清晰，這包括同時增大夾頁排版和使用大幅照片等方法。

Erin Lancaster

另一方面，一些設計元素沒那么重要或者你想把它弱化，可以通過減小它的大小來使它不那么明顯，以此來降低它的視覺層次。

就像任何的設計準則一樣，平衡和適度都是關鍵。一個太大的視覺焦點會毀掉一個設計，而一個太小的次要信息則會損害其可用性。］

2.色彩和對比度：對觀眾注意力直接的吸引

在視覺上最能引起我們注意的就是色彩，特別是當它被有意圖地用在特別重要的信息傳達或者圖像當中。比如像紅色或者黃色這樣明亮的色彩，不管它是出現在道路兩旁的交通標志上還是掛在當地咖啡館門頭上的招牌上，我們都很難不去注意到它。

99U

然而，如果你想把彩虹當中出現的所有顏色都用于設計中，當你忽略其中任何一種顏色都有可能影響視覺層次的構建。這也是我們提倡帶使用盡可能少的顏色并且帶有目的性的使用它的關鍵原理所在。

從另一個角度來說，在色彩和對比度的設計上，也有很多創造性的方法可以應用于引導觀眾的視線，包括：

色溫：色彩可以是冷的（就像藍色和綠色），暖的（例如紅色、橘色和黃色），也可以是中性的（比如黑色、白色、灰色，有些時候出現的棕色或米色）。色溫的混搭，特別是出現高對比度的時候，能夠產生很大的視覺吸引力。

這份由設計工作室Zee設計的劇場海報，融合了生動跳躍的暖調橘色和明亮的冷調藍色，使用這樣引人注目的撞色，強化了色溫的對比度，這樣的色彩搭配就產生了非常有趣的視覺效果。

Zee

維持在一個色相可以更好的幫助設計進行視覺上的銜接。比如Keith Johnson的傳單和網頁橫幅特征就不是創建視覺重點，而是用了相近的顏色來統一設計。

Keith Johnson

色值：顏色的色值指的展示為顏色的亮或暗。像色溫一樣，不同色值的顏色可以通過互相搭配，產生戲劇性的效果，而相似的色值的顏色則會有更均等的視覺重量。

在下面的設計中， Brad Vetter為了演出而設計的凸版印刷海報中背景顯示了兩種類似光照的柔和色調。與之相對比，深海軍藍被用來強調標題——出演的藝術家。

Brad Vetter Design

飽和度：一個極其純的顏色，其明度是100%飽和，越接近灰色，就越不飽和。采用明亮的或柔和的顏色（一種單一的顏色或者與別的顏色相配合）是在設計中實現高對比或者低對比的重要策略。

在 Jason Booher的書籍封面設計，用于提亮視覺的醒目紅色與標題相呼應。標題能夠更加突出是因為它的整體背景色是一個褪色的中性色彩。這個作品還展現了色溫之間的對比——暖色和中性色。

Jason Booher

03. 排版的層次結構：從3個層次來組織你的設計

對于任何以文字為主的設計，文字排版層次是視覺層次中一個不可忽視的部分。若想了解文字排版層次最基本的概念，只要去想想那些報紙或者雜志文章里面的標題，子標題和正文。

From Canva's "Why Every Design Needs Three Levels of Typographic Hierarchy"

這個將文字分為3層次的方法能用個任何的設計里面（從名片到網站）。讓我們在更詳細的了解一下每個層次并看看他們通常可能被用在哪里。

第一層次：一般來說，你排版中的第一層次會是最重要的內容，這些內容應該是你設計中最容易被看到的元素

第二層次：第二層次的元素一般是為了整合你的設計，或者把相關的信息鏈接起來。它們不能跟你的第一層級的元素一樣出眾，但是應該很清楚的指導閱讀者區分設計中不同的部分和引導讀者。

第三層次：對于一個文字的排版，第三層次一般是指完整的信息，目的或者是設計的細節。它可以是長的或者短的（比如一整片文章，一個簡短的注釋，一個簡介）。但是這部分主要考慮其強烈的可讀性，即使文字的大小看起來稍微小。

想獲得更深入的文字排版層次指導，請點擊這個網址：Why Every Design Needs Three Levels of Typographic Hierarchy

04. 字體：仔細選擇字樣類別和風格

排版層次不是文字排列時需要考慮的唯一一個方面。您的字體本身的外觀 - 字體類別（無襯線，襯線字體，腳本，或裝飾）和樣式（粗體，斜體，小盤股等） - 這些因素決定是否造就好的設計

可以把字體想象作為人格類型。你知道有些是響亮而華麗的，有些是安靜，但有趣的，其他的一些是靈活的，適用在什么地方，取決于跟誰搭配。

適當地使用這些特性（使之與你項目中的內容相匹配），并有策略地提升你的設計。雖然排版層次將整合你的設計，使之便于瀏覽，文體的選擇則有助于提升設計的整體氣質，并創建一個自然的強調方式。

例如，Duane Smith在他的名片設計里面使用了不同字體的搭配，其中包含了（襯線字體，無襯線，并在頂部有點腳本），利用其大小，顏色和氣魄，以幫助特定元素（如他的名字和電話號碼 ）在畫面中跳躍出來。

Duane Smith

這是可行的，因為選擇不同的字體可以互相彌補——他們并不沖突，而且多虧了他們清晰的層級才不會造成注意力的混亂。此外，大寫的文字能夠提升小號字體設計的可見性，就像名片展示的那樣。

Atomicdust的書的封面則不是相近的字體，而是結合了兩種截然不同的字體，有意的將手寫體的和另一種傳統襯線設計放在一起以從視覺上表明書的標題，并創造了一個清晰的焦點。

Atomicdust

5．間距：讓你的布局平衡、流暢以及焦點明確

通常，在設計中最容易忽視的卻很重要的原則是白色區域的大小和留白手法。當你在你的設計布局中沒有提前為留白區域做準備，尤其是你努力去填充盡可能多的信息的時候，很大可能你最終會得到一個亂七八糟、混亂不堪的設計。這是因為留白在你的設計中是能夠幫你分離組織元素，讓其看起來有條理，布局平衡的必要元素。

你可能之前看到過：一個網站或傳單被信息、文字和圖像塞得滿滿的，你甚至不知道你應該從哪開始看起。不要創造出像那樣在瀏覽順序上雜亂無章的設計，這樣會趕走你的來訪者。

時刻計劃著空白區域，這是至關重要的事，如：

·讓瀏覽者的眼睛有一片休憩的區域以及暢游設計的路徑。

· 將版面分為幾部分（這樣做一方面能保持良好的間距，另一方面是能減少空間，從而把相關內容連接的更緊密）

David Salgado 和 Mariana Perfeito兩者在編輯設計上，，版面的各個部分之間都留下了大量的空白區域，同時將有關聯的內容組合在一起。最終得到一個整潔并平衡式的設計。

David Salgado 和 Mariana Perfeito

·  分離焦點

出自Design Womb的這種真空包裝設計運用了豐富的色彩，花紋的背景，圍繞在該產品品牌名稱的白色區域周圍，直接引導著你的焦點］

Design Womb

06.構圖：確定你的設計結構

你能通過我們之前提到的一些技術方法制作的布局來引導訪問者，但是，大部分設計更受益于整體結構或者組織規律——這就是我們熟知的構圖。

藝術家已經使用構圖技巧已經有幾個世紀了，它們大部分還在今天使用。讓我們來看一看一些最常用的構圖方法。

三分法：三分法是一種動態的構圖方法，你的焦點預先不是放在中心點上。

相反，這條規則把整體布局分成一個網格，（三條相同距離的水平線和三條相同距離的垂直線）然后，把焦點放在一條線上，或者放在四個相交點其中一點上。

Cover Design Studio

奇數法則：這個法則告訴我們3往往更好。一個創意的周圍有一個奇數的對象（或許焦點被其他兩個或者四個項目圍繞，如下）總是比一個偶數在視覺上看起來更有趣和令人高興。

Charlotte Cheetham/Manystuff

隱藏的韻律：這會是一個非常有效的指明重要信息和提供簡明設計方案的技巧。怎樣創造這種具有動感的設計？視覺導向線。

導向線不必是實實在在的線條（即使它們可以是實實在在的線條）。它們或以實物、形狀、重疊式設計元素、正負形交疊的狀態出現，或者其余任何能創造一種定向運動的形式。

最常見的除水平的、垂直的，對角的導向線以外，還有S曲線、Z字形線。Z字形線性版式是一種普及的網頁布局基礎，是利用"Z"的形狀為閱讀模式的方式。

具體應用方式可參考下圖：

Jake Hill

Vince Frost

若想得到創造動態成分從而給你的設計以完美的線條流動感的靈感，推薦閱讀《設計原則：掌握創造作品的流程及節奏》

如何檢驗你的視覺層次效果

我們希望這篇文章的指引能夠讓你明白建立明確的視覺層次在你的設計項目中的重要性。

我們在文章中提及很多的方法，都是用來強調你設計中的某些部分的不錯的工具。但是，提醒一句：過多的強調點很容易會破壞整個視覺的層次效果。

視覺強調不能使用在過多的設計元素中。否則，所有的東西都變得一樣了。當所有的東西都被突出，那也就意味著沒有一樣東西能夠被突出。層次建立的基礎是要強調某些元素，同時削弱某些元素。

但是，如果你不確定你的視覺層次是不是你想要的效果，那怎么辦呢？有一個簡單的辦法，來隨時檢驗你的設計效果，不需要任何特別的工具。就是使用可靠的"瞇眼測試"：

靠后坐，遠離一點你的電腦。然后瞇眼看你的設計，這樣所有的細節都變得模糊，你只看見大概的輪廓。觀看什么東西被突出？突出的部分是不是你想觀眾第一眼關注的東西？如果是，那么你的視覺層次是不錯的。如果不是，那么可能需要返回設計中，做一些別的嘗試來調整。

現在，你已經擁有了一些技巧和手法去建立一個吸引人的視覺層次了，去好好的使用他們吧～祝福你們在設計中找到自己永恒的快樂。

本文翻譯由DATS翻譯小組成員 MOMO、Nierkou、NoNo"、Backet、大果只、最光陰、八重、chenhan、IAN_000 、bear 、suyan266 共同翻譯完成。