Web設計中對視差設計的誤區

【編者按】視差設計作為一種非常流行的Web設計技術，被越來越多的網站所應用。而有些網站為了追隨潮流，彰顯時代氣息，在未真正理解什么是視差設計的前提下就把它應用到網站設計上。這不僅影響用戶體驗，還會對用戶真正理解視差設計產生誤導。

英國設計師、創意總監Rob Palmer就此在Medium發表了一篇《 The Troublesome Misconception of Parallax in Web Design》他告訴大家，真正的視差設計并不是一些花俏的滾動特效和陰影，必須具備：觀察者視圖、背景視圖還需要有中間參照物。下面是對原文的摘譯：

最近瀏覽了一篇“視差效果最好的前40名網站”，發現里面的觀點存在誤導性、并且有些應用程序也不屬于視差設計。

下面就Web設計中的視差設計技術發點牢騷，我們常常會在一些網站上看到一些流行的視差設計示例等內容，而其中很多示例并沒真正采用視差設計技術，這有可能是因為：

• 創造者（設計師、開發者、企業）可能并未真正理解視差是什么，也可能是因為他們沒能力能夠很好地實行視差效果、也可能是因為……
• 一直宣傳使用視差特效的網站，因為網站上面運用了一些花俏的滾動特效就把它當做“視差滾動網站”；
• 用戶被這些花俏的效果和一些錯誤的文章所忽悠，誤以為他們正在體驗的就是視差特效。

目前，大量的網站會濫用各種特效，人們在瀏覽網站時，甚至會把這些特效看成是一種標準。

本文將對這些觀點進行糾正，對視差特效概念做出具體的闡述，并且告訴大家如何應用它們。

視差是什么？

首先讓我們來明確“視差”的具體定義。

視差，就是位移或一個物體在不同的光線下查看，所表現出來的位置區別。

這里可以從兩方面來強調這個光線：首先是沿著不同的光線。視線需要一個初始參考點，并且從這頭到終點處能有一個清晰的視覺。其次需要強調的是“物體的明顯位置”。

物體的明顯位置，請大家記住這一點：這兩種線的結合才是視差與一些花俏的滾動特效的核心不同之處。

這句話告訴我們，要實現真正的視差，必須要有下面兩點：a）物體或位置聚焦；b）一個物體在一個給定移動空間必須有明顯的位置。本質上來講，建立一種深度知覺或立體觀測。

對于立體觀測，我們不會太深入地探討，我們會討論與之相關且有趣的話題，如光線和不正常的雙眼視覺，但從文章角度來看，無論人類的視覺如何，正常還是雙目視覺（binocular vision），都是有能力去查看和使用立體觀測的。它允許人們制定兩個獨立的場景，人們的大腦可以在一個單獨的視覺場景中計算深度，人們試圖在Web設計中復制這樣的效果，而這就是視差特效。

下面來看一些示例，大家可以邊看邊判斷，它們是否是真正的視差網站。

www.nytimes.com/projects/2012/snow-fall/

http://journey.lifeofpimovie.com/

http://shibui.me/web/scroll/

http://brokentwill.co.uk/

http://www.bettybetty.de/

http://www.theqcamera.com/

http://scytale.pt/

http://www.madebyblock.com/

以上這些例子均摘自“一些令人驚訝的視差列表”等文章，事實上卻沒有一個與視差有關。為什么這么說，回到開頭關于視差的定義，對象（object）、兩條線的交集、如果沒有這兩者，誰都無法創建出視差特效。

真實示例

這是一幅毫無修飾和加工的圖形，以此來突顯視差特效。

當你向電腦屏幕傾斜時，你會看到更多的墻面，這是因為你與屏幕（物體）的距離要近于墻面（遠參考點）的距離，并且會覺得屏幕移動會更快些，因此，會給你帶來一些深度知覺。

關于這個例子的另一個有趣試驗方法是，如果你兩眼睜開，并且針對某個固定位置向右移，然后閉上你的右眼，你所看到的墻面將會變少。

由于我們的左眼以銳角的角度去查看墻面周圍的物體，因此所看到的墻面會變少。同樣，如果你保持同樣的傾斜度，睜開右眼，閉上左眼，你會看到相同的墻面數。

上面所做的雙眼視差對真正理解視差特效也非常重要。

如何在網頁中真正實現視差特效？

在Web設計中，真正的視差是虛擬出現實生活中的立體視覺藝術，在前面已經指出，想要真正實現這種效果必不可少的兩大因素：對象和兩行線。這意味著網站必須具備：

• 觀看者或一個起始參考點
• 一個對象（參照物）
• 背景或距離參考點
• 一個動作或者是能夠觸發運動的某個東西

如果上面所列舉的網站從內容到用戶去改變初始參照物，它們可以實現真正的視差效果，同時，基于用戶觀看屏幕時的距離移動來操作遠方的參照物。這里有一些瀏覽器示例，利用桌面相機追蹤用戶觀看屏幕的角度，并進行相應地顯示。

然而，這對于瀏覽一個網站來說，并不實際。所以，直到有關運動控制能夠成為常態，但這并不是真正可行的選擇。

對象

對象是支點，也是焦點。這正是上面那些網站所缺失的核心內容。創建兩個滾動面，相互以不同的速度進行移動是可以的，并且當用戶滾動時，給出一些不錯的效果。但無論怎樣，它都缺少一個核心因素，對象。前面的那個面板可以作為起始參照物，后邊的可以作為遠處的參照物。但為了達到預期的效果，我們需要添加一個對象。

對象可以移動，但在某種程度上，只會呈現出兩個面板的實際運動。當移動應用于對象時，才會讓人覺得自然。

請記住，我們創建視差特效需要試圖模擬立體感。當你想要把某個區域設計成視差時，需要考慮到運動的每個因素以及它們之間該如何過渡。

為了進一步增強視差效果，并且在Web上進行真實演示，Matthew Wagerfield和Claudio Guglieri創建 Parallax.js庫，它不僅讓人們真正的理解視差，而且還可以對智能設備的方向作出反應。在沒有陀螺儀或運動檢測硬件可用的時候，使用光標的位置來代替。

總結

設計師只有在理解某種樣式/效果的前提下，才能把他們應用到設計當中。視差設計是一種非常流行的Web設計技術，如果我們想把它應用到設計中來凸顯產品，那么我們應該認真學習視差設計技術，并且花時間好好去理解它。

下面跟大家分享一些真正運用視差特效的網站，它們不僅把視差技術運用的淋漓盡致，而且也非常有創意。

http://hotdot.pro/en/#

http://www.madwell.com/

http://discover.store.sony.com/be-moved/ 

http://www.spaceneedle.com/home/ 

http://graphicnovel-hybrid4.peugeot.com/

http://www.flatvsrealism.com/ 

來自： Medium

生活不易，碼農辛苦
如果您覺得本網站對您的學習有所幫助,可以手機掃描二維碼進行捐贈