網(wǎng)頁特效設(shè)計(jì)之滾動(dòng)視差設(shè)計(jì)指南發(fā)布者：本站 時(shí)間：2022-01-19 14:01:34
作為未來網(wǎng)頁設(shè)計(jì)的熱點(diǎn)趨勢(shì)之一的“滾動(dòng)視差”在近年來被越來越多網(wǎng)站所采用，特殊新穎的展示模式也讓許多用戶眼前一亮。網(wǎng)絡(luò)上也如雨后春筍一般出 現(xiàn)了很多像《30個(gè)讓人興奮的視差滾動(dòng)網(wǎng)站》、《60個(gè)視差滾動(dòng)網(wǎng)站賞析》……等一系列的視差滾動(dòng)的文章，不過賞析的居多，真正指導(dǎo)設(shè)計(jì)師如何去設(shè)計(jì)，如 何去實(shí)現(xiàn)的實(shí)用型文章卻很少。于是萌發(fā)了自己寫一篇的想法，與感興趣的人共同交流下滾動(dòng)視察設(shè)計(jì)時(shí)的一些心得。
什么是滾動(dòng)視差?
視差滾動(dòng)(Parallax Scrolling)是指讓多層背景以不同的速度移動(dòng)，形成立體的運(yùn)動(dòng)效果，帶來非常出色的視覺體驗(yàn)。
視差效果，原本是一個(gè)天文學(xué)術(shù)語，當(dāng)我們觀察星空時(shí)，離我們遠(yuǎn)的星星移動(dòng)速度較慢，離我們近的星星移動(dòng)速度則較快。當(dāng)我們坐在車上向車窗外 看時(shí)，也會(huì)有這樣的感覺，遠(yuǎn)處的群山似乎沒有在動(dòng)，而近處的稻田卻在飛速掠過。許多游戲中都使用視差效果來增加場(chǎng)景的立體感。說的簡單點(diǎn)就是網(wǎng)頁內(nèi)的元素 在滾動(dòng)屏幕時(shí)發(fā)生的位置的變化，然而各個(gè)不同的元素位置變化的速度不同，導(dǎo)致網(wǎng)頁內(nèi)的元素有層次錯(cuò)落的錯(cuò)覺，這和我們?nèi)梭w的眼球效果很像。我看到多家產(chǎn)品 商用視差滾動(dòng)效果來展示產(chǎn)品，從不同的空間角度和用戶體驗(yàn)，起到了非常不錯(cuò)的效果。
看似復(fù)雜其實(shí)這個(gè)早就不是什么新鮮事兒，這種設(shè)計(jì)思路早在80年代的小霸王學(xué)習(xí)機(jī)上就見過。
網(wǎng)頁<a href=/photoshop/texiao/ target=_blank class=infotextkey>特效</a>設(shè)計(jì)之滾動(dòng)視差設(shè)計(jì)指南,PS教程,
在這個(gè)畫面里通過人物馬里奧、前景、背景著三個(gè)部分的移動(dòng)速率的不同來實(shí)現(xiàn)立體效果。類比網(wǎng)頁也是如此。一個(gè)滾動(dòng)視察的網(wǎng)站至少會(huì)有以下幾層 ：背景層，內(nèi)容層，貼圖層。
背景層的滾動(dòng)(最慢)
貼圖層(內(nèi)容層和背景層之間的元素)的滾動(dòng)(次慢); 按照現(xiàn)實(shí)生活的經(jīng)驗(yàn)，越遠(yuǎn)的景物移動(dòng)越慢。
內(nèi)容層的滾動(dòng)(可以和頁面的滾動(dòng)速度一致) 。
我們讓三個(gè)圖層的滾動(dòng)速度不一致，就做出了簡單的差異滾動(dòng)效果。
當(dāng)然這只是實(shí)現(xiàn)了簡單的滾動(dòng)視差效果，距離一個(gè)好的滾動(dòng)視察網(wǎng)站還不夠。
我們來分析一些國外的例子看看他們是怎么做的。
來看看這個(gè)馬里奧賽車的網(wǎng)站：
網(wǎng)頁特效設(shè)計(jì)之滾動(dòng)視差設(shè)計(jì)指南,PS教程,
在這個(gè)網(wǎng)站里○1是背景層，是一條賽道，在整個(gè)網(wǎng)站中貫穿整站起到線索的作用，讓上一個(gè)畫面與下一個(gè)畫面之間有所關(guān)聯(lián)。視差滾動(dòng)也是沿著這條公路進(jìn) 行的。○2、○3是貼圖層，在畫面中起到渲染氛圍的作用，一個(gè)是遠(yuǎn)景一個(gè)是近境，滾動(dòng)時(shí)速率也不一樣，從而讓人有一種此時(shí)不是在瀏覽網(wǎng)頁，而是在賽道上馳 騁的代入感。○4是內(nèi)容層，網(wǎng)站有趣的同時(shí)不忘內(nèi)容的呈現(xiàn)。○5是所在位置的導(dǎo)航，往往滾動(dòng)視差的網(wǎng)站都很長有很多屏，所以導(dǎo)航是必不可少的。讓用戶知道 自己到了哪兒還剩多少，這很重要，并且也起到一個(gè)導(dǎo)航的作用便于用戶返回看之前的內(nèi)容。
再來看看 http://intacto10years.com/index_start.php 這個(gè)網(wǎng)站。
網(wǎng)頁特效設(shè)計(jì)之滾動(dòng)視差設(shè)計(jì)指南,PS教程,
這個(gè)網(wǎng)站以一開始加載完成之后會(huì)跳轉(zhuǎn)到頁面的最底部，火箭為載體，以遨游太空為故事背景。隨著火箭的升空頁面逐漸向上滾動(dòng)，隨之以場(chǎng)景化的手段，形象的講述了intacto 從2001年到2012 年10年的歷程。很是生動(dòng)有趣。
還有類似的這個(gè)網(wǎng)站http://lostworldsfairs.com/atlantis/
網(wǎng)頁特效設(shè)計(jì)之滾動(dòng)視差設(shè)計(jì)指南,PS教程,
這個(gè)網(wǎng)站巧妙的將網(wǎng)頁的向下滾動(dòng)轉(zhuǎn)化為了一次奇妙的深海遨游。導(dǎo)航化為深度標(biāo)尺，隨著網(wǎng)頁的滾動(dòng)小人逐漸向深海下沉，也逐漸在深海種看到了眾多不同的“景觀”，很是有趣。
這三個(gè)例子是因?yàn)樗麄冇泄餐ㄐ裕砹艘活惖臐L動(dòng)視差網(wǎng)站的手法。
網(wǎng)頁特效設(shè)計(jì)之滾動(dòng)視差設(shè)計(jì)指南,PS教程,
這類網(wǎng)站將原有枯燥的內(nèi)容進(jìn)行重新整理，將其故事化場(chǎng)景化。這就需要設(shè)計(jì)者有一個(gè)清晰的講故事的邏輯。
需要有一個(gè)視覺引導(dǎo)元素貫穿整站，就像馬里奧的賽道，intacto的宇宙飛船，潛水的管道以及小人。這個(gè)視覺引導(dǎo)會(huì)讓你在場(chǎng)景種有個(gè)代入感。仿佛你就隨著這個(gè)引導(dǎo)元素來體驗(yàn)整個(gè)故事。
在對(duì)設(shè)計(jì)稿分層時(shí)，設(shè)計(jì)者要定位好背景層，貼圖層和內(nèi)容層之間的關(guān)系。
根據(jù)頁面自身的功能來定義是否需要貼圖層
貼圖層的存在是為了更有效的傳達(dá)視覺效果，但如果它成為了干擾，就會(huì)違背了我們使用的初衷
內(nèi)容層的展現(xiàn)是最主要的，無論背景層和貼圖層有多少花哨，在設(shè)計(jì)師設(shè)計(jì)過程中，內(nèi)容層對(duì)用戶的展示是最優(yōu)先的。
當(dāng)然這類設(shè)計(jì)滾動(dòng)視差網(wǎng)站的最大難點(diǎn)在于故事化上，也許會(huì)有人問：“我要設(shè)計(jì)的網(wǎng)站內(nèi)容很難故事化怎么辦?”那么我再給大家講解另外一種滾動(dòng)視差常見的設(shè)計(jì)手法。相對(duì)于“故事化”我將它稱為“多場(chǎng)景化”。
選擇我們，優(yōu)質(zhì)服務(wù)，不容錯(cuò)過
1. 優(yōu)秀的網(wǎng)絡(luò)資源，強(qiáng)大的網(wǎng)站優(yōu)化技術(shù)，穩(wěn)定的網(wǎng)站和速度保證
2. 15年上海網(wǎng)站建設(shè)經(jīng)驗(yàn)，優(yōu)秀的技術(shù)和設(shè)計(jì)水平，更放心
3. 全程省心服務(wù)，不必?fù)?dān)心自己不懂網(wǎng)絡(luò)，更省心。
------------------------------------------------------------
24小時(shí)聯(lián)系電話：021-58370032
關(guān)鍵詞標(biāo)簽：上海網(wǎng)站建設(shè) 上海網(wǎng)站制作 網(wǎng)站優(yōu)化 小程序開發(fā)