什麼是視差運動？視差運動是怎麼產生的呢？與交互的關係是什麼呢？
先來回想一下，在界面設計中有哪些方式可以表現信息的不同層級，大小，顏色，位置，陰影，模糊，透明度。這些方式大家可能已經非常熟悉。但事實上，在真實世界中，我們是如何分辨信息層級的？最熟悉的，不應該是距離嗎？
因為有了遠近的區別，才產生大小、清晰度、陰影等差別。但由於二維屏幕的限制，我們只能通多其他方式表現遠近，比如前景清晰後景模糊，近大遠小，陰影投射高度等等。
但歸結起來，這些都是用靜態的方式表現遠近，而今天想介紹的是一種動態的方式，視差運動。
視差運動這個名詞可能很少聽聞，但相信大家都有所印象，比如蘋果壁紙的透視模式，其實就是一種視差運動。更常見的應該是在一些橫向捲軸的遊戲裡面。
視差運動可以在平面中呈現出強烈的立體感，使得界面信息更加吸引（圖一）。
圖一
事實上，視差運動已經不是什麼新鮮概念。但是為了讓大家有更清晰的認知，筆者總結了一些心得。
視差運動在日常生活中很常見。回憶一下，當你坐在前進的列車上時，有沒有感覺距離你近的物體（如：圍欄）會運動特別快，而距離你遠的物體（如：遠處的樓房）會運動得相對慢很多。
那麼，是什麼導致了這樣的現象？
首先，我們需要明確一點，人眼判斷一個物體的快慢並不是以大地為參照物，而是以我們人眼本身為參照物。
如圖二，設人眼所在的位置為O，物體從A點到B點的實際速度為AB的距離/時間，但事實上，人眼感知的速度是夾角AOB的角度/時間。
明確這一點後，接下來就是基本的幾何問題：
圖二
第一種情況，平移運動，就好比你坐在前進列車上，窗外的物體其實就是在你視野中平移。
這種視差運動的原理如圖三，AB兩個物體在同樣的時間內平移了一段距離，但AB物體距離眼睛的距離有差異，在圖上可以明顯看出，夾角β小於夾角α。
也就是說，如果以人眼為參照物，AB兩個物體的角速度是不一樣的，這使得我們感覺遠處物體移動更慢。而這，就是視差運動。
圖三
第二種情況，旋轉運動，就好比你平時搖著頭看東西。這又有三種不同的子情況：旋轉中心是人眼本身、中心在人眼前和在人眼後。
先說一種最特殊的情況，旋轉中心在人眼前。如圖四，AB兩個物體同時繞著中心O旋轉，B物體離中心更遠。
可以看出，對於點O而言，兩個物體的角速度是一致的。但對於人眼而言，由於中心點不在人眼的位置，所以AB兩個物體的角速度是不一致的。
從圖中可知，夾角β大於夾角α。有趣的事情出現了，在平移的情況下遠處的物體感覺運動得更慢，但在這種情況下遠處的物體反而更快。
而剩餘的兩種子情況就不多闡述，相信聰明的你已經知道答案。
圖四
說了這麼多視差運動的原理，其實就是為了讓設計更加接近本質，更有說服力。
當看到一個好的設計時，不應忙著借鑑，應該深入思考其設計的源頭。就好比剛剛列舉的視差運動情況，大家都常見後景比前景慢的現象，但只要稍作分析就能發現，其實也會存在後景比前景快的情況。
視差運動的不同形式剛好對應著不同的屏幕交互：平移運動對應著滑動屏幕，旋轉運動對應著轉動屏幕。
隨著交互動作的發生，視差效果也會同時表現出來，如圖五、圖六所示。
需要強調的一點是，視差運動需與交互動作匹配，立體感才會更加真實，否則會有一種彆扭的生硬感。
圖五
圖六
我們已經知道現實中產生視差的基本原理，但投射到屏幕上應該怎樣去實現？
三個要點：分層、速度差和運動響應。
圖七
分層，即界面元素是相互分離可以獨立控制的。這就跟PS中的圖層概念一樣。一張圖片可由多個圖層組成，改變一個圖層不會影響其他圖層。
速度差，即界面元素在屏幕內運動的時候以不同的速度運動，且按圖層的順序逐層遞減或遞增。
運動響應，即當交互行為發生時，運動會隨之發生，而且即時響應。
具備以上三點，就會產生視差運動，元素將會活現於界面上。
首先，以平移的視差運動為例，運動越快的元素意味著越接近眼睛，但運動越快的元素卻越幹擾視野，所以請慎重控制速度。
其次，視差運動也有諸多弊端，比如：對內容的要求更高，以前只需要提供一張圖片素材，但視差運動要求提供多張圖片素材；對系統性能消耗更大，不流暢的界面反而更影響體驗。
最後，請不要濫用視差運動。處處強調等於沒有強調，處處驚喜等於沒有驚喜，作為一種能帶給用戶全新感官體驗的設計手段，克制使用，效果更佳。
作者：genrry，公眾號：設計師阿餘。熱愛設計，關注用戶體驗，分享設計思考。
本文由 @genrry 原創發布於人人都是產品經理。未經許可，禁止轉載
題圖來自Unsplash，基於CC0協議