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

第1章:人如何觀察

眼見非腦見

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

(大腦解析)

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

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

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

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

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

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

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

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

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

調整版面率的方法:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

(左邊優先率比右邊優先率低)

左邊雖然也有大小的差別但並不明顯,右邊更明顯更具有節奏感。

如果頁面整體內容的優先率比較高,則頁面的內容就會富於變化,產生富於動感和節奏的效果;優先率較低的頁面就可能給人帶來穩定平整的印象。

(優先率的比較)

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

大腦有專門識別人臉的區域

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

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

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

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

人在識別物體時會尋找規律

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

(顏色規律)

(形狀規律)

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

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

如果兩個東西距離很近,那人們就會認為它們之間有聯繫。

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

(這裏底色較分割線更易區分)

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

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

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

四、變化更加明顯

人可能會對變化視而不見

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

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

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

第2章:人如何閱讀

閱讀與理解是兩碼事

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

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

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

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

第3章:人如何記憶

短期記憶是有限的

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

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

人一次只能記住四項事物

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

有待求證。

第4章:人如何思考

人更擅長處理小塊信息

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

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

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

(漸進呈現案例)

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

人有30%的時間會走神

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

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

(游移切換案例)

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

人越不確定就越固執己見

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

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

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

時間是相對的

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

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

(keep-註冊,信息填寫)

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

人可以進入心流狀態

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

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

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

人會主動過濾信息

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

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

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

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

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

 

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

本文由 @小聖 原創發佈於人人都是產品經理。未經許可,禁止轉載。