如圖二，設(shè)人眼所在的位置為O，物體從A點到B點的實際速度為AB的距離/時間，但事實上，人眼感知的速度是夾角AOB的角度/時間。

明確這一點后，接下來就是基本的幾何問題：

圖二

第一種情況，平移運動，就好比你坐在前進列車上，窗外的物體其實就是在你視野中平移。

這種視差運動的原理如圖三，AB兩個物體在同樣的時間內(nèi)平移了一段距離，但AB物體距離眼睛的距離有差異，在圖上可以明顯看出，夾角β小于夾角α。

也就是說，如果以人眼為參照物，AB兩個物體的角速度是不一樣的，這使得我們感覺遠(yuǎn)處物體移動更慢。而這，就是視差運動。

圖三

第二種情況，旋轉(zhuǎn)運動，就好比你平時搖著頭看東西。這又有三種不同的子情況：旋轉(zhuǎn)中心是人眼本身、中心在人眼前和在人眼后。

先說一種最特殊的情況，旋轉(zhuǎn)中心在人眼前。如圖四，AB兩個物體同時繞著中心O旋轉(zhuǎn)，B物體離中心更遠(yuǎn)。

可以看出，對于點O而言，兩個物體的角速度是一致的。但對于人眼而言，由于中心點不在人眼的位置，所以AB兩個物體的角速度是不一致的。

從圖中可知，夾角β大于夾角α。有趣的事情出現(xiàn)了，在平移的情況下遠(yuǎn)處的物體感覺運動得更慢，但在這種情況下遠(yuǎn)處的物體反而更快。

而剩余的兩種子情況就不多闡述，相信聰明的你已經(jīng)知道答案。

圖四

說了這么多視差運動的原理，其實就是為了讓設(shè)計更加接近本質(zhì)，更有說服力。

當(dāng)看到一個好的設(shè)計時，不應(yīng)忙著借鑒，應(yīng)該深入思考其設(shè)計的源頭。就好比剛剛列舉的視差運動情況，大家都常見后景比前景慢的現(xiàn)象，但只要稍作分析就能發(fā)現(xiàn)，其實也會存在后景比前景快的情況。

四、視差運動與交互

視差運動的不同形式剛好對應(yīng)著不同的屏幕交互：平移運動對應(yīng)著滑動屏幕，旋轉(zhuǎn)運動對應(yīng)著轉(zhuǎn)動屏幕。

隨著交互動作的發(fā)生，視差效果也會同時表現(xiàn)出來，如圖五、圖六所示。

需要強調(diào)的一點是，視差運動需與交互動作匹配，立體感才會更加真實，否則會有一種別扭的生硬感。

圖五

圖六

五、如何實現(xiàn)視差運動

我們已經(jīng)知道現(xiàn)實中產(chǎn)生視差的基本原理，但投射到屏幕上應(yīng)該怎樣去實現(xiàn)？

三個要點：分層、速度差和運動響應(yīng)。

圖七

分層，即界面元素是相互分離可以獨立控制的。這就跟PS中的圖層概念一樣。一張圖片可由多個圖層組成，改變一個圖層不會影響其他圖層。

速度差，即界面元素在屏幕內(nèi)運動的時候以不同的速度運動，且按圖層的順序逐層遞減或遞增。

運動響應(yīng)，即當(dāng)交互行為發(fā)生時，運動會隨之發(fā)生，而且即時響應(yīng)。

具備以上三點，就會產(chǎn)生視差運動，元素將會活現(xiàn)于界面上。

最后

首先，以平移的視差運動為例，運動越快的元素意味著越接近眼睛，但運動越快的元素卻越干擾視野，所以請慎重控制速度。

其次，視差運動也有諸多弊端，比如：對內(nèi)容的要求更高，以前只需要提供一張圖片素材，但視差運動要求提供多張圖片素材；對系統(tǒng)性能消耗更大，不流暢的界面反而更影響體驗。

最后，請不要濫用視差運動。處處強調(diào)等于沒有強調(diào)，處處驚喜等于沒有驚喜，作為一種能帶給用戶全新感官體驗的設(shè)計手段，克制使用，效果更佳。

作者：genrry，公眾號：設(shè)計師阿余。熱愛設(shè)計，關(guān)注用戶體驗，分享設(shè)計思考。

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

題圖來自Unsplash，基于CC0協(xié)議