LCCNET 聯成電腦

菜鳥救星

m_nav_line m_nav_line

HOT影片

m_nav_line m_nav_line

聯成電腦設計好文分享:提升易讀性(二) 視覺層級介紹與實例

icon_fb icon_twitter icon_google LINE it!
article_main_img

文、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: TypographyWhy Every Design Needs Three Levels Of Typographic Hierarchy

圖8. 字體的三種層級

 

 

圖9. Huntt網頁設計也常運用字體三層級的概念

 

 

• Typerface 字體

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

 

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)等,有興趣的朋友還可以參考以下網站:
• 質地:BloomMSDS
• 方向:Take what you can carryThing 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 TimesPitchfork

 

首先,設計文字的視覺層級,才進行排版(設定間隔、縮排、調整圖片大小等)。範例ㄧ(圖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

 

 

 

 

痞客邦Blog:http://lccnetvip.pixnet.net/blog
FB粉絲團:https://www.facebook.com/lccnetzone
菜鳥救星:https://www.facebook.com/greensn0w

本網站使用相關網站技術以確保使用者獲得最佳體驗,通過使用我們的網站,您確認並同意本網站的隱私權政策。欲了解詳情,請參閱 隱私權政策