視覺設計的認知科學 （一）：形、色、質
大家好 😊 我是產品設計師 Yunshan，今天要來跟大家分享，認知與設計的關係🦄
那麼廢話不多說，進入正題吧！👇
緒論（INTRODUCTION）
在人類漫長的進化過程裡面，一些偏好與感受，透過不斷地學習與演繹，早已深刻地烙印在我們的潛意識當中。就像貓咪害怕小黃瓜 🥒（覺得小黃瓜是蛇 🐍 ），物種共有的天生偏好與感受，會在無意識的狀態下，影響著我們對事物的認知。
透過運用這些人類原始的天性與本能，打造符合人類原廠設定的設計，便可以更直覺與效率地，創造出好用又舒適的產品及體驗。
以視覺設計為例，運用基本的視覺元素（形、色、質）設計大腦的認知，有效打造達成目標的體驗與感受。
一起來看看怎麼做吧！💪
形（FORM）
事物的形體，往往能很好的給予我們它自帶條件的訊息，提示我們它的功能與特性。例如，最廣為人知的 Affordance，即是事物的外在條件，能提示我們「如何使用它」的經典範例。
像是圓形的輪胎，會比方形的輪胎，更適合用來做「滾動」行為。從物理條件上來說，圓形會「滾動」得更加舒適、有效率。方形的石頭比起三角形相對穩定，更適合用來「堆疊」，建造更大的物體。
事物的形，除了提示我們它的功能及特性外，也讓我們的大腦產生了一些直觀的感受。像是尖銳的形狀提示了我們，它具有「危險」、需要「注意」的特性，給予了大腦「堅硬」、「強壯」等感受，可以較多的「吸引注意力」，並「引起深思」。
這是因為大腦在處理具有尖角的形體時，會觸發處理聯想的區塊，在資訊的處理上，較圓潤的形體更加的深層。因此人們會覺得具有尖角的形體，更加的有趣、也更加挑釁。
而圓潤的形狀，則提示我們它相對「安全」、「可親近」，帶給我們「柔和」、「包容」等感受，並且較能引發「正面情緒」，還有留下「美好印象」。
著名的 Baby-Face Bias ，展示了人們對圓潤形狀的喜愛。嬰兒圓潤的眼睛、臉頰、小巧的鼻子、短小的下巴等外型，引發了大腦產生「幼小」、「需要幫助」、「無辜」、「誠實」等感受。研究顯示， Baby-Face Bias 較不明顯的嬰兒，將較少受到成人的積極關注與喜愛。
應用在設計上，當設計需要展示「堅硬」、「強壯」，甚至帶一點「個性」的感受時，就可以使用方形或帶有尖角的形狀。需要營造「柔和」、「包容」，或是「女性化」、「幼小」等感受時，則可以使用圓潤的曲線與造型。
那在 UI 上，又會是什麼樣的效果呢？
以下採用 Google Material You 的 UI ，示範使用不同形狀，帶來的視覺感受差異。
我們可以看到，在相同的資訊結構下，方形或尖角，為 UI 帶來了「堅硬」、「陽剛」以及「較有個性」的感覺。而圓滑造型，則為 UI 帶來「柔和」、「包容」等感受。
方形或尖角的 UI，較能在第一時間較多的「吸引注意力」。而圓滑造型的 UI ，則較能留下「美好的印象」。
設計師可就產品特性、目標用戶及品牌策略，採用不同的形狀，來加快達成設計目的。
色（COLOR）
一般來說，動物可以識別 2 相度的顏色，而人類可以識別 3 相度的顏色，鳥類則是 4 相度，甚至更多。人類可以識別 3 相度的顏色，是由於視覺構造的關係。
人的視網膜上，有 Cone Cell 與 Rod Cell 兩種受器。Cone Cell 掌控亮視覺，分佈在視網膜中央，屬於中心視覺，負責分辨顏色與細節。而 Cone Cell 又分為 3 種類型，分別對紅、綠、藍 3 種顏色相對敏感，因此當這 3 種顏色不同程度的被 Cone Cell 接收，就會產生不同顏色的感覺。
Rod Cell 則掌控了暗視覺，分佈在視網膜的周遭，屬於邊緣視覺，對亮度變化、形狀與移動較為敏感，是作為在黑暗環境中的主要視力來源。
由於大部分人類可以感知 3 相度的顏色，因此色彩對大腦感知上的影響，佔有相當重要的地位。
在顏色裡面，暖色調可帶來「溫暖」、「可親近」的感受，而冷色調則帶來「寒冷」、「疏遠」的感覺。生長在熱帶及亞熱帶地區的人，較偏好溫暖、飽和的色彩，像是中國人特愛高飽和的大紅色。而生長在緯度較高地區的人，則偏好較冷調、不飽合的色彩，像是北歐與日本人都更偏好淡雅的顏色。
不同文化對色彩偏好與象徵性，也影響了設計。
綜觀來說，若需要營造「溫暖」、「親近」的感受，可以使用暖色調，像是食品包裝、女性用品等。需要營造「冷靜」、「專業」的感受時，就可以考慮使用冷色調，像是銀行、科技產品等。
顏色對大腦的影響舉足輕重，而大腦對色彩認知也具有一定的特性，以下幾點是在設計上使用顏色時，可以注意的地方。
1.顏色的數量
由於大腦一次可以處理的資訊量有限，因此必須謹慎使用顏色。一眼之中包含的顏色數量，最好少於 5 個，並且最好不要只用顏色來凸顯重要的資訊，因為部分人口能看見的顏色數量有限。
2.顏色的組合
在 Color Wheel 上相鄰的顏色，會是比較柔和、具有美感的色彩組合，而在 Color Wheel 上相對的顏色，則有互補的效果。在 Color Wheel 上形成正三角形、方形、長方形的色彩組合，也是具有美感的色彩組合，總體來說從大自然當中找到的色彩組合（花、風景等），都是具有一定美感的色彩組合。另外使用暖色當前景色、冷色當背景色的組合，通常也能讓設計產生不錯的聚焦效果。
3.顏色的飽和度
飽和色彩較能帶給人「興奮」與「動態」的感覺，而在不飽和色彩上，偏亮色調的不飽和色彩，會帶給人們「親切」、「專業」的感受，而偏暗調的不飽和色彩，則會帶來「嚴肅」、「專業」的感覺。使用飽和的顏色來強調重點，是非常有效率的做法，但當同時使用兩個飽和顏色時，就會造成視覺干擾與視覺疲勞，必須謹慎使用。
4.顏色的象徵性
如前所述，不同文化對色彩的偏好、意義與象徵性均不相同，須針對目標用戶與市場進行調查與理解，打造符合目標需求的色彩組合。
在了解了顏色的功能與特性後，我們接著將剛才的 UI，套上不同的顏色。
可以看到，不同的顏色，為設計帶來了全然不同的印象。藍色系為 UI 帶來了「冷靜」、「清爽」的感覺，而粉紅色系則為 UI 帶來了「甜美」與「女性化」的感受。
設計師在打造產品印象時，可以策略性的安排顏色的使用，為 UI 創造直觀、有效的視覺感受。
質（TEXTURE）
視覺質感，受到光影、密度、排列方向、大小對比等影響，使我們感知物體的凹凸，粗糙還是光滑等。
除了功能，質感亦能帶來情緒方面的感受。近年來感性工學鑽研「質感引發情感」的研究有諸多的成果，在視覺上使用不同的質感，能為設計帶來不同的感受。
粗糙的顆粒與較低的密度，能創造出「粗獷」、「陽剛」的感覺，而細緻的顆粒與較高的密度，則可以創造出「細膩」、「溫柔」的感受。
那麼質感應用在 UI 上，又會有什麼樣的效果呢？我們來將剛才的 UI ，加上一點質感看看。
可以看到，添加了質感的 UI ，多了更多氛圍的渲染，加深了視覺的印象與感受。
然而，當物體加上質感，對認知處理的複雜度就會增加，因此大腦處理資訊就會花費更多的時間。近年來流行的 Flat Design ，則大大降低了認知處理的複雜度，使大腦能夠更快的處理重要的資訊。
設計師可視目的，為設計加上適當的質感，在不過度增加認知處理的複雜度下，增添設計的情緒感受。
以上簡單的介紹了大腦的原廠設定，如何影響人們對設計的認知，只要善加利用這些共性，創造出簡單、有效的設計將不再困難。
以認知科學的角度來理解設計，是不是很有趣呢？ 喜歡這類文章的話，也請給我一點鼓勵唷 🙌
另外，你有訊息太多、太過雜亂，總是容易漏掉重要訊息的惱人問題嗎？就讓訊息管理大師， Message Checker 來幫幫你吧！
Message Checker 能智能分類訊息！讓你在煩忙的生活當中，專注看你想看的！並且不會被發現你已讀了！（什麼？居然可以偷看訊息不被知道！）
Message Checker 還可以幫你查看 URL 或是虛擬錢包地址的安全性，超前部署告訴你，這個錢包地址是詐騙錢包啊！可別傻傻受騙了！
有需要的朋朋，歡迎來體驗看看喔！🫶
傳送門 👉 https://play.google.com/store/apps/details?id=com.gogolook.messagechecker
