當你瀏覽頁面時，有沒有碰到過類似的困擾？

“這個頁面看著好難受啊，感覺頁面又雜亂又擁擠。”

“看了好一陣子，怎么覺得沒有任何有營養(yǎng)的信息？”

我們每天都在接收成千上萬的信息，為什么有些內(nèi)容一目了然？有些卻讓人一頭霧水呢？

不論你是設(shè)計師、或是產(chǎn)品經(jīng)理，還是學生，我們經(jīng)常做項目報告、小短片，如何用最有效的方法呈現(xiàn)你想表達的概念？什么是你想讓觀眾最先注意到的內(nèi)容？在產(chǎn)品設(shè)計中，什么CTA (Call-to-Action)是你想強調(diào)的？

通過視覺層次（Visual Hierarchy）的設(shè)計方法，我們可以引導用戶閱讀的順序，讓用戶吸收有用的信息。

好的視覺層次可以更清晰的傳達信息內(nèi)容

1. 什么是視覺層次？

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

視覺層次是有效地組織與排序信息，清楚傳達重要信息給接收者

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

視覺層次運用的范圍十分廣泛，包含：PPT簡報、文字報告、電子商務(wù)、交通時刻表、菜單食譜等。只要有信息的地方，都可以善用視覺層次的方法，排序重要元素，讓使用者更輕易地接收信息。

好的設(shè)計可以清楚的傳達信息，避免不必要的誤會

2. 視覺層次的類別

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

舉穿搭的例子，左圖女子盡管全身黑，但由于質(zhì)地不同，產(chǎn)生層次感，我們?nèi)匀荒軈^(qū)別物件；而右圖盡管外套的重量相較輕，但因為紅色跳脫其它中性顏色，造成視覺上的焦點。

與穿搭相同的道理，質(zhì)地(Value)和對比(Contrast)會產(chǎn)生視覺焦點

網(wǎng)絡(luò)上的文章有不同的分類方式，以下四個類別是最基本的：?大小、顏色、字體、間隔。

運用大小、顏色、字體、間隔可以產(chǎn)生視覺層次

a. 大小

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

Hulu電視劇著陸頁運用字體大小呈現(xiàn)內(nèi)容重要程度

b. 顏色

大膽、對比強烈的顏色容易成為視覺的焦點。在Narrative的網(wǎng)頁里，盡管有復雜的插畫當作背景，但重點內(nèi)容運用活潑的螢光色脫離單一色調(diào)的背景，觀看者很容易被顏色所吸引。

Narrative運用活潑的螢光色跳脫單一色調(diào)背景

c. 字體/ 字型

在界面設(shè)計中，會將字體區(qū)分成三種類別：

— 標題：最重要的信息，通常運用較大的字體、粗體呈現(xiàn)?。

— 副標題：與標題相關(guān)的內(nèi)容，不應(yīng)該搶標題的風采，?但必須要清楚引導觀看者視線，協(xié)助他們?yōu)g覽內(nèi)容?。

— 內(nèi)容：內(nèi)容可以是整篇文章、摘要、簡介，重點在于易讀性，通常字體較小，英文的字體大部分是Serif。

此觀念來自于印刷產(chǎn)業(yè)，過去的報章雜志、平面設(shè)計大多有此分類。優(yōu)點在于可以讓觀看者在瀏覽頁面時，快速區(qū)分閱讀的重要性，幫助產(chǎn)品規(guī)?；?。

字體的三種層級

Huntt網(wǎng)頁設(shè)計也常運用字體三層級的概念

? 字體

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

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

Hugeinc

? 字型

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

?OBACHEN利用字型強調(diào)標題

d. 間隔/ 對齊

? 間隔

根據(jù)完形法則，物體越靠近，人類的眼睛會將其歸類成同類別。這概念時常被運用，包含谷歌搜索頁面，除了運用不同顏色，還有兩段之間的空白來區(qū)分段落。

Google Search Results 運用空白區(qū)別不同的網(wǎng)頁段落

? 對齊

對齊指的是垂直間隔，一般而言，縮排越多代表是較次要的內(nèi)容，在書面報告、新聞媒體、電子商務(wù)的網(wǎng)頁十分常見。Zara網(wǎng)站里左排的選單盡管是相同字體、顏色，但利用縮排即可以呈現(xiàn)三種層級，分別為：

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

Zara利用縮排產(chǎn)生內(nèi)容的層級性

小結(jié)

以上我們分別探討視覺層次的四大要素：大小、顏色、字體、間隔。實際情況都是綜合以上四點運用來做設(shè)計的。除了上述四點外，其實還有質(zhì)地(Texture)、方向(Direction)等，有興趣的朋友還可以參考以下網(wǎng)站：

?質(zhì)地：Bloom、MSDS

?方向：Take what you can carry、Thing of Wonder

如果你強調(diào)每ㄧ個元素，則會失去層級性。就像化妝一樣，如果你畫了濃眉、刷了睫毛膏、畫眼線、涂紅唇、明顯腮紅，由于視覺上都是焦點，而失去了重點。

舉Spotify 價格比較的例子，他們運用了以上哪幾個元素，為什么明明這么多信息，但視覺上卻十分俐落、一目了然？

為什么這么多信息，Spotify Premium卻能用干凈的界面呈現(xiàn)？

再仔細想想，Spotify這個頁面的主要目的是什么？最主要的是讓使用者可以訂閱Premium，再來才是價格與細節(jié)。

首先，Spotify使用強烈、飽和度高的綠色強調(diào)CTA (Get Premium)；

其次，利用字體三層級，讓使用者目光焦距在價格；

其余細節(jié)則用較小字體、次要顏色以及縮排降低信息階級。

Spotify Premium界面分析

3. 練習

看完以上的方法，我們來實際練習一次吧！使用以下的步驟：

Step 1 列出所有信息：寫下所有需要呈現(xiàn)內(nèi)容。

Step 2 歸納、排序內(nèi)容：將相關(guān)的內(nèi)容組織在一起，進行重要性排序

Step 3 設(shè)定視覺層次&應(yīng)用：可以先設(shè)定字體三層級，再來調(diào)整顏色、間距、縮排等等

Step 4 檢查設(shè)計：一般我會比對Step 2及成品，是否能達到原本想呈現(xiàn)的效果；也有人會使用*?模糊效果

*?模糊效果：利用模糊效果，去檢測視覺層次?？梢允褂肧ketch 或者 Photoshop，大約5–10px就可以辨別。

a. 目錄

第一個是工作上的實際項目，在視覺層次上是相當實用、常見的形式，也可以應(yīng)用在菜單、價位表等。

項目簡介：?Fevo在MLB的會議里，特別挑選幾個重要客戶的產(chǎn)品使用數(shù)據(jù)，制作匯整成一本案例報告，與客戶說明產(chǎn)品成效。

形式：印刷PDF

工具：?Google doc、Mac內(nèi)裝的Keynote (類似Microsoft的Power point)

Step 1 列下所有信息& Step 2 歸納、排序內(nèi)容

首先，我和商業(yè)部門的同仁一起討論這本報告的內(nèi)容及分類，主要有三種類別：Categories, Digital Marketing 和References。次要的則是各種不同的項目；最后是球隊和活動的名稱。

Step 3 設(shè)定視覺層次及應(yīng)用

首先，先確定基本背景的設(shè)計，再來制定字體的三種層級。

將所有內(nèi)容利用先前制定的層級進行排版，包含對齊、確認相同的間距。

接下來，調(diào)整縮排。個人認為縮排的效果十分明顯，不需要任何數(shù)字標注，可以清楚的呈現(xiàn)資料層級。

最后，為了增加視覺的趣味性及層次，我放上了隊伍的Logo，和Fevo的Logo當作背景，同時強化了品牌特性。

Step 4 堅持設(shè)計

最后，我們用模糊效果 (5px)去判別視覺層次的效果。原本的文檔經(jīng)過模糊處理后，比較難去區(qū)別內(nèi)容；設(shè)計后的版本，因為調(diào)整字體、字型大小、顏色、間隔及縮排，可以更清楚的辨別資料的階級性。

最終設(shè)計不但有清楚的視覺層次，同時表現(xiàn)品牌特性

b. 文章列表

第二種類型也十分常見，不論是報刊雜志媒體，或是博客，都會應(yīng)用到視覺層次的方法。內(nèi)容大致包含文章標題、時間、作者、摘錄。

首先，設(shè)計文字的視覺層次，才進行排版（設(shè)定間隔、縮排、調(diào)整圖片大小等）。

范例1：由于是藝術(shù)人文類別，我們可以利用Serif的字體作為標題，并用淺灰色的分隔線，帶給人一種典雅、清晰的感覺。

范例2：音樂類型的文章，因此使用San Serif的HK字體，相較范例一更俐落與現(xiàn)代。另外，我利用白色的色塊、淺灰色背景區(qū)隔不同文章。最后，附加Hover的效果。

最后，我們再來檢視一下兩個范例的視覺層次，盡管運用模糊效果，仍能辨別主標題與文章摘錄！

4.? 結(jié)論

不論你是個設(shè)計師、產(chǎn)品經(jīng)理、開發(fā)者，或是學生，我們可以都通過視覺層次的方法，把復雜的內(nèi)容轉(zhuǎn)化成閱讀者容易消化的信息，引導閱讀的順序。

好的視覺層次并不一定是要夸張的繪畫、還是最新穎的Photoshop濾鏡。最重要的是能夠組織手上的信息，用最容易吸收、有條理地呈現(xiàn)給使用者。

希望這篇文章提供大家一種實用的設(shè)計方法。