視覺法則 – 格式塔原則

這篇延續上篇格式塔的理論,整理了一些常用的原則,如同上一篇最後面提到的,格式塔的四個基礎,就好比數學的加、減、乘、除,而它的原則就好比代數運算。所以只要能夠掌握基礎,或許也可以拼湊出一個設計原則。

格式塔的原則可以套用在不同的領域,例如:平面、介面、插畫、攝影、廣告、空間…等等,小到介面設計,大到建築設計,只要與視覺相關,就用的到。以格式塔作為基礎所發展出來的原則很多,但因身為介面設計師,所以下面就以介面設計常用的格式塔原則來進行討論。

這篇文章引用了設計師 Carolann Bonner 所提供的六個常用原則,加上二個我認為比較重要的原則:

  1. Similarity 相似
  2. Proximity 相近
  3. Continuation 連續
  4. Closure 封閉
  5. Enclosure 圍繞
  6. Figure-Ground 主體-背景
  7. Common Fate 共同命運
  8. Symmetry 對稱

這八個原則幾乎包含了介面設計常用的原則還有技巧,了解原則可以幫助理解「為什麼」要使用這樣的設計樣式(Design Pattern),請記得格式塔理論的核心在於「整體大於個體的加總」,所以這些原則是來判斷整體視覺的感知結果,而每個原則背後,都隱含著格式塔理論的四個基礎,看完這些原則後可以思考一下,跟四個基礎之間的關聯性。

1. Similarity 相似

個別相似的物體會被視為整體的一部份。相似特徵的物體,不論是它的形狀、顏色、大小、排列方式…等等,只要相似,我們的視覺就會認為是一個整體。

example_Similarity

上圖中可以看出外觀特徵相似的個體(不同顏色),可以分別視為一個整體,即使打亂順序(B),白球還是會被大腦歸為一個整體。

應用在介面設計:

components_lists_keylines_single9

在上圖中,可以看出左邊一排圓形的圖片,可以視為一個整體,每一張圓形圖片都代表一個聯絡人,所以在這個介面上,就可知道這些資訊的整體性。而右下方的圓形元件,是Floating Action Button,則是利用了下面會提到的「主體-背景」原則,與內容做分割來避免混洧。

2. Proximity 相近

當個別的物體距離相近,我們的視覺會將他視為一個整體。

example_Proximity

上圖A中,個體之間左右間距較小,圖B則是上下間距較小,構成了圖A是每一橫排為一個整體,圖B則是每一直排為一個整體的視覺效果。

應用在介面設計:
components_cards33

透過物體與物體間距的控制,可以知道資訊排列越是接近,他們的關係就越是強烈,可以視為一個整體,如果距離較遠,就可以視為與其他個別的整體。很常應用在排版之間關係的操作。

3. Continuation 連續

連續的個別物體,形成的視覺動線,會視為一個整體。就算被中斷,我們的大腦仍然會判定為一個整體,因為我們的視覺容易感知連續的形式,而非離散的片段。

example_Continuation

上圖中,我們的視覺會告訴我們有兩個重疊的圓圈,而這些圓圈是由連續的小圓形所構成,我們的視覺不會因為它交錯,而判斷成三種不同的圖形。就像1跟2之間交集的3,視覺上他是不存在的,除非你去突顯它。

應用在介面設計:

continu

上圖紅框的部份,會看到數個灰色的點點,在介面設計上我們稱它為「Slider Dot Navigation」,通常是用來做侷部畫面的導覽切換,這就是連續性的應用,在些灰點在連續排列的情況下,我們會將視為一個整體,而非單純的灰、黃點,它會透過動態(自動換圖)的方式來提醒使用者,畫面是可以進行切換的。

4. Closure 封閉

當我們的視覺感知到物體是不完整的,但我們大腦仍會將不完整的資訊填滿,並將視為一個整體。

example_Closure

上圖看起來像是圓形2蓋在圓形1上面,但事實上,圓形1不是一個完整的圓型,可能也不是一個圓形,但我們的大腦會自動把圖1,填補成一個完整的圓型,這個原則充份解釋了整體大於個體加總的核心概念。

運用在介面設計:

components_cards_content1

上圖中畫面的下方,我們知道可以繼續瀏覽,但為什麼會知道畫面可以延續?因為封閉的原則,我們知道下面的卡片只有顯示到一半,但人類的眼睛會自然填補失去的資訊,意識到下方還有沒看完的資訊,所以繼續下滑直到資訊結束。

5. Enclosure 圍繞

將個別的物體透過任何方式(線條、色塊)將它們圍繞在一起,被圍繞的群組,可以視為一個整體。這個原則是設計師  Carolann Bonner 在的文章中所提到的一個原則,我找了一些網路上的資料,比較少提到這個原則,但實際上還蠻常用在介面設計上。
example_Enclosure

上圖A左上方區塊被線框圍繞,可以視為一個整體,圖B則是左上方區塊以灰色作底,也可以視為一個整體。

應用在介面設計:

components_dividers_usage2

上圖可以看到畫面中有明顯的分隔線,透過分隔線,可以知道內容所屬的範圍。而卡片(card)的樣式,也是透過卡片來圍繞資訊,也是圍繞原則的應用方式。

6. Figure-Ground 主體-背景

在整體的視覺條件下,某個物體相較於其他物體來的明顯,我們會大腦會將它判定為主體,而將他以外的物體視為背景。

example_Figure-Ground

上圖右上角的藍綠色圓形,明顯突出於其他灰色的圓形,因此它為主體,而灰色的圓形則為背景。

應用在介面設計:

components_dialogs_content1

對話框(Dialog),很常應用在在介面或網頁設計上,因為要突顯這塊的資訊,所以在背景蓋上一層半透明的黑色,此時使用者就會意識到這個對話框是主體,而其他區域則是背景。

7. Common Fate 共同命運

在整體的視覺條件下,某些個別物體,或是同時、同速、同方向往一個地方移動,這些個別物體會被視為整體。這個原則常用在動畫效果的呈現上。

example_Common Fate

上圖有很多的藍綠色圓形,其中有幾個同時往左上方偏移,因為共同的命運,將其視為一個整體。

應用在介面設計:

components-buttons-fab-transition_speeddial_02

上圖是Material Design 中,還蠻常使用的漂浮按鈕(Floating Action Button),如果一個按鈕裡面有多種功選或選擇,就會以像是上面圖片的方式呈現,幾乎在同一個時間點出現不同選擇,我們的大腦就會意識到,這些功能是一個整體。

8. Symmetry 對稱

為了更簡單的去理解整體,我們的視覺,會趨向將對稱的物體,視為一個整體。

example_Symmetry

上圖中,依序出現的是左大括號、右大括號、左中括號、右中括號、左大括號、右大括號,還是一組大括號、中括號、大括號? 大多人應該是後者,因為對稱性,會將互相對稱的個體視為整體。

應用在介面設計:

Symmetry

對稱的原則無所不在,只是因為使用的太過於頻繁,反而會忽略掉它的存在,上圖我將卡片樣式的畫面做了一些調整,把左右對稱拿掉,讓右邊存在的空隙小於左邊,在這樣的畫面下,因為畫面不對稱,會感覺右邊內容還沒有結束,所以可以知道,很多時候我們運用了畫面的對稱性來包住內容,引導視覺開始與結束的位置。就像是網頁設計,通常會有header,也會有footer,包含在中間的就是body,才能構成一個完整的網頁(瀑布式部局的網站除外)。

 

結論

上述八個原則,是介面設計常用原則,但如同前面所討論的,格式塔原則是視覺認知整體的方式,應用的範圍不侷限在介面設計,尤其是平面設計更是經常在使用這些原則。了解原則之後,我們可以依照這些原則去發展出一些新的介面設計元素。等到對這些原則能夠清楚的掌握且迎刃有餘,就可以開始「打破」這些原則,來創造更有張力的視覺效果。從不理性中找出理性是設計,再從理性中找出不理性,那就是藝術了!

如果想了解更多格式塔的原則,下面提供一些參考的文章:

場論與格式塔 – 陳坤成
完形心理學的視覺法則 – fourdesire
Gestalt psychology -wiki
Gestalt_principles – scholarpedia
Using Gestalt Principles for Natural Interactions – Carolann Bonner

 

 

廣告

視覺法則 – 格式塔理論的四個基礎

gestalt這篇要來討論一下格式塔理論(Gestalt theory),也就是格式塔心理學,或稱「完形心理學」。只要學過平面設計理論的人,應該多多少少都聽過格式塔的相關理論,但真正要應用在設計上,其實也不容易,或許是其實已經用上了,只是沒有去仔細探究而已,因為它是一個人類視覺自然感知的過程與結果。

格式塔是德文Gestalt的譯音,意即「模式、形狀、形式」等,意思是指「動態的整體(dynamic wholes)」 –by wiki

格式塔理論的發展,始於1910年時,心理學家 Max Wertheimer 無意間看到鐵路上的閃爍的燈光如下圖一(這部份的考證,網路上的資料不是很完整,有錯誤請指正),他觀察到,當燈光快速切換的時候,會產生視錯覺(optical illusion),這邊的視錯覺指的是「似動現象(phi phenomenon)」(參考影片),也就是燈光在快速的切換狀態下,當速度快到介於30~60毫秒之間,會產生動態的移動的錯覺(如下圖二),於是Max Wertheimer 與同儕開始進行相關的視覺研究,花了近十年的時間發展出的一套視覺認知理論,也就是現在的格式塔(完形)心理學。

railroad-crossing-lights-night

圖一 鐵路平交道的警示燈

light

圖二 似動現象

其實格式塔理論要討論的東西非常的深,它可以說是現代認知心理學的基礎,唯一貫徹的概念就是「整體大於個體的總合」,但我們只需要從視覺來討論跟理解就好,因為格式塔所衍申出來的視覺原則,跟平面設計還有介面設計習習相關。

“The whole is other than the sum of the parts.”
— Kurt Koffka

在格式塔心理學的構成,有四個基礎:整體性(Emergence)、具體化(Reification) 、組織性(Multistability) 、恆長性(Invariance),這四個基礎是人類視覺的特性,也就是說,它是我們視覺的一種慣性,是天生或演化而來的,了解這四個基礎,就能解釋大部份的視覺情境了。先說明這四個基礎,下一篇再來討論幾個常用的原則。

  1. 整體性(Emergence)
    當我們要去分辨一個物體時,我們的眼睛試圖去找出輪廓,然後去比較對過去腦中的記憶,快速的分辨出物體,這就人類視覺的整體性。下面這張圖是一張很常被用來解釋整體性的圖片,在圖片中你會看到很多黑點,而且能透過輪廓,辨視出一隻像是大麥町犬的物體,所以我們的視覺是整體的,而不是從一條腿、一顆頭的方式將所看到的物體給組合起來。
    Emergence
    運用在介面設計上,也就是之前我們討論的指意、預設用途,我們能從物體的外觀或是輪廓知道他的用途,有時候並不需太多的細節。像是下圖的ghost button就是一個很好的例子。
    ghostbutton
  2. 具體化(Reification)
    當我們的視覺感受到刺激,同時也會對外部環境的空間訊息產生解讀,我們的腦袋會試圖把這些缺口給補起來,並創造出一個訊息去理解觀察到的物體。下圖中的 A,許多人看到會看到白色的三角型,但其實這個三角型並不存在,而是我們的腦袋自己將失去的訊息給填補起來。
    Reification用於介面設計,最常用的就是格點系統(grid system)如下圖,也是透過格點系統的建立,來劃分區塊,我們未必要使用線條來進行資訊版塊的切割,只需要透過適當的留白,一樣可以讓閱讀者辨視出這些區塊的不同。
    gridsystem
  3. 組織性(Multistability)
    如果一個物體有兩種以上的解釋,我們的腦袋在同一個時間點,只能給予一種解讀的方式 ,當然我們的視覺允許我們在不同的解讀上游移,但我們卻無法同時看到兩種以上的解讀方式。例如下圖,圖片中是一個妙齡女子?還是一個年邁的老婦人? 或許都能看的出來,但她就是無法同時出現。
    運用介面設計上,那就是要思考,你希望你的使用者在你的畫面中看到什麼樣的訊息? 想傳達的資訊要盡量精確,避免模陵兩可的圖片或文字,因為你永遠無法知道,使用者看到的跟你想的是不是一樣。
    下面的圖片,是我們在開發產品所犯的錯誤,這是一個好友序號分享活動,只要分享,每個人都能免費獲得300元面額的抵用券,立意不錯,可是我們在文字中加入「的機會」,經過使用者的測試才發現,使用者會認為這是需要經過抽獎的才能獲得的活動,因為使用者看到的是「機會」,而我們希望使用者看到的是「免費兑換」。
    chance
  4. 恆長性(Invariance)
    我們視覺的最大優勢就是恆長性,不管物體如何變形、旋轉、放大、縮小,我們都能夠透過他的輪廓或特徵來判斷這個物體。如下圖中像是搖桿的物體,任憑它如何的改變呈現的方式,我們的眼睛還是能夠從圖片中找出相同或是不同的物體,
    Invariance運用在介面設計上,最常用到的就是下圖中「請證明你不是機器人」的驗證碼(CAPTCHA)了,這也是目前人類在視覺上勝過電腦的優勢,當然這樣的優勢再過個幾年可能就會被電腦給取代了, 而且有時候也是會遇到人類無法判別的驗證碼,恆常性失效。
    captcha-2

以上就是格式塔心理學的四大基礎,這四個基礎對於從事視覺設計或是藝術相關的人都非常的重要,對於這些視覺特性能夠掌握的好,就能創造出更好的作品。

下一篇會討論格式塔使用的原則,當然有人對於基礎與使用原則會有些混淆,只要記得,四大基礎比較像是數學中的加、減、乘、除,而原則就會比較像是代數運算,所以基礎很重要,幾乎所有的視覺原理都離不開這四個基礎,應該要好好的理解才是。

附上一些參考的來源,因為有網路上對於格式塔心理學的說法解釋並不完整、一致,在這篇文章簡單的整理一下,做為一個參考跟紀錄,有錯誤也歡迎指正。

 

設計的心理學 – 預設用途與指意

這篇來討論一下六大設計原則中的預設用途(affordance)、指意(signifiers)。

為什麼這兩項要一起討論,因為預設用途與指意某種程度上是一個很類似概念,不容易區分且容易混淆。先來討論預設用途。

預設用途(Affordance)

什麼是預設用途(affordance)? 書中的說明是:

預設用途是物體的屬性和操作者能否使用、如何使用這個物體的相對關係— p38

另在wiki上找到原文的定義的來源:

An affordance is a relationship between the properties of an object and the capabilities of the agent that determine just how the object could possibly be used.-Don Norman (2013). The Design of Everyday Things (Revised and expanded ed.). Basic Books. p. 11. ISBN 978-0465050659.

中文或稱環境賦使、可操作暗示、支應性、示能性,而不管從中文或是英文的意思來看,預設用途的重點都在調強人與環境或物體之間的「關係(relationship)」,但「關係」如何決定?根據書中的說明是:

  1. 物體的屬性
  2. 操作者的能力

只要二個條件同時滿足,就可能存在「關係」。也就是說,物體本身存在一些特性,這樣特性能夠暗示操作者在能力的範圍內能夠與其互動的可能性。例如:當我們腿酸了,我們試著去找到一個擁有支撐的功能特性的物體「椅子」,它就提供「坐上去」這種預設用途。我們口渴想喝水,會去找可以承載水的物體「杯子」,它就存在提供「裝水」的預設用途。

那問題來了,假設操作者沒有能力上的問題,我們怎麼知道椅子是用來坐的,杯子是用來裝水的呢? 其實一般人並不會意識到這樣的問題,我們會很直覺的採取行動。吉伯森(J.J.Gibson)他以完形(Gestalt)心理學為基礎,所發展的吉伯森學派(Gibsonian),對於這樣子的行動提出解釋,他認為,所有的感官是一起作用的,而我們感知到對世界的訊息已經是這些感官綜合的結果,是物體告訴人們,如何與其互動,並不需要經過大腦的處理或是認知過程。

  • 不同的預設用途

雖然吉伯森對於操作者與物體互動的關係提出解釋,但操作者與物體的關係有時很難明確,因為一個物體可能有擁有不同的屬性,不同的操作者由於能力的不同對於預設用途的判斷也可能存在差異。例如:折凳的預設用途。

chair

折凳的預設用途對一般人來說是用來「坐」的,但隨著操作者能力的不同預設用途也會不同,因此折凳有也攻擊他人的預設用途,因為他有好收納、堅固的屬性。(取自周星馳電影「食神」)

註:個人並不鼓勵暴力。

  • 反向的預設用途

此外書中有提到反向的預設用途,雖然沒有明確定義,但根據書上的舉例,我下的解釋是:「物體的屬性讓操作者的行為結果與預期相反」,書中舉的例是玻璃,玻璃是透明的,看起來是可以穿透但卻無法穿透,所以會發生有些人撞到玻璃狀況;另一個我想到的就是小朋友常常會用手指去滑動沒有觸控功能的螢幕,也是行為的結果與預期相反的例子。下圖則是另一個反向預設用途的經典案例。

gun

一般來說,手槍是槍口朝外擊發對於操作者來說是預設用途,但電影中這把槍稱「古靈精怪槍」,第一次擊發子彈會往後射,完全是反向預設用途的應用。(取自周星馳電影「國產零零柒」)

所以我們可以了解預設用途有時並不是很明確,為了強化或是明確指出物體的特性或與其互動的方式,作者提出另一個設計原則,「指意(signifiers)」。

指意(Signifiers)

能向人傳達適當的行為方式的指示方法,包括符號、聲音、以及所有能被知覺的信號。

指意(或稱「意符」),源自於符號學,作者將其用在設計領域,指意的概念很好理解,就是讓預設用途更加明確,透過任何指示的方式,可能是圖像、聲音、文字…等等。對設計師而言,指意的運用更加的廣泛明確,例如:一扇門預設用途是開門或是關門,但沒有任何的提示下,操作者沒辦法知道要用什麼方式去開這扇或關這扇門,所以指意這時就可以發揮作用,告訴操作者該如何與其互動。

pushnpull1

指意是一個很明確的提醒或暗示,所以錯誤的指意,反而會引起操作者的混淆,所以在使用上要特別謹慎。

pushnpull2

像是我在網路上找到這張圖,這扇門手把上寫了push,但門上的玻璃箭頭是往兩邊指,所以這扇門到底是往內推還是往兩側推?

運用在介面設計

以上我整理出預設用途與指意的內容與說明,但是身為設計師最在意的是,如何使用在介面設計上?什麼時候我們要用預設用途?什麼時候要需要用到指意? 在預設用途不清楚的時候就運用指意,這樣的做法,個人認為沒有解決真正的問題。

先來思考一下,近年介面設計的發展。

  • 擬真化設計vs預設用途

在iOS7之前,介面設計講求的是擬真化(skeuomorphism),也就是所有的物件畫的愈像真的愈好,我認為就是預設用途的一種應用。在電容式觸控螢幕(或是說iphone)還沒普及前,我們使用的是實體按鍵的的鍵盤,到了iphone的出現,鍵盤被觸控螢幕取代,而為了讓使用者在操作觸控螢幕更加的直覺,所有的介面都盡量仿真,按鈕就要畫的跟真的一樣,使用者才會知道是按鈕,轉盤也要真的像轉盤,使用者才會知道它可以調整音量大小,當然這樣的風格在當時流行了一陣子。

  • 扁平化設計vs指意

後來iOS7與Google material design的出現,開始了扁平化(flat design)設計的風格,扁平化設計我認為就是指意的表現方式,因為扁平所以需要透過更多的「指意」來讓使用者完成任務,記得iOS7剛推出時評價兩極,使用者最常遇到的問題就是,到底那裡可以點(找不到按鈕),但隨者扁平化設計的普及與改良,使用者也就漸漸的習慣這樣的操作方式。

Calc-App-Comparisons

上圖左邊是擬真化設計的計算機,每個按鈕的樣式,就像真的按鈕一樣,而右邊是扁平化的計算機,按鈕沒有多餘的光影效果,但由於觸控螢幕的普及,使用者仍然能夠知道怎麼使用。

所以到底是預設用途好用還是指意好用?擬真很直覺但很難維護,光要畫出擬真風格的介面就夠累的了,加上螢幕的破碎化,會搞死很多設計師…。扁平化的設計不夠直覺、明確…

但其實在本書的p42,有一句還蠻關鍵的話:「預設用途決定能採取的行動,指意提示行動在哪裡發生」,所以預設用途的應用,之後應該會著重在使用者行為的分析上,來「預測」或「揣摩」使用者的所要採取的行動,當行動發生再透過指意來完成一連串的操作任務;基本上指意的應用是明確的,但預設用途的應用會更著重行為的互動上面,這兩個原則並不衝突,可以同時存在。例如,有使用iphone的人,使用瀏覽器瀏覽網頁時,如何回到上一個頁面?

兩種方式:手指往螢幕右邊撥、或點返回的箭頭。

gesture

手指往右撥就是預設用途,點返回箭頭就是指意,點返回箭頭沒什麼問題,但我們怎麼知道往右撥會回到上一頁? 這就是預設用途的應用,這跟前面提到的認知有關,因此並不是預設用途不清楚的時候使用指意,而是要觀察並預測使用者的操作方式,並在正確的位置上提供指意,這才能提供良好介面操作體驗。

這幾年Material design的發展,也慢慢的收斂到這樣的方式,扁平但卻真實,這也目前介面設計的趨勢。

但只靠預設用途與指意是不夠的,因為當預設用途或指意過多,使用者往往會記不得有那些互動方式,因此才有接下來的其他四個設計原則,幫助使用者完成介面操作的任務。

小小心得,歡迎討論。