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

您好,感謝您的閱讀 :D
本專欄是圖解讀書會的文字版,此次書單是《設計師要懂心理學》,每周三與六與你一起共讀,分享書中100個與設計相關的心理知識,如果您喜歡或關注知識圖卡、知識圖解、圖卡設計、用戶體驗相關話題,歡迎追蹤本專欄。
此篇分享人觀察的 7-12條準則,前面的 1-6條請點擊此處文字,會自動傳送 :D
圖解筆記《設計師要懂心理學》

07 會找功能可見性

“功能可見性”(affordance)的概念最初由James Gibson在1979年提出,爾後Don Norman於1988年在《設計心理學》(The Design of Everyday Things)定義出範圍:
“感知功能可見性(perceived affordance)”指無論在生活或是在電腦螢幕上,如果想讓用戶使用一個物體,就要保證讓用戶能夠輕易察覺,並理解它是什麼,該如何使用。
如果門實際是要用推的才能開,用戶會困惑or惱火
舉例來說,當人們試圖在網路上完成購物,會自動尋找購物車(工具或功能),他們自己不會意識到這點,如果我們負責設計購物頁面,一定要確保頁面裡的按鍵一目了然並具有清晰的功能可見性。
在閱讀的你,或許會想到底什麼是功能可見性?
過去在網頁上出現藍色帶下划線的文字,通常代表該文字有超連結,其功能是當點擊該文字時,會自動跳轉到該連結,在方格子則是紅色帶下划線的文字【人觀察的 12 條準則】,當你把滑鼠移到紅色的字上,鼠標變成手指以及出現陰影。

上述描述的:紅/藍色帶下划線的文字+鼠標變成手指+出現陰影=功能可見性。
👉 會發現功能可見性與用戶被培養的使用習慣相關,如果可能盡可能沿用習慣,避免去教育用戶,比如,將整個網頁的字都變成有下划線,沒有下划線的才有超連結,會讓用戶會惱火。

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

08 注視不等於注意

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

該書作者克裏斯托弗·查布利斯(Christopher Chabri)與丹尼爾·西蒙斯(Daniel Simons)疑惑受試者是否真的都沒有看到大猩猩,所以使用眼動跟踪技術去追蹤受試者的人眼方向(更確切的說,是中央視覺),卻發現受試者都曾注視大猩猩處至少超過1秒鐘,但僅半數人意識到大猩猩
專注看特定物體,會注意不到周邊
進行研究多次後,Chabris和Simons得出結論:當人們的注意力集中在一件事上,沒有預期可能發生其他改變,就很容易對實際發生的變化視而不見。(人的注意力資源有限,很難分心同時注意各種背景事物)
👉 主要內容是在表達,不要認為出現在螢幕上的內容,就會被用戶看見,以及眼動跟踪眼動跟踪有一定的誤導性,用戶可能並未真的有意識注意到內容,若要保證用戶會注意到,可以增加一些聲音或閃爍。
若是運用在圖卡設計中,對於內容必然要分層,將標題與內文、關鍵字用文字大小或顏色區分,降低耗損用戶的認知資源(注意力),另外,也可以考慮製作gif檔的圖卡,針對重點處,增加閃爍。

09 相鄰物必相關

如果兩個物件(比如,文字與圖片)離得很近,用戶就會認為他們之間有聯繫其中,左右相鄰的關聯最為密切,這也是排版原則裡的親密原則,有關的內容間距要小,無關的內容間距要大。
相鄰物必相關
若要使用線分隔內容,也可以加大間距看看,說不定增加間距就能夠產生分隔效果,也能讓畫面具有簡潔的視覺效果。
👉 若是運用在圖卡設計中,如果希望用戶認為某組圖片、文字、標題、內容是相關的,可以採用排版原理的親密原則:有關的內容間距要小,無關的內容間距要大。

10 紅藍搭配難閱讀

不同的顏色會産生不同的立體效果,有些顏色向外凸起,有些則向內凹,其中,紅藍搭配的立體效果最為强烈,兩色波長一長一短,紅色較為凸出,這種效果被稱作“色彩實體視覺”(chromostereopsis),當用戶閱讀紅藍、紅綠這些組合眼睛會很吃力。
你能夠清楚閱讀到上面的文字嗎
👉 若是運用在圖卡設計中,為了圖像的可讀性,應盡可能避免採取紅藍、紅綠組合,如果非要用紅綠組合怎麼辦?提供一個我常用的網站,可以檢查顏色的可讀性:顏色對比檢查分析器工具 | Adobe Color
Adobe Color

11 男女色盲比例

色盲並不是指完全無法分辨顏色,而是指無法辨識某幾種顏色,其中最普遍的是紅綠色盲(無法分辨紅、黃和綠色),而藍黃色盲(無法分辨藍色和黃色)和全色盲(所有顏色看上去都是灰色)的情况則比較罕見。
引用字書中,不同情況看到的地圖
色盲多數是遺傳、疾病、受傷所致,識別顏色的基因在X染色體上,男性僅有一條X染色體,而女性有兩條,因此色盲男性比率較女性高,比例為 9% : 0.5%。
色盲男性比率較女性高
關於配色方案有兩種經驗原則:(1) 在使用顏色代表特定意義時,需同時使用另一種區分方案,比如,使用紅色+粗線條代表OO,紅色+細線條代表XX,這樣即使無法辨識特定顏色,也能看懂圖像的含意。(2) 採取色覺正常的人和各種色盲的人都能正常辨識的配色方案。
若擔心色彩辨識問題,作者建議可至: http://www.vischeck.com/ 將圖片上船檢查看看 。
👉 若是運用在圖卡設計中,如果是流通性大的圖卡,盡可能使用所有人都能辨識的配色方案,或者當使用顏色代表特定含意,要添加另一元素作為辨識使用。

12 色彩涵義因文化而異

色彩具有聯繫和含意的,例如,紅色代表赤字、危險或停止,綠色代表正字、安全或通行,所以選擇顏色要謹慎,當為世界各地的人做設計時,需要考慮顔色在當地文化的涵義,舉例來說,在美國,白色象徵純潔,會用於婚禮,而在某些地方,白色則用於死亡和葬禮。
對會計師而言紅色代表赤字... 即使有+號
如果想知道各地顏色代表的意義,可使用此網站:Colours in Cultures — Information is Beautiful。
研究也表明,色彩會影響情緒,例如,快餐店使用紅色與橙色,會讓顧客感到焦慮不安,顧客不會久待,但若要用顏色影響人的情緒,需要讓人所在的顏色充滿這種顏色,如果只是螢幕上有某則顏色,則達不到效果。
👉 若是運用在圖卡設計中,盡可能使用與文化習慣相符的顏色,避免被誤讀,舉例來說,當要表達,我愛你的心時,使用紅色,而非黑色或黃色。
補充:色彩會影響情緒是有科學證明的,科學家發現,紅色可以讓人自律神經加快,所以人會心跳加快,產生急促的感受,因此配色可以注意一下色彩的情緒感染力。
好啦,本次我們一起共讀了解了人類觀察的準則, 11/30 下週三讓我們一起繼續共讀人類閱讀的準則,持續精進邁向知識圖解圖卡大師 :D
贊助支持創作者,成為他繼續創作的動力吧!
大吉嶺|閱讀行動派
大吉嶺|閱讀行動派
知識視覺設計師 👩‍🎨 持續分享圖解筆記丨成長思維丨高效學習法~陪伴大家共同成長 ❤️ 🎯 現為圖解出版社圖解/插畫師|認證企業實訓指導師 🎓 曾為可視化網站PM|微軟ERP導入顧問 📮 課程|商用圖解諮詢 👉[email protected]
留言0
查看全部
發表第一個留言支持創作者!
你可能也想看
領取見面禮
只要設定追蹤作者,即可享有 48小時
Premium 閱讀權限