《設計師要懂心理學》讀書筆記:心理學在產品設計中的應用

4 評論 13801 瀏覽 447 收藏 20 分鐘

《設計師要懂心理學》這本書講了100個心理學的知識。內容很好,但是感覺看完就會忘記,結合之前看過的版式設計原理一書,于是我整合了下并試著分析幾個可以證明其觀點的案例(全以app端為例講述),作為自己學習的方式之一。

第1章:人如何觀察

眼見非腦見

視覺是一切感覺之首。人的大腦有一半的資源都用于接收和解析眼睛所見。但眼睛所見并非全部,因為視覺信息還要經過大腦轉換和解析。真正用來”觀察”的其實是大腦。為了更快地解析周圍的世界,大腦會偷懶:大腦每秒要接收約4000萬次的感官信息輸入,并試圖完全解析出它們的意義,所以它會根據以往的經驗,猜測我們看見了什么。

大腦解析

(大腦解析)

大腦認為左邊有兩個三角,右邊有個矩形,其實只是零碎的線條和有缺口的圓拼接而成

合理進行排版布局設計,運用內容組合方式、形狀和色彩可以影響人們所見,從而傳遞信息給觀察的人??偨Y了四種可以影響人之所見的方法如下:

一、根據版面率、顏色、圖片外形來調整頁面的效果

(版面率一詞主要運用在印刷品設計中,此為手機版面率)

1、版面率對頁面效果的影響

版面率可理解為各信息元素占手機屏幕大小的比率,版面率越大(界面留白越少),則頁面包含的信息就越多,反之則反。由于手機屏幕較小,信息的展示是有限的,如何在有限的屏幕展示有價值的信息是每個設計師都該考慮的。

2

(左邊版面率比右邊版面率低)

版面率的不同給用戶帶來的印象也會發(fā)生改變。版面率的降低很容易給人造成一種典雅印象或是形成一種高級的效果(適合整體效果較安靜和穩(wěn)重型設計)。版面率的升高會給人以充滿活力而又非常熱鬧的印象。

3

(版面率不同,頁面給人的印象不同)

調整版面率的方法:

  1. 調整留白-擴大留白降低版面率,縮小留白提升版面率;
  2. 調整圖片數量和尺寸-圖片數量越多版面率越高,圖片尺寸越大版面率越高;
  3. 改變版面底色-必要時,在文字數量多,圖版率小的情況下可以通過改變頁面底色,從而改變頁面所呈現的視覺感受

2、顏色對頁面效果的影響

頁面中對顏色的處理不一樣也會給人不一樣的心情,白色給人冷靜,紅色給人熱情,純度高的顏色比純度低的顏色更加顯眼。

4

(顏色的處理方式不同,頁面給人的印象不同)

這基本就是為什么每次打開淘寶都覺得很熱鬧,而京東則顯得低調的多的原因了。電商最主要的還是要烘托一種購買的氣氛,在這上面,淘寶還是略勝一籌。

3、圖片外形對頁面效果的影響

對圖片外形來說,大體上可分為幾何形與自然形兩種使用方法。拍攝出來的圖片都是圍在四邊形方框之中的,如果圖片在使用時仍保持了四邊形、圓形等形狀則叫做“幾何形圖片”;如果圖片是按照被拍攝對象的輪廓來進行裁剪,突出被拍攝對象的獨特形狀的叫“自然形圖片”

幾何形圖片主要分為四邊形圖和圓形圖,越偏向于四邊形圖,效果越自然,而圓形圖則能夠取得人為特寫的效果。按輪廓線來剪裁的自然形圖片可以有效地強調物品的形狀,讓頁面富有動感,這種方法多適用于雜物及衣物、食品等物品的展示。

5

(圖片外形不同,帶給頁面的感覺不同)

可以根據頁面想給人的感覺使用相應的圖片外形,在做頁面設計的時候最好不默認顯示邊框,這樣可以選擇添加自然形圖還是幾何形圖從而給頁面帶來不一樣的感覺。

二、通過對內容大小、方向性的處理來引導用戶視線

人根據經驗和預期瀏覽屏幕

掃一眼屏幕后,人的視線一般會是從左向右或自上而下,但如果旁邊有張大圖或動的東西,這類內容就會引起他們的注意,從而打破原本的閱讀傾向。

當存在一些希望用戶能首先注意到的內容并形成先后順序時,必須通過設計將其明確地提示出來。最基本的方法是通過將希望用戶注意的部分放大,根據尺寸的大小來安排順序先后。這種情況下的各部分內容所占的尺寸比例,在設計領域內被稱為“優(yōu)先率”。

6

(左邊優(yōu)先率比右邊優(yōu)先率低)

左邊雖然也有大小的差別但并不明顯,右邊更明顯更具有節(jié)奏感。

如果頁面整體內容的優(yōu)先率比較高,則頁面的內容就會富于變化,產生富于動感和節(jié)奏的效果;優(yōu)先率較低的頁面就可能給人帶來穩(wěn)定平整的印象。

7

(優(yōu)先率的比較)

將重要的部分(可以是區(qū)域、圖片、文字)放大使其變得顯眼來吸引用戶的注意,從而抓住他們的視線。

大腦有專門識別人臉的區(qū)域

雖然大腦視覺皮質范圍很大且占用了大量的腦力資源,但在視覺皮層之外還有一處特殊區(qū)域,專門用來識別人臉,稱為“梭形臉部區(qū)”。所以我們在看圖時一眼便能識別出人臉,且會不由自主地看向別人的眼睛所看的方向。

8

(唯品會-主題專場封面圖)

活動宣傳頁上能經常見到。

三、運用內容組合方式、形狀和色彩傳遞信息

人在識別物體時會尋找規(guī)律

發(fā)現規(guī)律有助于快速處理時刻接收的感官信息。即使本無規(guī)律,人眼和大腦也會嘗試創(chuàng)造規(guī)律。用戶在進行觀察時,并不是孤立地對不同的事物進行認識,而是會受到作為整體的大范圍的影響的。

9

(顏色規(guī)律)

10

(形狀規(guī)律)

通過顏色或形狀的對比來吸引用戶的注意,傳遞重要信息。

人們認為相鄰的物體必然相關

如果兩個東西距離很近,那人們就會認為它們之間有聯(lián)系。

當頁面有很多內容時,在需要進行組別劃分表現的時候,必須明確地表示出屬于同一組的內容相互之間的關聯(lián),同時,還必須表示出這一組內容與其他組別內容之間的不同意思和作用。這時可以通過分割線或底色來劃分區(qū)域。

11

(這里底色較分割線更易區(qū)分)

如果想使用線或底色填充分割內容,先嘗試是否只調整間距就達到效果。有時,調整間距足以劃分內容還能使頁面具有簡潔的視覺效果。

對于分割線而言,一般來說,實線比虛線相比區(qū)別更徹底,構成虛線的點與點之間的間隔的不同區(qū)分強度也會不同,而且顏色或粗細的不同也會給人帶來不同的印象;對于底色填充而言,顏色不同的程度越大則區(qū)分程度也越高,但要保證可辨別性不能太低。

12

(再一例,分類的重要性)

四、變化更加明顯

人可能會對變化視而不見

人在觀察事物時,即使看到了也不一定關注到了,很容易忽略實際發(fā)生的變化。不要認為物體出現在屏幕上就一定會被用戶看到,特別是刷新頁面出現改變時,用戶很可能完全意識不到頁面前后的區(qū)別,可以增加視覺提示(如使之閃爍)或聽覺提示(如“嘩”的一聲)來保證用戶注意到界面上某處的變化。

13

(淘寶-首頁廣告輪播+動態(tài)消息切換)

這就是為什么手機上的廣告要輪播,有些動態(tài)消息要動,以吸引用戶注意。

第2章:人如何閱讀

閱讀與理解是兩碼事

人經常閱讀,對所讀內容的理解和記憶取決于此前的經驗、閱讀時的視角和閱讀前的說明,別指望用戶閱讀時能記住特定信息。

舉個例子:告訴我,你想看完嗎?

14

(微信錢包-手機充值活動規(guī)則)

都知道這樣看整版文字很難受,為什么活動規(guī)則還是要這樣寫?

第3章:人如何記憶

短期記憶是有限的

1、不要讓人們的記憶處于不同位置的內容,比如讀取某一頁上的文字或數字,然后再輸入到另一頁上。如果你這么干了,他們很可能會忘記信息,因此信心遭受打擊。

2、如果要讓人們使用短期記憶記東西,那么在完成任務前別讓他們做其他事情。短期記憶很容易被干擾,過多感官輸入會讓他們無法集中注意力。

人一次只能記住四項事物

1、能把展示給用戶的信息限制在4條固然好,但也不必強求??梢杂脷w類或分組的方法展示更多信息。

有待求證。

第4章:人如何思考

人更擅長處理小塊信息

大腦一次只能有意識地處理少量信息,設計師常犯的錯誤就是一次給用戶提供太多信息??蓱脻u進呈現的設計理念。

漸進呈現即每次只展示用戶當前需要的信息,可以避免信息過量給用戶帶來不適。漸進呈現需要多次點擊,你也許聽說過,設計時應該將用戶得到詳細信息所需的點擊次數盡量減少。但是點擊次數并不重要,如果用戶在每次點擊時都能得到適量的信息,愿意沿著設計思路繼續(xù)查看頁面,那他們根本就不會注意到點擊的操作。當應該考慮漸進呈現設計時,不要在意點擊次數。如果不得不在讓用戶點擊和讓用戶動腦之間做出取舍,那么多幾次點擊吧,少一點動腦思考。

使用漸進呈現,僅在用戶需要時才展示他們需要的信息。用鏈接引導用戶獲取更多詳情。

14

(漸進呈現案例)

漸進呈現是個好方法,但前提條件是你得了解多數用戶在多數時候需要什么信息。如果沒做足這方面的調研,會讓用戶受挫。漸進呈現的方法僅在你了解多數用戶每一步需要什么信息時才有效。

人有30%的時間會走神

心智游移指在做一件事情時,沉浸在與之無關的思考之中。在很多情況下,人們都很容易分心。比如你正在讀一篇文章,突然想到應該煮飯了,這在生活中經常發(fā)生。心智游移它能讓你快速在不同想法之間來回切換。

人集中注意力處理一項任務的時間是有限的,應當假設他們經常走神。

15

(游移切換案例)

務必建立提示用戶位置的信息反饋,以便他們回過神來之后還能回到原來的位置繼續(xù)瀏覽。

人越不確定就越固執(zhí)己見

認知失調:即人們擁有兩種互相矛盾的觀點時產生的不快感。人們不喜歡這種感覺,所以極力想要擺脫它,擺脫方向有兩種,改變原有觀念或否認其中一個觀點。

  1. 受到強迫時,人容易改變原有觀點
  2. 不受強迫時,人容易固執(zhí)己見
  3. 人在不確定的情況下會更加雄辯

這條比較有意思,也解釋了很多場景疑惑。當我和朋友們因為某個觀點而辯論時,誰也說服不了誰,因為我們都強迫不了對方,于是最常說的一句就是“我不同意你的觀點,但我捍衛(wèi)你說話的權利”;當一個值得你尊敬或身上有某種令你敬佩的特質的人來和你就某個觀點來談時,你容易改變原有觀點,常說的一句就是“恩,你說的有道理”。

時間是相對的

一個人的心理活動越多,就越覺得時間流逝得多,在做任務時如果每一步都得停下來思考,就會覺得這個任務耗時很長。

為了讓處理過程顯得短一些,把任務拆分成幾步,并讓用戶少動腦子,因為進行心理活動會讓人感覺過了很長時間。

16

(keep-注冊,信息填寫)

善用任務分解,讓多項任務變得簡單(一股腦兒把所有任務擠在一起不是明智之舉)。

人可以進入心流狀態(tài)

心流狀態(tài)指在執(zhí)行某項任務或活動時,全身心地投入其中,完全處于忘我狀態(tài)。人是可以進入心流狀態(tài)的,如果你的設計視圖引發(fā)用戶的心流狀態(tài)(游戲設計比較常見),那么:

  1. 讓用戶在操作過程中可以控制自己的行為
  2. 把很艱難的操作分成幾步,既要讓人們任務當前的目標可以完成,又不能讓他們覺得太簡單(如果你認為自己無法實現目標就不會進入心流狀態(tài),如果目標不具有挑戰(zhàn)性,你也不會集中注意力,心流狀態(tài)也會消失)
  3. 給用戶持續(xù)的反饋
  4. 盡量減少干擾

第5章:人如何集中注意力

人會主動過濾信息

當人長期持有一個觀念且從不改變時,無論你找出多少證據證明這種觀念站不住腳。人們會主動找尋和關注能支持他們觀念的信息和線索,而不會去找尋甚至會無視那些與自己固有觀念相悖的信息。

主動過濾通常很有用,因為它可以減少我們需要關注的信息量,但有時候這也會導致錯誤的決策。

  1. 別指望人們一定會關注你提供的信息
  2. 別做假設。對你來說顯而易見的設計也許對使用者來說并不那么明顯
  3. 如果你擔心人們會過濾某些信息,可以使用色彩、大小、動畫、視頻和聲音來吸引他們的注意力。(前面有提到)
  4. 如果某些信息需要人們特別關注,那么要讓它比你想象中的明顯10倍。

后面幾章略,《設計師要懂心理學》這本書有些東西還是講的挺有意思的,有興趣的朋友自己去看吧。

著手開始寫這篇文章的時候京東還是舊版本,這不剛發(fā)出新的5.0版本,有興趣的同學可以對照本文去看看哦~它都有做哪些改動。個人挺喜歡新版本哈,給個贊~

 

作者:小圣(簡書:小圣)

本文由 @小圣 原創(chuàng)發(fā)布于人人都是產品經理。未經許可,禁止轉載。

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 軟件產品經理

    回復
  2. 人一次只能記住四項事物,這是怎么得出的結論?看書的時候就覺得很奇怪,短時記憶容量是7±2,這個4是怎么得到的……

    來自吉林 回復
    1. 這也是我有疑問的地方,畢竟這些點都是先行者通過實驗或認知得出來的經驗,對于部分經驗我們可以帶著問題辯證地思考,可以相信但要保持清醒。

      來自上海 回復
  3. 有了這篇筆記,就暫時先不看原書了

    來自天津 回復