設計中的層次感

愛生活！愛設計！

層次

對於排版來說是一個很大的概念，但是又很重要，其實也很好掌握。

今天，我們將為大家介紹如何通過改進層次提升你的設計。

即使你對這個概念並不熟悉，你也一定看到過很多不同的層次排版。

報紙，就有很明確的層次—主標題，副標題和正文。

這是很典型的三級排列。

現在很多列印品和線上設計仍在使用這種排版。

20世紀早期到中期的報紙為我們提供了鮮明的例子：

儘管現在，我們的主標題不再必須用6英寸的大字體來吸引讀者的注意力，上圖還是一個很好的參考——不同的層次可以更好地向讀者展示哪些是重要信息。

讀者隨意一瞥就能掌握到整體的排版，從而更快速地找到自己需要的信息。

增強可讀性和可用性是這種排版最重要的幾個好處之一。

如果不遵循一定的層次排量房噶，就會像下圖例子中的前兩個一樣——讓人抓不住重點。讀者會很難分清圖中的層次，找不到主次。

前三個例子可以通過換字體、改變字體大小、增加行間距、改變風格、增大不同區域的距離等增加易讀性。

所以怎樣才能在設計中打造一個合理的層次呢？

經過大家的多番實驗證明，設計出三種層次是一個很好下手的方式。

主級：

一般來說，你的一級層次應該是你的所有信息中最為重要的那些；應該是你的設計中最顯眼的元素。

次級：

次級元素可以將你的設計整理成幾個不同的部分或是把相近的內容組合。次級信息不能向主級一樣搶眼，但是可以明確地指引讀者找到他們需要的信息。

三級：

對於文字內容較多的設計來說，三級文字，就是整個設計中最主要的部分。它可長可短——整篇文章，或是幾句話，或是一個簡介，不過最重要的就是一定要便於閱讀，因為通常來說這一級的文字大小都較小。

下圖是一個很簡單的產品宣傳，雖然簡潔，但是還是分出了至少三個不同的層次。

1?產品的名字，是主級內容；

2?價格是次級內容；

3?產品介紹是三級內容。

注意產品簡介部分的文字雖然很小，但是行間距很大，所以不會不好辨認。

Dribbble/Sam Thibault for Handsome

其實你有很多種排列組合的方法。許多方法可能只是一些小細節，但是正如美國一位有影響力的設計師Charles Eames所說：「細節不單單只是細節，細節成就設計」。讓我們來看看在層次方面我們可以做的一些細節嘗試吧：

如何安排排版層次？

01. 調整字體大小

改變字體大小是最簡單的區分不同層次的方式。

對於三級層次排版來說，通常一級信息的文字是最大的，隨著信息的次要程度增加，文字越來越小，到三級達到最小的文字。

我們通常的閱讀習慣是從左至右，從上至下，所以上下層的結構是最容易使讀者接受的。這是書籍、雜誌、網頁等等非常常見的排版。

Bloomberg Politics

記住，改變層次都是為了使你最重要的信息更加突出。無論這個信息是一個名字、一篇文章或博客的標題、廣告上的促銷折扣等等，如果這個部分你能使用最大的字體，那麼它肯定就能最夠吸引別人的注意力。

比如說，下圖中的折後價錢$97就要比其他信息大的多。同時還使用了亮紅色來強調。

Dribbble/Flavius Nechita

02. 選擇一組差異較大的字體

再想一想我們前面看到過的報紙的例子。它是不是同時使用了粗體的無襯線字體和斜體襯線字體來做出對比？

雖然我們的字體對比不用非要那麼強烈，但是對比絕對是成功的字體組合的關鍵。

多年來，襯線字體和無襯線字體的組合一直被很多設計師使用。對任何設計來說，這種經典組合都是一個很好的開始。就算只在主級文字中使用與其他部分不同的字體，也會打造出非常好的效果。

Dribbble/Filip Slová?ek

一定要記住不要選擇太多字體，過多的字體只會讓你的設計顯得擁擠。對於絕大多數設計來說2-3種字體就足夠了。在選擇字體時同時注意一定要注意字體是否與內容相匹配。

比如說，你肯定不能在重要信息處使用那種時髦的、難以辨認的字體吧。或是在大段的文字內容中使用讀起來會很累的連體字體。還有的字體調小了之後會很難辨認。

03. 嘗試不同的字體風格和寬度

許多字體都提供不同的風格和粗細選擇。不同的風格包括斜體、小型大小字母、縮小的或是擴大的字體。

寬度指字體的不同的粗細。如果你的字體有細、中、粗、加粗，這就是不同的寬度。

這些元素幫助你在設計中擁有了更多的選擇。以下圖中的newsletter為例。所有的無襯線字體都使用了同樣的字體大小，但是使用了不同的寬度。加粗的

Newsletter使標題更加醒目。

Dribbble/Whitney for Switch.co

下圖中的標籤都使用了不同的字體風格和寬度。

Dribbble/Hoefler & Co.

04. 添加一些顏色

就像風格和寬度一樣，顏色也可以使你的文字內容更加突出。由於顏色通常都有自己傳達的含義，所以在選擇時要確保正確的顏色要在合適的位置。

下圖中是一家秉承可持續發展的咖啡公司的活動邀請函。這個設計就很好地使用了自然、樸實的顏色襯托公司的發展理念和活動主題。

Dribbble/Krista Engler

同樣的道理，對比色的碰撞更能吸引注意力，下圖的名片使用了顯眼的黃藍配色來抓人眼球。

05. 注意間隔

設計時，文字的間隔——包括行間距和字間距——都可以使一個清晰、簡潔易讀的設計變成擁擠、令人費解的排版。

比如下面這個例子，充分的間距使下圖的設計清晰易讀，就算是小標籤上的文字，也能看清楚。

如果設計保留了足夠的間距的話，我們很快就可以知道應該如何閱讀，提取信息。相反地，如果沒有留下足夠的間距，我們就需要眯起眼睛仔細地辨別這些文字。或是壓根不想看這個設計了，因為設計得過於雜亂。

下面這個展示文稿，使用了足夠的間距、將文字分散放置、加入一些空白元素來避免了間距不夠的問題，同時，顏色的板塊和幾何圖形使各個板塊排列有序。

Dribbble/Rob Luke for Skookum Digital Works

06. 注意間隔

間隔不單單指將各個元素分離，同時還包括將相似的元素靠近。減少兩個相似的板塊間的距離也有利於讀者處理信息。

尤其是對於文字很多的設計來說，將同類文字靠近是保持總體排版平衡的關鍵。

Dribbble/Elysse Ricci

07. 玩轉各種方向

有的時候平行的文字可能並不能達到你想要的效果，這個時候不如試一試將文字旋轉，或是傾斜和扭曲，這些都可以使這一部分的文字內容與其他的文字分隔開，也會更吸引注意力。

Dribbble/Bethany Heck

在打造層次的時候，你八成會使用到上面提到的所有方法或是其中的大部分方法，就像下面這個婚前派對邀請函一樣。

這個設計使用了不同的字體大小、不同的字體、不同的顏色、增加間距、減少間距和文字變形來打造出一個完整的分層設計。

Dribbble/Casey Cooke

合理地使用這些方法可以使你的設計更加吸引人，同時也對讀者更加的友好。

所以下次你再做設計的時候，試一試上面提到的這些方法吧。

每日一設計挑戰

推薦訂閱

iBehance

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！