如何為頁面設計視覺層級

時間：2023-10-01 09:12:01 | 來源：網站運營

時間：2023-10-01 09:12:01 來源：網站運營

如何為頁面設計視覺層級：

本文編譯自：Rounak Bose - How to implement Visual Hierarchy for Interface Design

盡管設計被視為一種藝術形式，但與純藝術不同，設計是建立在牢固的科學基礎之上的。因此當下次在 Pinterest 或 Dribbble 上看到精美出眾的網頁設計時，先呼吸一口氣再以客觀理性的眼光去判斷一下這設計是否真的解決了某些實際問題。

誠然，提供設計決策的主要依據應該是與業(yè)務相結合的目標和科學的審美。驚艷的頁面設計可能看起來很棒，但可能沒有用戶會使用它。這就是為何形式和功能需要同時考慮，也是為何從項目開始就需要對視覺層級進行設計。

產品設計專家 Luke Wroblewski 在 Communicating with Visual Hierarchy^[1]里定義了優(yōu)秀視覺傳達之目的：

• 通知和引導用戶
• 傳達內容關系并確定信息優(yōu)先級
• 對用戶產生情感影響
• 發(fā)出行動召喚

視覺傳達既是視覺組織的一部分，也是個性的一部分。如果頁面上所有元素都是重點，那就是沒有重點。因而，視覺層級就是通過設計頁面信息的視覺關系為用戶創(chuàng)造或實現某種價值，以及對頁面信息優(yōu)先級的劃分。

使用倒金字塔法把信息分級

我們可以從新聞寫作中的「倒金字塔法^[2]」來獲得靈感和啟發(fā)，如下圖所示：

核心信息是主線，提供了頁面上所有最重要信息，即 5W1H —— who, what, when, where, why 和 how。接著是次要信息，用于提供內容的背景信息，并填補核心信息中的主要空白。最后是補充信息，包含一些用戶可以知道但并不需要真正理解的背景信息。

同理，好的視覺層級設計也應分為三層：

• 第一層，用戶掃一眼就能理解整個頁面的重要部分；
• 第二層：用戶通過仔細瀏覽就可以體會到所有重要的細節(jié)；
• 第三層：用戶通過對頁面每處細節(jié)的了解，使用頁面提供的所有功能，可以完全了解產品。

了解人眼的閱讀掃描模式

要了解好的視覺分層的最佳做法，重要的是要了解用戶是如何閱讀網頁內容的。人眼會自動被吸引到興趣點，通過眼動實驗可以有效地找出其中的規(guī)律。以從左到右閱讀的文化為例，普遍存在兩種主要的閱讀掃描模式 —— Z 型瀏覽模式和 F 型瀏覽模式。

Z 型瀏覽模式

Z 型瀏覽模式一般發(fā)生在不以文字為核心內容的網頁中。用戶一般從頁面左上角開始沿菜單欄往頁面右上角掃視，然后快速地下移到對角線的左下角，再沿直線往右下角掃視。

F 型瀏覽模式

F 型瀏覽模式通常體現在文字密集型網頁中，用戶一般首先沿著左側的內容垂直向下瀏覽，從每段的前幾句尋找興趣點，興趣點熱區(qū)呈「F」形狀。F 型模式通常用于發(fā)出行動召喚的列表。

相較兩種模式，通常認為 F 型比 Z 型更有效。但在實際應用中，垂直疊加的 Z 型模式擁有更好的可用性和更高的轉化率。

了解這些閱讀掃描模式可以使我們更有策略地放置行動召喚語句和重要頁面元素以獲得更大的效果。

影響視覺層級的要素

我們可以通過調整以下要素來設計視覺層級。

1. 尺寸大小

在頁面中，最重要的元素應該比其他元素在視覺上更為顯眼，例如行動召喚按鈕。在保持頁面間元素尺寸大小和諧和相對關系是非常重要的，元素尺寸大小的選擇應該是基于全局視覺的，并且要考慮到延伸的應用場景。

2. 顏色

色相、亮度和飽和度會對用戶的感知和使用產品的方式產生重大影響。顏色不僅具有心理含義，而且具有層級結構關系（通常表現為全局顏色和局部顏色之間的關系）。因此，在元素設計時應充分利用對比色和互補色效果產生的視覺效果。

3. 布局

頁面布局是最影響視覺層級的要素，沒有之一。雖然加粗大字放居中是可以獲取最多的注意力，但這樣的設計并不符合大部分頁面設計的要求。布局設計的每一個像素都會影響到最終轉化，具體設計時可以參考菲茨定律^[3]。同時，在設計布局時還需要考慮到用戶體驗，這有助于頁面可用性的提高和視覺層級的改善。

4. 間距

間距和元素空間布局的配合使用可以引導用戶的視線，確保用戶是按照設計的方式來進行瀏覽。和其他要素不同，間距對視覺的影響發(fā)生在兩個完全相反的方面 —— 接近和負空間。

接近性原則^[4]是視覺設計上的重要原則，意思是距離或位置相近的元素趨于組成一個整體。接近的元素比相距較遠的元素關聯性更高，且功能也相似。

在設計視覺層級要素時，負空間往往最容易被忽視，主要是因為設計師往往傾向于把空白視為畫布而非要強調和引起注意的設計工具。

5. 相似

相似性原則是在某一方面（大小、顏色、形狀等）相似的元素趨于組成一個整體。相似的元素有更高的關聯性和功能相似度。例如在維基百科頁面上，大量帶有藍色下劃線的文本讓用戶意識到有很多可跳轉超鏈接。

6. 視覺風格

在視覺設計時需要確定統(tǒng)一的視覺風格。這要求我們需要完全理解用戶畫像（用戶是誰）和用戶需求（用戶想利用產品得到什么）以設計出適合是視覺風格。

通過字體的選擇、顏色的選用、圖像和紋理的組合可以設計出具有吸引力的視覺風格，不僅可以展示獨一無二的個性，還有助于提高產品的交易轉化率。

主要內容和焦點

在理解上述的 6 點影響視覺層級的要素后，接下來應該繼續(xù)考慮兩個屬性 —— 主要內容和視覺焦點。

假設你已經設計了如下圖的登錄頁面：

假設客戶現在告訴你標題太大但 logo 太小，你把 logo 弄得更大了。然后客戶又說按鈕好像不太明顯，你又把按鈕改大了，客戶很滿意。但是試想一下，當一位用戶進來瀏覽時看到雜亂無章的頁面感受到的沮喪和密集恐懼癥 —— 他不知道什么才是重要的內容、焦點在哪里，和他進來的目的是什么。

當頁面上所有的要素都是重點時，也就沒有了重點。

結語

視覺層級設計的重要性不言而喻，用戶在使用產品時應能夠清晰地理解設計所表達的信息 —— 能夠識別各種信息的異同、對不同信息進行分組，并且能準確理解各個信息的含義。如果用戶無法理解頁面上要素的關系時，就沒辦法理解設計所表達的故事。

在設計時，需要考慮到所有可能的交互方式，并且通過視覺設計來引導用戶，這需要提供清晰的情景認知和保持要素一致性。

最后一點，視覺系統(tǒng)也應該有效地將品牌信息傳達給目標受眾。

參考

1. ^Luke Wroblewski 《Communicating with Visual Hierarchy》?http://static.lukew.com/pageheirarchy_lukew_03192008.pdf
2. ^馬伯庸對《什么叫做新聞寫作中的「華爾街日報體」和「倒金字塔體」》的回答?https://www.zhihu.com/question/21834756/answer/20410958
3. ^Mr湯進er《產品設計法則：菲茨定律（費茨法則）/ Fitts' Law》?https://zhuanlan.zhihu.com/p/25530956
4. ^花火圓桌《5 分鐘了解格式塔原則》?https://zhuanlan.zhihu.com/p/29372651