iT邦幫忙

第 12 屆 iT 邦幫忙鐵人賽

DAY 4
3
Modern Web

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

完形心理學(1/2)

根據維基百科,「完形心理學」的概念是被三位德國學者所創立。主要的內容是提到大腦的運作是「整體的」

我的理解則是,為了降低大腦負擔,大腦會自動把東西歸類、或是把不完整的東西填滿,利用這類的機制降低辨識的難度。

而完形心理學常用在介面設計上的則有七個大原則:(參考設計大舌頭-完形心理學!?讓我們了解“介面設計師”為什麼這樣設計
以下就用我的概念來舉一些例子吧!

  1. 相似性 Similarity:長的很像?那就認他們一樣吧!
    這是最常用的,不管是你進去一個網站的 Navigation Bar(導覽列),或是很多部落格的文章 Grid 介面,都是將同尺寸、同顏色...等的相同性質的物件用同樣的方式呈現,讓你能夠輕易辨識它們是(類似)一樣的

    以 Google 新聞為例,導覽列就是用一個小 icon 加上分類標題,讓你知道這些東西是同一個階層的。你將期待點進去的會是一個類別,而不是一篇文章。

  2. 接近性 (Proximity):再靠近一點點,就會在一起
    這個不難理解,當東西放的越近,大腦就會理所當然地把它們視為同一區塊。不需要明顯的線區隔或是相連,就能夠自動辨別他們是一組的。
    下圖以台灣等公車 app 為例:

    腦袋會自動將橫的站牌列為一組(如下圖左),直的公車狀態列為一組(如下圖右),但其實中間的線可能非常不明顯,就是你的腦袋在填補而已。

  3. 連續性 (Continuity):就是只露一點點給你看,吊你的胃口
    最經典的滾動瀑布網站 Facebook 就是這個例子,雖然每則貼文都以卡片外框示包覆,但由於網頁會不斷地載入新資訊,因此你只要看到下一則貼文的一點點,腦中就會自動地填補認為下方還有資訊,就會不停地往下滑。大部分的社群網站都是以這種方式呈現,我想這也是為什麼人類就是會不由自主地一直往下往下滾,因為腦中的連續性會讓你想探索接下來的資訊呢!

    只要看到下方露出一點點就會認為下方還有資訊,就會持續地滾動。

  4. 封閉性 (Closure):不用自己畫線區隔,大腦會幫你畫
    封閉性同樣也是為了降低大腦解讀的負擔,因此將原先沒有界線的東西自動畫上了界線,利用區塊性的方式讓大腦不用一次吸收這麼多資訊。同時也可以利用大腦會自動畫線的方式,巧妙的設計就可以減少線條的存在,再讓版面更簡潔。

    圖片擷取自聯合新聞網,在沒有任何明顯線條和色塊的區隔下,利用版面編排(文字與圖片的靠攏)的方式,會不自覺地將畫面分成框起來的三區。


上一篇
十大易用性原則(2/2)
下一篇
完形心理學(2/2)
系列文
換位思考?以人為本?談談網頁的設計思考吧!30

尚未有邦友留言

立即登入留言