網頁特效設計之滾動視差設計指南發(fā)布者：本站     時間：2022-01-19 14:01:34

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

什么是滾動視差?

視差滾動(Parallax Scrolling)是指讓多層背景以不同的速度移動，形成立體的運動效果，帶來非常出色的視覺體驗。

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

看似復雜其實這個早就不是什么新鮮事兒，這種設計思路早在80年代的小霸王學習機上就見過。

網頁<a href=/photoshop/texiao/ target=_blank class=infotextkey>特效</a>設計之滾動視差設計指南,PS教程,

在這個畫面里通過人物馬里奧、前景、背景著三個部分的移動速率的不同來實現立體效果。類比網頁也是如此。一個滾動視察的網站至少會有以下幾層 ：背景層，內容層，貼圖層。

背景層的滾動(最慢)

貼圖層(內容層和背景層之間的元素)的滾動(次慢); 按照現實生活的經驗，越遠的景物移動越慢。

內容層的滾動(可以和頁面的滾動速度一致) 。

我們讓三個圖層的滾動速度不一致，就做出了簡單的差異滾動效果。

當然這只是實現了簡單的滾動視差效果，距離一個好的滾動視察網站還不夠。

我們來分析一些國外的例子看看他們是怎么做的。


來看看這個馬里奧賽車的網站：

網頁特效設計之滾動視差設計指南,PS教程,

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

再來看看 http://intacto10years.com/index_start.php 這個網站。

網頁特效設計之滾動視差設計指南,PS教程,

這個網站以一開始加載完成之后會跳轉到頁面的最底部，火箭為載體，以遨游太空為故事背景。隨著火箭的升空頁面逐漸向上滾動，隨之以場景化的手段，形象的講述了intacto 從2001年到2012 年10年的歷程。很是生動有趣。

還有類似的這個網站http://lostworldsfairs.com/atlantis/

網頁特效設計之滾動視差設計指南,PS教程,

這個網站巧妙的將網頁的向下滾動轉化為了一次奇妙的深海遨游。導航化為深度標尺，隨著網頁的滾動小人逐漸向深海下沉，也逐漸在深海種看到了眾多不同的“景觀”，很是有趣。

這三個例子是因為他們有共通性，代表了一類的滾動視差網站的手法。

網頁特效設計之滾動視差設計指南,PS教程,

這類網站將原有枯燥的內容進行重新整理，將其故事化場景化。這就需要設計者有一個清晰的講故事的邏輯。

需要有一個視覺引導元素貫穿整站，就像馬里奧的賽道，intacto的宇宙飛船，潛水的管道以及小人。這個視覺引導會讓你在場景種有個代入感。仿佛你就隨著這個引導元素來體驗整個故事。

在對設計稿分層時，設計者要定位好背景層，貼圖層和內容層之間的關系。

根據頁面自身的功能來定義是否需要貼圖層

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

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

當然這類設計滾動視差網站的最大難點在于故事化上，也許會有人問：“我要設計的網站內容很難故事化怎么辦?”那么我再給大家講解另外一種滾動視差常見的設計手法。相對于“故事化”我將它稱為“多場景化”。