視差效果，原本是一個(gè)天文學(xué)術(shù)語(yǔ)，當(dāng)我們觀察星空時(shí)，離我們遠(yuǎn)的星星移動(dòng)速度較慢，離我們近的星星移動(dòng)速度則較快。當(dāng)我們坐在車上向車窗外 看時(shí)，也會(huì)有這樣的感覺(jué)，遠(yuǎn)處的群山似乎沒(méi)有在動(dòng)，而近處的稻田卻在飛速掠過(guò)。許多游戲中都使用視差效果來(lái)增加場(chǎng)景的立體感。說(shuō)的簡(jiǎn)單點(diǎn)就是網(wǎng)頁(yè)內(nèi)的元素在滾動(dòng)屏幕時(shí)發(fā)生的位置的變化，然而各個(gè)不同的元素位置變化的速度不同，導(dǎo)致網(wǎng)頁(yè)內(nèi)的元素有層次錯(cuò)落的錯(cuò)覺(jué)，這和我們?nèi)梭w的眼球效果很像。我看到多家產(chǎn)品商用視差滾動(dòng)效果來(lái)展示產(chǎn)品，從不同的空間角度和用戶體驗(yàn)，起到了非常不錯(cuò)的效果。

背景層的滾動(dòng)(最慢)

貼圖層(內(nèi)容層和背景層之間的元素)的滾動(dòng)(次慢)； 按照現(xiàn)實(shí)生活的經(jīng)驗(yàn)，越遠(yuǎn)的景物移動(dòng)越慢。

內(nèi)容層的滾動(dòng)(可以和頁(yè)面的滾動(dòng)速度一致) 。

我們讓三個(gè)圖層的滾動(dòng)速度不一致，就做出了簡(jiǎn)單的差異滾動(dòng)效果。

需要有一個(gè)視覺(jué)引導(dǎo)元素貫穿整站，。這個(gè)視覺(jué)引導(dǎo)會(huì)讓你在場(chǎng)景種有個(gè)代入感。仿佛你就隨著這個(gè)引導(dǎo)元素來(lái)體驗(yàn)整個(gè)故事。在對(duì)設(shè)計(jì)稿分層時(shí)，設(shè)計(jì)者要定位好背景層，貼圖層和內(nèi)容層之間的關(guān)系。

根據(jù)頁(yè)面自身的功能來(lái)定義是否需要貼圖層，貼圖層的存在是為了更有效的傳達(dá)視覺(jué)效果，但如果它成為了干擾，就會(huì)違背了我們使用的初衷

內(nèi)容層的展現(xiàn)是最主要的，無(wú)論背景層和貼圖層有多少花哨，在設(shè)計(jì)師設(shè)計(jì)過(guò)程中，內(nèi)容層對(duì)用戶的展示是最優(yōu)先的。

網(wǎng)站從Listen everywhere（隨處可聽(tīng)）、Search & discover（搜索與探索）、Build your collection（建立你的收藏）、Follow & share（關(guān)注和分享）、Radio（電臺(tái)）這五個(gè)緯度來(lái)介紹spotify這個(gè)音樂(lè)產(chǎn)品。運(yùn)用合適的背景圖片營(yíng)造五個(gè)場(chǎng)景，介紹產(chǎn)品的五種特性。設(shè)計(jì)者將網(wǎng)頁(yè)分為內(nèi)容層和背景層上下兩層，運(yùn)用滾動(dòng)時(shí)的速率差異形成滾動(dòng)視差。一屏一個(gè)場(chǎng)景，也可以稱為一個(gè)畫(huà)面，五個(gè)場(chǎng)景相互獨(dú)立，通過(guò)縱向的滾屏來(lái)實(shí)現(xiàn)切換。

這個(gè)網(wǎng)站設(shè)計(jì)者也是采用多場(chǎng)景式，將網(wǎng)頁(yè)橫向分割成多個(gè)場(chǎng)景，場(chǎng)景與場(chǎng)景之間通常顏色區(qū)分很明顯，用以分割場(chǎng)景。場(chǎng)景內(nèi)設(shè)計(jì)者將近景的部分做了高斯模糊，從而巧妙的形成了景深視覺(jué)效果。在技術(shù)實(shí)現(xiàn)上，除了利用了不同分層滾動(dòng)速率不一樣外，還限定了相應(yīng)元素的顯示范圍。滾動(dòng)時(shí)超出范圍的部分會(huì)隱藏掉，形成被遮擋的視覺(jué)上的分層效果。

這是一個(gè)產(chǎn)品的介紹網(wǎng)站，設(shè)計(jì)者非常有意思，以多場(chǎng)景的形式介紹了產(chǎn)品的幾大功能，同時(shí)在這個(gè)過(guò)程中又以產(chǎn)品本身為線索貫穿所有的場(chǎng)景。有點(diǎn)像是故事型和多場(chǎng)景型的結(jié)合。

畢竟視覺(jué)設(shè)計(jì)師輸出的視覺(jué)稿都是靜態(tài)圖片，而滾動(dòng)視差網(wǎng)站時(shí)一個(gè)隨著滾動(dòng)不斷變化的，所以設(shè)計(jì)時(shí)與傳統(tǒng)網(wǎng)頁(yè)有很多不同。在設(shè)計(jì)初期設(shè)計(jì)師要判斷這個(gè)頁(yè)面適不適合采用滾動(dòng)視差。在決定采用滾動(dòng)視差之后就需要設(shè)計(jì)者整理現(xiàn)有的內(nèi)容資料，將其故事化或場(chǎng)景化，然后根據(jù)構(gòu)思設(shè)計(jì)出關(guān)鍵狀態(tài)的視覺(jué)設(shè)計(jì)稿。傳統(tǒng)網(wǎng)頁(yè)設(shè)計(jì)師做到這一步基本上工作就已經(jīng)完成，可以交給其他人不管了。但是滾動(dòng)視差的網(wǎng)站不行，視覺(jué)設(shè)計(jì)的工作才剛剛開(kāi)始，這時(shí)，你需要負(fù)責(zé)跟重構(gòu)設(shè)計(jì)師講解你的設(shè)計(jì)思路，你需要怎么分層怎么運(yùn)動(dòng)。在重構(gòu)設(shè)計(jì)師實(shí)現(xiàn)的時(shí)候通常并不會(huì)一帆風(fēng)順，通常會(huì)因?yàn)閷?shí)現(xiàn)成本等各種問(wèn)題需要設(shè)計(jì)師返回去重新修改設(shè)計(jì)稿。通過(guò)反復(fù)的溝通，反復(fù)的磨合才能完成預(yù)想中的漂亮的滾動(dòng)視差網(wǎng)站。