聯成電腦設計好文分享：提升易讀性(二) 視覺層級介紹與實例
文、Medium UX四神湯 / Shandy Tsai
【本文適合想增進設計實力、對介面設計有興趣的讀者】
當你在瀏覽網頁時，有沒有過類似的困擾？
|「這個網頁好難瀏覽啊！感覺頁面很雜亂、很擠」
|「看了好一陣子，怎麼覺得好像都沒有吸收到資訊？」
我們每天接受成千上萬的資訊，為什麼有些內容一目了然？有些卻讓人一頭霧水？
不論你是設計師、或是產品經理，還是學生，我們時常製作文案報告、投影片，如何用最有效的方法呈現你想表達的概念？什麼是你想讓觀看者最先注意到的內容？在產品設計上，什麼CTA (Call-to-Action)是你想強調的？
透過視覺層級Visual Hierarchy的方法，我們可以引導使用者閱讀的順序，讓觀看者有效吸收資訊，以下是這篇文章的內容大綱：
1. Introduction 概念介紹
2. Characteristics 類別
• Size 大小
• Color 顏色
• Typeface / Font 字體 / 字型
• Space / Alignment 間隔 / 對齊
• Summary 小結
3. Example 實際演練 (so exciting!)
• Step 1 列下重要資訊
• Step 2 排序
• Step 3 運用原則進行設計
• Step 4 檢視設計
4. Conclusion & Exercises 結論 ＆ 回家練習
5. References 參考資料
圖1. 好的視覺層級可以更清晰的傳達資訊內容
1. Introduction 概念介紹
視覺層級Visual Hierarchy
視覺層級，即是傳達資訊。如何組織、排序內容，讓接受者能夠盡可能輕易地理解資訊。設計師可以利用視覺元素去區別資料的重要性，引導觀看者閱讀的順序或焦點，第一個注意到的元素、第二、第三、第四…等。使用的方法包含放大字體、使用強烈顏色去強調關鍵元素。
圖2. 視覺層級Visual Hierarchy是有效地組織與排序資訊，清楚傳達重要資訊給接收者
Design = Communication
設計，即是溝通
我認為真正的好設計，並不是在於畫面多麽酷炫，而是這個設計是否有效傳達意念、訊息給接受者。當從事越來越多的用戶體驗、介面、平面設計，會進一步地去審視自己的設計，不論是圖示、文字，甚至是流程、方法，是否能利用簡單的方式，清楚地表達資訊。因此，視覺層級Visual Hierarchy 是好設計的其中一個基本，卻非常重要的觀念。
可以運用的範圍十分廣泛，包含：簡報投影片、文字報告、電子商務、交通時刻表、影視選單、菜單食譜等。只要有資訊的地方，都可以善用視覺層級方法，排序重要元素，讓使用者更輕易地吸收。
圖3. 好的設計可以清楚的傳達資訊，避免不必要的誤會
2. Characteristics 類別
視覺層級(Visual hierarchy)可以協助觀看者區別焦點和資料的重要程度，最基本的觀念是質量(Value)和對比(Contrast)，質量大和對比強烈的物體會吸引觀看者的目光，包含大小、顏色、形狀、質地、方向等。
舉穿搭的例子，左圖女子儘管全身黑，但由於質地不同，產生層次感，我們仍然能區別物件；而右圖儘管外套的重量相較輕，但因為紅色跳脫其他中性顏色，造成視覺上的焦點。
圖4. 與穿搭相同的道理，質地(Value)和對比(Contrast)會產生視覺焦點
網路上的文章有不同的分類方式，以下我舉基本的四個類別：
大小、顏色、字體、間隔：
圖5. 運用大小、顏色、字體、間隔可以產生視覺層級
2a. Size 大小
越大的物件越容易吸引觀看者的目光。在Hulu的影片介紹，電視劇名稱比內容簡介更重要，因此使用較大的字體。
圖6. Hulu電視劇Landing page運用字體大小呈現內容重要程度
2b. Color 顏色
大膽、對比強烈的顏色容易成為視覺的焦點。在Narrative的網頁裡，儘管有複雜的插畫當作背景，但重點內容運用活潑的螢光色跳脫單一色調的背景，觀看者不禁被顏色所吸引。
圖7. Narrative 運用活潑的螢光色跳脫單一色調背景
2c. Typeface / Font 字體 / 字型
在介面設計上，基本上會將字體區分成三種類別：
— Heading 標題：最重要的資訊，通常運用較大的字體、粗體呈現
— Subheading 副標題：與標題相關的內容，不應該搶標題的風采，但必須要清楚引導觀看者視線，協助他們瀏覽內容
— Body Copy 內容：內容可以是整篇文章、摘要、簡介，重點在於易讀性，通常字體較小，英文的字體大部分是Serif
此觀念來自於印刷產業，過去的報章雜誌、平面設計大多有此分類。優點在於可以讓觀看者在瀏覽頁面時，快速區分閱讀的重要性，幫助產品規模化。
參考資料：Beginning Graphic Design: Typography, Why Every Design Needs Three Levels Of Typographic Hierarchy
圖8. 字體的三種層級
圖9. Huntt網頁設計也常運用字體三層級的概念
• Typerface 字體
字體像是一個人帶給人的印象，有些字體很華麗、奪目；有些字體相較柔和、中性，適當的運用字體有助於品牌形象及藝術感。運用大膽、視覺感的字體是近來網頁設計的趨勢 (例如：Xtian Design, BigYouth)。
Hugeinc的利用Sans Serif、粗體的Huge字體作為標題，呈現份量感；而底下內容簡介則使用較小的Serif字體Copernicus，讓文章易於閱讀。
圖10. Hugeinc
• Fonts
字型包含了大小(Size: 10 pt, 12 pt, 14 pt, and so on)與重量(Weight: bold, light, medium)，可以增加字體的質量，產生強調的作用。Obachen雖然使用相同字體，但因為字型不同，視覺焦點會放在標題語。
參考資料：[but] 雜談 ─ 常常搞混的一些詞、想强调重点该用粗体、下划线还是斜体？
圖11. OBACHEN利用字型強調標題
2d. Space / Alignment 間隔 / 對齊
在先前的文章曾經探討過空白的重要性，在此我們簡單的介紹
提升易讀性(ㄧ) : 如何有效運用空白 White Space
• 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.)
圖13. Zara 利用縮排產生內容的層級性
2e. 小結
以上我們分別探討視覺層級的四大要素：大小、顏色、字體、縮排。實際上的設計都是綜合以上四點運用的。除了上述四點外，其實還有質地 (Texture)、 方向 (Direction)等，有興趣的朋友還可以參考以下網站：
• 質地：Bloom、MSDS
• 方向：Take what you can carry、Thing of Wonder
另外，很重要的觀念是：
If you make everything bold, nothing is bold.
如果你強調每ㄧ個元素，則會失去層級性。就像化妝一樣，如果你畫了濃眉、刷了睫毛膏、畫眼線、塗紅唇、明顯腮紅，由於視覺上都是焦點，而失去了重點。
舉Spotify Premium Page 價格比較的例子，他們運用了以上哪幾個元素，為什麼明明這麼多資訊，但視覺上卻十分俐落、一目瞭然？
圖14. 為什麼這麼多資訊，Spotify Premium卻能用乾淨的介面呈現？
再讓我們仔細想想，Spotify這個頁面的主要目的是什麼？最主要的是讓使用者可以訂閱Premium，再來才是價格與細節。
因此Spotify使用強烈、飽和度高的綠色強調CTA (Get Premium)；再來，利用字體三層級，讓使用者目光焦距在價格；其餘細節則用較小字體、次要顏色以及縮排降低資訊階級。
圖15. Spotify Premium介面分析
3. Example 實際演練 (so exciting!)
看完以上的方法，我們來實際演練一次吧！基本上，會使用以下的步驟：
Step 1 列下所有資訊：寫下所有需要呈現內容
Step 2 歸納、排序內容：將相關的內容組織在一起，進行重要性排序
Step 3 設定視覺層級 & 應用：可以先設定字體三層級，再來調整顏色、間距、縮排等等
Step 4 檢視設計：一般我會比對Step 2及成品，是否能達到原本想呈現的效果；也有人會使用*Blurring Technique
*Blurring Technique：利用模糊效果，去檢測視覺層級。可以使用Sketch or Photoshop，大約5–10px就可以辨別。
3a. Table of Contents 目錄
第一個是工作上的實際項目，在視覺層級上是相當實用、常見的形式，也可以應用在菜單、價位表等。
• 項目簡介：Fevo在MLB的會議裡，特別挑選幾個重要客戶的產品使用數據，製作彙整成一本案例報告，與客戶說明產品成效。
• 形式：印刷PDF
• 工具：Google doc、Mac內裝的Keynote (類似Microsoft的Power point)
Step 1 列下所有資訊 & Step 2 歸納、排序內容
首先，我和商業部門的同仁一起討論這本報告的內容及分類，主要有三種類別：Categories, Digital Marketing 和 References。次要的則是各種不同的項目；最後是球隊和活動的名稱。
圖16. 利用Google Doc紀錄基本的內容
Step 3 設定視覺層級及應用
首先，先確定投影片基本背景的設計，再來制定字體的三種層級。
圖17. 報告字體的三種層級
將所有內容利用先前制定的層級進行排版，包含對齊、確認相同的間距。
圖18. 進行排版
接下來，調整縮排。個人認為縮排的效果十分彰顯，不需要任何數字標註，可以清楚的呈現資料層級。
圖19. 調整縮排
最後，為了增加視覺的趣味性及層次，我放上了隊伍的Logo，和Fevo的Logo當作背景，同時強化了品牌特性。
圖20. 最終目錄設計
Step 4 檢視設計
最後，我們可以用Blurring Technique (5px)去判別視覺層級的效果。原本的Google Doc經過模糊處理後，比較難去區別內容；設計後的版本，因為調整字體、字型大小、顏色、間隔及縮排，可以更清楚的辨別資料的階級性。
圖21. 我們可以運用Blurring Technique去判別視覺層級的效果
圖22. 最終設計不但有清楚的視覺層級，同時表現品牌特性
3b. Articles 文章列表
第二種類型也十分常見，不論是報章雜誌媒體，或是部落格，都會應用到視覺層級的方法。內容大致包含文章標題、時間、作者、摘錄，以下範例仿效兩個我很喜歡的網站：NY Times、Pitchfork
首先，設計文字的視覺層級，才進行排版（設定間隔、縮排、調整圖片大小等）。範例ㄧ（圖23）由於是藝術人文類別，我們可以利用Serif的字體作為標題，並用淺灰色的分隔線，帶給人一種典雅、清晰的感覺。
圖23. 文章列表 (藝術人文類)
範例二（圖24）是音樂類型的文章，因此使用San Serif的HK字體，相較範例一更俐落與現代。另外，我利用白色的色塊、淺灰色背景區隔不同文章。最後，附加Hover的效果。
圖24. 文章列表 (音樂類)
最後，我們再來檢視一下兩個範例的視覺層級，儘管運用模糊效果，仍能辨別主標題與文章摘錄，Checked！
圖25. 檢視視覺層級
4. Conclusion & Exercises 結論 ＆ 回家練習
這次的文章主要是結合了最近設計項目的心得，為什麼明明是相同的資料量，有些人的投影片或是網站就可以清晰的傳達資訊？
Design = Communication
設計，即是溝通
不論你是個設計師、產品經理、開發者，或是學生，我們可以都透過視覺層級的方法，把複雜的內容轉化成閱讀者容易消化的資訊，引導閱讀的順序。
好的視覺層級並不一定是要誇張的繪畫、還是最新穎的Photoshop濾鏡。最重要的是能夠組織手上的資訊，用最容易吸收、有條理地呈現給使用者。
希望這篇文章提供大家一種實用的設計方法，增進手上的projects。
• Exercises
有興趣的朋友可以做以下練習。
1. 仔細看Oscar Health這份Pdf (圖23)運用了視覺層級Visual Hierarchy的哪幾種方法？你是否能夠辨別、標示出來？
2. 找一個你自己喜歡的產品、覺得視覺上很清晰的介面，辨別並標示其使用了哪些視覺層級的方法？
3. 檢視自己手上的項目，有哪些可以運用到視覺層級Visual Hierarchy的手段讓資訊更容易閱讀？動手練習看看！
圖26. OscarHealth練習
5. References
1. What is Visual Hierarchy?
2. ***The Design School Guide To Visual Hierarchy
3. 6 principles of visual hierarchy for designers
4. On Visual Hierarchy
5. Understanding Visual Hierarchy in Web Design
6. ***如何在设计中建立良好的视觉层级
7. A Good User Interface
8. Understanding Web UI Visual Hierarchy
9. Visual Hierarchy in Brand Design
10. The Guardian introduces tabloid format and redesigns all platforms
文章轉載自「Medium UX 四神湯」，已取得作者授權同意，原文為：提升易讀性(二): 視覺層級介紹與實例Visual Hierarchy
