🍨【人觀察的 12 條準則】下 #設計心理 #圖像視覺

您好，感謝您的閱讀 :D

本專欄是圖解讀書會的文字版，此次書單是《設計師要懂心理學》，每周三與六與你一起共讀，分享書中100個與設計相關的心理知識，如果您喜歡或關注知識圖卡、知識圖解、圖卡設計、用戶體驗相關話題，歡迎追蹤本專欄。

此篇分享人觀察的 7-12條準則，前面的 1-6條請點擊此處文字，會自動傳送 :D

“功能可見性”（affordance）的概念最初由James Gibson在1979年提出，爾後Don Norman於1988年在《設計心理學》（The Design of Everyday Things）定義出範圍：

“感知功能可見性（perceived affordance）”指無論在生活或是在電腦螢幕上，如果想讓用戶使用一個物體，就要保證讓用戶能夠輕易察覺，並理解它是什麼，該如何使用。

舉例來說，當人們試圖在網路上完成購物，會自動尋找購物車（工具或功能），他們自己不會意識到這點，如果我們負責設計購物頁面，一定要確保頁面裡的按鍵一目了然並具有清晰的功能可見性。

在閱讀的你，或許會想到底什麼是功能可見性？

過去在網頁上出現藍色帶下划線的文字，通常代表該文字有超連結，其功能是當點擊該文字時，會自動跳轉到該連結，在方格子則是紅色帶下划線的文字【人觀察的 12 條準則】，當你把滑鼠移到紅色的字上，鼠標變成手指以及出現陰影。

上述描述的：紅/藍色帶下划線的文字+鼠標變成手指+出現陰影=功能可見性。

👉 會發現功能可見性與用戶被培養的使用習慣相關，如果可能盡可能沿用習慣，避免去教育用戶，比如，將整個網頁的字都變成有下划線，沒有下划線的才有超連結，會讓用戶會惱火。

若是運用在圖卡設計中，當有需要執行操作按按鈕時，可以運用陰影與手指，讓用戶覺得圖卡上有點擊的感受，剛好之前製作的簡報封面是用此概念↓。

2010年出版的《看不見的大猩猩》（The Invisible Gorilla）裏頭有個著名的實驗：請受試者計算影片中運動員傳遞籃球的次數，在運動員運球的同時，有扮演的大猩猩經過，甚至做捶胸的動作，卻有將近50%的受試者都表示沒有看到大猩猩，這例子被心理學家稱為“無意視盲”（inattention blindness）或“變化視盲”（change blindness）。

該書作者克裏斯托弗·查布利斯（Christopher Chabri）與丹尼爾·西蒙斯（Daniel Simons）疑惑受試者是否真的都沒有看到大猩猩，所以使用眼動跟踪技術去追蹤受試者的人眼方向（更確切的說，是中央視覺），卻發現受試者都曾注視大猩猩處至少超過1秒鐘，但僅半數人意識到大猩猩

進行研究多次後，Chabris和Simons得出結論：當人們的注意力集中在一件事上，沒有預期可能發生其他改變，就很容易對實際發生的變化視而不見。（人的注意力資源有限，很難分心同時注意各種背景事物）

👉 主要內容是在表達，不要認為出現在螢幕上的內容，就會被用戶看見，以及眼動跟踪眼動跟踪有一定的誤導性，用戶可能並未真的有意識注意到內容，若要保證用戶會注意到，可以增加一些聲音或閃爍。

若是運用在圖卡設計中，對於內容必然要分層，將標題與內文、關鍵字用文字大小或顏色區分，降低耗損用戶的認知資源（注意力），另外，也可以考慮製作gif檔的圖卡，針對重點處，增加閃爍。

如果兩個物件（比如，文字與圖片）離得很近，用戶就會認為他們之間有聯繫其中，左右相鄰的關聯最為密切，這也是排版原則裡的親密原則，有關的內容間距要小，無關的內容間距要大。

若要使用線分隔內容，也可以加大間距看看，說不定增加間距就能夠產生分隔效果，也能讓畫面具有簡潔的視覺效果。

👉 若是運用在圖卡設計中，如果希望用戶認為某組圖片、文字、標題、內容是相關的，可以採用排版原理的親密原則：有關的內容間距要小，無關的內容間距要大。

不同的顏色會産生不同的立體效果，有些顏色向外凸起，有些則向內凹，其中，紅藍搭配的立體效果最為强烈，兩色波長一長一短，紅色較為凸出，這種效果被稱作“色彩實體視覺”（chromostereopsis），當用戶閱讀紅藍、紅綠這些組合眼睛會很吃力。

👉 若是運用在圖卡設計中，為了圖像的可讀性，應盡可能避免採取紅藍、紅綠組合，如果非要用紅綠組合怎麼辦？提供一個我常用的網站，可以檢查顏色的可讀性：顏色對比檢查分析器工具 | Adobe Color

色盲並不是指完全無法分辨顏色，而是指無法辨識某幾種顏色，其中最普遍的是紅綠色盲（無法分辨紅、黃和綠色），而藍黃色盲（無法分辨藍色和黃色）和全色盲（所有顏色看上去都是灰色）的情况則比較罕見。

色盲多數是遺傳、疾病、受傷所致，識別顏色的基因在X染色體上，男性僅有一條X染色體，而女性有兩條，因此色盲男性比率較女性高，比例為 9% : 0.5%。

關於配色方案有兩種經驗原則：（1） 在使用顏色代表特定意義時，需同時使用另一種區分方案，比如，使用紅色+粗線條代表OO，紅色+細線條代表XX，這樣即使無法辨識特定顏色，也能看懂圖像的含意。（2） 採取色覺正常的人和各種色盲的人都能正常辨識的配色方案。

若擔心色彩辨識問題，作者建議可至： http://www.vischeck.com/ 將圖片上船檢查看看 。

👉 若是運用在圖卡設計中，如果是流通性大的圖卡，盡可能使用所有人都能辨識的配色方案，或者當使用顏色代表特定含意，要添加另一元素作為辨識使用。

色彩具有聯繫和含意的，例如，紅色代表赤字、危險或停止，綠色代表正字、安全或通行，所以選擇顏色要謹慎，當為世界各地的人做設計時，需要考慮顔色在當地文化的涵義，舉例來說，在美國，白色象徵純潔，會用於婚禮，而在某些地方，白色則用於死亡和葬禮。

如果想知道各地顏色代表的意義，可使用此網站：Colours in Cultures — Information is Beautiful。

研究也表明，色彩會影響情緒，例如，快餐店使用紅色與橙色，會讓顧客感到焦慮不安，顧客不會久待，但若要用顏色影響人的情緒，需要讓人所在的顏色充滿這種顏色，如果只是螢幕上有某則顏色，則達不到效果。

👉 若是運用在圖卡設計中，盡可能使用與文化習慣相符的顏色，避免被誤讀，舉例來說，當要表達，我愛你的心時，使用紅色，而非黑色或黃色。

補充：色彩會影響情緒是有科學證明的，科學家發現，紅色可以讓人自律神經加快，所以人會心跳加快，產生急促的感受，因此配色可以注意一下色彩的情緒感染力。

好啦，本次我們一起共讀了解了人類觀察的準則， 11/30 下週三讓我們一起繼續共讀人類閱讀的準則，持續精進邁向知識圖解圖卡大師 :D