《設(shè)計(jì)師要懂心理學(xué)》這本書講了100個(gè)心理學(xué)的知識(shí)。內(nèi)容很好，但是感覺看完就會(huì)忘記，結(jié)合之前看過的版式設(shè)計(jì)原理一書，于是我整合了下并試著分析幾個(gè)可以證明其觀點(diǎn)的案例（全以app端為例講述），作為自己學(xué)習(xí)的方式之一。

第1章：人如何觀察

眼見非腦見

視覺是一切感覺之首。人的大腦有一半的資源都用于接收和解析眼睛所見。但眼睛所見并非全部，因?yàn)橐曈X信息還要經(jīng)過大腦轉(zhuǎn)換和解析。真正用來”觀察”的其實(shí)是大腦。為了更快地解析周圍的世界，大腦會(huì)偷懶：大腦每秒要接收約4000萬次的感官信息輸入，并試圖完全解析出它們的意義，所以它會(huì)根據(jù)以往的經(jīng)驗(yàn)，猜測我們看見了什么。

（大腦解析）

大腦認(rèn)為左邊有兩個(gè)三角，右邊有個(gè)矩形，其實(shí)只是零碎的線條和有缺口的圓拼接而成

合理進(jìn)行排版布局設(shè)計(jì)，運(yùn)用內(nèi)容組合方式、形狀和色彩可以影響人們所見，從而傳遞信息給觀察的人。總結(jié)了四種可以影響人之所見的方法如下：

一、根據(jù)版面率、顏色、圖片外形來調(diào)整頁面的效果

（版面率一詞主要運(yùn)用在印刷品設(shè)計(jì)中，此為手機(jī)版面率）

1、版面率對(duì)頁面效果的影響

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

（左邊版面率比右邊版面率低）

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

（版面率不同，頁面給人的印象不同）

調(diào)整版面率的方法：

1. 調(diào)整留白-擴(kuò)大留白降低版面率，縮小留白提升版面率；
2. 調(diào)整圖片數(shù)量和尺寸-圖片數(shù)量越多版面率越高，圖片尺寸越大版面率越高；
3. 改變版面底色-必要時(shí)，在文字?jǐn)?shù)量多，圖版率小的情況下可以通過改變頁面底色，從而改變頁面所呈現(xiàn)的視覺感受

2、顏色對(duì)頁面效果的影響

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

（顏色的處理方式不同，頁面給人的印象不同）

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

3、圖片外形對(duì)頁面效果的影響

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

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

（圖片外形不同，帶給頁面的感覺不同）

可以根據(jù)頁面想給人的感覺使用相應(yīng)的圖片外形，在做頁面設(shè)計(jì)的時(shí)候最好不默認(rèn)顯示邊框，這樣可以選擇添加自然形圖還是幾何形圖從而給頁面帶來不一樣的感覺。

二、通過對(duì)內(nèi)容大小、方向性的處理來引導(dǎo)用戶視線

人根據(jù)經(jīng)驗(yàn)和預(yù)期瀏覽屏幕

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

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

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

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

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

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

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

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

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

（唯品會(huì)-主題專場封面圖）

活動(dòng)宣傳頁上能經(jīng)常見到。

三、運(yùn)用內(nèi)容組合方式、形狀和色彩傳遞信息

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

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

（顏色規(guī)律）

（形狀規(guī)律）

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

人們認(rèn)為相鄰的物體必然相關(guān)

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

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

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

如果想使用線或底色填充分割內(nèi)容，先嘗試是否只調(diào)整間距就達(dá)到效果。有時(shí)，調(diào)整間距足以劃分內(nèi)容還能使頁面具有簡潔的視覺效果。

對(duì)于分割線而言，一般來說，實(shí)線比虛線相比區(qū)別更徹底，構(gòu)成虛線的點(diǎn)與點(diǎn)之間的間隔的不同區(qū)分強(qiáng)度也會(huì)不同，而且顏色或粗細(xì)的不同也會(huì)給人帶來不同的印象；對(duì)于底色填充而言，顏色不同的程度越大則區(qū)分程度也越高，但要保證可辨別性不能太低。

（再一例，分類的重要性）

四、變化更加明顯

人可能會(huì)對(duì)變化視而不見

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

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

這就是為什么手機(jī)上的廣告要輪播，有些動(dòng)態(tài)消息要?jiǎng)樱晕脩糇⒁狻?/p>

第2章：人如何閱讀

閱讀與理解是兩碼事

人經(jīng)常閱讀，對(duì)所讀內(nèi)容的理解和記憶取決于此前的經(jīng)驗(yàn)、閱讀時(shí)的視角和閱讀前的說明，別指望用戶閱讀時(shí)能記住特定信息。

舉個(gè)例子：告訴我，你想看完嗎？

（微信錢包-手機(jī)充值活動(dòng)規(guī)則）

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

第3章：人如何記憶

短期記憶是有限的

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

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

人一次只能記住四項(xiàng)事物

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

有待求證。

第4章：人如何思考

人更擅長處理小塊信息

大腦一次只能有意識(shí)地處理少量信息，設(shè)計(jì)師常犯的錯(cuò)誤就是一次給用戶提供太多信息。可應(yīng)用漸進(jìn)呈現(xiàn)的設(shè)計(jì)理念。

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

使用漸進(jìn)呈現(xiàn)，僅在用戶需要時(shí)才展示他們需要的信息。用鏈接引導(dǎo)用戶獲取更多詳情。

（漸進(jìn)呈現(xiàn)案例）

漸進(jìn)呈現(xiàn)是個(gè)好方法，但前提條件是你得了解多數(shù)用戶在多數(shù)時(shí)候需要什么信息。如果沒做足這方面的調(diào)研，會(huì)讓用戶受挫。漸進(jìn)呈現(xiàn)的方法僅在你了解多數(shù)用戶每一步需要什么信息時(shí)才有效。

人有30%的時(shí)間會(huì)走神

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

人集中注意力處理一項(xiàng)任務(wù)的時(shí)間是有限的，應(yīng)當(dāng)假設(shè)他們經(jīng)常走神。

（游移切換案例）

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

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

認(rèn)知失調(diào)：即人們擁有兩種互相矛盾的觀點(diǎn)時(shí)產(chǎn)生的不快感。人們不喜歡這種感覺，所以極力想要擺脫它，擺脫方向有兩種，改變原有觀念或否認(rèn)其中一個(gè)觀點(diǎn)。

1. 受到強(qiáng)迫時(shí)，人容易改變原有觀點(diǎn)
2. 不受強(qiáng)迫時(shí)，人容易固執(zhí)己見
3. 人在不確定的情況下會(huì)更加雄辯

這條比較有意思，也解釋了很多場景疑惑。當(dāng)我和朋友們因?yàn)槟硞€(gè)觀點(diǎn)而辯論時(shí)，誰也說服不了誰，因?yàn)槲覀兌紡?qiáng)迫不了對(duì)方，于是最常說的一句就是“我不同意你的觀點(diǎn),但我捍衛(wèi)你說話的權(quán)利”；當(dāng)一個(gè)值得你尊敬或身上有某種令你敬佩的特質(zhì)的人來和你就某個(gè)觀點(diǎn)來談時(shí)，你容易改變原有觀點(diǎn)，常說的一句就是“恩，你說的有道理”。

時(shí)間是相對(duì)的

一個(gè)人的心理活動(dòng)越多，就越覺得時(shí)間流逝得多，在做任務(wù)時(shí)如果每一步都得停下來思考，就會(huì)覺得這個(gè)任務(wù)耗時(shí)很長。

為了讓處理過程顯得短一些，把任務(wù)拆分成幾步，并讓用戶少動(dòng)腦子，因?yàn)檫M(jìn)行心理活動(dòng)會(huì)讓人感覺過了很長時(shí)間。

（keep-注冊，信息填寫）

善用任務(wù)分解，讓多項(xiàng)任務(wù)變得簡單（一股腦兒把所有任務(wù)擠在一起不是明智之舉）。

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

心流狀態(tài)指在執(zhí)行某項(xiàng)任務(wù)或活動(dòng)時(shí)，全身心地投入其中，完全處于忘我狀態(tài)。人是可以進(jìn)入心流狀態(tài)的，如果你的設(shè)計(jì)視圖引發(fā)用戶的心流狀態(tài)（游戲設(shè)計(jì)比較常見），那么：

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

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

人會(huì)主動(dòng)過濾信息

當(dāng)人長期持有一個(gè)觀念且從不改變時(shí)，無論你找出多少證據(jù)證明這種觀念站不住腳。人們會(huì)主動(dòng)找尋和關(guān)注能支持他們觀念的信息和線索，而不會(huì)去找尋甚至?xí)o視那些與自己固有觀念相悖的信息。

主動(dòng)過濾通常很有用，因?yàn)樗梢詼p少我們需要關(guān)注的信息量，但有時(shí)候這也會(huì)導(dǎo)致錯(cuò)誤的決策。

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

后面幾章略，《設(shè)計(jì)師要懂心理學(xué)》這本書有些東西還是講的挺有意思的，有興趣的朋友自己去看吧。

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

作者：小圣（簡書：小圣）

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