用「完形心理學」，增加介面設計有感度! - Medium

對應用到介面設計上，FB每則文章下方的按鈕圖標(按讚Like / 留言Comment / 分享Share)雖然功能各不相同，但由於它們在視覺上顏色、大小、排列上的相似性， ... 設計應用趨勢攝影🗻山頂風光🗻Jumpto攝影網站用「完形心理學」，增加介面設計有感度!說服客戶與老闆、跟工程師溝通、強化設計概念的有感心理學Seal-被半導體業耽誤的產品設計師FollowOct13,2017·12minread大家好，我是Seal，一個在半導體業的UI/UX設計師。

我出身美術系，卻任職於製造產業，也因此頻受思維差異與產業文化的衝擊。

本篇是在設計共識屢屢挫敗後，我想到以「完形心理學」跟工程師溝通UI設計的分享文。

這是我工作上的親身經驗，希望可以幫助到更多設計師與工程師，運用人類共同的感知語言進行溝通與設計。

情況1:為何要留那麼多空白?害我還要滾動滑鼠(掀桌)情況2:為什麼不能直接用一頁展現?把客戶的需求塞滿不就完工啦!(無言)情況3:這種設計好像不錯，但是為什麼要這樣做?(直覺大神告訴我這樣設計，但我說不出來為什麼..)雖然世界上有許多GUI已經走得又長又遠又厲害，但別以為這種古代人對話不會出現，一直以來我們只是習慣這些GUI被如此呈現，但為何要這樣設計我們卻不一定知道。

由於完形心理學歸納出人類大腦認知之普遍性的規則，因此無論是不是UI/UX設計師都很適合閱讀本篇文章。

但還是想特別強調，若任職於傳統科技公司，需要對上說服老闆，需要平行說服(資深)工程師，那請把它收進最愛；而習慣套用設計好的UI套件，但不知道為何這樣設計的IT工程師，也可以透過本文來強化自己的產品說服力。

那就開始吧~(擊掌)完形心理學，又稱作格式塔(Gestalt)心理學，於二十世紀初由德國心理學家提出—用以說明人類大腦如何解釋肉眼所觀察到的事物，並轉化為我們所認知的物件。

它可說是現代認知心理學的基礎，其貫徹的概念就是「整體大於個體的總合“Thewholeisgreaterthanthesumoftheparts.”—KurtKoffka」。

若深究完整的理論將會使本文變得非常的艱澀，因此筆者直接抽取個人認為與UI設計較為相關的7個原則(如下)，並搭配實際案例做說明。

有興趣了解全部理論的話可以另外Google。

1.相似性(Similarity)—我們的大腦會把相似的事物看成一體如果數個元素具有類似的尺寸、體積、顏色，使用者會自動為它們建立起關聯。

這是因為我們的眼睛和大腦較容易將相似的事物組織在一起。

如下圖所示，當一連串方塊和一連串的圓形並排時，我們會看成(a)一列方塊和兩列圓形(b)一排圓形和兩排三角形。

對應用到介面設計上，FB每則文章下方的按鈕圖標(按讚Like/留言Comment/分享Share)雖然功能各不相同，但由於它們在視覺上顏色、大小、排列上的相似性，用戶會將它們視認為同一級別的按鈕。

設計師如果能善用相似法則，也可藉由外觀的一致性來達到更有效地傳達信息、暗示類似功能和節約頁面空間，從而為用戶提供更好的使用體驗。

Facebook在股市分析APP上也很常看見相似色彩的應用:以綠色標示股價上揚，以紅色代表股價下跌(國外與台灣的標示方式相反)。

無須多餘的使用說明，僅利用色彩群化讓使用者能迅速進行分類並判讀股市趨勢。

同樣，我們常見的色盲檢測卡也是利用顏色的接近性來測驗是否色盲。

股票先鋒-股市交易軟件/色盲檢測卡2.接近性(Proximity)—我們的大腦會把把靠近的事物看成一體讓我們先來觀察(a)，它是由6條直線均等分布，也因此我們的大腦很容易將六條直線視為一組。

但很神奇地，若我們將(1)(2)靠近，(3)(4)靠近，(5)(6)靠近，是不是覺得直線們從一組變為三組呢?再回過頭對照之前的例子，只因為我們把(c)上下排的距離拉近,(d)左右排的距離拉近，我們會因接近性的影響，而認為(c)圓圈+方塊+圓圈是一組、(d)三角形+圓圈+三角形是一組。

由此可知，當畫面上的物件同時出現相似性&接近性時，接近性的影響往往大過於相似性。

在介面設計上，我們不難發現接近性與相似性這個兩種法則常同時出現：以Gmail來說(圖e)，大腦應該會因為相似性而將圓形的頭像視為一個群組，將其後的文字描述視為一個群組(圖f)，但因為使用了近接概念並隔以適當空白，使得原先不同類型的元素，因為距離接近而讓使用者更易於聯想兩者間的關係，將頭像與後面的文件標題及內容視為一個信件群組(圖g)。

左圖:眼睛看到的/中圖:根據相似性我們以為會看到的/右圖:經過轉換後大腦看到的這種作法也常見於線上表格的填寫，我們會把相關的標題、功能、按鈕等排列在一起，或是表單的選項放在鄰近處。

這不僅僅是方便使用者操作，更可以明確的告訴使用者：hey~這些功能or選項是互相有關聯性的。

左圖:眼睛看到的/右圖:大腦看到的。

圖片來源:https://cssauthor.com/beautiful-free-web-form-psd-templates/3.連續性(Continuity)-我們的大腦會把事物看成連續的形體如下圖示，我們不會將(a)圖看成兩個相碰的尖角，而是交叉的兩個直線。

不會將(b)圖看成兩個相碰的尖角，而是交叉的直線與曲線。

同樣地在(c)圖與(d)圖，並不會因為中間有橫切一條直線而阻礙我們辨識它為一條連續的波浪型。

我們以當紅修圖APP「美圖秀秀」來說明連續性在UI設計上的應用。

進入美圖秀秀後可見許多不同產品被排列為跳板式（宮格式）導航聚集在中心頁面，若將產品以一頁四個整整齊齊地放置於正中央又無左右滑動提示，使用者很有可能不知道還有其他產品。

於是美圖秀秀將其他頁的產品宮格微露一角，由於連續性的影響，大腦並不會因為宮格被裁切或是只露一部分而阻礙我們辨識它，藉由這樣的設計來觸發使用者往左滑以察看後面產品的動作。

左圖:眼睛看到的/右圖:大腦看到的連續性概念的應用也常見於瀑布式網站佈局。

即便區塊式的卡片內容因頁面高度被截斷，我們的大腦還是會自動連續其型體並判斷為”內容未完”而往下瀏覽。

左圖:眼睛看到的/右圖:大腦看到的。

圖片來源:https://colorlib.com/wp/best-pinterest-style-wordpress-themes/4.封閉性(Closure)—我們的大腦在觀察事物的時候，會將許多個獨立的元素視認為一個完整封閉的圖形。

如下圖所示，我們的眼睛先觀察到一連串的圓點(1)，此時大腦開始填補圓點與圓點間的空白(2)，最後把它辨識為一個完整的圓(3)。

我們的大腦會自動填補元素和元素間的空白部分，將複雜的元素簡化，儘管中間沒有接續的關係，我們仍然會傾向於看成一個完整的圖形，以節省我們的記憶空間並快速辨識物件。

而這種視覺特性稱為封閉性。

封閉性其實就是「具體化」的體現。

設計師可以利用這個概念去創作貌似殘缺不全的圖形，例如中華電信&IBM的LOGO設計。

介面設計上，雖然Abduzeedo首頁內容之間並沒有明確的界線，但藉由圖片的排列方式和說明文字靠邊線所帶來的穩定感，讓觀看者在大腦中自動形成了某種「網格」-將頁面內容看成是有規則的區塊，而不是一個混亂的整體。

開玩笑地說，其實大腦蠻容易自行腦補的XD左圖:眼睛看到的/右圖:大腦看到的。

圖片來源:http://abduzeedo.com/5.圖地原理(Figure-Ground)—我們的大腦會把圖案視認為圖(前景)與地(後景)的結合圖形對我們來說有著前景跟背景之分，因為人的知覺具有組織性，會想辦法將視覺對象由背景中獨立出來，這個獨立出來的部分即為「圖」，周圍的部分則是「地」。

據研究發現，通常面積小、水平或垂直、位於下方、單純的形、反覆的、被包圍的、有動感的、對稱的、密度高或有質感者易被視認為圖，且往上突出比往下垂直容易被視認為圖。

但很多時後前後景會依照我們所關注的對象不同而有不同的效果。

(a)MartinNewcombePropertyMaintenancelogo房屋修繕公司，若以黑色為圖，白色為地，可以清楚辨識為一個修繕的板手。

若反之，也可辨識出房屋圖案，這是一個成功結合房屋與修繕得Logo設計。

(b)FedEx國際知名快遞公司，除了可以看見清楚的FedEx字樣，在Logo中的EX可以看到有個箭頭。

(c)FreemanWhitelogo室內設計公司，Logo就是「F」跟「W」的組合。

而在介面設計上最常使用圖地原理的就是DialogBox，如(d)圖，我們將背景暗化或是模糊化以突顯前方的「圖」，讓使用者可以專注在對話框的內容上；(e)圖因未淡化背景便可能擾亂使用者的閱讀。

而APP中的彈出式廣告也是同樣的道理。

6.共同命運(CommonFate)—我們的大腦會把動態相近的事物看成一體共同命運法則與相似性有點類似，只是更強調當某些元素有同速、同方向或是同行為的模式出現時，這些元素較易於被視為一個整體。

這個原則常用在動態的呈現上。

MaterialDesign常使用的漂浮按鈕(FloatingActionButton)便是共同命運原則的良好示範。

FloatingActionButton的設計便是為了節省移動裝置的可使用空間，而將多種功能或選項藏在其中，因為類似的動態與設計，且幾乎在同時間點出現，我們的大腦就會判斷這些功能是一個整體。

7.對稱性(Symmetry)—我們的大腦會把對稱的物體，視為一個整體。

對稱，通常能帶給觀者一種穩定、和諧的感覺。

你有發現嗎?若以接近性來說我們應該會判斷(2)(3)為一組、(4)(5)為一組，但事實上因為對稱性，大腦的判讀卻是(1)(2)為一組、(3)(4)為一組、(5)(6)為一組。

讓我們再以「美圖秀秀」來舉例，早期的版本(左圖)因為子產品並沒有那麼多，因此整齊地排列在畫面中央給人穩定和諧的感覺；然當子產品變多(右圖)，便利用畫面的不對稱性給人右邊內容還沒結束的感覺，而刺激向左滑動的行為。

左圖:美圖秀秀較早版本/右圖:美圖秀秀目前版本。

很多時候我們運用畫面的對稱性來引導視覺開始與結束的位置。

即便是現在很流行的長捲動式網頁也會運用顯著標示或無明顯區塊的header(網站LOGO或橫向Navigation)與Footer(聯絡我們等相關資訊)來告知使用者網頁已經結束。

最後完形心理學概念普遍的存在與應用於各種設計中，大家也不難發現同個設計裡綜合了多種不同的完型概念。

本文並不是要教大家如何科學化的分析設計，而是在於理解我們的大腦是如何思考，以及「為什麼」要使用這樣的設計樣式(DesignPattern)。

也因為這樣的認知模式存在於每個人的腦中，因此，此理論也很適合設計師優化產品，用來解釋直觀設計或依稀感受卻無法言喻的感性抽象，並以與他人共通並能理解的角度具體地闡述出來，來幫助人們更正確地接收你要傳遞的訊息。

留白不該只是設計的附屬品或毫無根據，可能是利用接近性或對稱性來幫助大腦分群；而填充式的滿版內容無法幫助閱讀，只會加重使用者的認知負荷。

希望大家在掌握這些原則後可以有所依據，言之有物，設計有理，讓產品更有感，成為與工程師溝通的橋樑，說服老闆客戶的利器。

【同場加映】2019.03新增:連至此篇最後，有完形心理學如何應用到UI設計的實際案例。

半導體業UI/UXDesigner的跨產業職場心法面對跨很大的產業與背景迥異的同事們，讓孤獨的設計師淺談在半導體公司體悟的那些事。

medium.com感謝閱讀到最後的你！我是Seal,希望你們喜歡這次的文章。

歡迎追蹤我，幫我拍拍手，或是有其他想交流討論也可以來信:[email protected]，謝謝!◈1-5claps：既然看過了，就來簽個到吧!◈6-10claps：表示你喜歡這篇文章！◈11-20claps：看完這篇文章我認為很有幫助！◈21-50claps：Oops!看來你對這篇很有感覺，我會更努力分享，謝謝你!重曝好時光🙌歡迎你來!12.5K9UIDesignGestaltReadability中文設計12.5K claps12.5K9重曝好時光🙌歡迎你來!🙌【重曝好時光】記錄我對各種生活事物、設計思考、旅行過程的潛沉反思與發想。

內容涵蓋設計創作/攝影/旅行，是一個美好事物的「女子」時光集錦。

其他經驗分享與技術文章則分別發表於AAPD,INSIDE,設計大舌頭,VIDE創誌，可由這邊看到這些文章:https://goo.gl/Nn2QcwWrittenbySeal-被半導體業耽誤的產品設計師Follow理性>感性，所以練習感性；圖像>文字，所以嘗試寫作。

我是位在半導體產業工作，且深怕被AI人工智慧取代的產品設計師!!(☞•́⍛•̀)☞因此對科技趨勢極有興趣，只為了找尋能不被滅亡的答案:P。

👩‍🎓@FUJAppliedArts✌🏼https://dribbble.com/s重曝好時光🙌歡迎你來!🙌【重曝好時光】記錄我對各種生活事物、設計思考、旅行過程的潛沉反思與發想。

內容涵蓋設計創作/攝影/旅行，是一個美好事物的「女子」時光集錦。

其他經驗分享與技術文章則分別發表於AAPD,INSIDE,設計大舌頭,VIDE創誌，可由這邊看到這些文章:https://goo.gl/Nn2Qcw