用視覺說故事：了解視覺組織

 

By Luke Wroblewski (Luke is a Principal Designer at Yahoo!)，Joyce編譯

Originally published: Jan 20, 2003

 藝術 vs. 程式. 美學 vs. 易用性. 使用者經驗專家來自火星，視覺設計師來自金星. 儘管視覺設計跟技術端的攻防戰從未停止過，然而，一個網站不能只選一邊站：必須要兩者都好才是成功的網站。

“互動設計[是]視覺設計，程式技術跟心理學的無縫結合 。”—Brad Wieners Wired, 2002

所以，為何要爭論呢？也許只是我們心理上的區分：左腦(邏輯) vs. 右腦(直覺)。或者，如果我們少一些成見：極少工程師花時間學習藝術，也很少藝術設計花時間寫程式或主導易用性測試。但時代不同了，網頁視覺設計師必須了解他們所工作的環境，所以許多人也會寫程式，並且參與了解使用經驗測試。

而另一邊呢？產品開發者或專注寫作的人因專家了解造型合色彩理論嗎？一定有些工具幫助他們了解—寫程式的環境很容易將圖像，色彩，字型(形狀及大小)互相扔來扔去。但是，有全力就要附帶有義務。在此義務指的即是，必須了解視覺訊息是如何跟你的觀眾溝通。

“我們發現人們很快僅由視覺設計評價一個網站好壞。” —Stanford Guidelines for Web Credibility, 2002

視覺溝通 可以想成一體的兩個面：一是個性，或者說觀感；二是視覺組織。表現的個性提供了情感層面的影響 — 你對看到東西本能的反應。創造適當的個性必須透過色彩的使用，編排的方式，圖像，造型，模式，及其他，是對觀眾"說"正確的事。然而，此處我們重點在視覺溝通的另一面：視覺組織。

我們如何看: 視覺關係

不論何時我們都企圖讓視覺資訊有意義，我們先觀察所見事物間的相似跟相異處。這些關係讓我們不只注意物件，也同時賦予他們意義。例如， 不同色彩用來區分兩個不同的物件(或是同一物件的不同組成部分)，不同大小則暗示了物件跟我們之間的距離遠近，不同的材質(一個比較模糊)更增強這個概念等等...。一但我們了解元素間的關係，我們可以組織整個故事，並理解我們所看到的事物。

這個過程可因為我們組織視覺訊息的能力而加速，當我們觀察小草的一片葉子，附近的物件共用相近的色彩，形狀，尺寸，且位置群聚，就代表了一個意義：一片草坪。我們不用比較葉子跟葉子間的區別。

感知原則 給我們珍貴的觀察力，幫助我們理解如何組織視覺訊息。例如，相鄰近的物件會自成群組(相鄰近)，同樣的，物件共用視覺特徵也會自成群組 (相似性).

圖例 1: 感知原則：相鄰近，相似性，延續性，封閉性。

但是光了解組織視覺訊息的心理行為，並不足以讓我們透過視覺溝通一些特定的訊息。為此，我們需要知道如何運用視覺關係成為我們的優勢 -  我們需要知道那真的讓事情變得不同。

雖然存在許多不同的可能性，我們可以群組不同的視覺特徵至五個大類：色彩，材質，形狀，方向，尺寸。採用其中一類的不同表現或是交互運用即造成 視覺對比。倆物件間有越多的對比，我們就會認為他們是不同的，關聯越小的。

圖例 2: 不同物件的視覺差異

講一個故事: 視覺層級

“設計師能從一團混亂中創造常態；他們運用組織及控制圖像與文字來清楚的溝通想法。”—Jeffery Veen, The Art and Science of Web Design

現在我們了解用視覺區別物件的基本方法，我們可以觀察更大的範圍：使用視覺關係來說一個連貫的故事。“視覺故事”中的元素安排成一個容易理解的輕重次序，引起注意的中心點吸引觀者注意，其他接續的焦點加入故事。這種合邏輯的順序我們稱之為視覺層級。

為了建立有效的視覺層級，我們使用視覺關係來增加或減少頁面元素的視覺重量，並且透過編排構成建立視覺移動的模式。視覺重量可以用引人注意或保持興趣的程度來衡量， 例如大的紅字在白底上就重於淺灰色的圓點， 因此，紅字的視覺重量首先抓住我們的視點，但也許不會如有細節的圖像吸引我們更久的時間注意。

圖例 3: 分別以色彩，造型，及材質所產生不同視覺重量的三物件。

視覺佔優勢的元素(有最重視覺重量) 得到最多的注意。他們是構成頁面的中心趣味，並且決定敘事從何開始。元素的層級有順序地引導我們的眼睛瀏覽其他組成，給予我們晚整的故事樣貌。元素間的相關位置提供故事中重要我們有價值的訊息。

圖例 4: 這張馬戲團海報裡最重的(最具視覺支配性的) 元素是表演者和標題。他們傳達一個重大訊息：馬戲團來了。最輕的 (最不具視覺支配性的)元素是票價跟表演角色，如果層級顛倒，將很少人知道馬戲團要來了， 反而會很疑惑以為是在促銷什麼東西“$5.50.”

一個平衡的層級不只提供清晰的認知理解路徑，同時幫助整合頁面中不同元素成為一個凝聚的整體，可以創造一種秩序及平衡感。缺乏視覺層級，頁面元素爭相吸引注意導致沒有贏家，所有的層級中只有特定的元素應該在上端；其他需要跟隨相襯。層級中元素適當的位置將視你要傳達的訊息而定。

圖例 5: 一個有層級的構圖，清楚區分每個元素的視覺重量，引導觀者以一種有意義且適當的方式瀏覽頁面。

實際運用

所有網頁都是由許多不同的元素組成，導覽選單(也許有好幾層)，聯繫訊息，搜尋盒，網站識別(所屬單位)，還有少數有購物車。網頁的視覺組織可以傳達有價值的訊息，關於元素間的相似性與相異性與相關重要性。一旦你的觀眾了解頁面元素的重要性，他們可以將此認知應用於其他的頁面。

圖例 6: 如果頁面中所有的元素視覺重量都相同，很難讓頁面產生意義。意義是透過元素間差異化及相似性，以及他們在視覺層級中的位置而產生

一般說來，網頁層級是以區分主要內容，導覽系統，及其他訊息為基礎。而在每一個部分還有更細的區隔，看起來可能如下(重要性由高至低) :

內容

• 頁面標題 
  
• 副標題 
  
• 連結
  
• 補充訊息 (如：圖說)

導覽系統

• 目前位置指示
  
• 最上層的導覽選單
  
• 次選單
  
• 路徑 (麵包屑)

其他支援元素

• 網站識別標誌 
  
• 全站通用的元素 (購物車, 網站地圖, etc.)
  
• 頁腳訊息 (隱私權政策，聯絡訊息等)

圖例 7: 一般網頁的視覺層級

當然，有許多情況脫離這個慣例是經過生思熟慮的(在導覽頁，首頁等)。內容，觀眾，每一頁的目標都決定它實際的層級，但是，每個元素的視覺表現總不脫離以下：

• 該元素與其對應功能的適當性
  
• 全站的一至性
  
• 在該頁視覺層級的適當位置 (切實反應他的重要程度)

然而，視覺層級的運用的確讓解釋頁面元素容易許多，引導使用者瀏覽網站內容及有效互動。幫助了解每一個元素在層級中的位置，我們可強調重要的元素(例如，內容或互動點)，緩和其他元素 (輔助訊息).

圖例 8: 在這個線上表格中，視覺層級引導使用者透過簡單的步驟下訂單。同時強調 (用顏色，位置及大小) 第一步(“Ordering from…”) 及最後一步(the “Sign-In”按鈕)。同時，補充訊息較緩和 (視覺重量很輕)且不干擾主要的互動順序。

同樣的，視覺層級可以提供使用者網站的意義，引起他們的注意(例如，對特別的促銷)，建議不同的選擇，解釋新元素，及更多其他功能。然而，有效的視覺傳達不用大聲“演說”， 它透過使用介面安靜地教育及引導觀眾。

對於大量頁面的網站及應用程式，使用者通常依賴視覺線索(特別是一開始)來評價網頁介面。然而，一個考慮週到的視覺組織可以大大增強易用性，藉由群組訊息成為有意義的頁面元素及次序。如此一個系統依賴理解人們如何使用視覺關係來區別物件，那些關係帶給觀者又是什麼意義(透過視覺重量及層級)。但是，視覺組織只是一半的視覺溝通，另一半，個性 (或觀感)，又是另一回事了…

Originally published in Boxes & Arrows - January 20th, 2003