網(wǎng)站建設滾動(dòng)視差（Parallax Scrolling）設計指南發(fā)布者：本站     時(shí)間：2022-03-30 11:03:14

作為未來(lái)網(wǎng)頁(yè)設計的熱點(diǎn)趨勢之一的“滾動(dòng)視差”在近年來(lái)被越來(lái)越多網(wǎng)站所采用，特殊新穎的展示模式也讓許多用戶(hù)眼前一亮。網(wǎng)絡(luò )上也如雨后春筍一般出現了很多像《30個(gè)讓人興奮的視差滾動(dòng)網(wǎng)站》、《60個(gè)視差滾動(dòng)網(wǎng)站賞析》……等一系列的視差滾動(dòng)的文章，不過(guò)賞析的居多，真正指導設計師如何去設計，如何去實(shí)現的實(shí)用型文章卻很少。于是萌發(fā)了自己寫(xiě)一篇的想法，與感興趣的人共同交流下滾動(dòng)視察設計時(shí)的一些心得。

 

什么是滾動(dòng)視差？

視差滾動(dòng)（Parallax Scrolling）是指讓多層背景以不同的速度移動(dòng)，形成立體的運動(dòng)效果，帶來(lái)非常出色的視覺(jué)體驗。

 

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

 

看似復雜其實(shí)這個(gè)早就不是什么新鮮事兒，這種設計思路早在80年代的小霸王學(xué)習機上就見(jiàn)過(guò)。 滾動(dòng)視差（Parallax Scrolling）設計指南

 

在這個(gè)畫(huà)面里通過(guò)人物馬里奧、前景、背景著(zhù)三個(gè)部分的移動(dòng)速率的不同來(lái)實(shí)現立體效果。類(lèi)比網(wǎng)頁(yè)也是如此。一個(gè)滾動(dòng)視察的網(wǎng)站至少會(huì )有以下幾層 ：背景層，內容層，貼圖層。

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

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

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

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

 

當然這只是實(shí)現了簡(jiǎn)單的滾動(dòng)視差效果，距離一個(gè)好的滾動(dòng)視察網(wǎng)站還不夠。

我們來(lái)分析一些國外的例子看看他們是怎么做的。

http://www.nintendo.com.au/gamesites/mariokartwii/

來(lái)看看這個(gè)馬里奧賽車(chē)的網(wǎng)站：

滾動(dòng)視差（Parallax Scrolling）設計指南

 

在這個(gè)網(wǎng)站里○1是背景層，是一條賽道，在整個(gè)網(wǎng)站中貫穿整站起到線(xiàn)索的作用，讓上一個(gè)畫(huà)面與下一個(gè)畫(huà)面之間有所關(guān)聯(lián)。視差滾動(dòng)也是沿著(zhù)這條公路進(jìn)行的?！?、○3是貼圖層，在畫(huà)面中起到渲染氛圍的作用，一個(gè)是遠景一個(gè)是近境，滾動(dòng)時(shí)速率也不一樣，從而讓人有一種此時(shí)不是在瀏覽網(wǎng)頁(yè)，而是在賽道上馳騁的代入感?！?是內容層，網(wǎng)站有趣的同時(shí)不忘內容的呈現?！?是所在位置的導航，往往滾動(dòng)視差的網(wǎng)站都很長(cháng)有很多屏，所以導航是必不可少的。讓用戶(hù)知道自己到了哪兒還剩多少，這很重要，并且也起到一個(gè)導航的作用便于用戶(hù)返回看之前的內容。

 

再來(lái)看看 http://intacto10years.com/index_start.php 這個(gè)網(wǎng)站。

 

滾動(dòng)視差（Parallax Scrolling）設計指南

 

這個(gè)網(wǎng)站以一開(kāi)始加載完成之后會(huì )跳轉到頁(yè)面的最底部，火箭為載體，以遨游太空為故事背景。隨著(zhù)火箭的升空頁(yè)面逐漸向上滾動(dòng)，隨之以場(chǎng)景化的手段，形象的講述了intacto 從2001年到2012 年10年的歷程。很是生動(dòng)有趣。

 

還有類(lèi)似的這個(gè)網(wǎng)站http://lostworldsfairs.com/atlantis/

滾動(dòng)視差（Parallax Scrolling）設計指南

 

這個(gè)網(wǎng)站巧妙的將網(wǎng)頁(yè)的向下滾動(dòng)轉化為了一次奇妙的深海遨游。導航化為深度標尺，隨著(zhù)網(wǎng)頁(yè)的滾動(dòng)小人逐漸向深海下沉，也逐漸在深海種看到了眾多不同的“景觀(guān)”，很是有趣。

 

這三個(gè)例子是因為他們有共通性，代表了一類(lèi)的滾動(dòng)視差網(wǎng)站的手法。

滾動(dòng)視差（Parallax Scrolling）設計指南

 

這類(lèi)網(wǎng)站將原有枯燥的內容進(jìn)行重新整理，將其故事化場(chǎng)景化。這就需要設計者有一個(gè)清晰的講故事的邏輯。

需要有一個(gè)視覺(jué)引導元素貫穿整站，就像馬里奧的賽道，intacto的宇宙飛船，潛水的管道以及小人。這個(gè)視覺(jué)引導會(huì )讓你在場(chǎng)景種有個(gè)代入感。仿佛你就隨著(zhù)這個(gè)引導元素來(lái)體驗整個(gè)故事。

在對設計稿分層時(shí)，設計者要定位好背景層，貼圖層和內容層之間的關(guān)系。

根據頁(yè)面自身的功能來(lái)定義是否需要貼圖層

貼圖層的存在是為了更有效的傳達視覺(jué)效果，但如果它成為了干擾，就會(huì )違背了我們使用的初衷

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

 

當然這類(lèi)設計滾動(dòng)視差網(wǎng)站的最大難點(diǎn)在于故事化上，也許會(huì )有人問(wèn)：“我要設計的網(wǎng)站內容很難故事化怎么辦？”那么我再給大家講解另外一種滾動(dòng)視差常見(jiàn)的設計手法。相對于“故事化”我將它稱(chēng)為“多場(chǎng)景化”。

舉幾個(gè)典型的栗子：

例如spotify的官網(wǎng)https://www.spotify.com/int/

滾動(dòng)視差（Parallax Scrolling）設計指南

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

 

再如：http://www.ok-studios.de/home/

滾動(dòng)視差（Parallax Scrolling）設計指南

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

 

再來(lái)看看這個(gè)網(wǎng)站：http://www.zensorium.com/tinke/

滾動(dòng)視差（Parallax Scrolling）設計指南

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

 

從幾個(gè)例子中我們不難總結出這類(lèi)滾動(dòng)視差網(wǎng)站的特點(diǎn)。

滾動(dòng)視差（Parallax Scrolling）設計指南

 

滾動(dòng)視差網(wǎng)站的設計流程：

滾動(dòng)視差（Parallax Scrolling）設計指南

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

 

滾動(dòng)視差網(wǎng)站設計中的一些小技巧和小細節：

1. 別忘了loading 。

滾動(dòng)視差網(wǎng)站由于內容分層會(huì )用到很多大尺寸圖片或者png圖片，所以體積往往比較大，所以這個(gè)時(shí)候千萬(wàn)別忘了設計loading動(dòng)畫(huà)。

2. 斜線(xiàn)的巧妙運用。

當斜線(xiàn)從底部向上劃入的時(shí)候，通常視覺(jué)上會(huì )給人一種是從右下角以一定角度劃入的錯覺(jué)。所以斜線(xiàn)的布局也經(jīng)常被采用在滾動(dòng)視差網(wǎng)站的設計中去。

3.純色的運用

沒(méi)有比純色的背景更直觀(guān)更簡(jiǎn)潔。純色可以有很多種表達方式

純色比漸變和圖片更容易延展，并且純色很容易區分視差區間。在使用時(shí)我們可以調整顏色的透明度，來(lái)達到各種視覺(jué)效果。所以純色的運用也是滾動(dòng)視差設計者的大愛(ài)。