UI設計邀約講稿。 由於完形心理學歸納出人類大腦認知之普遍性的規則，因此無論是不是UI/UX設計師都很適合閱讀本篇文章。但還是想特別強調，若任職於傳統科技公司，需要對上說服老闆，需要平行說服(資深)工程師，那請把它收進最愛；而習慣套用設計好的UI套件，但不知道為何這樣設計的IT工程師，也可以透過本文來強化自己的產品說服力。

1. 用「完形心理學」
提升介面設計有感度!
/ Seal Tseng

2. Seal Tseng
5年以上 UI/UX 、網頁與移動裝置設計經驗, 並擅長手繪與印刷平面設計
現職高科技產業 UI/UX Designer , 負責系統優化與UI整合規劃設計

3. 分享目的
你/妳可能不知道，完形心理學普遍存在於人類大腦中
並影響我們的認知。
本文希望能讓大家輕鬆卻精確地理解其基礎理論，並將
之轉化為說服客戶or老闆、跟工程師溝通、強化設計概
念的工具。

4. 分享內容
1. 完形心理學簡介
2. 7 種完形心理學概念 與 UI設計之應用
3. 總結

5. 分享之前，先了解什麼是現實..

6. 身為設計師的理想往往是..
GOOD JOB! PERFECT!! 產品得到認可與讚美

7. 然所遇到的情況往往是..
角色僅為示意，相信各位都很有SENSE不會對號入座 

8. PM FE ENGINEER
User就是想要不用滾動滑鼠
一頁看見所有的東西
把需求塞進一頁就完工啦!
這樣的設計我都
不知道從何點起…
情境 1

9. 情境 2
BOSS UI DESIGNER
幹嘛留這麼多空白?
多浪費空間啊!
擠好!擠滿!
無言…

10. BOSS +PM UI DESIGNER+ FE ENG
這樣設計是挺不錯的
你的想法是??
(其實是套用外面做好的模版)
(為何要這樣設計我不太確定..)
情境 3

11. 該如何說服他人並與之溝通呢?
這樣做是挺不錯的
但此設計的想法是??
(其實我是使用外面做好的套版)
(為何要這樣做我不太確定..)
別苦惱!
讓我們談談如何運用「完形心理學」增加介面設計有感度

12. 1. 完形心理學簡介
2. 7 種完形心理學概念 與 UI設計之應用
3. 總結

13. • 二十世紀初由德國心理學家提出完形心理學
(或稱 格式塔 /Gestalt心理學)，用以說明人類大腦如何
解釋肉眼所觀察到的事物，並轉化為我們所認知的物件。
• 它是現代認知心理學的基礎，其貫徹的概念就是
「整體大於個體的總合 “The whole is other than the
sum of the parts.” — Kurt Koffka」。
什麼是
「完形心理學」
完形心理學簡介
圖片來源 https://www.neurosciencemarketing.com/blog/articles/gestalt-principles.htm
還是有點模糊? 沒關係!
只要你不是外星人，就一定能
完全理解「完形心理學」

14. 1. 完形心理學簡介
2. 7 種完形心理學概念 與 UI設計之應用
3. 總結

15. 01
相似性(Similarity)
我們的大腦會把
相似的事物看成一體。
7 種完形心理學概念 與 UI設計之應用
當一連串方塊和一連串的圓形並排時，我們會看成
(a)一列方塊和兩列圓形 (b)一排圓形和兩排三角形。

16. 7 種完形心理學概念 與 UI設計之應用
01
相似性(Similarity)
我們的大腦會把
相似的事物看成一體。
FACEBOOK
每則文章下方的按鈕圖標雖然功能各不相同，
但由於視覺的相似性，用戶會將它們視認為
同一級別的按鈕。
股市先鋒
利用色彩群化讓使用者能
迅速進行分類並判讀股市漲跌

17. 02
接近性(Proximity)
我們的大腦會把
靠近的事物看成一體。
7 種完形心理學概念 與 UI設計之應用
當畫面上的物件同時出現相似性&接近性時，接近性的影響往往大過於相似性

18. 02
接近性(Proximity)
我們的大腦會把
靠近的事物看成一體。
7 種完形心理學概念 與 UI設計之應用
眼睛看到的 根據相似性我們以為會看到的 經過轉換後大腦認知的

19. 02
接近性(Proximity)
我們的大腦會把
靠近的事物看成一體。
7 種完形心理學概念 與 UI設計之應用
眼睛看到的 大腦認知的
圖片來源 https://cssauthor.com/beautiful-free-web-form-psd-templates/

20. 03
連續性(Continuity)
我們的大腦會把
事物看成連續的形體。
7 種完形心理學概念 與 UI設計之應用

21. 03
連續性(Continuity)
我們的大腦會把
事物看成連續的形體。
7 種完形心理學概念 與 UI設計之應用
美圖秀秀將其他頁的產品宮格微露一角，由於連續性的影響，大腦並不會因為宮格被裁切或是
只露一部分而阻礙我們辨識它，藉由這樣的設計來觸發使用者往左滑以察看後面產品的動作。
眼睛看到的 大腦認知的

22. 03
連續性(Continuity)
我們的大腦會把
事物看成連續的形體。
7 種完形心理學概念 與 UI設計之應用
圖片來源 https://colorlib.com/wp/best-pinterest-style-wordpress-themes/
瀑布是網頁也是連續性法則的應用案例。
眼睛看到的 大腦認知的

23. 04
封閉性(Closure)
我們的大腦在觀察事物
的時候，會將許多個獨
立的元素視認為一個完
整封閉的圖形。
閉鎖性 / 封閉性 (Closure)
7 種完形心理學概念 與 UI設計之應用
我們的大腦會自動填補元素和元素間的空白部分，將複雜的元素簡化，
儘管中間沒有接續的關係，我們仍然會傾向於看成一個完整的圖形，
以節省我們的記憶空並快速辨識物件。而這種視覺特性稱為封閉性。

24. 7 種完形心理學概念 與 UI設計之應用
封閉性其實就是「具體化」的體現。設計師可以利用這個概念去創作
貌似殘缺不全的圖形，例如中華電信 & IBM的LOGO設計。
04
封閉性(Closure)
我們的大腦在觀察事物
的時候，會將許多個獨
立的元素視認為一個完
整封閉的圖形。

25. 7 種完形心理學概念 與 UI設計之應用
圖片來源 http://abduzeedo.com/
眼睛看到的 大腦認知的
04
封閉性(Closure)
我們的大腦在觀察事物
的時候，會將許多個獨
立的元素視認為一個完
整封閉的圖形。

26. 05
圖地原理 (Figure-Ground)
7 種完形心理學概念 與 UI設計之應用
通常面積小、水平或垂直、位於下方、
單純的形、反覆的、被包圍的、有動感
的、對稱的、密度高或有質感者易被視
認為圖，且往上突出比往下垂直容易被
視認為圖。但很多時候前後景會依照我
們所關注的對象不同而有不同的效果。
我們的大腦會把圖案視認為
圖(前景)與地(後景)的結合。

27. 05
圖地原理 (Figure-Ground)
我們的大腦會把圖案視認為
圖(前景)與地(後景)的結合。
7 種完形心理學概念 與 UI設計之應用
(d) (e)
(d)圖，我們將背景暗化或是模糊化以突顯前方
的「圖」，讓使用者可以專注在對話框的內容上；
(e)圖因未淡化背景便可能擾亂使用者的閱讀。

28. 06
共同命運(Common Fate)
我們的大腦會把
動態相近的事物看成一體。
7 種完形心理學概念 與 UI設計之應用
GOOGLE/ MATERIAL DESIGN
Floating Action Button - 類似的動態與
設計，且幾乎在同時間點出現，我們的
大腦就會判斷這些功能是一個整體。

29. 07
對稱性(Symmetry)
7 種完形心理學概念 與 UI設計之應用
我們的大腦會把
對稱的物體視為一個整體。

30. 07
對稱性(Symmetry)
我們的大腦會把
對稱的物體視為一個整體。
7 種完形心理學概念 與 UI設計之應用
美圖秀秀較早版本 美圖秀秀目前版本
美圖秀秀
早期的版本(左圖)因為子產品並沒有那
麼多，因此整齊地排列在畫面中央給
人穩定和諧的感覺；然當子產品變多
(右圖)，便利用畫面的不對稱性給人右
邊內容還沒結束的感覺，而刺激向左
滑動的行為。

31. 07
對稱性(Symmetry)
我們的大腦會把
對稱的物體視為一個整體。
7 種完形心理學概念 與 UI設計之應用
長捲動式網頁也會運用
顯著標示或無明顯區塊的
header (網站LOGO 或 橫向
Navigation)與 Footer(聯絡
我們等相關資訊)來告知使用
者網頁已經結束。
圖片來源 https://www.capitalnumbers.com/blog/why-you-need-to-switch-to-long-scrolling-site/
Header
Footer

32. 7 種完形心理學概念 與 UI設計之應用
回顧「完形心理學」7項原則
01
相似性(Similarity)
我們的大腦會把
相似的事物看成一體
07
對稱性(Symmetry)
我們的大腦會把
對稱的物體視為一個整體
06
共同命運(Common Fate)
我們的大腦會把
動態相近的事物看成一體
05
圖地原理 (Figure-Ground)
我們的大腦會把圖案視認為
圖(前景)與地(後景)的結合
04
封閉性(Closure)
我們的大腦在觀察事物的時
候，會將許多個獨立的元素
視認為一個完整封閉的圖形
03
連續性(Continuity)
我們的大腦會把
事物看成連續的形體
02
接近性(Proximity)
我們的大腦會把
靠近的事物看成一體

33. 1. 完形心理學簡介
2. 7 種完形心理學概念 與 UI設計之應用
3. 總結

34. • 舉凡各種設計(攝影、排版、工業設計…)都能見到完形心理學。
• 各個完形概念有時會單一，或是綜合出現在設計裡。
• 完形心理學並非教大家如何科學化的分析設計，而是在於理解我們的
大腦是如何思考，以及「為什麼」要使用這樣的設計樣式
(Design Pattern)。
• 這樣的認知模式存在於人們的大腦中，因此，此理論很適合用來與人
溝通，將設計概念以共通並能相互理解的角度具體地闡述出來，來幫
助人們更正確地接收我們想要傳遞的訊息。
總結

35. 理解大腦的認知基礎，溝通才能更順暢。

36. THANK YOU!
Hope you like this sharing!
Seal Tseng / tsengseal@gmail.com