97久久精品人人澡人人爽_亚洲天堂二区_看黄a大片免费_国产欧美网站

滾動視差設(shè)計(jì)指南

時(shí)間:2014-03-07 來源:騰訊UED

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


什么是滾動視差?

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


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


看似復(fù)雜其實(shí)這個(gè)早就不是什么新鮮事兒,這種設(shè)計(jì)思路早在80年代的小霸王學(xué)習(xí)機(jī)上就見過。 1


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

背景層的滾動(最慢)

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

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

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


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

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

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

來看看這個(gè)馬里奧賽車的網(wǎng)站:

2


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


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


3


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


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

4


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


這三個(gè)例子是因?yàn)樗麄冇泄餐ㄐ裕砹艘活惖臐L動視差網(wǎng)站的手法。

5


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

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

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

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

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

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


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

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

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

6

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


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

7

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


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

8

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


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

9


滾動視差網(wǎng)站的設(shè)計(jì)流程:

10

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


滾動視差網(wǎng)站設(shè)計(jì)中的一些小技巧和小細(xì)節(jié):

1. 別忘了loading 。

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

2. 斜線的巧妙運(yùn)用。

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

3.純色的運(yùn)用

沒有比純色的背景更直觀更簡潔。純色可以有很多種表達(dá)方式

純色比漸變和圖片更容易延展,并且純色很容易區(qū)分視差區(qū)間。在使用時(shí)我們可以調(diào)整顏色的透明度,來達(dá)到各種視覺效果。所以純色的運(yùn)用也是滾動視差設(shè)計(jì)者的大愛。


寫在最后想說一句:作為一個(gè)視覺設(shè)計(jì)其實(shí)做設(shè)計(jì)的時(shí)候有很多束縛,能夠遇到一個(gè)可以玩滾動視差的項(xiàng)目不容易,遇到了就不要輕易放掉,好好玩一把,它會讓你的設(shè)計(jì)增色不少。


聯(lián)絡(luò)方式:

中國 · 天津市河西區(qū)南京路35號亞太大廈1403室
電話:15620613686
郵編:300220