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

更新於 發佈於 閱讀時間約 8 分鐘

您好,感謝您的閱讀 :D

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

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

raw-image

07 會找功能可見性

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

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

raw-image

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

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

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

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

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

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

raw-image

08 注視不等於注意

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

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

raw-image

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

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

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

09 相鄰物必相關

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

raw-image

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

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

10 紅藍搭配難閱讀

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

raw-image

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

raw-image

11 男女色盲比例

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

raw-image

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

raw-image

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

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

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

12 色彩涵義因文化而異

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

raw-image

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

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

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

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

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


留言
avatar-img
留言分享你的想法!
avatar-img
大吉嶺|閱讀行動派的沙龍
105會員
203內容數
圖解讀書會後的文字稿
2023/05/24
➡️ 本篇文章為如何使用Midjourney與PS製作Line表情包。 之前上架了一組 Line 表情包,將操作方式記錄。 可愛的白髮卡通少女貼圖 – LINE貼圖 | LINE STORE 正文開始 一、適用人群:無須基礎,操作難度低 二、注意事項: 1. 記得使用付費版 Midjou
Thumbnail
2023/05/24
➡️ 本篇文章為如何使用Midjourney與PS製作Line表情包。 之前上架了一組 Line 表情包,將操作方式記錄。 可愛的白髮卡通少女貼圖 – LINE貼圖 | LINE STORE 正文開始 一、適用人群:無須基礎,操作難度低 二、注意事項: 1. 記得使用付費版 Midjou
Thumbnail
2023/02/01
上周六我們共讀了《學習學習:快速變強4步法》,現在將部分內容,轉為文字稿,方便大家後續的閱讀與使用,以下整理有經刪減處理,把我需要的部分給節露出來,書中有很多實際舉例,非常推薦購買書籍。 讀這本書可以獲得的: 1. 一套完整且經測試的學習方法論 2. 達成輸入-思考-輸出-實踐的完整閉環
Thumbnail
2023/02/01
上周六我們共讀了《學習學習:快速變強4步法》,現在將部分內容,轉為文字稿,方便大家後續的閱讀與使用,以下整理有經刪減處理,把我需要的部分給節露出來,書中有很多實際舉例,非常推薦購買書籍。 讀這本書可以獲得的: 1. 一套完整且經測試的學習方法論 2. 達成輸入-思考-輸出-實踐的完整閉環
Thumbnail
2023/01/11
今天中午在其他讀書會分享《一人創業》裡的5提問—找到真正想做的事,也分享給大家。 《一人創業》是一本談論創業的書籍,它最特別的地方是:作者本身是日本創業導師,他帶領學員去找到真正在想做的事,用這件事來創業,用通俗的話來說就是,把熱愛當成工作。 有些人會擔心,做自己真正想做的事,真的能够謀生嗎?
Thumbnail
2023/01/11
今天中午在其他讀書會分享《一人創業》裡的5提問—找到真正想做的事,也分享給大家。 《一人創業》是一本談論創業的書籍,它最特別的地方是:作者本身是日本創業導師,他帶領學員去找到真正在想做的事,用這件事來創業,用通俗的話來說就是,把熱愛當成工作。 有些人會擔心,做自己真正想做的事,真的能够謀生嗎?
Thumbnail
看更多
你可能也想看
Thumbnail
常常被朋友問「哪裡買的?」嗎?透過蝦皮分潤計畫,把日常購物的分享多加一個步驟,就能轉換成現金回饋。門檻低、申請簡單,特別適合學生與上班族,讓零碎時間也能創造小確幸。
Thumbnail
常常被朋友問「哪裡買的?」嗎?透過蝦皮分潤計畫,把日常購物的分享多加一個步驟,就能轉換成現金回饋。門檻低、申請簡單,特別適合學生與上班族,讓零碎時間也能創造小確幸。
Thumbnail
嗨!歡迎來到 vocus vocus 方格子是台灣最大的內容創作與知識變現平台,並且計畫持續拓展東南亞等等國際市場。我們致力於打造讓創作者能夠自由發表、累積影響力並獲得實質收益的創作生態圈!「創作至上」是我們的核心價值,我們致力於透過平台功能與服務,賦予創作者更多的可能。 vocus 平台匯聚了
Thumbnail
嗨!歡迎來到 vocus vocus 方格子是台灣最大的內容創作與知識變現平台,並且計畫持續拓展東南亞等等國際市場。我們致力於打造讓創作者能夠自由發表、累積影響力並獲得實質收益的創作生態圈!「創作至上」是我們的核心價值,我們致力於透過平台功能與服務,賦予創作者更多的可能。 vocus 平台匯聚了
Thumbnail
視障者的日常生活和應對策略。作者藍介洲以幽默風趣的方式分享視障者生活的豐富與自在。他的書籍讓讀者看見即使面對看不見的困難,也能擁有多姿多彩的生活。
Thumbnail
視障者的日常生活和應對策略。作者藍介洲以幽默風趣的方式分享視障者生活的豐富與自在。他的書籍讓讀者看見即使面對看不見的困難,也能擁有多姿多彩的生活。
Thumbnail
利用減少的訓練時間,閱讀一本視障社工所寫的幽默書籍,分享了關於導盲犬、視障者日常生活的新認識,並鼓勵大家用開放心態了解視障者的世界。
Thumbnail
利用減少的訓練時間,閱讀一本視障社工所寫的幽默書籍,分享了關於導盲犬、視障者日常生活的新認識,並鼓勵大家用開放心態了解視障者的世界。
Thumbnail
身為一名「驗光師」,不是只會驗度數而已,我們要懂得如何處理「雙眼視覺」的問題。 醫學是個無底洞,讓我們好好瞧瞧這「宇宙視界」。
Thumbnail
身為一名「驗光師」,不是只會驗度數而已,我們要懂得如何處理「雙眼視覺」的問題。 醫學是個無底洞,讓我們好好瞧瞧這「宇宙視界」。
Thumbnail
眼神追尋需要大腦不同區域運用乙醯膽鹼密切合作,以順利追尋空間中移動的物體。
Thumbnail
眼神追尋需要大腦不同區域運用乙醯膽鹼密切合作,以順利追尋空間中移動的物體。
Thumbnail
本專欄是圖解讀書會的文字版,此次書單是《設計師要懂心理學》,每周三與六與你一起共讀,分享書中100個與設計相關的心理知識,如果您喜歡或關注知識圖卡、知識圖解、圖卡設計、用戶體驗相關話題,歡迎追蹤本專欄。此篇分享人觀察的 7-12條準則,前面的 1-6條請點擊此處文字。
Thumbnail
本專欄是圖解讀書會的文字版,此次書單是《設計師要懂心理學》,每周三與六與你一起共讀,分享書中100個與設計相關的心理知識,如果您喜歡或關注知識圖卡、知識圖解、圖卡設計、用戶體驗相關話題,歡迎追蹤本專欄。此篇分享人觀察的 7-12條準則,前面的 1-6條請點擊此處文字。
Thumbnail
又來到全院BLS訓練的日子 雖然AED貼片上有圖案可供提示 仍有學員一緊張就什麼都沒瞧見 沒關係 你不孤單喔 心理學家曾做過一個實驗 他們要求志願者一邊觀看短片,一邊在心中默數白衣球員傳球的次數,但不要理會黑衣球員的傳球數。影帶一播完,執行實驗的學生會要求受測者回報他們計算到的傳球數目。受測者的注意
Thumbnail
又來到全院BLS訓練的日子 雖然AED貼片上有圖案可供提示 仍有學員一緊張就什麼都沒瞧見 沒關係 你不孤單喔 心理學家曾做過一個實驗 他們要求志願者一邊觀看短片,一邊在心中默數白衣球員傳球的次數,但不要理會黑衣球員的傳球數。影帶一播完,執行實驗的學生會要求受測者回報他們計算到的傳球數目。受測者的注意
Thumbnail
為所有人打造產品:無障礙Accessibility是什麼? 你有想過你日常習以為常使用的產品與服務,舉凡金融、醫療、交通、教育等領域,世界上有另一群人無法使用嗎?在網路開始變成了新的基礎設施,提供許多人前所未有的便利時,有一群人仍然被排除在這樣的浪潮之外。
Thumbnail
為所有人打造產品:無障礙Accessibility是什麼? 你有想過你日常習以為常使用的產品與服務,舉凡金融、醫療、交通、教育等領域,世界上有另一群人無法使用嗎?在網路開始變成了新的基礎設施,提供許多人前所未有的便利時,有一群人仍然被排除在這樣的浪潮之外。
Thumbnail
"無障礙" 主要是形容一些建築物或一些讓公眾使用的地方﹐是否設有方便身體有殘障的人士使用的設施。例如: 輪椅使用者的斜坡、失明人士的導盲徑...等等。除此之外﹐在虛擬的互聯網世界裡同樣有 "無障礙" 的概念。 當我們製作網頁時﹐加入以下的技巧﹐網頁就能夠方便視障、聽障人士使用:
Thumbnail
"無障礙" 主要是形容一些建築物或一些讓公眾使用的地方﹐是否設有方便身體有殘障的人士使用的設施。例如: 輪椅使用者的斜坡、失明人士的導盲徑...等等。除此之外﹐在虛擬的互聯網世界裡同樣有 "無障礙" 的概念。 當我們製作網頁時﹐加入以下的技巧﹐網頁就能夠方便視障、聽障人士使用:
Thumbnail
這一集,山姆主以視覺障礙為出發分享,即便是被歸類在同一種種類的障礙,也存在不同的使用產品的手段,不能一概而論地去說「為了OO障礙者,我們做了這樣的設計」。 全盲使用者和弱視使用者的使用習慣的不同 我們每個人都處於身體能力光譜上的一個位置
Thumbnail
這一集,山姆主以視覺障礙為出發分享,即便是被歸類在同一種種類的障礙,也存在不同的使用產品的手段,不能一概而論地去說「為了OO障礙者,我們做了這樣的設計」。 全盲使用者和弱視使用者的使用習慣的不同 我們每個人都處於身體能力光譜上的一個位置
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News