信息層級(jí)的新維度:視差運(yùn)動(dòng)
什么是視差運(yùn)動(dòng)?視差運(yùn)動(dòng)是怎么產(chǎn)生的呢?與交互的關(guān)系是什么呢?
一、信息層級(jí)的表現(xiàn)方式
先來回想一下,在界面設(shè)計(jì)中有哪些方式可以表現(xiàn)信息的不同層級(jí),大小,顏色,位置,陰影,模糊,透明度。這些方式大家可能已經(jīng)非常熟悉。但事實(shí)上,在真實(shí)世界中,我們是如何分辨信息層級(jí)的?最熟悉的,不應(yīng)該是距離嗎?
因?yàn)橛辛诉h(yuǎn)近的區(qū)別,才產(chǎn)生大小、清晰度、陰影等差別。但由于二維屏幕的限制,我們只能通多其他方式表現(xiàn)遠(yuǎn)近,比如前景清晰后景模糊,近大遠(yuǎn)小,陰影投射高度等等。
但歸結(jié)起來,這些都是用靜態(tài)的方式表現(xiàn)遠(yuǎn)近,而今天想介紹的是一種動(dòng)態(tài)的方式,視差運(yùn)動(dòng)。
二、新的思路
視差運(yùn)動(dòng)這個(gè)名詞可能很少聽聞,但相信大家都有所印象,比如蘋果壁紙的透視模式,其實(shí)就是一種視差運(yùn)動(dòng)。更常見的應(yīng)該是在一些橫向卷軸的游戲里面。
視差運(yùn)動(dòng)可以在平面中呈現(xiàn)出強(qiáng)烈的立體感,使得界面信息更加吸引(圖一)。
圖一
事實(shí)上,視差運(yùn)動(dòng)已經(jīng)不是什么新鮮概念。但是為了讓大家有更清晰的認(rèn)知,筆者總結(jié)了一些心得。
三、視差運(yùn)動(dòng)的基本原理
視差運(yùn)動(dòng)在日常生活中很常見?;貞浺幌?,當(dāng)你坐在前進(jìn)的列車上時(shí),有沒有感覺距離你近的物體(如:圍欄)會(huì)運(yùn)動(dòng)特別快,而距離你遠(yuǎn)的物體(如:遠(yuǎn)處的樓房)會(huì)運(yùn)動(dòng)得相對(duì)慢很多。
那么,是什么導(dǎo)致了這樣的現(xiàn)象?
首先,我們需要明確一點(diǎn),人眼判斷一個(gè)物體的快慢并不是以大地為參照物,而是以我們?nèi)搜郾旧頌閰⒄瘴?/b>。
如圖二,設(shè)人眼所在的位置為O,物體從A點(diǎn)到B點(diǎn)的實(shí)際速度為AB的距離/時(shí)間,但事實(shí)上,人眼感知的速度是夾角AOB的角度/時(shí)間。
明確這一點(diǎn)后,接下來就是基本的幾何問題:
圖二
第一種情況,平移運(yùn)動(dòng),就好比你坐在前進(jìn)列車上,窗外的物體其實(shí)就是在你視野中平移。
這種視差運(yùn)動(dòng)的原理如圖三,AB兩個(gè)物體在同樣的時(shí)間內(nèi)平移了一段距離,但AB物體距離眼睛的距離有差異,在圖上可以明顯看出,夾角β小于夾角α。
也就是說,如果以人眼為參照物,AB兩個(gè)物體的角速度是不一樣的,這使得我們感覺遠(yuǎn)處物體移動(dòng)更慢。而這,就是視差運(yùn)動(dòng)。
圖三
第二種情況,旋轉(zhuǎn)運(yùn)動(dòng),就好比你平時(shí)搖著頭看東西。這又有三種不同的子情況:旋轉(zhuǎn)中心是人眼本身、中心在人眼前和在人眼后。
先說一種最特殊的情況,旋轉(zhuǎn)中心在人眼前。如圖四,AB兩個(gè)物體同時(shí)繞著中心O旋轉(zhuǎn),B物體離中心更遠(yuǎn)。
可以看出,對(duì)于點(diǎn)O而言,兩個(gè)物體的角速度是一致的。但對(duì)于人眼而言,由于中心點(diǎn)不在人眼的位置,所以AB兩個(gè)物體的角速度是不一致的。
從圖中可知,夾角β大于夾角α。有趣的事情出現(xiàn)了,在平移的情況下遠(yuǎn)處的物體感覺運(yùn)動(dòng)得更慢,但在這種情況下遠(yuǎn)處的物體反而更快。
而剩余的兩種子情況就不多闡述,相信聰明的你已經(jīng)知道答案。
圖四
說了這么多視差運(yùn)動(dòng)的原理,其實(shí)就是為了讓設(shè)計(jì)更加接近本質(zhì),更有說服力。
當(dāng)看到一個(gè)好的設(shè)計(jì)時(shí),不應(yīng)忙著借鑒,應(yīng)該深入思考其設(shè)計(jì)的源頭。就好比剛剛列舉的視差運(yùn)動(dòng)情況,大家都常見后景比前景慢的現(xiàn)象,但只要稍作分析就能發(fā)現(xiàn),其實(shí)也會(huì)存在后景比前景快的情況。
四、視差運(yùn)動(dòng)與交互
視差運(yùn)動(dòng)的不同形式剛好對(duì)應(yīng)著不同的屏幕交互:平移運(yùn)動(dòng)對(duì)應(yīng)著滑動(dòng)屏幕,旋轉(zhuǎn)運(yùn)動(dòng)對(duì)應(yīng)著轉(zhuǎn)動(dòng)屏幕。
隨著交互動(dòng)作的發(fā)生,視差效果也會(huì)同時(shí)表現(xiàn)出來,如圖五、圖六所示。
需要強(qiáng)調(diào)的一點(diǎn)是,視差運(yùn)動(dòng)需與交互動(dòng)作匹配,立體感才會(huì)更加真實(shí),否則會(huì)有一種別扭的生硬感。
圖五
圖六
五、如何實(shí)現(xiàn)視差運(yùn)動(dòng)
我們已經(jīng)知道現(xiàn)實(shí)中產(chǎn)生視差的基本原理,但投射到屏幕上應(yīng)該怎樣去實(shí)現(xiàn)?
三個(gè)要點(diǎn):分層、速度差和運(yùn)動(dòng)響應(yīng)。
圖七
分層,即界面元素是相互分離可以獨(dú)立控制的。這就跟PS中的圖層概念一樣。一張圖片可由多個(gè)圖層組成,改變一個(gè)圖層不會(huì)影響其他圖層。
速度差,即界面元素在屏幕內(nèi)運(yùn)動(dòng)的時(shí)候以不同的速度運(yùn)動(dòng),且按圖層的順序逐層遞減或遞增。
運(yùn)動(dòng)響應(yīng),即當(dāng)交互行為發(fā)生時(shí),運(yùn)動(dòng)會(huì)隨之發(fā)生,而且即時(shí)響應(yīng)。
具備以上三點(diǎn),就會(huì)產(chǎn)生視差運(yùn)動(dòng),元素將會(huì)活現(xiàn)于界面上。
最后
首先,以平移的視差運(yùn)動(dòng)為例,運(yùn)動(dòng)越快的元素意味著越接近眼睛,但運(yùn)動(dòng)越快的元素卻越干擾視野,所以請(qǐng)慎重控制速度。
其次,視差運(yùn)動(dòng)也有諸多弊端,比如:對(duì)內(nèi)容的要求更高,以前只需要提供一張圖片素材,但視差運(yùn)動(dòng)要求提供多張圖片素材;對(duì)系統(tǒng)性能消耗更大,不流暢的界面反而更影響體驗(yàn)。
最后,請(qǐng)不要濫用視差運(yùn)動(dòng)。處處強(qiáng)調(diào)等于沒有強(qiáng)調(diào),處處驚喜等于沒有驚喜,作為一種能帶給用戶全新感官體驗(yàn)的設(shè)計(jì)手段,克制使用,效果更佳。
作者:genrry,公眾號(hào):設(shè)計(jì)師阿余。熱愛設(shè)計(jì),關(guān)注用戶體驗(yàn),分享設(shè)計(jì)思考。
本文由 @genrry 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可,禁止轉(zhuǎn)載
題圖來自Unsplash,基于CC0協(xié)議
知乎的廣告用的這個(gè)原理
說實(shí)話,經(jīng)濟(jì)形勢已經(jīng)不容搞這些花里胡哨的了 ??
好有意思啊…