15個(gè)著名的設(shè)計(jì)心理學(xué)原理以及在設(shè)計(jì)中的應(yīng)用

8 評(píng)論 29521 瀏覽 209 收藏 60 分鐘

編輯導(dǎo)語(yǔ):你了解心理學(xué)嗎?在我們?nèi)粘g覽的網(wǎng)頁(yè)中,在我們隨手刷過(guò)的App里,其設(shè)計(jì)早就將用戶(hù)心理滲透其中。本文就闡述了15個(gè)”不為人知“卻隨處可見(jiàn)的設(shè)計(jì)心理學(xué)原理,就讓我們一起來(lái)了解一下吧!

你是否有在聽(tīng)別人說(shuō)某某原理法則時(shí)一臉懵B的時(shí)候?明明知道這個(gè)原理卻說(shuō)不出它的名字?

不要緊,本文就來(lái)介紹與人機(jī)交互設(shè)計(jì)相關(guān)的15個(gè)常見(jiàn)的設(shè)計(jì)心理學(xué)原理,幫助你了解產(chǎn)品的定位,需求目的和交互邏輯,洞悉用戶(hù)的各種行為,也為自己的設(shè)計(jì)予以理論支撐。

一、7±2法則「米勒定律」

1956年美國(guó)科學(xué)家米勒對(duì)人類(lèi)短時(shí)間記憶能力進(jìn)行了研究,他注意到年輕人的記憶廣度為5-9個(gè)單位,就是7±2法則。

與席克定律類(lèi)似,神奇數(shù)字 7±2 法則也經(jīng)常被應(yīng)用在移動(dòng)應(yīng)用交互設(shè)計(jì)上。因?yàn)槿四X處理信息的能力有限,所以它通過(guò)把信息分成塊和單元來(lái)處理復(fù)雜問(wèn)題。

7±2法則應(yīng)用很廣泛,例如 iPhone 通訊錄中的手機(jī)號(hào)碼被分割成”xxx-xxxx-xxxx“的形式,還有銀行卡號(hào)、身份證號(hào),我們總是喜歡把一長(zhǎng)串?dāng)?shù)字拆分開(kāi)來(lái)讀寫(xiě),目的就是降低記憶成本,提高信息的易讀性,從而達(dá)到視覺(jué)防錯(cuò)的作用。

15個(gè)著名的設(shè)計(jì)心理學(xué)原理以及在設(shè)計(jì)中的應(yīng)用

在設(shè)計(jì)網(wǎng)頁(yè)導(dǎo)航時(shí),如果希望用戶(hù)記住導(dǎo)航區(qū)域的內(nèi)容或者一個(gè)路徑的順序,那么數(shù)量應(yīng)該控制在7個(gè)左右(不超過(guò)9個(gè)),如蘋(píng)果、Dribbble、behance等網(wǎng)站的導(dǎo)航分類(lèi)。

15個(gè)著名的設(shè)計(jì)心理學(xué)原理以及在設(shè)計(jì)中的應(yīng)用

Web導(dǎo)航欄選項(xiàng)卡數(shù)量不超過(guò)9個(gè)

如果導(dǎo)航或選項(xiàng)卡內(nèi)容很多,可以用一個(gè)樹(shù)狀層級(jí)結(jié)構(gòu)來(lái)展示各級(jí)別關(guān)系,但要注意其廣度和深度的平衡。例如人人都是產(chǎn)品經(jīng)理和 Dribbble,把更多子類(lèi)別收在二級(jí)目錄里。

15個(gè)著名的設(shè)計(jì)心理學(xué)原理以及在設(shè)計(jì)中的應(yīng)用

Web導(dǎo)航欄選項(xiàng)卡數(shù)量過(guò)多時(shí)

在移動(dòng)端應(yīng)用設(shè)計(jì)中,常見(jiàn)的電商App例如奈雪和樂(lè)凱撒分類(lèi)模塊,兩個(gè)產(chǎn)品的商品分類(lèi)布局形式很相似,都是用了選項(xiàng)卡的方式來(lái)分類(lèi)商品,層級(jí)明確,相應(yīng)的提升了用戶(hù)找尋單品的效率。

15個(gè)著名的設(shè)計(jì)心理學(xué)原理以及在設(shè)計(jì)中的應(yīng)用

移動(dòng)端選項(xiàng)卡導(dǎo)航

在移動(dòng)應(yīng)用設(shè)計(jì)中,底部 Tabbar 最少3個(gè),最多為5個(gè)(幾乎沒(méi)幾個(gè)超過(guò)5個(gè)),這樣做除了減輕用戶(hù)記憶負(fù)擔(dān),超過(guò)5個(gè)會(huì)降低視覺(jué)和操作上的體驗(yàn)。事實(shí)上就算只有4個(gè),我們也經(jīng)常想不起微信底部的4個(gè)Tab分別是啥。

15個(gè)著名的設(shè)計(jì)心理學(xué)原理以及在設(shè)計(jì)中的應(yīng)用

tabbar區(qū)標(biāo)簽最多不超過(guò)5個(gè)

我們看到的大部分 App 頂部導(dǎo)航欄的頁(yè)簽數(shù)量都嚴(yán)格遵循了7±2法則,雖然在橫軸可無(wú)限滑動(dòng),但在顯示區(qū)域只保持7±2法則的顯示數(shù)量,例如馬蜂窩、飛豬旅行等。

15個(gè)著名的設(shè)計(jì)心理學(xué)原理以及在設(shè)計(jì)中的應(yīng)用

頂部導(dǎo)航欄頁(yè)簽

我們常說(shuō)的“八大金剛”就是一屏顯示8個(gè)圖標(biāo),超過(guò)的則放在第二屏。如果兩行10個(gè),往往第十個(gè)是“更多”入口,總的來(lái)說(shuō)也沒(méi)超過(guò)9個(gè)。

15個(gè)著名的設(shè)計(jì)心理學(xué)原理以及在設(shè)計(jì)中的應(yīng)用

金剛區(qū)圖標(biāo)不超過(guò)8個(gè)

產(chǎn)品運(yùn)營(yíng) banner 主文案字?jǐn)?shù)通??刂圃?個(gè)字以?xún)?nèi),在設(shè)計(jì)時(shí)也通常把長(zhǎng)標(biāo)題一分為二排兩行,便于用戶(hù)快速閱讀,提升點(diǎn)擊率。

15個(gè)著名的設(shè)計(jì)心理學(xué)原理以及在設(shè)計(jì)中的應(yīng)用

banner文案不超過(guò)9個(gè)字

在交互設(shè)計(jì)中,7±2法則是減少用戶(hù)認(rèn)知負(fù)荷,提升用戶(hù)體驗(yàn)的重要環(huán)節(jié)。同時(shí)還強(qiáng)調(diào)了在設(shè)計(jì)過(guò)程中對(duì)產(chǎn)品的預(yù)見(jiàn)性,避免在不斷為產(chǎn)品添加功能時(shí),破壞原有的視覺(jué)基礎(chǔ)。

二、0123簡(jiǎn)單法則

  • 無(wú)需說(shuō)明書(shū)
  • 一看就會(huì)
  • 兩秒等待時(shí)間
  • 三步以?xún)?nèi)的操作

0 無(wú)需說(shuō)明書(shū)

喬布斯曾說(shuō)過(guò):“蘋(píng)果應(yīng)該創(chuàng)造所有人都可以使用的產(chǎn)品,即使沒(méi)有用戶(hù)指南”。

1 一看就會(huì)

簡(jiǎn)單易懂,看一眼就明白你想說(shuō)什么,不用教學(xué)就知道怎么用。

2 秒法則

所謂“2秒法則”,是指用戶(hù)在使用某類(lèi)系統(tǒng)時(shí)的等待時(shí)長(zhǎng)不超過(guò)2秒。在極短的時(shí)間內(nèi)展示重要信息,給用戶(hù)留下深刻的第一印象。

這里的2秒只是一個(gè)象征意義上的表達(dá),也許有一點(diǎn)隨意,但是這卻是一個(gè)合理的數(shù)量級(jí)。我們熟知的“F”瀏覽模式其實(shí)就是間接縮短用戶(hù)看到重要信息的時(shí)長(zhǎng),達(dá)到快速瀏覽的目的。

進(jìn)入App的首頁(yè)加載時(shí)間如果過(guò)長(zhǎng)就會(huì)導(dǎo)致用戶(hù)產(chǎn)生厭煩情緒,很容易退出甚至卸載App的行為。因此我們看到許多應(yīng)用將首頁(yè)加載時(shí)的空白頁(yè)進(jìn)行占位圖設(shè)計(jì)。

15個(gè)著名的設(shè)計(jì)心理學(xué)原理以及在設(shè)計(jì)中的應(yīng)用

下拉刷新也是一個(gè)設(shè)計(jì)點(diǎn),為避免刷新時(shí)間過(guò)長(zhǎng),設(shè)計(jì)師通常會(huì)在加載動(dòng)畫(huà)上做文章。充滿(mǎn)趣味性的動(dòng)效能安撫用戶(hù)焦躁不安的心情,無(wú)形中降低了用戶(hù)對(duì)等待時(shí)間的感知。

15個(gè)著名的設(shè)計(jì)心理學(xué)原理以及在設(shè)計(jì)中的應(yīng)用

App里面的 banner 設(shè)計(jì)要有視覺(jué)沖擊力,如果兩秒之內(nèi)沒(méi)有抓住用戶(hù)的眼球,可能就被用戶(hù)忽略了。

15個(gè)著名的設(shè)計(jì)心理學(xué)原理以及在設(shè)計(jì)中的應(yīng)用

因此,在設(shè)計(jì)互聯(lián)網(wǎng)產(chǎn)品的頁(yè)面時(shí),用戶(hù)等待的時(shí)間越短,用戶(hù)體驗(yàn)越佳。反之,就會(huì)讓用戶(hù)產(chǎn)生焦慮的情緒。

3 次點(diǎn)擊法則

用戶(hù)在3次點(diǎn)擊之內(nèi)如果還沒(méi)有找到他們想要的信息或了解網(wǎng)站特色,他們就會(huì)離開(kāi)該網(wǎng)站。這條原則突出了清晰的導(dǎo)航,符合邏輯的結(jié)構(gòu)和易于理解的網(wǎng)站層級(jí)的重要性(來(lái)自《眾妙之門(mén)》P133)。

其實(shí)在交互體驗(yàn)中,點(diǎn)擊的次數(shù)往往是無(wú)關(guān)緊要的。只要每次點(diǎn)擊都是無(wú)需思考的,毫不費(fèi)力地順勢(shì)進(jìn)行,那么用戶(hù)的挫敗感就會(huì)大大降低。如果你的網(wǎng)站能夠讓用戶(hù)知道他在哪里,從哪里來(lái),要到哪里去,并且能夠讓用戶(hù)了解如何完成目標(biāo),這樣的點(diǎn)擊即使有10次也是沒(méi)有問(wèn)題的。

例如,在京東購(gòu)買(mǎi)一件商品需要經(jīng)過(guò)“立即購(gòu)買(mǎi)>確定>提交訂單>選擇支付方式”4次點(diǎn)擊才能到訂單支付頁(yè)面完成購(gòu)買(mǎi),這過(guò)程中可能還穿插其他的點(diǎn)擊行為(比如選擇地址、優(yōu)惠券),用戶(hù)并沒(méi)有感受到不方便,使用過(guò)程流暢而自然。

15個(gè)著名的設(shè)計(jì)心理學(xué)原理以及在設(shè)計(jì)中的應(yīng)用

在可用性測(cè)試領(lǐng)域,“三次點(diǎn)擊”定律一直是一個(gè)很具爭(zhēng)議內(nèi)容。體現(xiàn)在以下幾點(diǎn):

  • 研究表明,用戶(hù)在超過(guò)3次點(diǎn)擊還沒(méi)到達(dá)想去的頁(yè)面時(shí),往往并沒(méi)有退出網(wǎng)站,而是會(huì)繼續(xù)多點(diǎn)幾次;
  • 當(dāng)把一個(gè)3次點(diǎn)擊就能到達(dá)的流程改為4次點(diǎn)擊的時(shí)候,用戶(hù)發(fā)現(xiàn)目標(biāo)頁(yè)面的能力反而提升了600%;
  • 合理的導(dǎo)航系統(tǒng)比點(diǎn)擊次數(shù)更重要;
  • 比起“3次點(diǎn)擊”,有人提出了“1次點(diǎn)擊”定律,即用戶(hù)的每一次點(diǎn)擊都應(yīng)該讓他們更接近目標(biāo),同時(shí)盡量減少能干擾實(shí)現(xiàn)這一目標(biāo)的因素;
  • 用戶(hù)抱怨要花很長(zhǎng)時(shí)間才能找到某個(gè)產(chǎn)品,實(shí)際上他們是在抱怨無(wú)法找到想要的東西,如果用戶(hù)找到了想要的東西,他們就不會(huì)抱怨點(diǎn)擊的次數(shù)了。

三、??硕?/h2>

英國(guó)心理學(xué)家William Edmund Hick認(rèn)為,在簡(jiǎn)單的判斷場(chǎng)景中:一個(gè)人所面臨的選擇越多,做出決定所花的時(shí)間就越長(zhǎng)。有時(shí)候在選擇中花費(fèi)太長(zhǎng)時(shí)間從而導(dǎo)致決策失敗。

生活中我們也經(jīng)常會(huì)面臨選擇困難癥,比如早上起床就糾結(jié)今天穿什么?中午去食堂就會(huì)糾結(jié)吃什么?造成我們?nèi)绱思m結(jié)的原因就是因?yàn)檫x擇太多了(遠(yuǎn)古人就沒(méi)這些煩惱,尋找食物時(shí)逮著什么就吃什么)。

1. 在設(shè)計(jì)中的應(yīng)用

應(yīng)用到界面設(shè)計(jì)中也是如此,選項(xiàng)越多,意味著用戶(hù)做出決策的時(shí)間越長(zhǎng)。

例如App Store首頁(yè),改版前的首頁(yè)把眾多App平鋪出來(lái),對(duì)目的不明確的用戶(hù)來(lái)說(shuō)選擇有點(diǎn)多。改版后的首頁(yè)大幅減少了App的數(shù)量,卡片的設(shè)計(jì)方式簡(jiǎn)潔且目標(biāo)清晰。

15個(gè)著名的設(shè)計(jì)心理學(xué)原理以及在設(shè)計(jì)中的應(yīng)用

不得不面對(duì)較多選項(xiàng)時(shí), 對(duì)主要和次要的選項(xiàng)做視覺(jué)權(quán)重區(qū)分,做好設(shè)計(jì)上的歸類(lèi),提升用戶(hù)做決定的效率。

例如美團(tuán)外賣(mài)金剛區(qū)第一行5個(gè)入口的圖標(biāo)在尺寸和表現(xiàn)手法上都比下面的入口圖標(biāo)要大更醒目?!拔业摹表?yè)面把一些低頻率功能或不太重要的功能收納到“設(shè)置”里,此外還可以通過(guò)置灰、鎖定等方法間接減少選項(xiàng),降低干擾。

15個(gè)著名的設(shè)計(jì)心理學(xué)原理以及在設(shè)計(jì)中的應(yīng)用

對(duì)于多流程的任務(wù)進(jìn)行分步操作,讓用戶(hù)專(zhuān)注眼前任務(wù)。例如 Clubhouse 注冊(cè)時(shí),把需要用戶(hù)選擇的選項(xiàng)分步引導(dǎo)完成,讓用戶(hù)能專(zhuān)注當(dāng)前行為。

15個(gè)著名的設(shè)計(jì)心理學(xué)原理以及在設(shè)計(jì)中的應(yīng)用

對(duì)于多種類(lèi)別的選項(xiàng)應(yīng)當(dāng)做二次分類(lèi)的區(qū)分,我們都知道電商平臺(tái)的品類(lèi)繁多,僅通過(guò)單一分類(lèi)是不夠的,比如數(shù)碼頻道下面還分相機(jī)、影音娛樂(lè)、數(shù)碼配件、智能設(shè)備、電子教育等大的分類(lèi)。

商品詳情頁(yè)的篩選功能也是貼合使用場(chǎng)景來(lái)設(shè)計(jì)的,所以分類(lèi)不怕多,就怕混亂。

15個(gè)著名的設(shè)計(jì)心理學(xué)原理以及在設(shè)計(jì)中的應(yīng)用

2. 適用邊界

雖然選擇越少,用戶(hù)做決策的時(shí)間越短,但這并不是提高用戶(hù)體驗(yàn)的唯一標(biāo)準(zhǔn),過(guò)度的減少選項(xiàng),可能導(dǎo)致負(fù)面效果。

15個(gè)著名的設(shè)計(jì)心理學(xué)原理以及在設(shè)計(jì)中的應(yīng)用

如上圖右,如果在刪除App的彈窗中只有一個(gè)“刪除”選項(xiàng),沒(méi)有明顯的取消之類(lèi)的途徑,那么用戶(hù)會(huì)覺(jué)得特別難受,感覺(jué)被強(qiáng)迫去刪除。如果當(dāng)下有急需使用手機(jī)處理一些事情,那么這樣會(huì)把這種負(fù)面情緒給無(wú)限放大,讓用戶(hù)抓狂。

??硕芍饕苡绊懹谶x項(xiàng)的多少,但是它不適用于需要高難度閱讀的任務(wù)。例如考試試題每道題只給你A、B兩個(gè)選項(xiàng)(學(xué)渣竊喜),那也太容易蒙了,這就是??硕稍诖鸢冈囶}中的局限性。

15個(gè)著名的設(shè)計(jì)心理學(xué)原理以及在設(shè)計(jì)中的應(yīng)用

3. 思考總結(jié)

??硕墒且粋€(gè)可以適用于設(shè)計(jì)的指南,記住要盡量減少用戶(hù)在一次決策中要做的選項(xiàng),因?yàn)闆Q策效率是一個(gè)產(chǎn)品導(dǎo)致用戶(hù)流失的重要原因之一。

引導(dǎo)用戶(hù)在明確的選項(xiàng)之間進(jìn)行選擇,以便快速將他們送到某個(gè)地方(例如賬單支付),這將大大提升用戶(hù)體驗(yàn)并達(dá)到你的目標(biāo)。

四、費(fèi)茨定律

費(fèi)茨定律由心理學(xué)家 Paul Fitts 提出,用來(lái)預(yù)測(cè)從任意一點(diǎn)到目標(biāo)中心位置所需時(shí)間與該點(diǎn)到目標(biāo)的距離和大小有關(guān),距離越大時(shí)間越長(zhǎng),目標(biāo)越大時(shí)間越短。舉例來(lái)說(shuō),你伸手去拿桌子上的咖啡杯,開(kāi)始你的手臂迅速地往杯子位置移動(dòng),接著你會(huì)放慢速度直至找到杯子把手,這個(gè)杯子把手的大小與你“抓住”它有著一定的關(guān)系。

15個(gè)著名的設(shè)計(jì)心理學(xué)原理以及在設(shè)計(jì)中的應(yīng)用

如上圖所示,如果光標(biāo)現(xiàn)在在任易地點(diǎn)想要去點(diǎn)擊目標(biāo) target,最短路徑一定是D,最短路徑上容錯(cuò)的最長(zhǎng)路徑是 D+W,只要水平上移動(dòng)超過(guò)了 D+W 你就點(diǎn)不到了,而這個(gè)點(diǎn)擊動(dòng)作所耗的時(shí)間是一個(gè)常數(shù)加上一個(gè)以D為正比W為反比的函數(shù)的和。詳細(xì)解釋如下,圖中紅色方塊代表點(diǎn)擊目標(biāo),虛線代表移動(dòng)路徑,此時(shí)因?yàn)榧t色方塊目標(biāo)較大,所以用戶(hù)從任何一處點(diǎn)擊都很容易(可以用鼠標(biāo)在屏幕任意點(diǎn)移至紅色方塊試試)。

15個(gè)著名的設(shè)計(jì)心理學(xué)原理以及在設(shè)計(jì)中的應(yīng)用

相反,紅色方塊目標(biāo)變小,快速點(diǎn)擊就會(huì)困難很多,很難一次到位。

15個(gè)著名的設(shè)計(jì)心理學(xué)原理以及在設(shè)計(jì)中的應(yīng)用

但如果紅色方塊目標(biāo)很小距離很近的話,因?yàn)橐苿?dòng)范圍小,也能準(zhǔn)確的點(diǎn)擊到。

15個(gè)著名的設(shè)計(jì)心理學(xué)原理以及在設(shè)計(jì)中的應(yīng)用

在頁(yè)面中,大而近的目標(biāo)區(qū)域意味著用戶(hù)不需要做太精細(xì)的調(diào)整就可以輕易的觸達(dá)目標(biāo)。比如頁(yè)面中的大按鈕。

15個(gè)著名的設(shè)計(jì)心理學(xué)原理以及在設(shè)計(jì)中的應(yīng)用

按鈕越大越容易點(diǎn)擊

夸克瀏覽器的搜索欄就放在離手最近的屏幕底部區(qū)域,相比常見(jiàn)頂部搜索欄更方便操作,效率更高。

15個(gè)著名的設(shè)計(jì)心理學(xué)原理以及在設(shè)計(jì)中的應(yīng)用

將按鈕放置在離開(kāi)始點(diǎn)較近的地方

注冊(cè)登錄界面,通常將「注冊(cè)」和「登錄」放到一起,不僅可以在視覺(jué)上增強(qiáng)用戶(hù)對(duì)他們相關(guān)性的認(rèn)知,還可以減少在他們之間的距離 。

15個(gè)著名的設(shè)計(jì)心理學(xué)原理以及在設(shè)計(jì)中的應(yīng)用

相關(guān)按鈕之間距離近點(diǎn)更易于點(diǎn)擊

1. 適用邊界

費(fèi)茨定律鼓勵(lì)減少距離,增加目標(biāo)大小以提升用戶(hù)效率,但反過(guò)來(lái)亦適用。比如 iPhone 關(guān)機(jī)按鈕,沒(méi)有使用點(diǎn)擊關(guān)閉,而采用滑動(dòng)操作,還把按鈕放在屏幕頂部,這樣明顯增加了操作難度,進(jìn)而避免了用戶(hù)誤操作。

15個(gè)著名的設(shè)計(jì)心理學(xué)原理以及在設(shè)計(jì)中的應(yīng)用

App彈窗經(jīng)常把“關(guān)閉”按鈕放在卡片的右上角離手遠(yuǎn)的地方,希望用戶(hù)先完成彈窗提示的任務(wù)。還有啟動(dòng)頁(yè)廣告,喜歡把“跳過(guò)”按鈕放在難以點(diǎn)擊的右上角(恰飯重要),以提高用戶(hù)的誤觸機(jī)率提高轉(zhuǎn)化。

2. 思考總結(jié)

  • 按鈕越大越容易點(diǎn)擊,因此在程序開(kāi)發(fā)中,會(huì)增加按鈕點(diǎn)擊的熱區(qū)范圍,減輕用戶(hù)精準(zhǔn)點(diǎn)擊的壓力。但也不能過(guò)分的大,容易引起誤觸;
  • 讓相關(guān)聯(lián)的內(nèi)容更靠近彼此,用視覺(jué)手法增強(qiáng)用戶(hù)對(duì)它們相關(guān)性的認(rèn)知。距離產(chǎn)生美,注意不要靠的太近,會(huì)出事;
  • 將按鈕放置在離出發(fā)點(diǎn)較近的地方,比如頁(yè)面主按鈕一般會(huì)放在屏幕底部易操作區(qū)域;
  • 屏幕的邊角很適合放置像菜單欄和按鈕這樣的元素,因?yàn)樵谄聊贿吘壓徒锹湮恢糜?strong>“無(wú)限可選中”的屬性,可以大膽操作而無(wú)需“微調(diào)”,參見(jiàn) macOS 底部 dock 欄;
  • 定律的反向使用可以適用一些特殊場(chǎng)景,比如想達(dá)到某種目的而降低按鈕被點(diǎn)擊的可能。

五、泰思勒定律

“任何事物都具有其固有的復(fù)雜性,無(wú)法簡(jiǎn)化”。泰斯勒定律(Tesler’s Law)由 Larry Tesler 于1984年提出,也稱(chēng)「復(fù)雜度守恒定律」。

該定律認(rèn)為:每一個(gè)過(guò)程都有其固有的復(fù)雜性,存在一個(gè)臨界點(diǎn),超過(guò)了這個(gè)點(diǎn)過(guò)程就不能再簡(jiǎn)化了,你只能將固有的復(fù)雜性從一個(gè)地方移動(dòng)到另外一個(gè)地方。

生活中很多我們習(xí)以為常,感覺(jué)便捷方便的生活方式,是無(wú)數(shù)卓越的數(shù)學(xué)家、工程師、設(shè)計(jì)師等無(wú)數(shù)的時(shí)間投入,才實(shí)現(xiàn)的某個(gè)小功能,是他們把這些復(fù)雜性轉(zhuǎn)移到自己身上替我們簡(jiǎn)化了。

15個(gè)著名的設(shè)計(jì)心理學(xué)原理以及在設(shè)計(jì)中的應(yīng)用

說(shuō)回移動(dòng)端,每個(gè)應(yīng)用中都有其無(wú)法簡(jiǎn)化的復(fù)雜度,也不能按照我們個(gè)人意愿去除這些功能。這就是為什么飛機(jī)稿都簡(jiǎn)潔好看,而一搬到線上就面目全非。

常見(jiàn)的復(fù)雜性轉(zhuǎn)移有:“查看更多”、“查看全部”、“查看詳情”、“展開(kāi)和收起”之類(lèi)的文字做轉(zhuǎn)移跳轉(zhuǎn),比如:頂部導(dǎo)航欄的更多圖標(biāo),就是將常用的功能整合并隱藏在首頁(yè)設(shè)計(jì)的更多功能模塊中,把用戶(hù)的操作范圍轉(zhuǎn)移到另一個(gè)地方。

15個(gè)著名的設(shè)計(jì)心理學(xué)原理以及在設(shè)計(jì)中的應(yīng)用

除此之外,還有一些降低操作復(fù)雜度的方法:刪除組織、隱藏

  • 視覺(jué)層面的“降噪”方法,刪除會(huì)干擾用戶(hù)操作的選項(xiàng);
  • 功能分類(lèi)明確,圍繞用戶(hù)行為組織信息內(nèi)容;
  • 隱藏那些不常用而又不能少的功能,延遲及階段性展示。

總的來(lái)說(shuō)就是將復(fù)雜的信息收起來(lái),展示重要且簡(jiǎn)潔的界面。

1. 簡(jiǎn)化交互設(shè)計(jì)

可以用代碼節(jié)省用戶(hù)操作時(shí)間的地方,是互聯(lián)網(wǎng)人一致的追求。例如,B站的一鍵三連,用戶(hù)長(zhǎng)按點(diǎn)贊按鈕,會(huì)同時(shí)觸發(fā)點(diǎn)贊、投幣和收藏,省時(shí)省力。

15個(gè)著名的設(shè)計(jì)心理學(xué)原理以及在設(shè)計(jì)中的應(yīng)用

2. 算法解放“生產(chǎn)力”

個(gè)性化算法就是通過(guò)技術(shù)手段,將用戶(hù)復(fù)雜度降低,而轉(zhuǎn)移到開(kāi)發(fā)者身上。

抖音為什么會(huì)讓人上癮?是算法知道了你的喜好,專(zhuān)推給你喜歡的內(nèi)容而不用自己去找,誰(shuí)都喜歡私人定制。這對(duì)用戶(hù)來(lái)說(shuō)是一件好事,但就像魯迅說(shuō)的:“你覺(jué)得好,一定是有人在負(fù)重前行”,這里的簡(jiǎn)化復(fù)雜的難度就轉(zhuǎn)移到設(shè)計(jì)和開(kāi)發(fā)身上了,還逼得機(jī)器去學(xué)習(xí)。例如抖音、淘寶、知乎首頁(yè)推薦的內(nèi)容都是基于你的喜好定制化推薦給你的。

15個(gè)著名的設(shè)計(jì)心理學(xué)原理以及在設(shè)計(jì)中的應(yīng)用

3. 思考總結(jié)

我們常說(shuō)以用戶(hù)為中心去設(shè)計(jì),就需要從用戶(hù)角度出發(fā),在交互設(shè)計(jì)中盡量簡(jiǎn)化操作的復(fù)雜度,降低學(xué)習(xí)成本。

但如“復(fù)制粘貼之父” Larry Tesler (1945-2020) 所說(shuō):“任何事物都具有其固有的復(fù)雜性,無(wú)法簡(jiǎn)化”。

因此,如何取得復(fù)雜度的“平衡點(diǎn)”就是重要的部分,是讓工程師及設(shè)計(jì)師花費(fèi)大量時(shí)間去降低產(chǎn)品的使用難度,還是在設(shè)計(jì)中保留一定的復(fù)雜度是我們需要思考的事。

六、麥肯錫金字塔原理

該原理是由麥肯錫國(guó)際管理咨詢(xún)公司顧問(wèn) Barbara Minto 提出的理論,她強(qiáng)調(diào)結(jié)論先行,論點(diǎn)自上而下。

你是否遇到過(guò)這樣的場(chǎng)景,部門(mén)開(kāi)會(huì)時(shí)有人口若懸河的講了半天,到最后你都不知道他想說(shuō)什么。所以如果開(kāi)會(huì)時(shí)你會(huì)走神,這不怪你,只怪講演者說(shuō)話沒(méi)有邏輯,沒(méi)有重點(diǎn)。

金字塔原理指示結(jié)構(gòu)化表達(dá)遵循結(jié)論先行的原則,即任何問(wèn)題都能歸納出一個(gè)中心點(diǎn),讓受眾能夠第一時(shí)間清楚你想談?wù)摰闹黝}。然后由數(shù)個(gè)論據(jù)作支撐,而這些一級(jí)論據(jù)可以繼續(xù)由數(shù)個(gè)二級(jí)論據(jù)支撐,如此延伸,狀如金字塔。自上而下,上層影響下層。

15個(gè)著名的設(shè)計(jì)心理學(xué)原理以及在設(shè)計(jì)中的應(yīng)用

應(yīng)用到交互設(shè)計(jì)上,即將信息展示的重點(diǎn)與交互行為的主任務(wù)優(yōu)先展示,再根據(jù)用戶(hù)在這個(gè)界面上所愿意停留時(shí)間逐級(jí)給予更多細(xì)節(jié)補(bǔ)充。

以京東的商品詳情頁(yè)為例:

首先金字塔的最上層是用戶(hù)目標(biāo)明確直接進(jìn)行“立即購(gòu)買(mǎi)”的底部全局按鈕;

其次是商品的頭圖和用戶(hù)評(píng)價(jià)這些,讓用戶(hù)了解更多信息,進(jìn)一步促成購(gòu)買(mǎi);

最后一層是提供商品相關(guān)的全部信息、參數(shù)、評(píng)分等,確保交易的最終完成。

在這個(gè)過(guò)程中,用戶(hù)在每一層花的時(shí)間也在逐級(jí)增加,呈金字塔狀。

15個(gè)著名的設(shè)計(jì)心理學(xué)原理以及在設(shè)計(jì)中的應(yīng)用

映射到設(shè)計(jì)師身上也是如此,從設(shè)計(jì)新人到設(shè)計(jì)總監(jiān),中間差的就是一個(gè)完整的設(shè)計(jì)技能金字塔。就像升級(jí)打怪,每完成一項(xiàng)任務(wù)獲得相應(yīng)的經(jīng)驗(yàn)值,累積的經(jīng)驗(yàn)值幫助我們更快的升到下一級(jí)。

當(dāng)把工作中的需要攻克的難題一一解決之后,你的設(shè)計(jì)水平會(huì)在不知不覺(jué)中更加精進(jìn),形成一套自己的設(shè)計(jì)風(fēng)格,成為一名優(yōu)秀的設(shè)計(jì)師。

15個(gè)著名的設(shè)計(jì)心理學(xué)原理以及在設(shè)計(jì)中的應(yīng)用

有趣的是,把金字塔模型倒過(guò)來(lái)就成了“用戶(hù)漏斗模型”。自上而下,激勵(lì)用戶(hù)成長(zhǎng)。它告訴我們:用戶(hù)的需求是永遠(yuǎn)滿(mǎn)足不完的,所以什么值得做,什么是可分階段去實(shí)現(xiàn)的是決策人需要明白的。

如喬布斯所說(shuō):“消費(fèi)者并不知道自己需要什么,直到我們拿出自己的產(chǎn)品,他們就發(fā)現(xiàn),這是我要的東西”;不斷完善主要功能,以滿(mǎn)足金字塔頂?shù)暮诵挠脩?hù)群。決策者常常添加一些自己想要的而不是用戶(hù)想要的需求,比如在信息流中添加一個(gè)廣告位;如何優(yōu)化完善產(chǎn)品架構(gòu),檢驗(yàn)產(chǎn)品策略的合理性和完整性。

七、新鄉(xiāng)重夫 防錯(cuò)原則

防錯(cuò)原則由世界著名的品質(zhì)管理專(zhuān)家新鄉(xiāng)重夫提出,即在過(guò)程失誤發(fā)生之前加以防止,是一種在作業(yè)過(guò)程中采用自動(dòng)作用、報(bào)警、標(biāo)識(shí)等手段。使操作人員不用特別注意也不會(huì)失誤的方法。防錯(cuò)原則認(rèn)為大部分的意外都是由于設(shè)計(jì)的疏忽,而不是人為操作失誤,可以通過(guò)優(yōu)化設(shè)計(jì)把過(guò)失降到最低。該原則最初用于工業(yè)管理,后來(lái)應(yīng)用于界面交互設(shè)計(jì)中,當(dāng)使用條件沒(méi)有滿(mǎn)足時(shí),常常通過(guò)功能失效來(lái)表示。

1. 自動(dòng)檢測(cè)提示

Bilibili 在登錄時(shí)輸入框沒(méi)有內(nèi)容或沒(méi)有輸密碼時(shí),登錄按鈕處于禁用的置灰狀態(tài),只有兩者都滿(mǎn)足了才可以正常點(diǎn)擊。此外登錄功能就可能會(huì)有用戶(hù)名錯(cuò)誤、密碼錯(cuò)誤、網(wǎng)絡(luò)超時(shí)、郵箱錯(cuò)誤等不同的錯(cuò)誤。通常必須賬號(hào)和密碼同時(shí)滿(mǎn)足且匹配才能成功。

Twitter 發(fā)帖時(shí)只允許用戶(hù)輸入140個(gè)字,為了提醒用戶(hù),其解決辦法是在鍵盤(pán)上方的工具欄上顯示還能輸入幾個(gè)字符,超過(guò)會(huì)以負(fù)數(shù)警示。知乎發(fā)布文章標(biāo)題過(guò)長(zhǎng)時(shí)也會(huì)提示錯(cuò)誤預(yù)警。

15個(gè)著名的設(shè)計(jì)心理學(xué)原理以及在設(shè)計(jì)中的應(yīng)用

2. 消除可能的失誤

防錯(cuò)法則認(rèn)為大部分的出錯(cuò)都是產(chǎn)品設(shè)計(jì)的不夠優(yōu)秀,而不該責(zé)怪用戶(hù)操作疏忽,通過(guò)設(shè)計(jì)手法可以把出錯(cuò)率降到最低。防錯(cuò)法則的核心觀點(diǎn)是,如何有效的在用戶(hù)出錯(cuò)之前就盡量避免錯(cuò)誤的發(fā)生。

比如,美團(tuán)外賣(mài)在接受短信驗(yàn)證碼時(shí),系統(tǒng)會(huì)自動(dòng)提取驗(yàn)證碼在鍵盤(pán)上方顯示,用戶(hù)點(diǎn)一下就可以自動(dòng)填寫(xiě),省去了跳出應(yīng)用——打開(kāi)短信——記住驗(yàn)證碼——再輸入的繁瑣過(guò)程,有效預(yù)防了出錯(cuò)的機(jī)率。

還有微信在綁定銀行卡時(shí)也是通過(guò)掃描銀行卡自動(dòng)提取賬號(hào),避免手動(dòng)輸入的出錯(cuò)率。

15個(gè)著名的設(shè)計(jì)心理學(xué)原理以及在設(shè)計(jì)中的應(yīng)用

3. 將失誤降至最低

二次確認(rèn),在一些比較重要的場(chǎng)景讓用戶(hù)二次確認(rèn),通常以彈窗的形式告知用戶(hù)再次讓用戶(hù)考慮自己的行為結(jié)果,進(jìn)一步降低出錯(cuò)率。

例如,最近大家都在用的報(bào)稅 App,會(huì)在提交信息前再次確認(rèn)。

15個(gè)著名的設(shè)計(jì)心理學(xué)原理以及在設(shè)計(jì)中的應(yīng)用

4. 視覺(jué)暗示

可在視覺(jué)(置灰或隱藏)上屏蔽那些不能選的選項(xiàng),避免用戶(hù)點(diǎn)擊后才報(bào)錯(cuò)或點(diǎn)擊沒(méi)反應(yīng)。

15個(gè)著名的設(shè)計(jì)心理學(xué)原理以及在設(shè)計(jì)中的應(yīng)用

其次,一些不可恢復(fù)的操作,視覺(jué)上通常會(huì)給強(qiáng)標(biāo)識(shí)。例如,刪除短信時(shí)的文字顏色“變紅”。

15個(gè)著名的設(shè)計(jì)心理學(xué)原理以及在設(shè)計(jì)中的應(yīng)用

5. 為用戶(hù)犯的錯(cuò)買(mǎi)單

當(dāng)用戶(hù)輸入錯(cuò)誤信息時(shí),比如打錯(cuò)字,系統(tǒng)應(yīng)該給予用戶(hù)想要的信息,而不是無(wú)動(dòng)于衷,冷漠視之。

15個(gè)著名的設(shè)計(jì)心理學(xué)原理以及在設(shè)計(jì)中的應(yīng)用

6. 范圍限制

其實(shí)限制用戶(hù)的選擇并不是一個(gè)好主意,但是如果有明確的規(guī)則來(lái)定義可接受的選項(xiàng),那么限制用戶(hù)可以輸入的類(lèi)型是一個(gè)很好的策略。例如,Airbnb 訂房可選日期和設(shè)置鬧鐘時(shí)的時(shí)間范圍。

15個(gè)著名的設(shè)計(jì)心理學(xué)原理以及在設(shè)計(jì)中的應(yīng)用

研究得出,使用產(chǎn)品時(shí)有77.7%的錯(cuò)誤都是人為的,防錯(cuò)法則可以幫助設(shè)計(jì)師站在用戶(hù)體驗(yàn)的角度考慮設(shè)計(jì)方案,做到操作前、中、后都有及時(shí)的反饋,預(yù)測(cè)到他們有可能發(fā)生的誤操作狀態(tài),讓用戶(hù)更快完成目標(biāo),幫助用戶(hù)減少出錯(cuò)率。

八、防呆原則

每次拿起U盤(pán)插入電腦時(shí),我就呆住了,到底朝那個(gè)方向才是對(duì)的?

防呆(Fool-proofing)是一種預(yù)防矯正的行為約束手段,運(yùn)用避免產(chǎn)生錯(cuò)誤的限制方法,使出錯(cuò)的機(jī)會(huì)降至最低,進(jìn)而達(dá)到“第一次就把工作做對(duì)”之境界。

設(shè)計(jì)師應(yīng)謹(jǐn)記:不要認(rèn)為用戶(hù)是專(zhuān)家。

比如,我們都知道“漢堡”圖標(biāo)就是菜單,點(diǎn)擊這個(gè)按鈕就會(huì)調(diào)出某些功能。但是設(shè)計(jì)師忘記了普通用戶(hù)可能并不理解什么是漢堡包圖標(biāo)、什么是面包屑、什么是抽屜式導(dǎo)航、什么是3Dtouch、怎樣雙指滑動(dòng)。

更何況普通用戶(hù)并不會(huì)研究App,在他們眼中產(chǎn)品只是眾多工具中的一個(gè)。

因此,一定要把交互和設(shè)計(jì)做的簡(jiǎn)單,通用的圖標(biāo)、功能和交互方式最好保持用戶(hù)熟悉的樣子,減輕用戶(hù)重復(fù)學(xué)習(xí)的負(fù)擔(dān)。每個(gè)頁(yè)面應(yīng)強(qiáng)調(diào)一個(gè)重要的功能而不應(yīng)該讓用戶(hù)做選擇題,這些都是有效防呆的好方法。

15個(gè)著名的設(shè)計(jì)心理學(xué)原理以及在設(shè)計(jì)中的應(yīng)用

頁(yè)面的中主按鈕更突出

防呆設(shè)計(jì)是預(yù)防錯(cuò)誤發(fā)生的方法,讓非專(zhuān)業(yè)、無(wú)經(jīng)驗(yàn)的用戶(hù)可以高效完成正確操作,不要讓用戶(hù)去思考,而是我們時(shí)時(shí)為用戶(hù)思考。

九、奧卡姆剃刀法則

又被稱(chēng)作“簡(jiǎn)單有效原理”:“如無(wú)必要,勿增實(shí)體?!?/p>

通俗點(diǎn)去理解“如無(wú)必要,勿增實(shí)體”可以理解為“不要浪費(fèi)較多東西去做用較少的東西同樣可以做好的事情”,或者表述為“在其他條件相同的情況下,要求得越少的那個(gè)就越好,越有價(jià)值”。

應(yīng)用到設(shè)計(jì)學(xué)領(lǐng)域,該法則認(rèn)為做產(chǎn)品時(shí)功能上不可過(guò)于繁瑣,應(yīng)該保證簡(jiǎn)潔和工具化。

例如,產(chǎn)品中為用戶(hù)提供了收藏功能是否就不再需要喜歡?提供了喜歡是不是不再需要收藏?一定要保證功能上的克制。不必要的設(shè)計(jì)元素會(huì)導(dǎo)致使用效率降低,還會(huì)增加不可預(yù)知的后果。

建議在不損及功能的前提下,干掉多余的元素,當(dāng)兩個(gè)設(shè)計(jì)方案都能達(dá)到設(shè)計(jì)目的時(shí),選擇較為簡(jiǎn)單的那一個(gè)有利于更好地傳達(dá)內(nèi)容更好地用戶(hù)體驗(yàn)。

15個(gè)著名的設(shè)計(jì)心理學(xué)原理以及在設(shè)計(jì)中的應(yīng)用

總的來(lái)說(shuō),我們可以結(jié)合《簡(jiǎn)約至上》一書(shū)中提到的刪除、組織、隱藏、轉(zhuǎn)移四個(gè)策略來(lái)將復(fù)雜的設(shè)計(jì)和體驗(yàn)變得更加簡(jiǎn)單。

  • 刪除:關(guān)注核心,讓用戶(hù)注意力集中在自己要完成的目標(biāo)上,刪除不必要的功能、流程和造成視覺(jué)混亂的元素等;
  • 組織:繁瑣的功能通過(guò)分塊,被組織成清晰的層次結(jié)構(gòu)。還記得我們前面說(shuō)到的“7±2法則”嗎,把項(xiàng)組織到7加減2個(gè)塊中;分塊越少,選擇越少,用戶(hù)負(fù)擔(dān)約輕;
  • 隱藏:隱藏那些主流用戶(hù)很少使用,但自身更新需要但功能。通過(guò)漸進(jìn)展示和適時(shí)出現(xiàn)的方法減少干擾;
  • 轉(zhuǎn)移:把合適的功能轉(zhuǎn)移到合適的設(shè)備上去。讓用戶(hù)感覺(jué)簡(jiǎn)單的一個(gè)重要前提,就是先搞清楚把什么工作交給計(jì)算機(jī),把什么工作留給用戶(hù)。

十、雷斯托夫效應(yīng)

小測(cè)試,下列飲料中哪一種給你印象最深刻呢?文末揭曉。

  • 可口可樂(lè)、雪碧、芬達(dá)、嶗山可樂(lè)、7喜、美年達(dá)

雷斯托夫效應(yīng)又稱(chēng)隔離效應(yīng)(isolation effect),以及新奇效應(yīng)(novelty effect),前蘇聯(lián)心理學(xué)家馮·雷斯托夫認(rèn)為,某個(gè)元素越是違反常理,就越引人注意,收到更多的關(guān)注。一樣?xùn)|西與以往經(jīng)歷明顯不同就產(chǎn)生了經(jīng)歷差異。

比如人生中的很多第一次,第一次高考、大學(xué)的第一天、初戀、第一份工作等等。該差異也會(huì)出現(xiàn)在新奇面孔、電話號(hào)碼記憶中。奇特的面孔和特殊的電話號(hào)碼更能被人記住。

該理論以多種不同的方式應(yīng)用到設(shè)計(jì)中,最明顯的就是如果想要突出某個(gè)重點(diǎn)內(nèi)容,就要使它特殊化,通過(guò)色彩、尺寸、留白、字體粗細(xì)等設(shè)計(jì)手段。利用對(duì)比來(lái)凸顯想要表達(dá)的重要信息。例如金剛區(qū)、tab欄的運(yùn)營(yíng)活動(dòng)廣告,特殊化的設(shè)計(jì)讓它們?cè)诒尘爸忻摲f而出。

15個(gè)著名的設(shè)計(jì)心理學(xué)原理以及在設(shè)計(jì)中的應(yīng)用

個(gè)人中心的會(huì)員卡為了吸引用戶(hù)注意,增加開(kāi)通率,都成了重點(diǎn)設(shè)計(jì)對(duì)象。

15個(gè)著名的設(shè)計(jì)心理學(xué)原理以及在設(shè)計(jì)中的應(yīng)用

與以往不同的界面設(shè)計(jì)可以更加的吸引用戶(hù),加深用戶(hù)的記憶,同時(shí)擴(kuò)大了活動(dòng)對(duì)用戶(hù)的影響力。例如每年淘寶的雙11首頁(yè)設(shè)計(jì)都與往常不同。

15個(gè)著名的設(shè)計(jì)心理學(xué)原理以及在設(shè)計(jì)中的應(yīng)用

Google doodle 會(huì)在一些比較特殊的日子改變 logo 的設(shè)計(jì),把logo設(shè)計(jì)成與這個(gè)日子相關(guān)的插畫(huà)或涂鴉,與平時(shí)的 logo 形成差異化,幫助人們更好地記住這個(gè)日子。

15個(gè)著名的設(shè)計(jì)心理學(xué)原理以及在設(shè)計(jì)中的應(yīng)用

因此我們?cè)诮缑嬖O(shè)計(jì)中,若想讓用戶(hù)對(duì)哪個(gè)模塊或者是元素引起注意或點(diǎn)擊,就可以打破常規(guī)對(duì)該元素進(jìn)行強(qiáng)調(diào)設(shè)計(jì),使他在背景中脫穎而出。但是不要任何元素都強(qiáng)調(diào),因?yàn)槭裁炊紡?qiáng)調(diào)就等于什么都沒(méi)強(qiáng)調(diào),就沒(méi)有重點(diǎn),所以要謹(jǐn)慎使用這個(gè)方法。

回到開(kāi)篇的題目,答案是「嶗山可樂(lè)」。

相比其他飲料,嶗山可樂(lè)遇到的少,反而成了最特別的一個(gè)了。

你的答案是什么?歡迎在下方留言探討。

十一、損失厭惡

損失厭惡是指人們面對(duì)同樣數(shù)量的收益和損失時(shí),認(rèn)為損失更加令他們難以忍受。同量的損失帶來(lái)的負(fù)效用為同量收益的正效用的2.5倍。

比如,丟100塊錢(qián)的痛苦感要遠(yuǎn)高于你撿到100塊錢(qián)帶來(lái)的幸福感,也就是說(shuō)要至少撿到300塊才能平復(fù)之前的心情。生活中類(lèi)似的栗子還有很多。

比如旅游時(shí),雖然這個(gè)景點(diǎn)很爛,人們依然覺(jué)得來(lái)都來(lái)了,還是要看完再走才“不虧”;

吃自助餐時(shí),明明吃不下那么多,可想到花了那么多錢(qián),就要盡可能的多吃才算“回本”,真是應(yīng)了那句話:“食之無(wú)味,棄之可惜”;

花了50塊買(mǎi)了張電影票,過(guò)了10分鐘發(fā)現(xiàn)是部爛片,就算在電影院睡覺(jué)也不愿提前走,覺(jué)得這50塊錢(qián)不能白花……

15個(gè)著名的設(shè)計(jì)心理學(xué)原理以及在設(shè)計(jì)中的應(yīng)用

那么,該如何將“損失厭惡”賦能給產(chǎn)品設(shè)計(jì)呢?

最典型的莫過(guò)于電商App中的各類(lèi)券滿(mǎn)天飛,比如:買(mǎi)二送一、3件7折、倒計(jì)時(shí)xx小時(shí)后恢復(fù)原價(jià)等等。商家就是為了營(yíng)造現(xiàn)在不買(mǎi)就會(huì)錯(cuò)過(guò)的套路,用戶(hù)也會(huì)覺(jué)得失之可惜。

一年一度的天貓雙11,京東618,還有情人節(jié)、中秋節(jié)等各種有的沒(méi)的節(jié)日都是商家利用“損失厭惡”心理為基礎(chǔ)刺激消費(fèi)。

15個(gè)著名的設(shè)計(jì)心理學(xué)原理以及在設(shè)計(jì)中的應(yīng)用

我們 App 的用戶(hù)粘性不太理想,增加一個(gè)“簽到”功能吧,產(chǎn)品經(jīng)理如是說(shuō)。如是我們看到各種簽到得禮品,贏紅包等活動(dòng)。中間還不能中斷,要連續(xù)簽到多少天才能得到獎(jiǎng)勵(lì),用戶(hù)也擔(dān)心中斷的損失。

15個(gè)著名的設(shè)計(jì)心理學(xué)原理以及在設(shè)計(jì)中的應(yīng)用

某網(wǎng)盤(pán)下載文件時(shí),會(huì)給你一個(gè)10秒VIP高速下載的體驗(yàn),計(jì)時(shí)過(guò)后又恢復(fù)到龜速,讓你恨的牙癢癢。雖然這招有點(diǎn)損,但用戶(hù)體驗(yàn)到了VIP的快感,很多人還是會(huì)乖乖成為付費(fèi)會(huì)員。

15個(gè)著名的設(shè)計(jì)心理學(xué)原理以及在設(shè)計(jì)中的應(yīng)用

產(chǎn)品運(yùn)營(yíng)中會(huì)經(jīng)常發(fā)一些優(yōu)惠券,雖然知道自己不會(huì)用,也要先領(lǐng)了再說(shuō)。這些券也都有時(shí)間限制,快過(guò)期的提醒也會(huì)加快用戶(hù)決策。還有0元開(kāi)通會(huì)員,套路是第一個(gè)月免費(fèi),次月開(kāi)始按正常價(jià)自動(dòng)續(xù)費(fèi),典型的“騙”進(jìn)來(lái)養(yǎng)肥了再“殺”。

15個(gè)著名的設(shè)計(jì)心理學(xué)原理以及在設(shè)計(jì)中的應(yīng)用

人天生會(huì)對(duì)危險(xiǎn)的、不好的東西避而遠(yuǎn)之。如是我們就看到保險(xiǎn)行業(yè),他們會(huì)用一些負(fù)面信息(空難、車(chē)禍)刺激你,用戶(hù)就會(huì)產(chǎn)生焦慮,自然就想規(guī)避掉這些概率小的風(fēng)險(xiǎn)。例如購(gòu)買(mǎi)機(jī)票時(shí)的意外險(xiǎn),QQ退出登錄時(shí)的提示。

15個(gè)著名的設(shè)計(jì)心理學(xué)原理以及在設(shè)計(jì)中的應(yīng)用

還有就是有用戶(hù)自己的內(nèi)容的東西,一般不會(huì)輕易舍去。

拿我個(gè)人來(lái)說(shuō),飛書(shū)一直是我的寫(xiě)作工具,后來(lái)看到幾個(gè)更好用的軟件,但要想到把原來(lái)的這么多東西全部轉(zhuǎn)移過(guò)去也是件很心累的事,太麻煩,還是繼續(xù)用飛書(shū)好了。QQ這個(gè)“古老”的軟件,估計(jì)很多人好久都沒(méi)打開(kāi)過(guò)了吧,但是讓你刪了它,你還是不愿意的,因?yàn)槟巧厦嬗泻芏嗲啻旱幕貞洝?/p>

十二、雅各布定律

用戶(hù)會(huì)將大部分時(shí)間花在其它網(wǎng)站上,因此他們會(huì)希望你的網(wǎng)站也能像他們已經(jīng)掌握的其它網(wǎng)站一樣,擁有相同的使用模式和習(xí)慣。

Jakob定律是由 Jakob Nielsen 提出的,他認(rèn)為用戶(hù)在其他網(wǎng)站所積累的經(jīng)驗(yàn)教會(huì)了他們?nèi)绾问褂镁W(wǎng)站,所以他們會(huì)希望你的網(wǎng)站可以與那些熟悉的網(wǎng)站一樣,相似的使用方式,在使用你的產(chǎn)品、服務(wù)、內(nèi)容和信息的時(shí)候,他們不會(huì)感到恐慌,而是輕車(chē)熟路。該原則鼓勵(lì)設(shè)計(jì)師遵循常見(jiàn)的設(shè)計(jì)模式,以避免混淆用戶(hù)或?qū)е赂叩恼J(rèn)知成本。

例如 YouTube 2017年改版前后的對(duì)比,在新版中,網(wǎng)站框架和功能上幾乎沒(méi)動(dòng),只是在UI上做了順應(yīng)新的設(shè)計(jì)準(zhǔn)則,比如調(diào)整字體大小、顏色、欄目間距等。整體上和舊版沒(méi)太大區(qū)別,而且還給用戶(hù)提供了舊版的選擇。

15個(gè)著名的設(shè)計(jì)心理學(xué)原理以及在設(shè)計(jì)中的應(yīng)用

在移動(dòng)端App中也應(yīng)如此,在具有相同功能的頁(yè)面,盡量保持一致。大到頁(yè)面底層框架(比如電商應(yīng)用中的購(gòu)物流程),小到UI設(shè)計(jì)中的一個(gè)按鈕,一個(gè)圖標(biāo),甚至一句微文案。

15個(gè)著名的設(shè)計(jì)心理學(xué)原理以及在設(shè)計(jì)中的應(yīng)用

在設(shè)計(jì)產(chǎn)品時(shí),要先延續(xù)大眾早已習(xí)慣的概念模型。然后再?gòu)淖约旱漠a(chǎn)品出發(fā),對(duì)其進(jìn)行改善。而不是從零開(kāi)始制定自以為是的流程。日常使用的各類(lèi)修圖軟件,版式都高度相似,中間是圖片、各種濾鏡、貼紙,調(diào)整等功能都放在底部操作區(qū)域,很多相同功能的名稱(chēng)都一樣。這是用戶(hù)最熟悉的布局,可降低用戶(hù)在同類(lèi)軟件使用的學(xué)習(xí)成本提升使用效率。

15個(gè)著名的設(shè)計(jì)心理學(xué)原理以及在設(shè)計(jì)中的應(yīng)用

也許你會(huì)質(zhì)疑當(dāng)所有產(chǎn)品都遵循相同都設(shè)計(jì)模式,會(huì)讓產(chǎn)品同質(zhì)化嚴(yán)重,答案是必然的。此時(shí)需要深入了解用戶(hù)的目標(biāo)和心智模型(用戶(hù)訪談、用戶(hù)畫(huà)像、用戶(hù)體驗(yàn)地圖等),并將其應(yīng)用到我們的產(chǎn)品設(shè)計(jì)中去,縮小我們與用戶(hù)心智模型之間的差距,從而獲得良好的用戶(hù)體驗(yàn)。

上文 YouTube 例子中,就是通過(guò)簡(jiǎn)單的用戶(hù)授權(quán)(新舊版本選擇),避免了心智模型的不一致會(huì)帶來(lái)的問(wèn)題,當(dāng)用戶(hù)準(zhǔn)備好隨時(shí)可以切換到新的版本。

相反的案例 Snapchat 在18年設(shè)計(jì)改版時(shí),因?yàn)樾碌牟季治茨艽_保改版前后用戶(hù)心智模型的一致性,導(dǎo)致大量用戶(hù)流向競(jìng)爭(zhēng)對(duì)手 Instagram 那里了。

但是也要注意設(shè)備之間的差異,比如在移動(dòng)端“漢堡包”式菜單是個(gè)不錯(cuò)的方案,可是放到桌面端可能并不太友好,因?yàn)榇笃聊豢梢暦秶螅⌒〉臐h堡包圖標(biāo)很容易被忽略,這時(shí)候平鋪出來(lái)可能會(huì)更好。

15個(gè)著名的設(shè)計(jì)心理學(xué)原理以及在設(shè)計(jì)中的應(yīng)用

思考總結(jié)

  1. 用戶(hù)會(huì)把在其他產(chǎn)品使用中已熟悉的操作習(xí)慣轉(zhuǎn)移到另一個(gè)看起來(lái)相似的產(chǎn)品上;
  2. 利用現(xiàn)有的思維模型,使用戶(hù)可以專(zhuān)注于自己的目標(biāo)上,而不是學(xué)習(xí)新的操作方式;
  3. 在進(jìn)行必要的改版時(shí),請(qǐng)給用戶(hù)過(guò)渡到新版本的機(jī)會(huì),即可以選擇短時(shí)間內(nèi)繼續(xù)使用舊版本;

十三、古騰堡圖表

看名稱(chēng)挺拗口,另一種翻譯叫做“對(duì)角線平衡的和諧狀態(tài)”。它告訴我們?yōu)g覽頁(yè)面是由左上至右下的視線流,左上角是視覺(jué)第一落點(diǎn)區(qū),右下角是視覺(jué)最終落點(diǎn)區(qū),因此右上角和左下角都是一個(gè)強(qiáng)烈的視覺(jué)盲點(diǎn)區(qū),大多數(shù)時(shí)容易被忽略。

15個(gè)著名的設(shè)計(jì)心理學(xué)原理以及在設(shè)計(jì)中的應(yīng)用

在進(jìn)行信息排布時(shí),將最重要的信息放在左上角,右上角和左下角添加輔助元素,右下角作為整個(gè)視覺(jué)落點(diǎn)可以展示重要操作。運(yùn)用視覺(jué)元素來(lái)創(chuàng)建一條虛擬的“線”,讓用戶(hù)的視線跟隨左上到右下這條對(duì)角線移動(dòng),符合用戶(hù)習(xí)慣性的眼動(dòng)規(guī)律。

古騰堡圖表應(yīng)用最典型的例子就是商品詳情頁(yè),在界面的頂部展示商品圖片、名稱(chēng)、價(jià)格、快遞和優(yōu)惠等用戶(hù)主要關(guān)心的信息;右上和左下通常是分享、客服和收藏等次要信息;右下角則放置最終促成用戶(hù)交易的購(gòu)買(mǎi)按鈕。

15個(gè)著名的設(shè)計(jì)心理學(xué)原理以及在設(shè)計(jì)中的應(yīng)用

我們都知道一般頁(yè)面按鈕都在界面底部是因?yàn)殡x手近,方便操作,但不僅僅如此。還因?yàn)闉g覽是用戶(hù)的第一行為,他們的視線會(huì)根據(jù)頁(yè)面元素進(jìn)行移動(dòng),最終停留在底部結(jié)尾的地方。

15個(gè)著名的設(shè)計(jì)心理學(xué)原理以及在設(shè)計(jì)中的應(yīng)用

看各種社交產(chǎn)品評(píng)論、點(diǎn)贊的位置,就知道產(chǎn)品希望用戶(hù)先干什么的想法。

15個(gè)著名的設(shè)計(jì)心理學(xué)原理以及在設(shè)計(jì)中的應(yīng)用

彈窗的按鈕擺放一般都是左「取消」右「確認(rèn)」,目的是讓用戶(hù)最快地看到主要操作內(nèi)容。

15個(gè)著名的設(shè)計(jì)心理學(xué)原理以及在設(shè)計(jì)中的應(yīng)用

余額寶的「轉(zhuǎn)出」在左,「轉(zhuǎn)入」在右,畢竟誰(shuí)也不想財(cái)往外流是吧。

15個(gè)著名的設(shè)計(jì)心理學(xué)原理以及在設(shè)計(jì)中的應(yīng)用

既然如此,為什么“發(fā)布”頁(yè)面的按鈕都在右上角呢?因?yàn)榘l(fā)布頁(yè)是屬于“編輯頁(yè)面”,需要用戶(hù)謹(jǐn)慎操作,這里關(guān)注的核心應(yīng)該是可編輯內(nèi)容區(qū)域,而不是按鈕本身。

15個(gè)著名的設(shè)計(jì)心理學(xué)原理以及在設(shè)計(jì)中的應(yīng)用

類(lèi)似的例子還有很多,設(shè)計(jì)中與此視覺(jué)流與節(jié)奏規(guī)律相似的還有F型布局和Z型布局,合理運(yùn)用這些節(jié)奏模式,使用者會(huì)跟隨你“設(shè)計(jì)”的視覺(jué)流和運(yùn)動(dòng)規(guī)律來(lái)瀏覽頁(yè)面,有效提高用戶(hù)閱讀的節(jié)奏和理解能力。

十四、馬斯洛需求理論

美國(guó)心理學(xué)家亞伯拉罕·馬斯洛(Maslow.A.H.)從人類(lèi)動(dòng)機(jī)的角度提出需求層次理論,該理論強(qiáng)調(diào)人的動(dòng)機(jī)是由人的需求決定的。

他將人類(lèi)需求分成生理需求、安全需求、社交需求、尊重需求和自我實(shí)現(xiàn)需求,依此由低層次到高層次的過(guò)程。馬斯洛需求層次理論最大意義就在于,它告訴了我們,人在滿(mǎn)足了基本的需求之后,就要去實(shí)現(xiàn)更高的需求和目標(biāo)。

馬斯洛需求層次理論有兩個(gè)基本出發(fā)點(diǎn),一是人人都有需求,某層需求滿(mǎn)足后,另一層需求才出現(xiàn);二是在上層需求未獲滿(mǎn)足前,首先滿(mǎn)足迫切需求,該需求滿(mǎn)足后,后面的需要才顯示出其激勵(lì)作用。

例如,在能感受到愛(ài)之前,他們的生理和安全需求一定要得到滿(mǎn)足。

15個(gè)著名的設(shè)計(jì)心理學(xué)原理以及在設(shè)計(jì)中的應(yīng)用

回歸到產(chǎn)品,一款產(chǎn)品,最核心的是解決用戶(hù)的需求。馬斯洛需求層次理論,為產(chǎn)品的需求分析指明了方向。

  • 生理需求:滿(mǎn)足人的最基本需求,如衣、食、住、行、生理方面的需求。諸如美團(tuán)外賣(mài)、淘寶、馬蜂窩等為日常生活提供方便的應(yīng)用;
  • 安全需求:人生安全、財(cái)產(chǎn)保險(xiǎn),也是強(qiáng)需求。如是各類(lèi)投資理財(cái)軟件層出不窮。
  • 社交需求:包括友情、親情、愛(ài)情多個(gè)層次,滿(mǎn)足人類(lèi)社會(huì)關(guān)系,讓每個(gè)人不再是孤單的個(gè)體。如是微信、微博、Soul、探探、陌陌等不同類(lèi)型的社交軟件多如牛毛;
  • 尊重需求:每個(gè)人都有被尊重的需求,都希望展現(xiàn)自己,獲得人們認(rèn)可。此需求可以深度結(jié)合在社交需求中。
  • 自我實(shí)現(xiàn):最高層級(jí)的需求,完成與自己的能力相稱(chēng)的一切事情,實(shí)現(xiàn)自己理想的需要。結(jié)合到產(chǎn)品可以理解為能滿(mǎn)足自己外在展示(炫耀)的需求,如各類(lèi)美顏軟件,美化后的照片曬到朋友圈,給人看到最好的一面。

由此規(guī)律可以看出,越靠近底層需求越是剛需,越往上,就變得越來(lái)越不必要,如自我實(shí)現(xiàn),變得可有可無(wú),不再是所有人的剛需。一個(gè)優(yōu)秀的產(chǎn)品,深諳人性滿(mǎn)足用戶(hù)核心需求,才能形成持續(xù)穩(wěn)定高用戶(hù)粘性的產(chǎn)品。

十五、序列效應(yīng)

序列效應(yīng)法則又叫系列位置效應(yīng),是指一種記憶現(xiàn)象:在列舉項(xiàng)目時(shí),排在最前面與最后面的元素,要比排在中間的更容易讓人記住。因?yàn)槿藗儗?duì)排在頭、尾的項(xiàng)目,要比排在中間的更容易記起來(lái)。

比如我們都知道第一位登上月球的宇航員是阿姆斯特朗,卻很少人知道第二位奧爾德林;班級(jí)里我們一般都知道成績(jī)最好的第一名和倒數(shù)第一名,至于排在中間的很難記住。

因此對(duì)排在開(kāi)頭的項(xiàng)目產(chǎn)生加強(qiáng)的回想效果,稱(chēng)為“首位效應(yīng)”( primacy effect)。對(duì)排在結(jié)尾的項(xiàng)目產(chǎn)生加強(qiáng)的回想效果,稱(chēng)為“近因效應(yīng)”( recency effect )。

分類(lèi)頁(yè)簽中,我們通常都會(huì)記得“精選”、“熱門(mén)”這類(lèi)標(biāo)簽,是希望給用戶(hù)進(jìn)入App后看到的主要內(nèi)容。這就是“首位效應(yīng)”,把重要性高的內(nèi)容放在首要位置。

15個(gè)著名的設(shè)計(jì)心理學(xué)原理以及在設(shè)計(jì)中的應(yīng)用

我們都知道界面中“返回”按鈕放在左上角,除了操作習(xí)慣和防誤觸外,還因?yàn)樗霈F(xiàn)在頁(yè)面左上角最開(kāi)始的地方,更長(zhǎng)久地儲(chǔ)存在長(zhǎng)期記憶之中,需要“返回”時(shí)能夠快速回憶出來(lái)。

15個(gè)著名的設(shè)計(jì)心理學(xué)原理以及在設(shè)計(jì)中的應(yīng)用

Tabbar 數(shù)量不管是3個(gè)還是5個(gè),用戶(hù)通常都會(huì)記得第一個(gè)“首頁(yè)”和最后一個(gè)“我的”,對(duì)排在中間的都會(huì)選擇性地忽略掉。

15個(gè)著名的設(shè)計(jì)心理學(xué)原理以及在設(shè)計(jì)中的應(yīng)用

有時(shí)候新上一個(gè)功能,產(chǎn)品想提高它的位置引起用戶(hù)注意,會(huì)和“我的”互換位置。例如網(wǎng)易云音樂(lè),把“我的”放在第三個(gè)tab,“云村”放在最后一個(gè)tab。

15個(gè)著名的設(shè)計(jì)心理學(xué)原理以及在設(shè)計(jì)中的應(yīng)用

近因效應(yīng)常用于及時(shí)進(jìn)行反饋的設(shè)計(jì)界面中,比如點(diǎn)贊、評(píng)論、分享等功能置于底部不僅可加深印象,同時(shí)用戶(hù)在看到有趣的內(nèi)容,想要評(píng)論或分享時(shí),不用等到文章看完即可操作。從而增強(qiáng)內(nèi)容粘性,提高互動(dòng)率。

15個(gè)著名的設(shè)計(jì)心理學(xué)原理以及在設(shè)計(jì)中的應(yīng)用

用戶(hù)的記憶具有系列位置效應(yīng),而且人的短期記憶非常有限,通過(guò)序列效應(yīng)法則的應(yīng)用,我們可以幫助用戶(hù)減輕記憶負(fù)擔(dān)。在排列項(xiàng)目時(shí),把重要的放在首位或末尾,以達(dá)到最好的記憶效果。

以上為全部15個(gè)設(shè)計(jì)原則(建議收藏),希望對(duì)你了解設(shè)計(jì)心理學(xué)有所幫助,我們下期見(jiàn)。

參考資料

https://www.interaction-design.org/literature/article/hick-s-law-making-the-choice-easier-for-users

http://theventurebank.com/ucd/1018979.html

https://zhuanlan.zhihu.com/p/25530956

http://theventurebank.com/operate/760978.html

https://cdc.tencent.com/2012/10/24/-fitts-s-law/

http://theventurebank.com/pd/1483662.html

https://www.jianshu.com/p/e81d5072d365

https://zhuanlan.zhihu.com/p/77022800

https://uxmyths.com/post/654026581/myth-all-pages-should-be-accessible-in-3-clicks

http://theventurebank.com/pd/2665009.html

https://www.xueui.cn/experience/xueshengbikan/design-rule.html

https://kknews.cc/news/ppvjk9p.html

http://theventurebank.com/operate/138262.html

https://www.sohu.com/a/276439269_114819

http://theventurebank.com/pd/167853.html

https://www.uisdc.com/gutenberg-principle

http://theventurebank.com/pd/132038.html

https://www.jianshu.com/p/82b2c0116de3

 

作者:Fyin印跡;公眾號(hào):印跡拾光

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

題圖來(lái)自Unsplash,基于CC0協(xié)議

更多精彩內(nèi)容,請(qǐng)關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號(hào)或下載App
評(píng)論
評(píng)論請(qǐng)登錄
  1. 我的答案是“7喜”,因?yàn)橹挥小?喜”有數(shù)字

    來(lái)自廣東 回復(fù)
  2. 多出文章吧作者!

    來(lái)自北京 回復(fù)
    1. 收到??

      來(lái)自廣東 回復(fù)
  3. 文章很棒,干貨滿(mǎn)滿(mǎn),學(xué)習(xí)了??

    回復(fù)
  4. 文章很有深度,收藏

    來(lái)自河南 回復(fù)
  5. 非常棒,原來(lái)是這樣!還有沒(méi)有類(lèi)似專(zhuān)業(yè)的書(shū)推薦啊?

    來(lái)自廣東 回復(fù)
    1. 有些原則有相關(guān)書(shū)籍,比如“奧卡姆剃刀法則”里提到的《簡(jiǎn)約至上》

      來(lái)自廣東 回復(fù)
  6. 很不錯(cuò),受益了

    來(lái)自廣東 回復(fù)