如何讓用戶(hù)對(duì)你的設(shè)計(jì)印象深刻

2019-4-10    資深UI設(shè)計(jì)者

如果您想訂閱本博客內(nèi)容,每天自動(dòng)發(fā)到您的郵箱中, 請(qǐng)點(diǎn)這里

相比于典型的字、句型結(jié)構(gòu)和圖像,不同尋常的字、句型結(jié)構(gòu)以及圖像會(huì)更容易被人們記住。正因?yàn)槿绱?,我們?cè)谌粘9ぷ髦胁艜?huì)經(jīng)常接到類(lèi)似以下的需求:將新/重要功能的入口,或者運(yùn)營(yíng)活動(dòng)的入口做特殊化處理,增加趣味性來(lái)讓用戶(hù)加強(qiáng)印象。


這種現(xiàn)象被稱(chēng)作為梵雷斯托夫效應(yīng)(相對(duì)于普通事件或物體,要記得獨(dú)特、有特色的事件或物體可能性會(huì)大增)。梵雷斯托夫效應(yīng)有兩個(gè)觸發(fā)條件:背景不同以及經(jīng)驗(yàn)不同。背景不同是指一個(gè)刺激物與周?chē)拇碳の锊煌?,比如在一串字母中突然出現(xiàn)了一個(gè)數(shù)字,那個(gè)數(shù)字就會(huì)讓人印象深刻;

經(jīng)驗(yàn)不同則是指一個(gè)刺激物與記憶中的經(jīng)驗(yàn)不同,比如一些經(jīng)常被我們誤讀的成語(yǔ),因?yàn)榕c平時(shí)的經(jīng)驗(yàn)相悖,所以看到正確解釋的時(shí)候印象特別深刻。

我們?cè)诹私饬诉@兩個(gè)觸發(fā)條件之后,就可以利用它們來(lái)觸發(fā)梵雷斯托夫效應(yīng),從而幫助我們做出令用戶(hù)印象深刻的設(shè)計(jì)。下面就結(jié)合實(shí)際案例來(lái)看看如何利用它們。


前面說(shuō)過(guò),背景不同是指一個(gè)刺激物與周?chē)拇碳の锊煌?。具體到界面中,我們可以理解為在一堆相同類(lèi)型的元素/模塊中,對(duì)其中需要突出的做特殊化處理。


案例1 功能入口

京東金融底部導(dǎo)航中的“信用”以及保險(xiǎn)頁(yè)面中金剛區(qū)的“1元購(gòu)”,都采用了與同類(lèi)型元素不同的視覺(jué)樣式。前者采用了色塊+動(dòng)效,后者采用了3D視角,分別讓它們?cè)诘撞繉?dǎo)航和金剛區(qū)中“脫穎而出”,引起用戶(hù)的關(guān)注。


案例2 列表內(nèi)元素

愛(ài)奇藝的首頁(yè)推薦中,其中一個(gè)視頻內(nèi)容的封面是采用動(dòng)圖的形式,在其他靜態(tài)封面的襯托下,就顯得格外醒目。飛豬的首頁(yè)推薦中,則是把專(zhuān)題欄目的信息部分(彩色底白字)設(shè)計(jì)得與其他商品(白底黑字)差異較大,來(lái)吸引用戶(hù)關(guān)注點(diǎn)擊。


案例3 模塊之間

美團(tuán)外賣(mài)的個(gè)人中心將一些常用功能至于一個(gè)單獨(dú)的模塊中,并且將其中的圖標(biāo)設(shè)計(jì)成與其他模塊內(nèi)的圖標(biāo)所不同的樣式(黃色填充),如此即突出了常用功能模塊。另一邊愛(ài)奇藝的個(gè)人中心,“會(huì)員服務(wù)”與“我的泡泡”則是直接從下面的宮格式布局中脫離出來(lái),并且將各自的一些功能外置,布局交互完全不同于下面的其他模塊,以達(dá)到突出這兩個(gè)模塊的目的。

以上三個(gè)就是典型的“背景不同”觸發(fā)梵雷斯托夫效應(yīng),從而讓用戶(hù)印象深刻的案例。不難發(fā)現(xiàn),對(duì)于“背景不同”,已經(jīng)應(yīng)用的比較廣泛,并且大家也較為熟知了,接下來(lái)看看“經(jīng)驗(yàn)不同”。


經(jīng)驗(yàn)不同需要顛覆過(guò)去的認(rèn)知,我們可以理解為在一些已經(jīng)被大家所熟知的視覺(jué)/交互中,對(duì)其進(jìn)行“改革創(chuàng)新”。


案例1 虎撲評(píng)論點(diǎn)贊

虎撲中的評(píng)論點(diǎn)贊不同于我們看到的其他產(chǎn)品,它采用的是一個(gè)燈泡ICON來(lái)表達(dá)該評(píng)論“亮了”,更貼合用戶(hù)對(duì)有趣評(píng)論贊賞認(rèn)同的真實(shí)場(chǎng)景。與眾不同的方式也加強(qiáng)了用戶(hù)的印象,提升了用戶(hù)的黏度。


案例2 嗶哩嗶哩打賞

嗶哩嗶哩中的打賞采用了“馬里奧踩蘑菇”游戲的形式,不同的磚塊代表不同的打賞數(shù)額,選擇完數(shù)額,滑動(dòng)馬里奧頂一下磚塊就完成了打賞的整個(gè)過(guò)程。相比于普通的宮格式菜單選擇,是不是有意思多了呢?


案例3 微信讀書(shū)推薦

微信讀書(shū)的書(shū)城中有一個(gè)“搖一搖”的功能,搖動(dòng)一下手機(jī)或者點(diǎn)擊一下“搖一搖”ICON,就會(huì)隨機(jī)推薦一本書(shū)給你。每一次搖動(dòng)背后的不確定性就像搶紅包一樣,滿(mǎn)足了用戶(hù)的獵奇心理,提升了體驗(yàn)的趣味性。相比于普通的推薦版塊,不僅能讓用戶(hù)印象深刻,更會(huì)讓他們對(duì)此愛(ài)不釋手。

其實(shí)這些“經(jīng)驗(yàn)不同”的案例也不完完全全是創(chuàng)新,比如搖一搖之前就是微信中的一個(gè)社交功能。大家可以將平時(shí)看到的有意思的設(shè)計(jì)記錄下來(lái),并思考一下可以復(fù)用在哪些地方,說(shuō)不定下次功能更新就能用上了哦~


在利用“背景不同”時(shí),需要注意避免出現(xiàn)處處都強(qiáng)調(diào)的情況。每個(gè)元素/模塊都突出了,也就失去了重點(diǎn),如下圖。

而“經(jīng)驗(yàn)不同”需要注意的是,避免為了創(chuàng)新而創(chuàng)新,讓“驚喜”變成“驚嚇”。如下圖,

“清音”作為一個(gè)標(biāo)簽指示,顯然與我們平時(shí)所看到的那些標(biāo)簽樣式大不相同,足以讓我們印象深刻。但是,在知道它是一個(gè)標(biāo)簽之前,我曾誤以為它是一個(gè)按鈕。在觸擊無(wú)反饋并且右滑屏幕發(fā)現(xiàn)后面還有“濁音”之后,我才知道原來(lái)這是一個(gè)標(biāo)簽……這樣的“經(jīng)驗(yàn)不同”只會(huì)造成“負(fù)面”的印象深刻。


相對(duì)于普通的事物,特殊化的事物更容易讓人印象深刻,我們稱(chēng)這為梵雷斯托夫效應(yīng)。觸發(fā)梵雷斯托夫效應(yīng)有兩個(gè)條件:背景不同經(jīng)驗(yàn)不同,我們可以利用這兩個(gè)條件來(lái)做出令用戶(hù)印象深刻的設(shè)計(jì)。


“背景不同”:對(duì)需要突出的元素/模塊做特殊化處理,在同類(lèi)型元素/模塊中脫穎而出。需要注意的是,避免到處都強(qiáng)調(diào),從而失去強(qiáng)調(diào)的意義。

“經(jīng)驗(yàn)不同”:對(duì)過(guò)去所熟悉的視覺(jué)/交互進(jìn)行“創(chuàng)新”,從其他不同類(lèi)型的產(chǎn)品中復(fù)用、移植過(guò)來(lái)。需要注意的是,避免讓“驚喜”變成“驚嚇”。

藍(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ù)。

分享本文至:

日歷

鏈接

個(gè)人資料

存檔