iT邦幫忙

第 12 屆 iT 邦幫忙鐵人賽

DAY 5
2
Modern Web

換位思考?以人為本?談談網頁的設計思考吧!系列 第 5

完形心理學(2/2)

上一篇提到的相似性、接近性、連續性、封閉性,都是網頁排版非常常用到的。而接續要提到的三點也是完形心理學很常被用到的大原則。

先看上一篇:完形心理學(1/2)

  1. 圖地原理 (Figure-Ground):你只能一次看一件事情

下圖是非常經典的例子:你看到人臉還是花瓶?

人類的大腦無法同時專注於兩件事,縱使是一張圖也是。大腦會自動將圖片的對比分別出來,獨立出來成為圖或地。
從上圖的例子,如果你將黑色部分當作景,那麼你就看到了花瓶,花瓶就是「圖」;反之,若將白色當作景,那麼你會看到兩張人臉,就是「圖」。
你的大腦可以自動轉換圖或景,這也常常被用來作為心理測驗。

而圖地原理也會用在網頁設計上:

圖片取自 Google 地圖
很多網頁的設計只要跳出來,背景就會自動用遮色片的概念,弱化背景。
弱化背景同時也是強化前景,因此你的目光會放在前景,也就是它想強調的部分。

  1. 共同命運 (Common Fate):明明就是不同的元素,你是怎麼判定他們一體的?

跟相似性有點雷同,但共同命運強調的是動態感。一個 app 裡面可能有超多按鈕,為什麼會覺得這些按鈕隸屬在這個 app 裡,而不是在上一層的資料夾,或是在其他 app 裡呢?這麼說或許有點抽象,看看下圖 Google 日曆範例吧。

為什麼這個按鈕明明是獨立的元素,但你卻可以輕易辨識出它在 Google 月曆的 app 裡,而不是在 Gmail 裡或是 Google Drive 裡?
如果你按下它會跑出 Gmail 的收信匣,你反而才會覺得滿頭問號對吧?
為什麼呢?因為你按下它會有快速、動態的反饋:按下它會跑出下面這頁:

由於按下它會讓你知道你要進行的下一個步驟,可能是在你的行事曆增加行程,因此你能很明確的知道它依舊隸屬於 Google 月曆的其中一個功能。這個動態的反饋就是屬於共同命運的性質。

  1. 對稱性 (Symmetry):目光的起點和終點

人的天性是喜歡對稱的,無論是上下或是左右。啊數學課學過的什麼點對稱那個我就不提了。
對稱能夠給予使用者一種穩定、信賴的感覺。因此在很多的頁首、頁尾,網頁上常說的 header 和 footer,光這兩個區塊就是一種對稱,讓你知道看到 header 就是開始;看到 footer 就代表結束。但隨著瀑布式網站的興盛,為了刺激你往下或是往右捲更多內容,因此 footer 或是代表終點的東西漸漸消失了。

以 Instagram 的頁面來說,最下方的固定按鈕(紅框部分),就是一個穩定對稱的呈現,讓你知道按鈕會固定在那邊,無論按到哪一頁它們都是穩定存在的,目光也會不自覺地從左向右,從始到終。

相較於上方的限時動態(礙於大頭貼及貼文圖片資訊因此幾乎反白了),限時動態就不會是對稱性的,他會留一點未完待續的感覺,讓你下意識地往右滑看更多限時動態。利用非對稱性讓你知道最右邊並不是最終點。

終於講完以上 7 點了。

對我而言,完形心理學是一種降低大腦資訊量的解讀方式。不可能所有人都會適用於這七點原則,最明顯的例子就是圖地原理,有人先看到臉也有人先看到花瓶。

但能歸納出這幾點原則相信是適用於大多數人的。因此在把握這幾個原則之下設計,能夠讓網頁減少很多資訊量,看起來更舒服,大腦也更不會解讀錯誤,成為大多數人都更滿意的平衡點。


上一篇
完形心理學(1/2)
下一篇
我的一天:出發!使用者體驗旅程
系列文
換位思考?以人為本?談談網頁的設計思考吧!30

尚未有邦友留言

立即登入留言