用戶(hù)體驗(yàn)設(shè)計(jì)法則應(yīng)該怎么用?來(lái)看看這些應(yīng)用原理!

2022-3-14    seo達(dá)人


1、菲茨定

圖片

選中目標(biāo)所需時(shí)間與移動(dòng)距離長(zhǎng)短和目標(biāo)面積大小有關(guān)。(與距離負(fù)相關(guān),與面積正相關(guān))

 

現(xiàn)實(shí)中的應(yīng)

圖片

在商場(chǎng)中尋找洗手間取決于標(biāo)志的大小及步行的距離。為了滿(mǎn)足這兩個(gè)標(biāo)準(zhǔn),標(biāo)志設(shè)計(jì)得更大、更容易接近。

 

設(shè)計(jì)應(yīng)用

圖片

▲ 左側(cè)頁(yè)面的CTA按鈕很小,沒(méi)有突出顯示,與表單的其他元素基本上沒(méi)有區(qū)分;右側(cè)頁(yè)面CTA按鈕尺寸很大,能讓用戶(hù)清晰識(shí)別。

 

2、希克定律

圖片

決策所需要花費(fèi)的時(shí)間隨著選擇的數(shù)量和復(fù)雜性增加而增加。

 

現(xiàn)實(shí)中的應(yīng)

圖片

與餐廳相比,快餐店的菜單選項(xiàng)有限。因此顧客點(diǎn)餐速度更快,門(mén)店提供的服務(wù)也更快。

 

設(shè)計(jì)應(yīng)用

圖片

▲ 在Whatsapp上轉(zhuǎn)發(fā)消息時(shí),會(huì)在“最近聊天”列表上方看到“經(jīng)常聯(lián)系”的3個(gè)好友。這對(duì)用戶(hù)來(lái)說(shuō)是一種簡(jiǎn)單的交互,幫助用戶(hù)節(jié)省操作時(shí)間。

 

3、共域定律

圖片

被一個(gè)顯而易見(jiàn)的邊框包圍起來(lái)的多個(gè)元素,被視為一個(gè)群組。(從屬于格式塔理論)

 

現(xiàn)實(shí)中的應(yīng)用

圖片

在服裝店中,衣服按照類(lèi)型被分到不同的架子上來(lái)展示,即使對(duì)這家服裝店一無(wú)所知,顧客也會(huì)將一個(gè)貨架內(nèi)的商品關(guān)聯(lián)成相似的東西。

 

設(shè)計(jì)應(yīng)用

圖片

▲ 過(guò)濾器被封閉在產(chǎn)品頁(yè)面之外的單獨(dú)區(qū)域中,因此可以清楚地識(shí)別左右兩部分的差異。

 

4、雅各布定律

圖片

用戶(hù)將大部分時(shí)間花在別人家的網(wǎng)站(產(chǎn)品)上,而不是你的。這意味著他們希望你的網(wǎng)站(產(chǎn)品)跟別人的有相同的使用方式。

 

現(xiàn)實(shí)中的應(yīng)用

圖片

假設(shè)家中的陽(yáng)臺(tái)是一扇推拉門(mén),我們可能希望酒店的陽(yáng)臺(tái)門(mén)也以同樣的方式操作。因此如果酒店有一個(gè)滑動(dòng)門(mén),我們可能會(huì)下意識(shí)地先去推門(mén)。

 

設(shè)計(jì)應(yīng)用

圖片

▲ 以上是國(guó)外知名的電商網(wǎng)站導(dǎo)航欄設(shè)計(jì),這幾個(gè)網(wǎng)站導(dǎo)航欄中顯示的信息及其結(jié)構(gòu)都非常相似:左側(cè)是品牌標(biāo)志,中間為搜索欄,右側(cè)為其他選項(xiàng)(購(gòu)物車(chē)/個(gè)人賬戶(hù))。

 

5、系列位置效應(yīng)

圖片

用戶(hù)更容易記住系列中出現(xiàn)的第一項(xiàng)(首因效應(yīng))和最后一項(xiàng)(近因效應(yīng))。

 

現(xiàn)實(shí)中的應(yīng)用

圖片

我們通常更容易記住某個(gè)電話(huà)號(hào)碼的前4位或后3位,這條法則也是銀行卡號(hào)被分成4組數(shù)字的原因。

 

設(shè)計(jì)應(yīng)用

圖片

▲ 在亞馬遜主頁(yè)上,網(wǎng)站的第一部分總是顯示最重要的內(nèi)容:導(dǎo)航包含logo、搜索和其他重要功能;輪播圖通過(guò)圖形設(shè)計(jì)吸引用戶(hù)的目光,引導(dǎo)新的交易或優(yōu)惠。

 

6、馮·雷斯托夫效應(yīng)

圖片

又稱(chēng)隔離效應(yīng)。當(dāng)存在多個(gè)相似物體時(shí),與眾不同的物體最容易被記住。

 

現(xiàn)實(shí)中的應(yīng)用

圖片

在商場(chǎng)購(gòu)物時(shí),相較于普通裝飾的門(mén)店,我們更有可能記住或?qū)⒆⒁饬D(zhuǎn)移到具有霓虹燈效果的門(mén)店上。

 

設(shè)計(jì)應(yīng)用

圖片

▲ App上有新消息時(shí),會(huì)在圖標(biāo)上用紅點(diǎn)顯示,這樣的提示更清晰和突出,從而吸引用戶(hù)的注意力,引導(dǎo)用戶(hù)點(diǎn)擊并查看消息。

 

7、審美可用性效應(yīng)

圖片

用戶(hù)通常認(rèn)為漂亮的設(shè)計(jì)更易用。

 

現(xiàn)實(shí)中的應(yīng)用

圖片

當(dāng)參觀汽車(chē)展廳時(shí),我們通常會(huì)對(duì)汽車(chē)精美的展示感到驚嘆,并立即對(duì)這個(gè)品牌產(chǎn)生積極的印象。

 

設(shè)計(jì)應(yīng)用

圖片

▲ 在愛(ài)彼迎上,我們住在陌生人的房子里,因此建立雙方的信任是必要的。當(dāng)訪(fǎng)問(wèn)像愛(ài)彼迎這樣干凈簡(jiǎn)潔的網(wǎng)站時(shí),我們會(huì)下意識(shí)地信任這個(gè)產(chǎn)品,也確保了用戶(hù)對(duì)品牌的信任。

 

8、峰終定律

圖片

人們?cè)u(píng)論體驗(yàn)優(yōu)劣,大多基于峰值和結(jié)束時(shí)的感受,而不是所有環(huán)節(jié)的平均值。

 

現(xiàn)實(shí)中的應(yīng)用

圖片

在足球比賽中,整場(chǎng)的觀看體驗(yàn)將根據(jù)比賽結(jié)束(誰(shuí)獲勝)和比賽高潮(誰(shuí)進(jìn)球最多/比賽中最激動(dòng)人心的時(shí)刻)來(lái)判斷。

 

設(shè)計(jì)應(yīng)用

圖片

▲ 在夜晚非常饑餓的時(shí)候,我們使用訂餐App選擇食物時(shí),卻被告知付款失敗。這時(shí)候App界面設(shè)計(jì)的再好看也無(wú)關(guān)緊要,訂餐失敗就是從這次體驗(yàn)中收獲的結(jié)果。

 


 

原文地址:Clip設(shè)計(jì)夾(公眾號(hào))

作者:Clippp

轉(zhuǎn)載請(qǐng)注明:學(xué)UI網(wǎng)》用戶(hù)體驗(yàn)設(shè)計(jì)法則應(yīng)該怎么用?來(lái)看看這些應(yīng)用原理!

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群,每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì),如果有興趣的話(huà),可以進(jìn)入一起成長(zhǎng)學(xué)習(xí),請(qǐng)掃碼藍(lán)小助,報(bào)下信息,藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢(xún)、商務(wù)合作,也請(qǐng)與我們聯(lián)系。

截屏2021-05-13 上午11.41.03.png

分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責(zé)聲明:藍(lán)藍(lán)設(shè)計(jì)尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問(wèn)題,請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系,我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)www.bouu.cn )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶(hù)體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 平面設(shè)計(jì)服務(wù)、

UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢(xún)、用戶(hù)體驗(yàn)公司、軟件界面設(shè)計(jì)公司


分享本文至:

日歷

鏈接

個(gè)人資料

存檔