當(dāng)前位置: 首頁 > 設(shè)計資訊 > 設(shè)計教程 > 正文

設(shè)計師要懂心理學(xué)

2018-07-10 1790 0

3ece57e4a2a20000018c1b630608.jpg

        這本書給我的啟發(fā)很大~影響了我做對產(chǎn)品的思考;特寫寫文章共賞
 

此內(nèi)容是根據(jù)自己的在工作中實(shí)際運(yùn)用的思維;想獲取我全部的文章總結(jié);我已經(jīng)附上了自己的壓縮包(書籍、圖片、源文章的總結(jié))可以供大家下載;但是你必須要下載思維導(dǎo)圖;我的格式為xmind;不想下載我也導(dǎo)出為圖片格式可以供大家觀看


 


 

1、卡尼薩三角


首先,說說我們眼睛在觀察時的一點(diǎn)習(xí)慣。當(dāng)我們觀察周圍的一切時,眼睛會將看到的信息傳輸給大腦,大腦再對信息進(jìn)行處理,讓我們感受到真實(shí)的世界。但其實(shí)不然,腦見并非眼見,因?yàn)榇竽X總會解析眼睛看到的所有信息。

為了更快的解析周圍的世界,我們的大腦會投機(jī)取巧地偷懶。大腦每秒要接收4000萬次的感官信息輸入,并試圖完全解析出它們的意義,所以它會根據(jù)以往的經(jīng)驗(yàn),猜測我們看見什么。經(jīng)驗(yàn)雖說十拿九穩(wěn),但有時也會“出錯”。不信可以看下圖:

b44357e91ee80000018c1b4a143f.jpg


 

1、卡尼薩三角案例623857e91f4c0000012e7ea91024.jpg


 2、色塊影響人們所見、整體認(rèn)知主要依靠周邊視覺而非中央視覺


 

1a9257e91f5d0000012e7e18e5fa.jpg bc3757e91f6a0000018c1bad7e59.jpg(1)色塊     讓同級別的模塊更容易捕獲      (2)色塊 Banner中的放射線讓用戶視集中在眼里

168357e91fc80000012e7eb04ebf.jpg  b42357e91fd50000018c1b25a4c4.jpg(3)視覺認(rèn)知 用黑色背景來指引中間的視覺中心   (3)視覺認(rèn)知 燈與背景只是襯托中秋佳節(jié)與文字促銷

 


 

》總結(jié):

1、人的大腦會投機(jī)取巧;會捕捉到大面積的東西(案例1)

2、你可以設(shè)計物體的展示方式,引導(dǎo)別人注意特定的內(nèi)容。(案例2)

3、別人在你的網(wǎng)站上看見的內(nèi)容未必符合你的設(shè)想,他們的個人背景、文化水平、對眼前事物的熟悉度以及期待看到什么,都會影響他們的觀察


 

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


 


932c57e920a20000012e7efe063a.jpg

你看到的可能是 4 組圖案,每組2個點(diǎn),而不是8個孤立的點(diǎn)。你把點(diǎn)間距的長短看成了一種規(guī)律。

ec9857e920e90000012e7e366e40.jpg

三個圓分別代表123;又對應(yīng)下面相應(yīng)的內(nèi)容;不是單個的圖片


 

》總結(jié):

1、既然人會不由自主地尋找規(guī)律,那就盡量多使用規(guī)律,利用分組和間隔創(chuàng)造規(guī)律。(沒有規(guī)律人在潛意識內(nèi)也會創(chuàng)造出規(guī)律)

2、要讓某個物體(例如圖標(biāo))易于識別,就用簡單的幾何圖形來畫它。這會讓構(gòu)成物體的幾何離子更明顯,從而使人更快、更輕松地識別該物體。


 

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


 

18e357e921a70000018c1b24f782.jpg bd2557e921c50000018c1ba2a07d.jpg

人物畫像展示出時尚新秀的感覺                     人物畫像展示青春、不羈、狂野


 

fa2a57e921ef0000012e7ef5e082.jpg

 人物畫像眼睛區(qū)域讓我不由自主看到文字


 

》總結(jié):

1、如果網(wǎng)頁上的人眼看著旁邊的位置或產(chǎn)品,那么人們往往也會看向同一處,但未必關(guān)注,只是看而已

2、如果有人臉;那么用戶在畫面中第一個看到就是人臉;判斷人臉的標(biāo)準(zhǔn)則是眼睛~~~(最后一幅圖)


 

5、略微側(cè)向俯視是想象物體的標(biāo)準(zhǔn)視角


c17957e926010000012e7ee69cae.jpg  531057e9260e0000018c1bc5dd5d.jpg  108a57e926270000012e7e13c142.jpg


 

》總結(jié):

1、俯視的產(chǎn)品能創(chuàng)造用戶的想象力; 看到小杜的海報~我充滿無限想象~比如說~~呵呵你們都懂
 

2、標(biāo)準(zhǔn)視角的畫像和物體更容易識別和記憶

3、如果你的網(wǎng)頁或程序里包含一些圖標(biāo),那么不妨把它們畫成標(biāo)準(zhǔn)視角的憶;金融類安全理財;就放個盾牌


 

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


 

94b857e9274f0000018c1be8b4cc.jpg

看屏幕時人們第一眼會落在哪里?       答案取決:于他們在做什么、希望看到什么


 

e79957e927c10000012e7eb0f84c.jpg

    淘寶是搜索是用戶的主要工具;也是用的最多的;這也是預(yù)期的一種;也叫習(xí)慣


 

》總結(jié):

1、左向右書寫的語言文字,看屏幕時也會從左向右看,反之亦然。

2、但他們并不是從頂部開始閱讀的。人們早已習(xí)慣認(rèn)為網(wǎng)頁頂部都是無關(guān)內(nèi)容,如商標(biāo)、留白和導(dǎo)航欄,所以他們往往先看屏幕中心位置,而非邊緣。

3、用戶的第一眼看的位置就是中心區(qū)域;但是用戶知道或者熟悉網(wǎng)上一些特性他就會主動去尋找自己想要的信息從而打破瀏覽順序

4、人們對想看的內(nèi)容及其位置有先入為主的心智模型;既然人們不看屏幕邊緣,就不要把重要信息放在那兒。

5、最重要的信息(或希望用戶關(guān)注的內(nèi)容)要放在屏幕的上面三分之一部分,或放在屏幕中間。


 

7、人可能會對變化視而不見


 

        a03257e928110000018c1bb97841.jpg 282057e9281e0000012e7e02b020.jpg                

最好的案例就是荷包APP;交互效果植入人性;從引導(dǎo)頁進(jìn)入主頁;就出有個金幣響聲的出來聲音;人們習(xí)慣自己喜歡的刺激


》總結(jié):

1、不要認(rèn)為物體出現(xiàn)在屏幕上就一定會被用戶看見,特別是刷新頁面出現(xiàn)改變時,用戶很可能完全意識不到頁面前后的區(qū)別。 

2、如果你要保證用戶注意到界面上的某處改變,應(yīng)該增加視覺提示(如使之閃爍)或聽覺提示(如“嗶”的一聲)。

3、對眼動跟蹤數(shù)據(jù)進(jìn)行分析要謹(jǐn)慎,別過于重視它,也別把它作為設(shè)計決策的主要依據(jù)。


 

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


c1a157e9296d0000018c1b533cef.jpg


》總結(jié):

1、如圖1:都屬于1級標(biāo)題;雖然是不同的功能但都是可以進(jìn)行二次轉(zhuǎn)化;       錯誤示范:刪除按鈕旁有個購買按鈕這是錯誤的

2、如果想使用線或框分隔內(nèi)容,先嘗試能否只調(diào)整間距就達(dá)到效果。有時,調(diào)整間距足以劃分內(nèi)容,還能使頁面具有簡潔的視覺效果。

3、無關(guān)內(nèi)容間距要大,相關(guān)內(nèi)容間距要小。這聽起來是常識,但很多網(wǎng)頁布局都忽視了這一點(diǎn)。


 

9、顏色搭配也決定用戶留在網(wǎng)頁上的時間


 

783057e92a9f0000018c1b859966.jpg

紅藍(lán)搭配難以閱讀;這只是其中一例子;若不會配色網(wǎng)上有配色網(wǎng)站可以供你選擇


 

》總結(jié):

1、在同一頁面內(nèi),避免使用紅藍(lán)或紅綠搭配

2、紅色背景上不要使用藍(lán)色或綠色文字,藍(lán)色背景上不要使用紅色或綠色文字。

3、不同色彩代表不同的含義:紅色在中國是吉祥、喜慶、熱情;而在美國代表危險;紫色在中國代表高貴;在美國代表哀傷......


 

10、字體的閱讀順序


 

27a657e92b5e0000012e7e0d26e8.jpg

   由大至小;由左至右;若有其他的因素會干擾順序如動態(tài)字
 


 

》總結(jié):

1、人們認(rèn)為全大寫是大聲強(qiáng)調(diào)的語氣,也不習(xí)慣閱讀,因此請盡量少用(合適的字號大小能方便各類人群閱讀)

2、但是大寫的標(biāo)題比較醒目~閱讀的順序默認(rèn)是是從上而下;從左到右;若有大的標(biāo)題則會改變?nèi)说拈喿x順序

 

11、閱讀與理解是二碼事


 

27a657e92b5e0000012e7e0d26e8.jpg


 

》總結(jié):

1、閱讀時,我們并不是逐字逐詞地準(zhǔn)確讀完再理解,而是同時對下文進(jìn)行猜讀。你已有的知識越多,猜讀和理解就越容易。

2、別指望用戶閱讀時能記住特定信息。要寫上有意義的標(biāo)題。這是你要做的最重要的事情。

3、文章的閱讀等級要適合你的目標(biāo)讀者。使用簡單平易的短單詞可以讓更多人讀懂你的文章。


 

12、人借助模式識別不同字體的文本


 

4a7b57e92d040000012e7eded1fe.jpg

不同的字體大小、形狀、襯線、無襯線、細(xì)、粗所代表的含義各不一樣
 


》總結(jié)


 

1、有人說無襯線字體更易讀,因?yàn)樽中胃啙崳?有人說襯線字體更易讀,因?yàn)樗奖阕x者連續(xù)辨識字母。過渡花哨的字體容易讓閱讀受干擾其實(shí),研究表明,兩者在理解難易度、閱讀速度和使用傾向方面并無差異。(在網(wǎng)頁設(shè)計中或者APP設(shè)計中選擇的字體都是無襯線字體;夠時尚)

2、別指望用戶閱讀時能記住特定信息。要寫上有意義的標(biāo)題。這是你要做的最重要的事情。

3、文章的閱讀等級要適合你的目標(biāo)讀者。使用簡單平易的短單詞可以讓更多人讀懂你的文章。


 

13、人更擅長處理小塊信息(首頁的展現(xiàn)力求簡潔明了)


 

254257e92ea00000018c1b932dd2.jpg
 


 

》總結(jié):


 

1、大腦一次只能有意識地處理少量信息。 (據(jù)估計,人每秒約處理400 億條信息,其中只有 40 條是有意識加工的。 )設(shè)計師經(jīng)常會犯的一個錯誤就是一次給用戶提供太多信息。

2、每次只提供少量信息,就可避免信息過量給用戶帶來不適,同時還能滿足不同用戶的需要,因?yàn)橛行┯脩粝M玫秸w概覽,有些則需要全部詳情。


 

14、人更擅長處理小塊信息(漸進(jìn)呈現(xiàn)123)


 

1、漸進(jìn)呈現(xiàn)的第一步     2、第二步給出少量細(xì)節(jié)    3、最后一步展示更多詳情給需要的用戶


 

492457e92f620000012e7ed872c7.jpg


 

》總結(jié):

網(wǎng)站首頁沒有詳細(xì)描述服務(wù)的內(nèi)容和功能,而是簡單列出了各項(xiàng)功能(微貸5年)。用戶點(diǎn)擊其中一個功能后,會得到更多信息,然后還可以進(jìn)一步詳細(xì)了解(業(yè)績報告) 。通過每次只提供少量信息,就可以避免信息過量給用戶帶來不適,同時還能滿足不同用戶的需要,因?yàn)橛行┯脩粝M玫秸w概覽,有些則需要全部詳情(七月月報)。


 

d1de57e92fa80000018c1b1e664a.jpg


 

1、有些心理活動難度更大


 

e93557e930000000018c1bb2b615.jpg b62a57e9302d0000012e7ece6d82.jpg

   (1)       你更喜歡那一張圖?           (2)


 

》總結(jié)

1、如果讓用戶思考、記憶或心算(認(rèn)知負(fù)荷) ,腦力資源就耗費(fèi)得更多。從人機(jī)工程學(xué)視角來看,負(fù)荷所花費(fèi)資源從多到少排列如下:認(rèn)知—視覺—行動(其實(shí)就是讓用戶少思考~打開一個頁面就知道自己想要知道什么)

2、確保目標(biāo)足夠大,用戶可以輕松點(diǎn)擊到。


 

2、故事是人處理信息的最佳形式


 

a1cb57e931370000018c1b173e6b.jpg


》總結(jié):


 

1、老板給的需求如何設(shè)計~沒有思維怎么辦;打個比方說;在金融界;有個叫安全保障的頁面;那么你要思考;放什么東西:盾、錢、文字在輔助一些箭頭來引導(dǎo)用戶指向盾的位置;讓用戶覺得這把錢放在我這很安全。

2、在人們內(nèi)心總是很快給發(fā)生的事歸結(jié)因果??匆谎勰愕木W(wǎng)站的設(shè)計來推老板的實(shí)力


 

3、時間是相對的


 

509a57e9332d0000018c1b01d90e.jpg
 

人不喜歡等;除非有提示如:進(jìn)度條


 

》總結(jié):

1、10 年前,打開網(wǎng)頁需要 20 秒,我們并不會介意; 如今,超過 3 秒鐘你就會不耐煩。有個網(wǎng)站我經(jīng)常登錄,它加載頁面8秒,我很生氣

2、在人們內(nèi)心總是很快給發(fā)生的事歸結(jié)因果??匆谎勰愕木W(wǎng)站的設(shè)計來推公司老板的實(shí)力


 

4、設(shè)計師的四種創(chuàng)意思維

882e57e933f60000012e7efed540.jpg
 

b1a157e934de0000012e7e5acefc.jpg

168557e938db0000012e7e7876c4.jpg

c0ff57e9392a0000012e7ef0cd59.jpg

f91157e939e40000018c1b389f64.jpg

eaab57e939fc0000012e7e796c7d.jpg


 

5、文化影響人的思維


 

504c57e93a780000012e7ee6b239.jpg


 

》總結(jié):

如果產(chǎn)品用戶來自不同文化和不同地區(qū),那么你最好在多個地區(qū)都進(jìn)行用戶調(diào)研。


 

6ee057e93cd20000018c1b340a8a.jpg


 

1、選擇性注意


 

814157e93cfa0000012e7eb35b46.jpg

 

瀏覽的順序由資金安全(大標(biāo)題)—從左到右(二級標(biāo)題)—從左到右依次瀏覽小信息


 

》總結(jié):

1、只要你給出明確的指示,并且任務(wù)不太費(fèi)時間,人們就能集中注意力并沉浸其中,而忽略別的干擾;人只會注意顯著的線索

2、人們的潛意識會不斷地掃視周圍環(huán)境,看看是否有自己感興趣的信息,比如自己的名字以及食物、性、危險等信息。(聚會你跟友人聊的很嗨但突然有人叫的名字,你就會突然回頭)
 


 

2、人會主動過濾信息


 

036f57e93d400000018c1b2698f0.jpg

在設(shè)計功能的時候;要清楚用戶想要的是什么;比如淘寶用戶用的最多就是搜索;那么就吧搜索功能放大10倍


 

》總結(jié):

不要指望用戶會關(guān)注你想提供的消息~如果實(shí)在想讓自己的內(nèi)容讓用戶不過濾就需要你用色彩、字號大小、動畫、視頻和聲音來指引;我們在跟公司的上司討論功能的時候千萬不要做假設(shè),對你來說對你來說顯而易見的設(shè)計也許對使用者來說并不那么明顯。迎合消費(fèi)者喜好才是王道;


 

3、注意力只能維持 10 分鐘


 

713e57e93dc40000012e7ea4b8e6.jpg 318b57e93dd30000012e7e82820e.jpg對自己而言不感興趣的演講;則立馬忘記            與感興趣的內(nèi)容;最多專注7-10分鐘


》總結(jié):

1、時常假設(shè)自己只能抓住用戶7~10分鐘的注意力

2、如果不得不超過10分鐘,可以介紹一些新信息或者通過暫歇來調(diào)劑。

3、將在線演示和教程的時長控制在7分鐘以內(nèi)。


 

4、人無法同時完成多個任務(wù)


 

8e2157e93ebb0000018c1b832909.jpg aa9c57e93ed30000012e7e5a3af4.jpg

你能邊打電話邊把車開好嗎?                 你確定能邊健身邊看書嗎?


 

》總結(jié):

1、年輕人在同時做多件事時并沒有優(yōu)于年長者。邊打電話邊開車就跟酒后駕車一樣危險。


 

2、盡量避免讓用戶同時做多件事,因?yàn)檫@對他們來說很難,那些說自己最擅長同時做多件事的人也許正是最不擅長的人。

3、如果需要用戶同時做多件事,就應(yīng)該預(yù)料到他們可能會出許多錯,你應(yīng)該給出修正錯誤的途徑。若非要這么做的話;就必須要某個事件要簡單易操作來減少腦部思考


 

5、勾人六事: 危險、食物、性、移動、人臉和故事


 

5e0357e9413f0000012e7ebbf1f8.jpg

99d657e941ac0000018c1b6ac841.jpg

0b9557e941fc0000018c1bd65b51.jpg

O(∩_∩)O~終劇O(∩_∩)O~


讓我們一起努力~一起分享~一起進(jìn)步


30
評論區(qū)(0)
正在加載評論...