UI&UE實(shí)用方法論 | 做設(shè)計(jì)為什么需要“對(duì)比” :「馮·雷斯托夫效應(yīng)」

2021-8-30    seo達(dá)人


以前我看羅振宇的一個(gè)節(jié)目,聽他談過(guò)一個(gè)個(gè)人觀點(diǎn),具體原話我記不清了,但大概意思差不多是:得到APP里有一個(gè)活動(dòng)或者功能特別重要的時(shí)候,他會(huì)要求設(shè)計(jì)師把入口做得足夠特別,格格不入或者丑一些都沒(méi)關(guān)系,但要保證用戶一眼就可以看到它,并且產(chǎn)生足夠的好奇心和想去點(diǎn)擊的欲望。

羅振宇在這里用到的設(shè)計(jì)手法就是“對(duì)比”,而這種手法背后的理論支撐,就是我們今天要探討的—— 馮·雷斯托夫效應(yīng)(Von Restorff Effect)。

 

一、馮·雷斯托夫效應(yīng)及其衍生

1933年,德國(guó)醫(yī)生海德維?!ゑT·雷斯托夫(Hedwig von Restorff)進(jìn)行了一系列記憶研究實(shí)驗(yàn),通過(guò)多組、多次的對(duì)比實(shí)驗(yàn)發(fā)現(xiàn)了一個(gè)人類記憶規(guī)律:在一組物品中,人們總是很容易關(guān)注記住某個(gè)最特別的東西。比如說(shuō)一組物品,用聚光燈照射其中一個(gè),那么相比其他未被照射的物品,人們會(huì)更容易注意并記住它。

也就是說(shuō)該實(shí)驗(yàn)發(fā)現(xiàn)并證明了:越特別的事物,越容易搶奪人們的注意力,并形成記憶點(diǎn)。這種人類行為、記憶現(xiàn)象后來(lái)以實(shí)驗(yàn)者的名字被命名為了「馮·雷斯托夫效應(yīng)」。「馮·雷斯托夫效應(yīng)」實(shí)際是隸屬于人類行為學(xué)、心理學(xué)方面的研究結(jié)果,歷史上過(guò)了許久才慢慢地被運(yùn)用于美學(xué)設(shè)計(jì)中來(lái)。

從該效應(yīng)被正式確立命名之后,基于它,后面還有許多科研學(xué)者對(duì)這種行為、記憶現(xiàn)象展開了更深入的研究,剖析了「馮·雷斯托夫效應(yīng)」的優(yōu)缺點(diǎn),并衍生出了許多其他的理論和學(xué)術(shù)說(shuō)。

我個(gè)人認(rèn)為其中比較重要,且對(duì)設(shè)計(jì)同行們有較大意義的兩個(gè)是:

  1. 獨(dú)特性可以讓內(nèi)容被人更輕易地關(guān)注和記住,但同時(shí)會(huì)攫取人們的注意力,從而降低人們對(duì)項(xiàng)目中其他內(nèi)容的關(guān)注度。因此構(gòu)建特殊性,就要承擔(dān)同時(shí)會(huì)削弱人們對(duì)項(xiàng)目整體記憶的風(fēng)險(xiǎn);
  2. 越突出、越新穎、越令人驚訝、越獨(dú)特的刺激,越能增強(qiáng)「馮·雷斯托夫效應(yīng)」的作用程度(1978·Taylor & Fiske 研究結(jié)論)。

我認(rèn)為這兩個(gè)衍生結(jié)論對(duì)設(shè)計(jì)人員最有意義的原因是,它們分別對(duì)應(yīng)了 Material Design “一個(gè)頁(yè)面只專注一件事情” 的設(shè)計(jì)原則 和 羅賓·威廉姆斯書中所說(shuō) “要對(duì)比就對(duì)比得足夠夸張” 的觀點(diǎn)。

我知道許多的產(chǎn)品設(shè)計(jì)者總是希望自己頁(yè)面上的每一個(gè)功能都被用戶看到,但你必須學(xué)會(huì)劃分優(yōu)先級(jí),請(qǐng)把「馮·雷斯托夫效應(yīng)」作用在真正重要且必須的事情上。

 

二、到底對(duì)設(shè)計(jì)有什么作用

從前面我的反復(fù)提及可以看出,「馮·雷斯托夫效應(yīng)」會(huì)影響到人們的注意力記憶兩個(gè)方面。拆解了這兩點(diǎn),就比較容易理解應(yīng)該如何將這個(gè)設(shè)計(jì)理論運(yùn)用在項(xiàng)目之中了。

 

作用一:對(duì)注意力的影響作用  

開頭我提到的羅振宇的觀點(diǎn)中,他就是利用了「馮·雷斯托夫效應(yīng)」對(duì)注意力的影響作用。

其實(shí)這一手法在UI設(shè)計(jì)中經(jīng)常被使用,不論出于商業(yè)價(jià)值考慮還是功能考慮,設(shè)計(jì)師們總是知道用視覺差異來(lái)吸引用戶的注意力。上案例:

我們看到,得到和汽車之家APP在常規(guī)的排版設(shè)計(jì)中遵循統(tǒng)一、和諧的視覺語(yǔ)言,壓低了次要功能的視覺層級(jí),再通過(guò)脫離常規(guī)視覺語(yǔ)言的設(shè)計(jì),抓取用戶注意力,吸引用戶關(guān)注,從而助力營(yíng)銷和商業(yè)目標(biāo)。

不光是商業(yè)設(shè)計(jì)中有很多案例,我們幾乎每天都接觸到的Badge(徽標(biāo))控件,實(shí)際也是為了構(gòu)建視覺上的獨(dú)特性,引起用戶的視覺關(guān)注。

所以在設(shè)計(jì)中,和諧、統(tǒng)一固然是基本,但正是因?yàn)橛行?,才讓設(shè)計(jì)師能夠發(fā)揮“無(wú)序”的功效和威力。

在《寫給大家看的設(shè)計(jì)書》中,羅賓·威廉姆斯總結(jié)了許多構(gòu)建對(duì)比的方式,比如 大小、字體、粗細(xì)、冷暖色、平滑與粗糙、水平與垂直、松與緊等等。這些方法均可以運(yùn)用到我們自己的設(shè)計(jì)中去。

 

作用二:對(duì)記憶力的影響作用  

你會(huì)記住生命中最極致快樂(lè)和最極致痛苦的時(shí)刻,因?yàn)樗绕鹌渌娜兆幼銐蛱貏e,這也是「馮·雷斯托夫效應(yīng)」作祟。別忘了「馮·雷斯托夫效應(yīng)」最開始本就是起源于行為和心理學(xué)。

讓特殊的日子被紀(jì)念,百度Doodle不就是做著這樣有趣并且有益于文化傳播的事嗎?

Doodle的出現(xiàn),已經(jīng)是將「馮·雷斯托夫效應(yīng)」作用于產(chǎn)品溫度和連接用戶情感的層面上了,傳遞了品牌調(diào)性與理念。

這一點(diǎn)也可以用于打造自身產(chǎn)品,不論是從功能、交互還是視覺,構(gòu)建產(chǎn)品的差異,從同質(zhì)化嚴(yán)重的互聯(lián)網(wǎng)現(xiàn)狀中脫穎出來(lái),就可以讓用戶深刻地記住你。例如馬云的雙十一,例如為了躲開馬云而發(fā)展出來(lái)的垂直電商…

 

三、反向運(yùn)用案例

反例一:太多的突出=沒(méi)突出  

前面我提到一句“正是因?yàn)橛行?,才讓設(shè)計(jì)師能夠發(fā)揮‘無(wú)序’的功效和威力”,所以越有序的內(nèi)容中出現(xiàn)一個(gè)越不和諧的元素,才能把「馮·雷斯托夫效應(yīng)」發(fā)揮得越極致。

看一個(gè)案例:以下兩個(gè)頁(yè)面,哪一個(gè)你更能關(guān)注到標(biāo)簽欄中的“搖現(xiàn)金”功能?毋庸置疑的答案是頁(yè)面2。

因?yàn)轫?yè)面1中金剛區(qū)和功能瓷片區(qū)搶走了用戶非常多的視覺關(guān)注,圖標(biāo)的用色在飽和度和對(duì)比度上也比較一致,我很難關(guān)注到標(biāo)簽欄中的活動(dòng)。而頁(yè)面2中“搖現(xiàn)金”圖標(biāo)的畫風(fēng)、色彩飽和度都與其他元素不一致,我雖然眼睛盯著金剛區(qū),但我的余光一直在被標(biāo)簽欄瘋狂拉扯。

當(dāng)然我這里只是為了論證太多的突出=沒(méi)突出的論點(diǎn),拼多多也許有自己的商業(yè)和功能考量。該案例在單一論點(diǎn)中進(jìn)行描述,只是想告訴大家:要發(fā)揮「馮·雷斯托夫效應(yīng)」的作用,前提就是先構(gòu)建“平庸的和諧”。不要想著每一個(gè)元素和功能都要突出,都突出=都不突出。

 

反例二:本末倒置  

受“危險(xiǎn)按鈕”的陶冶,曾經(jīng)設(shè)計(jì)師們都喜歡給負(fù)向情緒操作非常高的視覺層級(jí)。例如退出登錄。

實(shí)際上設(shè)計(jì)者是希望告知用戶此操作危險(xiǎn),視覺層面卻仿佛在瘋狂地暗示用戶“看我!然后點(diǎn)我”。雖然近些年在移動(dòng)端,這樣的矛盾設(shè)計(jì)已經(jīng)越來(lái)越少了。但這個(gè)“危險(xiǎn)按鈕”也真實(shí)地困惑了我很久…與其告訴用戶“這個(gè)操作很難危險(xiǎn)”,為何不直接讓用戶盡量忽視掉這個(gè)操作呢…

我至今沒(méi)有探索和查找到相關(guān)文獻(xiàn)來(lái)解釋為何“危險(xiǎn)按鈕”視覺層級(jí)這么高。但AntDesigng規(guī)定“危險(xiǎn)按鈕”一般還需要進(jìn)行二次確認(rèn)操作,些許解開了一點(diǎn)我的擔(dān)心。

但單從「馮·雷斯托夫效應(yīng)」來(lái)看,這樣的設(shè)計(jì)確實(shí)是有些本末倒置。在日常的設(shè)計(jì)當(dāng)中,也應(yīng)該極力避免。

 

原文地址:UCD耍家(公眾號(hào))

作者:Howiet


轉(zhuǎn)載請(qǐng)注明:學(xué)UI網(wǎng)》UI&UE實(shí)用方法論 | 做設(shè)計(jì)為什么需要“對(duì)比” :「馮·雷斯托夫效應(yīng)」

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群,每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì),如果有興趣的話,可以進(jìn)入一起成長(zhǎng)學(xué)習(xí),請(qǐng)掃碼藍(lán)小助,報(bào)下信息,藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(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 )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)


分享本文至:

日歷

鏈接

個(gè)人資料

存檔