提升易讀性(二): 視覺層級介紹與實例Visual Hierarchy

Shandy Tsai

Follow

Published in

UXeastmeetswest

14 min readJan 16, 2018

--

【本文適合想增進設計實力、對介面設計有興趣的讀者】

當你在瀏覽網頁時，有沒有過類似的困擾？

「這個網頁好難瀏覽啊！感覺頁面很雜亂、很擠」
「看了好一陣子，怎麼覺得好像都沒有吸收到資訊？」

我們每天接受成千上萬的資訊，為什麼有些內容一目了然？有些卻讓人一頭霧水？

不論你是設計師、或是產品經理，還是學生，我們時常製作文案報告、投影片，如何用最有效的方法呈現你想表達的概念？什麼是你想讓觀看者最先注意到的內容？在產品設計上，什麼CTA (Call-to-Action)是你想強調的？

透過視覺層級Visual Hierarchy的方法，我們可以引導使用者閱讀的順序，讓觀看者有效吸收資訊，以下是這篇文章的內容大綱：

Introduction 概念介紹
Characteristics 類別
• Size 大小
• Color 顏色
• Typeface / Font 字體 / 字型
• Space / Alignment 間隔 / 對齊
• Summary 小結
Example 實際演練 (so exciting!)
• Step 1 列下重要資訊
• Step 2 排序
• Step 3 運用原則進行設計
• Step 4 檢視設計
Conclusion & Exercises 結論＆回家練習
References 參考資料

1. Introduction 概念介紹

視覺層級Visual Hierarchy

視覺層級，即是傳達資訊。如何組織、排序內容，讓接受者能夠盡可能輕易地理解資訊。設計師可以利用視覺元素去區別資料的重要性，引導觀看者閱讀的順序或焦點，第一個注意到的元素、第二、第三、第四…等。使用的方法包含放大字體、使用強烈顏色去強調關鍵元素。

Design = Communication
設計，即是溝通

我認為真正的好設計，並不是在於畫面多麽酷炫，而是這個設計是否有效傳達意念、訊息給接受者。當從事越來越多的用戶體驗、介面、平面設計，會進一步地去審視自己的設計，不論是圖示、文字，甚至是流程、方法，是否能利用簡單的方式，清楚地表達資訊。因此，視覺層級Visual Hierarchy 是好設計的其中一個基本，卻非常重要的觀念。

可以運用的範圍十分廣泛，包含：簡報投影片、文字報告、電子商務、交通時刻表、影視選單、菜單食譜等。只要有資訊的地方，都可以善用視覺層級方法，排序重要元素，讓使用者更輕易地吸收。

2. Characteristics 類別

視覺層級(Visual hierarchy)可以協助觀看者區別焦點和資料的重要程度，最基本的觀念是質量(Value)和對比(Contrast)，質量大和對比強烈的物體會吸引觀看者的目光，包含大小、顏色、形狀、質地、方向等。

舉穿搭的例子，左圖女子儘管全身黑，但由於質地不同，產生層次感，我們仍然能區別物件；而右圖儘管外套的重量相較輕，但因為紅色跳脫其他中性顏色，造成視覺上的焦點。

圖4. 與穿搭相同的道理，質地(Value)和對比(Contrast)會產生視覺焦點

網路上的文章有不同的分類方式，以下我舉基本的四個類別：
大小、顏色、字體、間隔：

2a. Size 大小

越大的物件越容易吸引觀看者的目光。在Hulu的影片介紹，電視劇名稱比內容簡介更重要，因此使用較大的字體。

2b. Color 顏色

大膽、對比強烈的顏色容易成為視覺的焦點。在Narrative的網頁裡，儘管有複雜的插畫當作背景，但重點內容運用活潑的螢光色跳脫單一色調的背景，觀看者不禁被顏色所吸引。

2c. Typeface / Font 字體 / 字型

在介面設計上，基本上會將字體區分成三種類別：

— Heading 標題：最重要的資訊，通常運用較大的字體、粗體呈現
— Subheading 副標題：與標題相關的內容，不應該搶標題的風采，
但必須要清楚引導觀看者視線，協助他們瀏覽內容
— Body Copy 內容：內容可以是整篇文章、摘要、簡介，重點在於易讀性，通常字體較小，英文的字體大部分是Serif

此觀念來自於印刷產業，過去的報章雜誌、平面設計大多有此分類。優點在於可以讓觀看者在瀏覽頁面時，快速區分閱讀的重要性，幫助產品規模化。

參考資料：Beginning Graphic Design: Typography, Why Every Design Needs Three Levels Of Typographic Hierarchy

• Typeface 字體

字體像是一個人帶給人的印象，有些字體很華麗、奪目；有些字體相較柔和、中性，適當的運用字體有助於品牌形象及藝術感。運用大膽、視覺感的字體是近來網頁設計的趨勢 (例如：Xtian Design, BigYouth)。

Hugeinc的利用Sans Serif、粗體的Huge字體作為標題，呈現份量感；而底下內容簡介則使用較小的Serif字體Copernicus，讓文章易於閱讀。

• Fonts

字型包含了大小(Size: 10 pt, 12 pt, 14 pt, and so on)與重量(Weight: bold, light, medium)，可以增加字體的質量，產生強調的作用。Obachen雖然使用相同字體，但因為字型不同，視覺焦點會放在標題語。

參考資料：[but] 雜談 ─ 常常搞混的一些詞、想强调重点该用粗体、下划线还是斜体？

2d. Space / Alignment 間隔 / 對齊

在先前的文章曾經探討過空白的重要性，在此我們簡單的介紹

提升易讀性(ㄧ) : 如何有效運用空白 White Space

【本文適合想增進設計實力、對介面設計抱有好奇心的讀者】

medium.com

• Space 間隔

根據Gestalt Law，物體越靠近，人類的眼睛會將其歸類成同類別。這概念時常被運用，包含Google Search Results Page，除了運用不同顏色，還有兩段之間的空白來區分段落。

圖12. Google Search Results 運用空白區別不同的網頁段落

• Alignment 對齊

Alignment指的是垂直間隔，一般而言，縮排越多代表是較次要的內容，在書面報告、新聞媒體、電子商務的網頁十分常見。Zara網站裡左排的選單儘管是相同字體、顏色，但利用縮排即可以呈現三種層級，分別為：

時裝系列 (Sales, New Collection, Join Life and Editorials)
→ 性別 (Woman, Man, TRF and Kids)
→ 衣服種類 (Outwears, Tops, Jeans, etc.)

2e. 小結

以上我們分別探討視覺層級的四大要素：大小、顏色、字體、縮排。實際上的設計都是綜合以上四點運用的。除了上述四點外，其實還有質地 (Texture)、 方向 (Direction)等，有興趣的朋友還可以參考以下網站：
• 質地：Bloom、MSDS
• 方向：Take what you can carry、Thing of Wonder

另外，很重要的觀念是：