導讀：滾動視差是一種頁面視覺效果，可以使頁面呈現出豐富的層次感和立體感，吸引和打動用戶。本文将為你揭秘滾動視差的設計方法，一起來看看吧。

一、滾動視差的方式

滾動視差(Parallax Scrolling)是一種很酷的頁面視覺效果。其核心是通過控制位于不同圖層的元素的運動速度、距離、位置與方向，讓二維平面上的物體呈現出三維立體的空間感，打造沉浸式浏覽體驗。

滾動視差有很多種滾動方式，最為常見的有：垂直滾動視差、水平滾動視差、轉場視差和縮放視差。

1. 垂直滾動視差

垂直滾動視差是從上到下滾動呈現頁面的信息内容。将背景元素分布在不同的圖層，為其添加不同的速度和移動方式，用戶滾動鼠标滾輪浏覽頁面時，會看到豐富的視覺層次和效果。

三隻松鼠的官方網站，城堡背景、标題文字和松鼠被依次設置在幾個不同圖層；并為元素設置不同的運動速度：城堡慢速、标題中速、松鼠快速；同時利用元素移動時産生的位置關系增強空間感。松鼠在快速移動時遮擋住了文字标題，創造出豐富的形成沉浸式觀感，使品牌形象和風格深入人心：

2. 水平滾動視差

水平滾動視差和垂直滾動視差類似，隻是方向有所不同，從左向右 / 從右向左滾動呈現頁面内容。用戶滾動鼠标滾輪或點擊切換按鈕時，會看到效果。

hotdot 在不同頁面左右切換的過程中，利用不同圖層元素運動速度的差異作出視覺層次；利用焦距對焦，将前景元素做了模糊處理，主體元素清晰高亮；并利用顔色襯托，使用暗色做背景，加深了空間層次：

3. 轉場視差

轉場視差是在改變場景或切換頁面的過程中形成的視覺動效，這些動效會突顯畫面内容和切換過程。

Every Last Drop 是一個展示生活用水場景的網站，當用戶向下滾動頁面時，會看到各種不同的生活場景裡水資源的消耗過程和數據。頁面采用了不同場景，同一個主角，同一種畫面底色的分割方式，以及元素的入場方式，使頁面故事完整統一：

4. 縮放視差

縮放視差會在頁面的視覺中心定位出焦點（透視消點），頁面元素沿透視線移動産生近大遠小的縮放動效，讓用戶感受到極強的透視效果和三維空間感。

Beer Camp 網站按照頁面導航将内容劃分為5個層級，通過鼠标滾動連接起每一層級的信息。依靠鼠标滾動，沿着透視線平滑縮放頁面，實現一鏡到底的空間進深：

以上提到的這4種頁面滾動方式是可以結合起來使用的，應用過程中需要做好引導，讓用戶在頁面中不至于因為場景切換而迷失：

Apple AirPods Pro 的産品展示頁面使用了多種滾動視差的效果，充分的展示産品特性和功能：

二、滾動視差的應用

滾動視差可以從面、線、點三個角度進行應用：

1. 面：全頁面

整個頁面帶有故事性情節，通過全頁面的滾動視差設計展示時間或事件的發展變化，創造沉浸式體驗。

案例：Prosche 官網中展示了不同時代的保時捷車型演進的過程，背景和配樂也會随着時代的變化發生改變，帶給用戶沉浸式體驗：

2. 線：頁面部分内容

并不需要整個頁面都使用滾動視差的效果，隻針對部分功能或内容使用滾動視差，根據要展示内容的邏輯進行設計，使内容和頁面架構更易理解，同時也能吸引用戶不停的浏覽。

數據分析平台 convertlab 将數據增長模型的分析步驟設置成滾動視差的效果，所有信息沿着數據加工通道向中心彙聚，呈線性布局，一步步引導用戶了解數據分析的全過程：

3. 點：頁面局部内容

頁面局部單個元素使用動效視差，豐富頁面細節和層次。局部元素的動态改變也會吸引到用戶的注意力，使其修飾的内容更易被閱讀：

丹麥建築事務所 BIG 的官方網站，将做過的建築案例以 icon 的形式按年份排列展示，鼠标移動到圖标上面，瞬間放大的同時也會顯示出項目的具體信息：

三、滾動視差的設計方法

首先我們要明白，并非所用内容都适合使用滾動視差，也不是為了 “滾動” 而滾動。炫酷的效果始終要服務于頁面内容和信息的展示，講述一個完整的故事。設計滾動視差的頁面分為以下幾步：

1. 故事内容

就好像一場電影需要有完整的故事線一樣，明确需要使用滾動視差的内容，并評估是否能通過滾動視差達到超出預期的設計效果。構建整個内容的故事線和邏輯，奠定頁面的設計基調和氛圍。

2. 視覺線索

對于用戶的視線流引導很重要，設計引導用戶的視覺線索，貫穿始終，讓用戶有邏輯、有節奏的了解内容。

3. 元素分層

對内容元素進行分解與編組，安排在不同的圖層上，保證各圖層的獨立性：

4. 運動設置

設置好速度、方向和距離等要素，根據内容需求，使圖層彼此産生速度差。

5. 互動方式

設計用戶與頁面交互時的頁面效果及響應方式，即設計鼠标在頁面上的操作帶來的交互動态效果，讓動效能夠實時相應。

6. 開發上線

與開發人員做好對接，滾動狀态用語言很難描述清晰，設計師可以使用原型demo展示設計效果，不僅可以自己檢視設計理念，也為後期校對提供佐證。簡單的 demo 可以用 PPT、PS、AE 等軟件制作。

作者：元堯；長弓小子。

本文由@ 元堯 原創發布于人人都是産品經理。未經許可，禁止轉載。

題圖來自 Unsplash，基于CC0協議。

,

更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!

查看全部