5.10日(rì)音(yīn)訊,滾動視(shì)差知(zhī)識©β要(yào)學習(xí)要(yào)點

　　5.10日(rì)音(yīn)訊,滾動視(shì)差知(zh✔®ī)識要(yào)學習(xí)要(yào)點。作(zuò)為(wèi)未來≥αγ₽(lái)網頁設計(jì)的(de)熱(rè)點趨勢之一(yī)的(de)&l✔←λ↔dquo;滾動視(shì)差”在近(jìn)♥≥↔$年(nián)來(lái)被越來(lái)越多(duō)網站(zh¥÷àn)所采用(yòng)，特殊新穎的(de)展示模式也(yě)讓許多Ω↓β<(duō)用(yòng)戶眼前一(yī)亮(liàng)。網絡上(shàn"βα≈g)也(yě)如(rú)雨(yǔ)後春筍一(y↑₹&₩ī)般出現(xiàn)了(le)很(hěn)多(duō)像《30個(gè)★↕©✔讓人(rén)興奮的(de)視(shì)差滾動™ε網站(zhàn)》、《60個(gè)視(shì)₩δδ差滾動網站(zhàn)賞析》…&hellαΩip;等一(yī)系列的(de)視(shì♥<♠≥)差滾動的(de)文(wén)章(zhān★γ ★g)，不(bù)過賞析的(de)居多(duō)，真​ 正指導設計(jì)師(shī)如(rú)何去(qù)設計("δ♦jì)，如(rú)何去(qù)實現(xiàn)的(de)實✘™↕用(yòng)型文(wén)章(zhāng)卻很(hěn)少(shǎ♣γo)。于是(shì)萌發了(le)自(zì)己寫一(yī)篇的(de)♠≥☆α想法，與感興趣的(de)人(rén)共同交流下(xià)滾動視(shì)察設♣§<★計(jì)時(shí)的(de)一(yī)些(x✔✔♣iē)心得(de)。

　　什(shén)麽是(shì)滾動視(s‌φ♥hì)差?

　　視(shì)差滾動(ParallaxScrolling)是(shì)‌'★指讓多(duō)層背景以不(bù)同的(de)速度γ&¶♥移動，形成立體(tǐ)的(de)運動效果，帶來(lái)非常出δ₩∞€色的(de)視(shì)覺體(tǐ)驗。

　　視(shì)差效果，原本是(shì)一(yī)個(gè)天β© φ文(wén)學術(shù)語，當我們觀察β↔星空(kōng)時(shí)，離(lí)我們遠×♠β(yuǎn)的(de)星星移動速度較慢(màn)，離(lí)我們近(jìn)的€₽φ♣(de)星星移動速度則較快(kuài)。當我們坐(zuò)在車(c‌✘hē)上(shàng)向車(chē)窗(c$★ huāng)外(wài)看(kàn)時(shí)，也(yě)會( α huì)有(yǒu)這(zhè)樣的(deε¥)感覺，遠(yuǎn)處的(de)群山(shān)似乎沒有↓∞(yǒu)在動，而近(jìn)處的(de)稻田∑β<卻在飛(fēi)速掠過。許多(duō)遊戲中都(dōu)使用(yòng)''§≠視(shì)差效果來(lái)增加場(chǎng)景的(de)立←± ¶體(tǐ)感。說(shuō)的(de)簡單點就(€≈<←jiù)是(shì)網頁內(nèi)的(de)元素α↔ε✘在滾動屏幕時(shí)發生(shēng)的(de)位置的(de)變化(huà)λ‌§§，然而各個(gè)不(bù)同的(de)元素位置變化(huà)的(d£∏e)速度不(bù)同，導緻網頁內(nèi)的(de)元素有§∑×α(yǒu)層次錯(cuò)落的(de)錯(×λcuò)覺，這(zhè)和(hé)我們人(rén)體(tǐ)的 ¥(de)眼球效果很(hěn)像。我看(kàn)到(d§♠ào)多(duō)家(jiā)産品商用(yòng)視$• •(shì)差滾動效果來(lái)展示産品，↕€從(cóng)不(bù)同的(de)空(kōng)間(jiān)角度和↕✔π(hé)用(yòng)戶體(tǐ)驗，起到(dào)了(le)非₩£常不(bù)錯(cuò)的(de)效果。

　　看(kàn)似複雜(zá)其實這(zhè↔₩ )個(gè)早就(jiù)不(bù)是(shì)什(shén)麽新鮮事(shìπβ)兒(ér)，這(zhè)種設計(jì)思路(lù)早在©&π<80年(nián)代的(de)小(xiǎo)霸王學習(‍βxí)機(jī)上(shàng)就(jiù)見(jiàn)過。

　　在這(zhè)個(gè)畫(huà)面裡(lǐ)通(&γtōng)過人(rén)物(wù)馬裡(lǐ)奧、前景、背景©β著(zhe)三個(gè)部分(fēn)的(de)移動速®☆↔率的(de)不(bù)同來(lái)實現(xiàn)立體(tǐ)效δ$☆♥果。類比網頁也(yě)是(shì)如(rú)此。‍÷​£一(yī)個(gè)滾動視(shì)察的(de)網站(zhàn)至✘φ₽少(shǎo)會(huì)有(yǒu)以下(xià)幾↕₽♦✘層：背景層，內(nèi)容層，貼圖層。

　　背景層的(de)滾動(最慢(màn))

　　貼圖層(內(nèi)容層和(hé)背景層之間(jiān)的(de)元✔←素)的(de)滾動(次慢(màn));按照(zhào)現€"(xiàn)實生(shēng)活的(de)經驗，越遠(y&​"uǎn)的(de)景物(wù)移動越慢(màn)。

　　內(nèi)容層的(de)滾動(可(kě)以和© π(hé)頁面的(de)滾動速度一(yī)緻)。

　　我們讓三個(gè)圖層的(de)滾動速度不(bù∑ ✔♣)一(yī)緻，就(jiù)做(zuò)出了( ​le)簡單的(de)差異滾動效果。

　　當然這(zhè)隻是(shì)實現(xiàn)了(le)簡單的(de)₩"滾動視(shì)差效果，距離(lí)一(yī)個(gè)好(hǎo)的​φ$(de)滾動視(shì)察網站(zhàn)還(hái)不(bù)夠。

　　我們來(lái)分(fēn)析一(yī)些(x©✘iē)國(guó)外(wài)的(de)例子(zǐ)看(kàn>↓ )看(kàn)他(tā)們是(shì)怎麽做(zuò©λ∞♥)的(de)。

　　來(lái)看(kàn)看(kàn)這(zhè)個(gè)馬÷♠•σ裡(lǐ)奧賽車(chē)的(de)網站(zh®"↔àn)：

　　在這(zhè)個(gè)網站(zhàn)裡(lǐ)○1σ£是(shì)背景層，是(shì)一(yī)條賽道(dào)'→≠€，在整個(gè)網站(zhàn)中貫穿整站(zhà¶≈>n)起到(dào)線索的(de)作(zuò)用(yòng)，讓上(shàngσ₽φ©)一(yī)個(gè)畫(huà)面與下(x∞£₹δià)一(yī)個(gè)畫(huà)面之間(jiān)有±ε(yǒu)所關聯。視(shì)差滾動也(yě)是(shì)沿δ©>≈著(zhe)這(zhè)條公路(lù)進行(xíng)的♣÷¥(de)。○2、○3是(shì)貼圖層，在畫(₽Ωεhuà)面中起到(dào)渲染氛圍的(de)作(zuò)用(yòn ε‍↑g)，一(yī)個(gè)是(shì)遠(yuǎn)景一(yī)個(gè₽÷)是(shì)近(jìn)境，滾動時(shí)速率®'←∞也(yě)不(bù)一(yī)樣，從(cóλ♠₽ng)而讓人(rén)有(yǒu)一(yī)種此時(sh±÷ ÷í)不(bù)是(shì)在浏覽網頁，而是(shì)在♥€™≤賽道(dào)上(shàng)馳騁的(de)代入感。○4是(sαΩhì)內(nèi)容層，網站(zhàn)有(yǒu)趣的(de)同✔φ∞時(shí)不(bù)忘內(nèi)容的(de)呈現(xiàn)。 ±≈○5是(shì)所在位置的(de)導航，往往滾動視(shì)差的(de)網π©π↑站(zhàn)都(dōu)很(hěn)長(cháng)有(yǒu)很(hěn​επ)多(duō)屏，所以導航是(shì)必不(bù)可•×(kě)少(shǎo)的(de)。讓用(yòng)戶知(z™§÷hī)道(dào)自(zì)己到(dào)了(le)哪兒(é✘α₩"r)還(hái)剩多(duō)少(shǎo)，這(zhè)很(hěn)重要(Ωβyào)，并且也(yě)起到(dào)一(yī)個(gè<β)導航的(de)作(zuò)用(yòng)便于用(yòng)戶☆✘≤返回看(kàn)之前的(de)內(nèi)容。

　　這(zhè)個(gè)網站(zhàn)以一(yī)開(kāσ☆i)始加載完成之後會(huì)跳(tià±α₹o)轉到(dào)頁面的(de)最底部，火ש(huǒ)箭為(wèi)載體(tǐ)，以遨遊太空(kōng)為(wèi)故事(✘♥®αshì)背景。随著(zhe)火(huǒ)箭的(de)升空(kōng)頁π≤≥£面逐漸向上(shàng)滾動，随之以場(chǎng)景化(huà¥←)的(de)手段，形象的(de)講述了(le)intacto從(cóng)2∞→↓001年(nián)到(dào)2012年(nián)10年(nián)的•♥(de)曆程。很(hěn)是(shì)生(shēng)動有(yǒ↑ u)趣。

　　這(zhè)個(gè)網站(zhàn)巧妙的(de)将網頁的(d♣©"e)向下(xià)滾動轉化(huà)為(wèi)了(le)一(yī)≥π ε次奇妙的(de)深海(hǎi)遨遊。導航化(huà)為(wèi)深度β‍∞±标尺，随著(zhe)網頁的(de)滾動小(®×xiǎo)人(rén)逐漸向深海(hǎi)下(xià)沉，也φ±®β(yě)逐漸在深海(hǎi)種看(kàn)到(dào)了(le)衆多÷↔(duō)不(bù)同的(de)&ldquo'γ";景觀”，很(hěn)是(shì)有(yǒu →★)趣。

　　這(zhè)三個(gè)例子(zǐ)是(shì)因為(wèi)φ☆<他(tā)們有(yǒu)共通(tōng)性，代表了(le)一(₽ ♣∞yī)類的(de)滾動視(shì)差網站( λzhàn)的(de)手法。

　　這(zhè)類網站(zhàn)将原有(yǒu)枯燥的(de)&♥≥¥內(nèi)容進行(xíng)重新整理(lǐ)，将其故事(s γ♦hì)化(huà)場(chǎng)景化(huà)♠Ω。這(zhè)就(jiù)需要(yào)設計(jì)者有>π(yǒu)一(yī)個(gè)清晰的(de)講故事(≤'shì)的(de)邏輯。

　　需要(yào)有(yǒu)一(yī)個(gè)視(shì)覺引導元​α∑素貫穿整站(zhàn)，就(jiù)像馬裡(lǐ)奧的(d≈‍‌φe)賽道(dào)，intacto的(de)宇宙飛♠✔₩(fēi)船(chuán)，潛水(shuǐ)的(de)管道(dào)以及β‌小(xiǎo)人(rén)。這(zhè)個(gè)視(shì)​‍®®覺引導會(huì)讓你(nǐ)在場(chǎng)景種有(yǒu)個(gè)±×代入感。仿佛你(nǐ)就(jiù)随著(zhΩφe)這(zhè)個(gè)引導元素來(lái©σ©δ)體(tǐ)驗整個(gè)故事(shì)。

　　在對(duì)設計(jì)稿分(fēn)層時(shíΩ©∑φ)，設計(jì)者要(yào)定位好(hǎo)背景₩≈層，貼圖層和(hé)內(nèi)容層之間(jiān)的(de)關系。

　　根據頁面自(zì)身(shēn)的(de)功能(néng)來(lá←¶$♦i)定義是(shì)否需要(yào)貼圖層

　　貼圖層的(de)存在是(shì)為(wèi)了(le∏'φ)更有(yǒu)效的(de)傳達視(shì)覺±ελ☆效果，但(dàn)如(rú)果它成為(wèi)了(l©♥e)幹擾，就(jiù)會(huì)違背了(le)我們使γ₽用(yòng)的(de)初衷

　　內(nèi)容層的(de)展現(xiàn)是(shì)←"最主要(yào)的(de)，無論背景層和‌¥" (hé)貼圖層有(yǒu)多(duō)少(shǎo)花(huā)哨，在設計(j® →ì)師(shī)設計(jì)過程中，內(nèi₽©↔)容層對(duì)用(yòng)戶的(de)展示是(sh"≠ì)最優先的(de)。

　　當然這(zhè)類設計(jì)滾動視βφ±(shì)差網站(zhàn)的(de)最大(dà)難點在于故✘π"事(shì)化(huà)上(shàng)，也(≥>✘✘yě)許會(huì)有(yǒu)人(rén)問(wè≥λ‍n)：“我要(yào)設計(jì)的÷π&↕(de)網站(zhàn)內(nèi)容很(hěn)難故事(shìε₽ ®)化(huà)怎麽辦?”那(nà)麽我再給大(dà)家(j≠∑≤↑iā)講解另外(wài)一(yī)種滾動視(shì)差常見(jiànγ‌¶)的(de)設計(jì)手法。相(xiàng)對(duìσ£)于“故事(shì)化(huà)&r'δ≤↕dquo;我将它稱為(wèi)“多(duō)場(chǎng)景化(↕ <₽huà)”。

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

　　網站(zhàn)從(cóng)List↑♣eneverywhere(随處可(kě)聽(tīng))、Search&d®₽$πiscover(搜索與探索)、Buildyourcollection ∞★→(建立你(nǐ)的(de)收藏)、Fol $₽low&share(關注和(hé)分(fēn)享)、Radio(電(diàn)↔α±σ台)這(zhè)五個(gè)緯度來(lá€≠ ✘i)介紹spotify這(zhè)個(gè)音(yīn)樂(yuè)産品‍≤≠。運用(yòng)合适的(de)背景圖片營造五個(g πè)場(chǎng)景，介紹産品的(de)五種特性。設計(♦αjì)者将網頁分(fēn)為(wèi)內(nèi)容層和(♥" hé)背景層上(shàng)下(xià)兩層，運用(yò≤£ng)滾動時(shí)的(de)速率差異形成♥​滾動視(shì)差。一(yī)屏一(yī)個(gè)場("→♦€chǎng)景，也(yě)可(kě)以稱為(wèi)一(yī₽♠↑®)個(gè)畫(huà)面，五個(gè)場(chǎng)景相©"(xiàng)互獨立，通(tōng)過縱向的(de)滾屏來(lá×↔♦i)實現(xiàn)切換。

　　這(zhè)個(gè)網站(zhàn)設計(jìβ™)者也(yě)是(shì)采用(yòng)£×÷♣多(duō)場(chǎng)景式，将網頁橫向分(fēn)割成☆ 多(duō)個(gè)場(chǎng)景，場(÷♠chǎng)景與場(chǎng)景之間(jiān)通(tō"≠¥♣ng)常顔色區(qū)分(fēn)很(hěn)明(míng)顯，用™×(yòng)以分(fēn)割場(chǎng)景。場(chǎng)景內(✔‌​nèi)設計(jì)者将近(jìn)景的(de)部分(fē♦✘✔n)做(zuò)了(le)高(gāo)斯模糊，從(∑♥≠cóng)而巧妙的(de)形成了(le)景深視(shì)覺效果。在$€★技(jì)術(shù)實現(xiàn)上(shàng)，除了(le)利用('≈ yòng)了(le)不(bù)同分(fēn)層滾★βε×動速率不(bù)一(yī)樣外(wài)，還(hái)限定了(le)相(x★↕Ω'iàng)應元素的(de)顯示範圍。滾動時(sh×↔ ‌í)超出範圍的(de)部分(fēn)會(huì)隐藏掉，形成被遮☆ '&擋的(de)視(shì)覺上(shàng)的(de)分(fēn)層¥Ω 效果。

　　這(zhè)是(shì)一(yī)個(gè)産£©>品的(de)介紹網站(zhàn)，設計(jì)者非常有(yǒu​™₽)意思，以多(duō)場(chǎng)景的(de)形式↔‍→←介紹了(le)産品的(de)幾大(dà)功能(nén✘ ↕g)，同時(shí)在這(zhè)個(gè)φ‍&過程中又(yòu)以産品本身(shēn)為(wèi)線索貫穿所有(yǒu"₹®<)的(de)場(chǎng)景。有(yǒu)點像是(shì)故事£$(shì)型和(hé)多(duō)場(chǎng)景型的(de)結合★Ω。

　　從(cóng)幾個(gè)例子(zǐ)中我們不(bù)難總結出這(zh ‍è)類滾動視(shì)差網站(zhàn)的(deπ₹')特點。

　　滾動視(shì)差網站(zhàn)的(de)設計(jì)流程：

　　畢竟視(shì)覺設計(jì)師(shī)輸出的(de)視(shì)覺稿✘ "≥都(dōu)是(shì)靜(jìng)态圖片，而滾動視(shì)差網站(εγzhàn)時(shí)一(yī)個(gè)随著($₹"€zhe)滾動不(bù)斷變化(huà)的(de)，所以設計(jì)時(shí✘•)與傳統網頁有(yǒu)很(hěn)多(duō)不(bù)•δ同。在設計(jì)初期設計(jì)師(shī)要(yào)判斷這(zhè)個∑>(gè)頁面适不(bù)适合采用(yòng)滾動視(shì≈♦)差。在決定采用(yòng)滾動視(shì)差之後"↓就(jiù)需要(yào)設計(jì)者整理(lǐ)現( •xiàn)有(yǒu)的(de)內(nèi)容資料，©€α±将其故事(shì)化(huà)或場(chǎng)景化(huà)，然後根據構• ✔'思設計(jì)出關鍵狀态的(de)視(shì)≥♠π™覺設計(jì)稿。傳統網頁設計(jì)師(shī)♥ε∞ε做(zuò)到(dào)這(zhè)一(yī)步× 基本上(shàng)工(gōng)作(zuò)就(j★λ"iù)已經完成，可(kě)以交給其他(tā)人(rén)不(bù)管∑♠Ω"了(le)。但(dàn)是(shì)滾動視(shì)差的(d↓Ω‍e)網站(zhàn)不(bù)行(xíng)π₹∏，視(shì)覺設計(jì)的(de)工(g‌φ÷ ōng)作(zuò)才剛剛開(kāi)始，這(zhè)時(sh$©í)，你(nǐ)需要(yào)負責跟重構設計(jì)師(s↕∏λ‌hī)講解你(nǐ)的(de)設計(jì)×"思路(lù)，你(nǐ)需要(yào)怎麽分(fēn)層怎麽運動。在重構設計(♠'jì)師(shī)實現(xiàn)的(de)時(shí)候通(tōng$★‍)常并不(bù)會(huì)一(yī)帆風(fēng)順，通(t±'← ōng)常會(huì)因為(wèi)實現(xiàn)成本等各種♠∏≥問(wèn)題需要(yào)設計(jì)師(shī→ε)返回去(qù)重新修改設計(jì)稿。通(tōng)過反複的β''(de)溝通(tōng)，反複的(de)磨合才能(néng)完成預想中的(de₩£)漂亮(liàng)的(de)滾動視(shì)差網站©★ (zhàn)。

　　滾動視(shì)差網站(zhàn)設↑"↔‌計(jì)中的(de)一(yī)些(xi©£ αē)小(xiǎo)技(jì)巧和(hé)小(☆δβxiǎo)細節：

　　1.别忘了(le)loading。

　　滾動視(shì)差網站(zhàn)由于內(nèi)容分↔ (fēn)層會(huì)用(yòng)到(dào)很(hěn)多(duō←₽)大(dà)尺寸圖片或者png圖片，所以體♥™↓₹(tǐ)積往往比較大(dà)，所以這(zhè)個(gè)時(shí)候千萬↑↓•别忘了(le)設計(jì)loading動畫(huà)。

　　2.斜線的(de)巧妙運用(yòng)。

　　當斜線從(cóng)底部向上(shàng)劃入的(de↑βΩ)時(shí)候，通(tōng)常視(shì)覺上♣×∑★(shàng)會(huì)給人(rén)一(yī)種是(shì)從βλ₽↓(cóng)右下(xià)角以一(yī)定角度劃入的(de)錯(cuò)"✘♦¶覺。所以斜線的(de)布局也(yě)經常被采∏$用(yòng)在滾動視(shì)差網站(zhàn)‍®≥×的(de)設計(jì)中去(qù)。

　　3.純色的(de)運用(yòng)

　　沒有(yǒu)比純色的(de)背景更直觀更簡潔。純色可(k≤♥ě)以有(yǒu)很(hěn)多(duō×→•')種表達方式

　　純色比漸變和(hé)圖片更容易延展，并且純色很(hěn)容易區(qū)©®♦分(fēn)視(shì)差區(qū)間(jiān)。在使用(yòng)時(✔←∞shí)我們可(kě)以調整顔色的(de)透明(míng)≠‍♣度，來(lái)達到(dào)各種視(shì)覺效果。所以純色的¶÷(de)運用(yòng)也(yě)是(shì)滾動視(>δshì)差設計(jì)者的(de)大(dà)§σδ愛(ài)。

　　寫在最後想說(shuō)一(yī)句：作(zuò)♥>λ為(wèi)一(yī)個(gè)視(shì)覺設計(jì)其實做(•σ‍zuò)設計(jì)的(de)時(shí)候有(y∑®ǒu)很(hěn)多(duō)束縛，能(néng)夠遇到≤<(dào)一(yī)個(gè)可(kě)以玩(wán)滾動視(shì©₩)差的(de)項目不(bù)容易，遇到(dào)了(le)α ✔★就(jiù)不(bù)要(yào)輕易放(fàng)掉，好(hǎo)好(hǎφ<↔≥o)玩(wán)一(yī)把，它會(huì)讓≠≠你(nǐ)的(de)設計(jì)增色不(bù)少(shǎo)。