視覺層級文字基礎應用法則

平面設計最主要的目的主要是傳達訊息。而如何去組織、調整安排平面設計中多內容,讓讀者能夠輕鬆快速的接收到訊息,是平面設計師最重要的工作之一。

如果你稍有接觸平面設計,那你一定有聽過一個平面設計常用的技巧—“視覺層級”視覺層級(Visual Hierarchy) 是以按照重要性的順序排列安排或表示元素,達到更容易閱讀、理解訊息的目的。

換句話說,視覺層級是一種讓讀者快速抓住訊息重點的排版方式。透過加注不同元素在特定的訊息中(如更改顏色、更換字體、放大字體等等),可以影響讀者對訊息的感知(perception)。

即便你沒有聽過視覺層級(Visual Hierarchy)這個名詞,但其實視覺層級也是不斷的出現在我們的生活周遭。如每天看到的報紙、雜誌、捷運上的宣傳海報等等。而在使用文字上面創造出視覺層級的技巧,可稱為排版層級(Typographic Hierarchy)

視覺層級的安排,除了達到美觀的目的外,最主要是利用排版的方式引導讀者視線,進而增強內容的易讀性。

如下圖範例所示,最右邊的有採用排版層級技巧,是不是比最左邊的共容易閱讀了呢?

排版層級增加易閱讀性

如果稍稍注意一下,你可以發現大部分的文宣內容,可以拆解成三個部分,分別為標題(Headlin)、副標題(Subhead) 與 正文(body copy)

如下圖所示,一張文宣海報的層級可以簡單劃分為三個層級:

排版層級的主要三個層級

層級一(通常為標題):層級一展示最重要的資訊,通常用較大的字體、粗體呈現。

層級二(通常為副標題):與標題相關的一句話。字體大小應小於標題,才不會搶走標題的風采。目的為達到引導讀者閱讀的目的。

層級三(正文):正文內容可能是文章、摘要或簡介等等。此層級主要呈現一些想傳達內容的細節部分。通常字體會較小,以歐文字體來說,通常會設定為襯線字體,以增加閱讀性。

另通常海報中都會有行動呼籲(Call to action) 的設計。而行動呼籲的層級,則看整體重要性來做安排,亦有可能屬於第二層級。

註:行動呼籲 (Call to Action) 又稱為行動號招,可能為一段文字、一張圖片、或是一個按鈕、QR code 等等,引導讀者快速採取行動(購買、訂閱或到達指定網站等等)。

又如下圖為例,一張簡單的沙拉宣傳海報,一樣使用三層級架構簡單劃分

層級一:主要是品牌的名稱(或產品的名稱)

層級二:產品的價格 (或是行動呼籲call to action)

層級三:產品介紹

視覺層級三級架構

以三層架構簡單劃分的海報,以產品照片為主視覺,吸引讀者。此層級安排的目的希望讀者的閱讀順序為:主視覺—產品名稱—價格—產品細節(如下圖)

視覺層級引導視線

層級的出現,簡單來說就是差異的存在而差異可以是由許多不同的元素造成。

在視覺層級中,要做出優秀的差異可以從尺寸、對比、顏色、樣式、分組、對稱、相似等這些元素進行調整。

而要怎麼樣有效地在排版中創造出排版層級呢?有幾個基本要點可以參考

  1. 使用字體大小對比。右邊圖示採用字體大小差異,增加易閱讀性。
字體大小對比

2. 字體對比。右邊圖示採用書寫體與襯線體的對比。

字體對比

3. 字形對比。右邊圖示雖採用同一種字體,但分別採用極細、粗體與一般斜體。

字形對比

4. 顏色對比。下圖採用與背景低對比與高對比的顏色來產生差異。

顏色對比

5. 間隔與分組。下圖以分組與間隔的方式來產生差異性。

間隔與分組

透過以上幾個基本要點,若可以靈活運用,就可以達到排版層級的效果。雖然排版的版式設計並沒有標準答案,但遵循一些基本的方法並多參考一些作品,不難做出一般來說水準以上的作品。

延伸閱讀

利用完形知覺法則提升你的設計力

設計新手必須知道的5種(歐文)字體分類

給外星人看的設計:羅塞塔石碑法則運用