當你瀏覽頁面時，有沒有碰到過類似的困擾？
“這個頁面看著好難受啊，感覺頁面又雜亂又擁擠。”
“看了好一陣子，怎麼覺得沒有任何有營養的信息？”
我們每天都在接收成千上萬的信息，為什麼有些內容一目瞭然？有些卻讓人一頭霧水呢？
不論你是設計師、或是產品經理，還是學生，我們經常做項目報告、小短片，如何用最有效的方法呈現你想表達的概念？什麼是你想讓觀眾最先注意到的內容？在產品設計中，什麼CTA (Call-to-Action)是你想強調的？
通過視覺層次（Visual Hierarchy）的設計方法，我們可以引導用戶閱讀的順序，讓用戶吸收有用的信息。
好的視覺層次可以更清晰的傳達信息內容
1. 什麼是視覺層次？
視覺層次，即是傳達信息。如何組織、排序內容，讓接受者能夠儘可能輕易地理解信息。設計師可以利用視覺元素去區別資料的重要性，引導觀看者閱讀的順序或焦點，第一個注意到的元素、第二、第三、第四…等。使用的方法包含放大字體、使用強烈顏色去強調關鍵元素。
視覺層次是有效地組織與排序信息，清楚傳達重要信息給接收者
我認為真正的好設計，並不是在於畫面多麼的酷炫，而是這個設計是否有效傳達意念、訊息給接受者。當從事越來越多的用戶體驗、界面、平面設計後，您會進一步地去審視自己的設計，不論是圖示、文字，甚至是流程、方法，是否能利用簡單的方式，清楚地表達信息。因此，視覺層次是好設計的其中一個基本，卻非常重要的觀念。
視覺層次運用的範圍十分廣泛，包含：PPT簡報、文字報告、電子商務、交通時刻表、菜單食譜等。只要有信息的地方，都可以善用視覺層次的方法，排序重要元素，讓使用者更輕易地接收信息。
好的設計可以清楚的傳達信息，避免不必要的誤會
2. 視覺層次的類別
視覺層次可以協助觀看者區別焦點和資料的重要程度，最基本的觀念是質量和對比，質量大和對比強烈的物體會吸引觀看者的目光，包含大小、顏色、形狀、質地、方向等。
舉穿搭的例子，左圖女子儘管全身黑，但由於質地不同，產生層次感，我們仍然能區別物件；而右圖儘管外套的重量相較輕，但因為紅色跳脫其它中性顏色，造成視覺上的焦點。
與穿搭相同的道理，質地(Value)和對比(Contrast)會產生視覺焦點
網絡上的文章有不同的分類方式，以下四個類別是最基本的：大小、顏色、字體、間隔。
運用大小、顏色、字體、間隔可以產生視覺層次
a. 大小
越大的物件越容易吸引觀看者的目光。在Hulu的影片介紹，電視劇名稱比內容簡介更重要，因此使用較大的字體。
Hulu電視劇著陸頁運用字體大小呈現內容重要程度
b. 顏色
大膽、對比強烈的顏色容易成為視覺的焦點。在Narrative的網頁裡，儘管有複雜的插畫當作背景，但重點內容運用活潑的螢光色脫離單一色調的背景，觀看者很容易被顏色所吸引。
Narrative運用活潑的螢光色跳脫單一色調背景
c. 字體/ 字型
在界面設計中，會將字體區分成三種類別：
— 標題：最重要的信息，通常運用較大的字體、粗體呈現。
— 副標題：與標題相關的內容，不應該搶標題的風采，但必須要清楚引導觀看者視線，協助他們瀏覽內容。
— 內容：內容可以是整篇文章、摘要、簡介，重點在於易讀性，通常字體較小，英文的字體大部分是Serif。
此觀念來自於印刷產業，過去的報章雜誌、平面設計大多有此分類。優點在於可以讓觀看者在瀏覽頁面時，快速區分閱讀的重要性，幫助產品規模化。
字體的三種層級
Huntt網頁設計也常運用字體三層級的概念
• 字體
字體像是一個人帶給人的印象，有些字體很華麗、奪目；有些字體相較柔和、中性，適當的運用字體有助於品牌形象及藝術感。運用大膽、視覺感的字體是近來網頁設計的趨勢(例如：Xtian Design , BigYouth )。
Hugeinc利用Sans Serif、粗體的Huge字體作為標題，呈現份量感；而底下內容簡介則使用較小的Serif字體Copernicus，讓文章易於閱讀。
Hugeinc
• 字型
字型包含了大小 (Size: 10 pt, 12 pt, 14 pt, and so on)與粗細 (Weight: bold, light, medium)，可以增加字體的質量，產生強調的作用。Obachen雖然使用相同字體，但因為字型不同，視覺焦點會放在標題語。
OBACHEN利用字型強調標題
d. 間隔/ 對齊
• 間隔
根據完形法則，物體越靠近，人類的眼睛會將其歸類成同類別。這概念時常被運用，包含谷歌搜索頁面，除了運用不同顏色，還有兩段之間的空白來區分段落。
Google Search Results 運用空白區別不同的網頁段落
• 對齊
對齊指的是垂直間隔，一般而言，縮排越多代表是較次要的內容，在書面報告、新聞媒體、電子商務的網頁十分常見。Zara網站裡左排的選單儘管是相同字體、顏色，但利用縮排即可以呈現三種層級，分別為：
時裝系列(Sales, New Collection, Join Life and Editorials) →性別(Woman, Man, TRF and Kids) →衣服種類(Outwears, Tops, Jeans, etc.)
Zara利用縮排產生內容的層級性
小結
以上我們分別探討視覺層次的四大要素：大小、顏色、字體、間隔。實際情況都是綜合以上四點運用來做設計的。除了上述四點外，其實還有質地(Texture)、方向(Direction)等，有興趣的朋友還可以參考以下網站：
•質地：Bloom、MSDS
•方向：Take what you can carry、Thing of Wonder
如果你強調每ㄧ個元素，則會失去層級性。就像化妝一樣，如果你畫了濃眉、刷了睫毛膏、畫眼線、塗紅唇、明顯腮紅，由於視覺上都是焦點，而失去了重點。
舉Spotify 價格比較的例子，他們運用了以上哪幾個元素，為什麼明明這麼多信息，但視覺上卻十分俐落、一目瞭然？
為什麼這麼多信息，Spotify Premium卻能用乾淨的界面呈現？
再仔細想想，Spotify這個頁面的主要目的是什麼？最主要的是讓使用者可以訂閱Premium，再來才是價格與細節。
首先，Spotify使用強烈、飽和度高的綠色強調CTA (Get Premium)；
其次，利用字體三層級，讓使用者目光焦距在價格；
其餘細節則用較小字體、次要顏色以及縮排降低信息階級。
Spotify Premium界面分析
3. 練習
看完以上的方法，我們來實際練習一次吧！使用以下的步驟：
Step 1 列出所有信息：寫下所有需要呈現內容。
Step 2 歸納、排序內容：將相關的內容組織在一起，進行重要性排序
Step 3 設定視覺層次&應用：可以先設定字體三層級，再來調整顏色、間距、縮排等等
Step 4 檢查設計：一般我會比對Step 2及成品，是否能達到原本想呈現的效果；也有人會使用* 模糊效果
* 模糊效果：利用模糊效果，去檢測視覺層次。可以使用Sketch 或者 Photoshop，大約5–10px就可以辨別。
a. 目錄
第一個是工作上的實際項目，在視覺層次上是相當實用、常見的形式，也可以應用在菜單、價位表等。
項目簡介： Fevo在MLB的會議裡，特別挑選幾個重要客戶的產品使用數據，製作彙整成一本案例報告，與客戶說明產品成效。
形式：印刷PDF
工具： Google doc、Mac內裝的Keynote (類似Microsoft的Power point)
Step 1 列下所有信息& Step 2 歸納、排序內容
首先，我和商業部門的同仁一起討論這本報告的內容及分類，主要有三種類別：Categories, Digital Marketing 和References。次要的則是各種不同的項目；最後是球隊和活動的名稱。
Step 3 設定視覺層次及應用
首先，先確定基本背景的設計，再來制定字體的三種層級。
將所有內容利用先前制定的層級進行排版，包含對齊、確認相同的間距。
接下來，調整縮排。個人認為縮排的效果十分明顯，不需要任何數字標註，可以清楚的呈現資料層級。
最後，為了增加視覺的趣味性及層次，我放上了隊伍的Logo，和Fevo的Logo當作背景，同時強化了品牌特性。
Step 4 堅持設計
最後，我們用模糊效果 (5px)去判別視覺層次的效果。原本的文檔經過模糊處理後，比較難去區別內容；設計後的版本，因為調整字體、字型大小、顏色、間隔及縮排，可以更清楚的辨別資料的階級性。
最終設計不但有清楚的視覺層次，同時表現品牌特性
b. 文章列表
第二種類型也十分常見，不論是報刊雜誌媒體，或是博客，都會應用到視覺層次的方法。內容大致包含文章標題、時間、作者、摘錄。
首先，設計文字的視覺層次，才進行排版（設定間隔、縮排、調整圖片大小等）。
範例1：由於是藝術人文類別，我們可以利用Serif的字體作為標題，並用淺灰色的分隔線，帶給人一種典雅、清晰的感覺。
範例2：音樂類型的文章，因此使用San Serif的HK字體，相較範例一更俐落與現代。另外，我利用白色的色塊、淺灰色背景區隔不同文章。最後，附加Hover的效果。
最後，我們再來檢視一下兩個範例的視覺層次，儘管運用模糊效果，仍能辨別主標題與文章摘錄！
4. 結論
不論你是個設計師、產品經理、開發者，或是學生，我們可以都通過視覺層次的方法，把複雜的內容轉化成閱讀者容易消化的信息，引導閱讀的順序。
好的視覺層次並不一定是要誇張的繪畫、還是最新穎的Photoshop濾鏡。最重要的是能夠組織手上的信息，用最容易吸收、有條理地呈現給使用者。
希望這篇文章提供大家一種實用的設計方法。
閱讀更多 UI巴巴 的文章
