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

2018-07-10 1850 0

3ece57e4a2a20000018c1b630608.jpg

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

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


 


 

1、卡尼薩三角


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

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

b44357e91ee80000018c1b4a143f.jpg


 

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


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


 

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

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

 


 

》總結(jié):

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

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

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


 

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


 


932c57e920a20000012e7efe063a.jpg

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

ec9857e920e90000012e7e366e40.jpg

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


 

》總結(jié):

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

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


 

4、大腦有專(zhuān)門(mén)識(shí)別人臉的區(qū)域(眼睛)


 

18e357e921a70000018c1b24f782.jpg bd2557e921c50000018c1ba2a07d.jpg

人物畫(huà)像展示出時(shí)尚新秀的感覺(jué)                     人物畫(huà)像展示青春、不羈、狂野


 

fa2a57e921ef0000012e7ef5e082.jpg

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


 

》總結(jié):

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

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


 

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


c17957e926010000012e7ee69cae.jpg  531057e9260e0000018c1bc5dd5d.jpg  108a57e926270000012e7e13c142.jpg


 

》總結(jié):

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

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

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


 

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


 

94b857e9274f0000018c1be8b4cc.jpg

看屏幕時(shí)人們第一眼會(huì)落在哪里?       答案取決:于他們?cè)谧鍪裁础⑾M吹绞裁?/strong>


 

e79957e927c10000012e7eb0f84c.jpg

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


 

》總結(jié):

1、左向右書(shū)寫(xiě)的語(yǔ)言文字,看屏幕時(shí)也會(huì)從左向右看,反之亦然。

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

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

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

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


 

7、人可能會(huì)對(duì)變化視而不見(jiàn)


 

        a03257e928110000018c1bb97841.jpg 282057e9281e0000012e7e02b020.jpg                

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


》總結(jié):

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

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

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


 

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


c1a157e9296d0000018c1b533cef.jpg


》總結(jié):

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

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

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


 

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


 

783057e92a9f0000018c1b859966.jpg

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


 

》總結(jié):

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

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

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


 

10、字體的閱讀順序


 

27a657e92b5e0000012e7e0d26e8.jpg

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


 

》總結(jié):

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

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

 

11、閱讀與理解是二碼事


 

27a657e92b5e0000012e7e0d26e8.jpg


 

》總結(jié):

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

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

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


 

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


 

4a7b57e92d040000012e7eded1fe.jpg

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


》總結(jié)


 

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

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

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


 

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


 

254257e92ea00000018c1b932dd2.jpg
 


 

》總結(jié):


 

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

2、每次只提供少量信息,就可避免信息過(guò)量給用戶(hù)帶來(lái)不適,同時(shí)還能滿(mǎn)足不同用戶(hù)的需要,因?yàn)橛行┯脩?hù)希望得到整體概覽,有些則需要全部詳情。


 

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


 

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


 

492457e92f620000012e7ed872c7.jpg


 

》總結(jié):

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


 

d1de57e92fa80000018c1b1e664a.jpg


 

1、有些心理活動(dòng)難度更大


 

e93557e930000000018c1bb2b615.jpg b62a57e9302d0000012e7ece6d82.jpg

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


 

》總結(jié)

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

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


 

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


 

a1cb57e931370000018c1b173e6b.jpg


》總結(jié):


 

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

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


 

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


 

509a57e9332d0000018c1b01d90e.jpg
 

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


 

》總結(jié):

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

2、在人們內(nèi)心總是很快給發(fā)生的事歸結(jié)因果。看一眼你的網(wǎng)站的設(shè)計(jì)來(lái)推公司老板的實(shí)力


 

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

882e57e933f60000012e7efed540.jpg
 

b1a157e934de0000012e7e5acefc.jpg

168557e938db0000012e7e7876c4.jpg

c0ff57e9392a0000012e7ef0cd59.jpg

f91157e939e40000018c1b389f64.jpg

eaab57e939fc0000012e7e796c7d.jpg


 

5、文化影響人的思維


 

504c57e93a780000012e7ee6b239.jpg


 

》總結(jié):

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


 

6ee057e93cd20000018c1b340a8a.jpg


 

1、選擇性注意


 

814157e93cfa0000012e7eb35b46.jpg

 

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


 

》總結(jié):

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

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


 

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


 

036f57e93d400000018c1b2698f0.jpg

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


 

》總結(jié):

不要指望用戶(hù)會(huì)關(guān)注你想提供的消息~如果實(shí)在想讓自己的內(nèi)容讓用戶(hù)不過(guò)濾就需要你用色彩、字號(hào)大小、動(dòng)畫(huà)、視頻和聲音來(lái)指引;我們?cè)诟镜纳纤居懻摴δ艿臅r(shí)候千萬(wàn)不要做假設(shè),對(duì)你來(lái)說(shuō)對(duì)你來(lái)說(shuō)顯而易見(jiàn)的設(shè)計(jì)也許對(duì)使用者來(lái)說(shuō)并不那么明顯。迎合消費(fèi)者喜好才是王道;


 

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


 

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


》總結(jié):

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

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

3、將在線(xiàn)演示和教程的時(shí)長(zhǎng)控制在7分鐘以?xún)?nèi)。


 

4、人無(wú)法同時(shí)完成多個(gè)任務(wù)


 

8e2157e93ebb0000018c1b832909.jpg aa9c57e93ed30000012e7e5a3af4.jpg

你能邊打電話(huà)邊把車(chē)開(kāi)好嗎?                 你確定能邊健身邊看書(shū)嗎?


 

》總結(jié):

1、年輕人在同時(shí)做多件事時(shí)并沒(méi)有優(yōu)于年長(zhǎng)者。邊打電話(huà)邊開(kāi)車(chē)就跟酒后駕車(chē)一樣危險(xiǎn)。


 

2、盡量避免讓用戶(hù)同時(shí)做多件事,因?yàn)檫@對(duì)他們來(lái)說(shuō)很難,那些說(shuō)自己最擅長(zhǎng)同時(shí)做多件事的人也許正是最不擅長(zhǎng)的人。

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


 

5、勾人六事: 危險(xiǎn)、食物、性、移動(dòng)、人臉和故事


 

5e0357e9413f0000012e7ebbf1f8.jpg

99d657e941ac0000018c1b6ac841.jpg

0b9557e941fc0000018c1bd65b51.jpg

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


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


30
評(píng)論區(qū)(0)
正在加載評(píng)論...
相關(guān)推薦