視差效果仍然是最熱門的網(wǎng)頁設(shè)計趨勢之一。 當(dāng)用戶滾動時背景和前景以不同的速度移動，以便兩個獨(dú)立的層在同時移動的時候產(chǎn)生時間或速度上的差異感。這種技術(shù)對于現(xiàn)實(shí)的網(wǎng)站設(shè)計來說依然是一個很有吸引力的交互效果。

這種效果幾乎可以用于所有的網(wǎng)站類型，是創(chuàng)建和增加用戶參與度的有趣方式。 視差效果的好處在于你不必在設(shè)計的每個頁面上使用它們，視差滾動是一種很棒的首頁技術(shù)，可以幫助用戶關(guān)注到號召性用語或其他內(nèi)容。

視差效果創(chuàng)造了深度和距離的感覺，并且比其他技術(shù)具有更大的三維感，使用戶感覺像是設(shè)計的一部分。

同樣，視差效果的缺點(diǎn)在于它們并不能很好的兼容移動設(shè)備。以下我們將向你提供五種你可以考慮使用的視差效果和風(fēng)格。

1. 選擇效果（Animation to Show Change）

使用視差效果來展示項(xiàng)目中的不同選項(xiàng)。 運(yùn)動層可以傳達(dá)時間，空間或位置的距離。

視差效果可以很好地展示當(dāng)用戶使用網(wǎng)站時內(nèi)容將根據(jù)不同選項(xiàng)的不同變化。

在上面保時捷的網(wǎng)站上設(shè)計中展示了隨著時間的變化，每個汽車圖像和背景的不同變化（你會發(fā)現(xiàn)北京音樂也會隨著時間的選項(xiàng)進(jìn)行切換）。

該設(shè)計讓用戶情不自禁的想要持續(xù)滾動，因?yàn)槟阆肟纯聪乱惠v車的樣子。 這種技術(shù)可以按時間順序（如此處所示）或反向時間順序工作。 

Sonance使用視差來展示另一種變化 - 整個設(shè)計中的位置變化。 視差效果是網(wǎng)站整體導(dǎo)航模式的一部分，并且?guī)椭崾居脩粼谡麄€網(wǎng)站體驗(yàn)中的位置。

2.鼓勵滾動（Encourage Scrolling）

視差效果可以幫助創(chuàng)建參與度的原因是因?yàn)樗鼈児膭顫L動以使用戶在更長的時間段內(nèi)與設(shè)計交互。

許多具有視差效果的設(shè)計都在主頁上提供了“滾動”指令或提示，以幫助從一開始就鼓勵這種交互形式（The Walking Dead Zombiefied的主頁在上面，在圖片之前的頁面上包含此說明）。

“行尸走肉”的網(wǎng)站設(shè)計上通過視差來做一些與鼓勵互動有點(diǎn)不同的事情 - 當(dāng)通過滾動時，角色會穿過不同的漫畫風(fēng)格的面板，而不是上下移動。

3.運(yùn)動和色彩（Movement and Color）

使用視差滾動最有趣的方法之一是將顏色合并到不同的內(nèi)容“面板”中以展示元素或項(xiàng)目。 顏色變化和動畫的改變可以表示新的版塊或內(nèi)容。

顏色也是一個引人注目的設(shè)計工具，可以幫助吸引用戶。

上面的Werkstatt在其網(wǎng)站設(shè)計中使用了一個白色和灰色的寄出過渡色，在元素和文本之間有視差層。 但是，懸停動作可以使每個項(xiàng)目都煥發(fā)生機(jī)。 組合效果很好，因?yàn)樵O(shè)計的其余部分很簡單，它鼓勵用戶與每個單獨(dú)的元素進(jìn)行交互。

Lois Jeans采用另一種使用顏色的視差方法。 每種新顏色都突出了服裝活動的不同部分 - 購物者可以在不同的自然元素中看到牛仔褲的變化，包括火，空氣，水和泥土。

4.使信息更容易被消化（Make Information Easier to Digest）

視差效果可以幫助使復(fù)雜的信息或繁重的文本塊更小，更易閱讀，更容易被消化。 當(dāng)你考慮移動類型時，這是一個有趣的概念，但實(shí)際的實(shí)踐涉及移動容納類型的容器。

上面的例子中顯示了這個概念的兩個不同的應(yīng)用。

Melanie David在它的屏幕上有一個很長的介紹。 左側(cè)用于顯示導(dǎo)航元素在頁面靜止的時候是不會變化的，當(dāng)用戶滾動右側(cè)的文本時，左側(cè)的導(dǎo)航標(biāo)題將更具右側(cè)的內(nèi)容對應(yīng)顯示為相應(yīng)的導(dǎo)航欄目。 當(dāng)文本塊結(jié)束，頁面的兩側(cè)移動到下一部分，對于比可視內(nèi)容區(qū)域更長的文本塊，它是一個很好的解決方案。

Le Duc餐廳根據(jù)你閱讀和訂購食品的方式，根據(jù)菜單的不同部分使用單獨(dú)的區(qū)塊。 動畫很簡單，有趣的魚背景 - 告訴用戶一些關(guān)于餐飲場所的東西 - 并使菜單易于消化。

5.可視化“數(shù)字”現(xiàn)實(shí)（Visualize “Digital” Reality）

視差效果的最大用途之一是幫助用戶想象他們無法看到的東西。 更多設(shè)計使用三維和視差動畫的組合來創(chuàng)建更逼真的體驗(yàn)。

這些3D設(shè)計往往屬于更卡通風(fēng)格的體驗(yàn)，例如上面的Madwell，但當(dāng)設(shè)計與特定類型的設(shè)備一起工作時，也可以具有更多VR感覺。

使用這種視差效果的網(wǎng)站的一個典型例子是he Seattle Space Needle網(wǎng)站設(shè)計。 它使用向上滾動技術(shù)來模擬地標(biāo)觀光的情形。

視差滾動通過一些號召性用語消息和一個顯示目前位置有多高的導(dǎo)航欄，將天際線移動到建筑物內(nèi)部。 該設(shè)計具有教育性，冒險性，并向用戶展示了沒有動畫效果的話難以想象的東西。

總結(jié)

雖然視差效果既時髦又有趣，但它們并非適用于所有項(xiàng)目。 同樣重要的是要考慮某些設(shè)備上的某些受眾可能難以瀏覽包含大量動畫的網(wǎng)站。

在添加視差效果之前，請確認(rèn)用戶及其偏好。 你可以先嘗試從一個位置（例如主頁）開始小的視差效果，并跟蹤分析以查看它是否適合你。

在處理內(nèi)容和消息時使用視差。 這種時髦的技術(shù)應(yīng)該很有趣，可以將設(shè)計和交互完美的結(jié)合在一起。

----圖文來自：design shack 

----由深圳網(wǎng)站建設(shè)公司-Clh翻譯編輯整理，為您提供更多有關(guān)深圳網(wǎng)站建設(shè)、網(wǎng)站設(shè)計、網(wǎng)頁設(shè)計及其他互聯(lián)網(wǎng)應(yīng)用服務(wù)