層次感、三維效果、可視化體驗，視差滾動設計的萬般姿態都在這了

+ 查看更多

 

視差滾動是指讓多層背景（前景和背景）以不同的速度移動，形成立體的運動效果，以帶來出色的視覺體驗。舉個栗子來說，我們可以讓背景層、內容層（圖片、文本等）以不同的速度移動，做出漂亮的差異滾動效果。就目前而言，視差滾動效果仍是網頁設計領域的熱點趨勢，這是因為這種效果營造出來的層次感和三維效果可以帶給用戶身臨其境的感覺，能夠有效提高用戶參與度、加強用戶與網站的互動。除此以外，視差滾動還可以用在各種不同類型的網站中，幫助引導用戶將注意力放在CTA按鈕或其他內容元素上。當然，視差滾動效果也有自己的缺點：在移動設備上可能難以取得預期的效果。不過總的來看，在網站中使用視差效果還是利大于弊的，它能夠帶來其他設計技巧無法比擬的效果。今天小飛就給大家介紹介紹視差效果在網頁中的不同應用，并附有相應的栗子，大家可以點擊鏈接詳細了解一下。

 

 

 

除了豐富的層次感、獨特的三維體驗外，視差效果之所以能極大提高用戶參與度很大程度上還是因為它的引導作用，它能引導用戶不自覺的進行滾動，與網站設計進行長時間的交互。如何利用視差效果引導用戶滾動？最簡單的方法就是在頁面上設置"滾動"的文字樣式或是一些視覺線索暗示，比如箭頭等，幫助引導用戶從一開始就與網站進行互動，這在單頁面網站上尤為適用。網站就是這樣，它在網站主頁上使用了一個彈跳的向下箭頭，鼓勵用戶沿著我們既定的軌跡去瀏覽。

 

 

 

 

視差效果常涉及到不同層次間的變化，當它們與網站內容結合起來時，可以幫助實現時空或位置的流暢轉換或改變。就使用了視差效果展示時間變化，這個網站的背景上有一個縱向的時間軸，而前景中是不同時間段典型的車輛圖片。當你點擊滾動時，隨著時間的變化，這會出現不同的車輛圖片。而如果你打開背景音樂的話，你會發現背景音樂也是隨著時間而不斷變化的。這種設計能讓用戶不由自主的向下滾動，因為他們會想知道接下來的圖片是什么樣的。而這里的視差效果反過來也是同樣成立的，當你從下向上滾動頁面，時間軸和圖片會相應出現，背景音樂的呈現也是同理。

 

 

則在網站中使用視差效果展示了另一種變化--位置變化。在Sonance的主頁中，視差效果被用在主導航菜單上，這樣一來，用戶不僅可以享受到視差效果帶來的良好視覺體驗，還可以在瀏覽過程中清楚的知道自己位于哪個頁面。

 

 

 

 

還有一種使用視差滾動的有趣方法就是將它與色彩區塊相結合。區塊顏色的改變往往能給用戶帶來耳目一新的感覺，色彩的使用還能有效吸引用戶注意力。下面是視差效果與色彩區塊結合使用的兩個栗子。在網站中使用了白色的背景層和灰色的圖片層。不過當你將鼠標移到圖片元素上，圖片的顏色就會完全呈現。這里，視差效果、色彩和懸浮動畫三者的有機結合能夠給用戶留下深刻的印象，有效鼓勵用戶與每個元素進行互動。與此同時，這三種技巧也不會給用戶帶來認知負載，因為網站其他部分的設計很是簡潔，用戶會更愿意在這樣的網站中進行探索。

 

 

在網站中使用視差效果時也結合了色彩。這個網站使用四種顏色（紅、黃、藍、綠）將所有服裝分為四個系列（火、空氣、水、大地），用戶可以在代表不同的色塊中欣賞不同風格的模特和服飾。

 

 

 

 

視差效果還可以讓復雜的內容/沉重的文本區塊變得簡單輕松，幫助用戶更快完成網站內容信息的理解和消化。網站的關于頁面有點長，因此設計師在使用視差效果時將左邊的視覺元素（About）保持不動，讓右側的文本在用戶滾動頁面時逐步呈現。只有文本區塊內容全部呈現完了之后，用戶才會進行下一個區塊的瀏覽。這對于那些文本區塊比視覺元素更長的網站來說不失為一個好的解決方法。

 

 

的網站主頁使用了多個區塊呈現不同的菜單，這些區塊會根據用戶瀏覽和訂餐的歷史自動呈現出來。區塊由下到上的動畫很簡單，動畫背景也是與菜單相關的魚類圖片，所有元素的安排都服務于一個目的：讓用戶在理解菜單時更加容易。

 

 

 

 

視差效果還有一個妙用就是用來創造可視化體驗，很多網站都借助視差效果所帶來的三維效果為用戶提供更加現實的體驗。不過目前這些3D設計通常更加傾向于卡通式的風格，就像，不過當這個網站通過特定的設備來觀看時仍舊會有VR的效果。

 

 

這種體驗設計還有一個典型的栗子就是網站。它采用了向上滾動的方法，幫助用戶模擬在605英尺建筑物頂端俯瞰Seattle的景象。視差滾動存在于地平線和建筑內部的輪廓線之中，網頁左側有一個縱向的高度軸，當用戶點擊一次右上角的箭頭，高度會有一定程度的上升。這還有一些CTA按鈕，以及展示所處位置的導航欄。這種形式的設計是具有先導意義的，是視差滾動設計的一種創新。

 

 

 

雖然現在這種有趣的視差效果很是流行，但它卻并不適合每個網站，尤其是對那些移動設備用戶優先的網站。所以，各位站長大大們在網站中使用視差滾動效果之前一定要對目標用戶以及他們的喜好有一個大致的了解。另外，大大們可以先在網站的一個位置中使用視差效果，比如網站主頁，然后使用工具進行統計，看看這種效果是否為網站帶來了益處。如果這種方法確實能夠與網站的內容很好的結合在一起，那么它就不失為一種有趣的設計和互動方式。起飛頁就有不少應用了視差效果的網站模板，快來起飛頁自助建站平臺搭建一個屬于自己的響應式網站吧！