中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

導(dǎo)讀：滾動(dòng)視差是一種頁(yè)面視覺效果，可以使頁(yè)面呈現(xiàn)出豐富的層次感和立體感，吸引和打動(dòng)用戶。本文將為你揭秘滾動(dòng)視差的設(shè)計(jì)方法，一起來(lái)看看吧。

一、滾動(dòng)視差的方式

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

滾動(dòng)視差有很多種滾動(dòng)方式，最為常見的有：垂直滾動(dòng)視差、水平滾動(dòng)視差、轉(zhuǎn)場(chǎng)視差和縮放視差。

1. 垂直滾動(dòng)視差

垂直滾動(dòng)視差是從上到下滾動(dòng)呈現(xiàn)頁(yè)面的信息內(nèi)容。將背景元素分布在不同的圖層，為其添加不同的速度和移動(dòng)方式，用戶滾動(dòng)鼠標(biāo)滾輪瀏覽頁(yè)面時(shí)，會(huì)看到豐富的視覺層次和效果。

三只松鼠的官方網(wǎng)站，城堡背景、標(biāo)題文字和松鼠被依次設(shè)置在幾個(gè)不同圖層；并為元素設(shè)置不同的運(yùn)動(dòng)速度：城堡慢速、標(biāo)題中速、松鼠快速；同時(shí)利用元素移動(dòng)時(shí)產(chǎn)生的位置關(guān)系增強(qiáng)空間感。松鼠在快速移動(dòng)時(shí)遮擋住了文字標(biāo)題，創(chuàng)造出豐富的形成沉浸式觀感，使品牌形象和風(fēng)格深入人心：

2. 水平滾動(dòng)視差

水平滾動(dòng)視差和垂直滾動(dòng)視差類似，只是方向有所不同，從左向右 / 從右向左滾動(dòng)呈現(xiàn)頁(yè)面內(nèi)容。用戶滾動(dòng)鼠標(biāo)滾輪或點(diǎn)擊切換按鈕時(shí)，會(huì)看到效果。

hotdot 在不同頁(yè)面左右切換的過(guò)程中，利用不同圖層元素運(yùn)動(dòng)速度的差異作出視覺層次；利用焦距對(duì)焦，將前景元素做了模糊處理，主體元素清晰高亮；并利用顏色襯托，使用暗色做背景，加深了空間層次：

3. 轉(zhuǎn)場(chǎng)視差

轉(zhuǎn)場(chǎng)視差是在改變場(chǎng)景或切換頁(yè)面的過(guò)程中形成的視覺動(dòng)效，這些動(dòng)效會(huì)突顯畫面內(nèi)容和切換過(guò)程。

Every Last Drop 是一個(gè)展示生活用水場(chǎng)景的網(wǎng)站，當(dāng)用戶向下滾動(dòng)頁(yè)面時(shí)，會(huì)看到各種不同的生活場(chǎng)景里水資源的消耗過(guò)程和數(shù)據(jù)。頁(yè)面采用了不同場(chǎng)景，同一個(gè)主角，同一種畫面底色的分割方式，以及元素的入場(chǎng)方式，使頁(yè)面故事完整統(tǒng)一：

4. 縮放視差

縮放視差會(huì)在頁(yè)面的視覺中心定位出焦點(diǎn)（透視消點(diǎn)），頁(yè)面元素沿透視線移動(dòng)產(chǎn)生近大遠(yuǎn)小的縮放動(dòng)效，讓用戶感受到極強(qiáng)的透視效果和三維空間感。

Beer Camp 網(wǎng)站按照頁(yè)面導(dǎo)航將內(nèi)容劃分為5個(gè)層級(jí)，通過(guò)鼠標(biāo)滾動(dòng)連接起每一層級(jí)的信息。依靠鼠標(biāo)滾動(dòng)，沿著透視線平滑縮放頁(yè)面，實(shí)現(xiàn)一鏡到底的空間進(jìn)深：

以上提到的這4種頁(yè)面滾動(dòng)方式是可以結(jié)合起來(lái)使用的，應(yīng)用過(guò)程中需要做好引導(dǎo)，讓用戶在頁(yè)面中不至于因?yàn)閳?chǎng)景切換而迷失：

Apple AirPods Pro 的產(chǎn)品展示頁(yè)面使用了多種滾動(dòng)視差的效果，充分的展示產(chǎn)品特性和功能：

二、滾動(dòng)視差的應(yīng)用

滾動(dòng)視差可以從面、線、點(diǎn)三個(gè)角度進(jìn)行應(yīng)用：

1. 面：全頁(yè)面

整個(gè)頁(yè)面帶有故事性情節(jié)，通過(guò)全頁(yè)面的滾動(dòng)視差設(shè)計(jì)展示時(shí)間或事件的發(fā)展變化，創(chuàng)造沉浸式體驗(yàn)。

案例：Prosche 官網(wǎng)中展示了不同時(shí)代的保時(shí)捷車型演進(jìn)的過(guò)程，背景和配樂(lè)也會(huì)隨著時(shí)代的變化發(fā)生改變，帶給用戶沉浸式體驗(yàn)：

2. 線：頁(yè)面部分內(nèi)容

并不需要整個(gè)頁(yè)面都使用滾動(dòng)視差的效果，只針對(duì)部分功能或內(nèi)容使用滾動(dòng)視差，根據(jù)要展示內(nèi)容的邏輯進(jìn)行設(shè)計(jì)，使內(nèi)容和頁(yè)面架構(gòu)更易理解，同時(shí)也能吸引用戶不停的瀏覽。

數(shù)據(jù)分析平臺(tái) convertlab 將數(shù)據(jù)增長(zhǎng)模型的分析步驟設(shè)置成滾動(dòng)視差的效果，所有信息沿著數(shù)據(jù)加工通道向中心匯聚，呈線性布局，一步步引導(dǎo)用戶了解數(shù)據(jù)分析的全過(guò)程：

3. 點(diǎn)：頁(yè)面局部?jī)?nèi)容

頁(yè)面局部單個(gè)元素使用動(dòng)效視差，豐富頁(yè)面細(xì)節(jié)和層次。局部元素的動(dòng)態(tài)改變也會(huì)吸引到用戶的注意力，使其修飾的內(nèi)容更易被閱讀：

丹麥建筑事務(wù)所 BIG 的官方網(wǎng)站，將做過(guò)的建筑案例以 icon 的形式按年份排列展示，鼠標(biāo)移動(dòng)到圖標(biāo)上面，瞬間放大的同時(shí)也會(huì)顯示出項(xiàng)目的具體信息：

三、滾動(dòng)視差的設(shè)計(jì)方法

首先我們要明白，并非所用內(nèi)容都適合使用滾動(dòng)視差，也不是為了 “滾動(dòng)” 而滾動(dòng)。炫酷的效果始終要服務(wù)于頁(yè)面內(nèi)容和信息的展示，講述一個(gè)完整的故事。設(shè)計(jì)滾動(dòng)視差的頁(yè)面分為以下幾步：

1. 故事內(nèi)容

就好像一場(chǎng)電影需要有完整的故事線一樣，明確需要使用滾動(dòng)視差的內(nèi)容，并評(píng)估是否能通過(guò)滾動(dòng)視差達(dá)到超出預(yù)期的設(shè)計(jì)效果。構(gòu)建整個(gè)內(nèi)容的故事線和邏輯，奠定頁(yè)面的設(shè)計(jì)基調(diào)和氛圍。

2. 視覺線索

對(duì)于用戶的視線流引導(dǎo)很重要，設(shè)計(jì)引導(dǎo)用戶的視覺線索，貫穿始終，讓用戶有邏輯、有節(jié)奏的了解內(nèi)容。

3. 元素分層

對(duì)內(nèi)容元素進(jìn)行分解與編組，安排在不同的圖層上，保證各圖層的獨(dú)立性：

4. 運(yùn)動(dòng)設(shè)置

設(shè)置好速度、方向和距離等要素，根據(jù)內(nèi)容需求，使圖層彼此產(chǎn)生速度差。

5. 互動(dòng)方式

設(shè)計(jì)用戶與頁(yè)面交互時(shí)的頁(yè)面效果及響應(yīng)方式，即設(shè)計(jì)鼠標(biāo)在頁(yè)面上的操作帶來(lái)的交互動(dòng)態(tài)效果，讓動(dòng)效能夠?qū)崟r(shí)相應(yīng)。

6. 開發(fā)上線

與開發(fā)人員做好對(duì)接，滾動(dòng)狀態(tài)用語(yǔ)言很難描述清晰，設(shè)計(jì)師可以使用原型demo展示設(shè)計(jì)效果，不僅可以自己檢視設(shè)計(jì)理念，也為后期校對(duì)提供佐證。簡(jiǎn)單的 demo 可以用 PPT、PS、AE 等軟件制作。

作者：元堯；微信公眾號(hào)：長(zhǎng)弓小子。

本文由@ 元堯 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。

題圖來(lái)自 Unsplash，基于CC0協(xié)議。