設(shè)計師應(yīng)該要了解網(wǎng)頁上各種效果的實現(xiàn)能力，才能給用戶創(chuàng)造出非常吸引人的視覺體驗。

滾動頁面是一個很常規(guī)的操作，結(jié)合這個交互行為可以在設(shè)計上有哪些可以發(fā)揮的點呢？可能這對很多人來說，算是一塊知識盲區(qū)，那么就跟著這篇文章一起來學(xué)習(xí)吧！

視差滾動特效是用戶在滾動頁面的過程當(dāng)中，頁面中不同元素隨之進(jìn)行不同速率的運動，所營造出的接近3D的視覺效果。設(shè)計中增添音頻和視覺為內(nèi)容賦予了更多的生機，傳達(dá)出許多純文字無法捕捉到的內(nèi)容。滾動視差以步步推進(jìn)的方式傳達(dá)出內(nèi)容，以吸引人們閱讀，它利用了網(wǎng)頁的優(yōu)勢呈現(xiàn)出非常棒的視覺效果。

當(dāng)你想要表達(dá)一個細(xì)膩故事時，考慮使用滾動視差設(shè)計

滾動視差設(shè)計特別適合用來敘述一些細(xì)膩內(nèi)容，隨著內(nèi)容慢慢鋪開，通過設(shè)計能使得內(nèi)容變得更加鮮活。滾動視差能夠突出故事內(nèi)容，并把你吸引到它的敘述中。優(yōu)秀的設(shè)計能夠使得每一頁的銜接自然流暢，使你在下滑頁面的過程中更加專注于內(nèi)容。

案例

我收集了一些非常好的滾動視差設(shè)計案例來幫助大家設(shè)計出屬于自己的網(wǎng)頁效果。

案例1：Millennials are screwed（千禧一代的困局）

我們經(jīng)常都喜歡拿千禧一代來開玩笑，但這一代確實面臨著一些重大的挑戰(zhàn)。 Millennials are screwed（https://highline.huffingtonpost.com/articles/en/poor-millennials/）這個網(wǎng)站通過一位年輕人的眼睛向我們展示了這個世界，以便清楚地了解他們所面臨的挑戰(zhàn)。

故事是由一位千禧一代的自述，用一種比較幽默的手段講述了他們所面臨的財務(wù)困境和其他現(xiàn)實問題。

這個網(wǎng)頁是通過懷舊的視頻動畫游戲，結(jié)合像素化的圖形和一些有趣的視覺效果來呈現(xiàn)的。它抓住了千禧一代人的復(fù)雜情感，同時也是為了讓年輕人更容易接受和閱讀。

讀了網(wǎng)頁上的內(nèi)容，不禁讓我對千禧一代產(chǎn)生了更多的同情。這就是一個很好的例子，使用智能，有趣的網(wǎng)頁設(shè)計來連接更多的讀者。

案例2：UTC is enough for everyone… right?（UTC對每個人來說都足夠，對嗎？）

對大多數(shù)人來說，世界標(biāo)準(zhǔn)時間（UTC）并不是一個特別吸引人的話題。但Zach Holman做了一個網(wǎng)站，解釋了它的工作原理以及使用時的復(fù)雜性。他的網(wǎng)站風(fēng)趣幽默，把枯燥的理論講的通俗易懂。

在每一個分割內(nèi)容之間會插入一些動態(tài)視頻背景，這些設(shè)計既特別，又不會令人生厭。這些驚艷的視覺沖突吸引了讀者的注意力，讓大家有興趣接下來會出現(xiàn)什么樣的炫目視覺效果。

任何讀過枯燥技術(shù)文章的人，都可能會昏昏入睡。這個案例在說明一件事，那就是富有創(chuàng)造力的展現(xiàn)形式可以將最枯燥的話題變得有趣。對于那些對程序設(shè)計不感興趣的人來說，這個網(wǎng)站應(yīng)該算是一份非常有吸引力的讀物了。

案例3：Web design and art history（網(wǎng)頁設(shè)計和藝術(shù)史）

慢慢滾動鼠標(biāo)瀏覽 網(wǎng)頁設(shè)計和藝術(shù)史（https://webflow.com/web-design-art-history）就像真的是在一座博物館里消磨時間（譯者注：我滑了好久）。每一個內(nèi)容區(qū)間都像一個畫廊分支，展示了某一段時間內(nèi)的流行趨勢。這個網(wǎng)站，記錄了藝術(shù)的演變。

由于網(wǎng)頁設(shè)計和視覺藝術(shù)有一些共通的語言，熟悉藝術(shù)史可以啟發(fā)自己創(chuàng)作出優(yōu)秀的作品。如果你對藝術(shù)和設(shè)計感興趣，這個網(wǎng)站將會是一份很好的入門讀物。

案例4：The History of the Web: Interactions 2.0（Web設(shè)計歷史：交互2.0）

滾動視差設(shè)計的使用打破了傳統(tǒng)故事展示的局限，充分使用網(wǎng)頁這種載體將創(chuàng)意發(fā)揮到極致。

Introduction to Interactions 2.0（https://webflow.com/ix2） ，這個網(wǎng)站帶著讀者圍觀了從web最初始的階段一直到現(xiàn)如今不會寫代碼也能創(chuàng)造出很棒的網(wǎng)站的突破。網(wǎng)站里包含了許多令人愉悅的網(wǎng)頁效果，回看這些歷史不禁感嘆，趨勢的更新迭代是有快啊。

案例5：Time in Perspective（時間透視）

滾動視差設(shè)計是講述線性故事的完美媒介——還有什么比時間流逝更線性呢？從24小時直至宇宙的盡頭，在 Time in Perspective（https://wfs2.webflow.io/time-in-perspective）滾動觸發(fā)動畫時間軸，顯示每一個階段。這是一個很好的例子，使用網(wǎng)頁設(shè)計并不僅僅是為了營銷，設(shè)計同時也是創(chuàng)新教育的有力工具。

案例6：If the Moon Were Only 1 Pixel （如果月球只有一個像素）

If the Moon were only 1 pixel(http://joshworth.com/dev/pixelspace/pixelspace_solarsystem.html) 網(wǎng)站使用的是一種橫軸動畫，帶你穿越浩瀚的宇宙。Josh Worth在向女兒解釋到達(dá)火星需要多長時間后創(chuàng)建這個網(wǎng)站，他想知道自己是否能用電腦來繪制太空地圖。這個網(wǎng)站很好的聚焦于空間的深度，幫助我們理解宇宙的深邃。Josh Worth用一個像素代表了月球，然后顯示了與其相關(guān)的一切物體。

這個項目是另一個很好的例子，說明好的設(shè)計可以讓學(xué)習(xí)變得更有吸引力。

案例7：Ali Wong Structure of Stand-Up Comedy（Ali Wong的喜劇結(jié)構(gòu)）

馬克吐溫有句名言：「解釋幽默就很像解剖一只青蛙，你在這個過程中是能學(xué)到很多，但最終你卻把它殺死了?！沟z憾的是，對于他來說，沒能等到數(shù)字時代的到來。

之前給出的很多案例都在討論把滾動效果應(yīng)用于時間軸相關(guān)的內(nèi)容。喜劇表演是一種敘事性的表演，節(jié)奏和組合的重要性與真正的笑話一樣。

Ali Wong Structure of Stand-Up Comedy（https://pudding.cool/2018/02/stand-up/）是對Ali Wong最新脫口秀《Baby Cobra》的分析，它分析節(jié)目中的每一個瞬間，每一個笑話，以顯示最大的笑點到底在哪里。這是一個關(guān)于時間和節(jié)奏如何能夠帶來更好效果的有趣研究，同時也讓我們了解到Ali Wong為什么能成為如此出色的作家和演員。

滾動視差設(shè)計實現(xiàn)工具

我們已經(jīng)了解了如何使用不同滾動效果來講述不同類型的故事，以及其中包含的一些設(shè)計方法。為了幫助大家能做出自己的滾動視差效果，我收集了一些工具來幫助你。如果想在設(shè)計工作時進(jìn)行嘗試，Webflow（https://webflow.com/）可能是最好的選擇。

在滾動中制造視差

滾動時以不同的速度移動元素是創(chuàng)建視差的一種方式。視差是一個簡單的效果，在故事中創(chuàng)造多維度的動畫，促使人們繼續(xù)閱讀。

在「網(wǎng)頁設(shè)計和藝術(shù)史」的網(wǎng)頁中使用了視差效果來展現(xiàn)這些幾何圖形。

打開這個教程(https://university.webflow.com/article/parallax-movement-on-scroll) 來開始制作這個效果。

滾動中顯示進(jìn)度

在設(shè)計中使用滾動觸發(fā)的進(jìn)度條是一種向人們展示所處位置并不斷推動他們前進(jìn)的方式。這個藍(lán)色進(jìn)度條固定在頁面的頂部，平滑的動畫從0擴展到100%。它提升了閱讀體驗，也成為了更好的導(dǎo)航。

滾動時顯示元素

當(dāng)一個設(shè)計有太多的靜態(tài)內(nèi)容時，閱讀起來會很累。在滾動模式下，長篇故事講述的過程中，動畫提供了一個很好的休息時間，隨著內(nèi)容的淡入淡出，在閱讀體驗上做到了最好。

這種效果可以應(yīng)用于文本或者視覺效果，我們在Graphic design archive中使用這種效果，標(biāo)志著一個新的內(nèi)容塊的開始。

我們在這里提供了一份教程(https://university.webflow.com/article/reveal-elements-on-scroll) 幫助大家理解這種效果的實現(xiàn)方法。

水平滾動時加入漸隱效果

當(dāng)頁面上有一個閑置的設(shè)計元素時，比如標(biāo)題，為什么不給它一些活力呢？水平動畫喚醒了這些沉睡的設(shè)計元素，給予它們新的生命。以上面給出的例子來說明，水平移動標(biāo)志著故事的開始，「Let’s go outside」更具有吸引力。

這里我們也提供了一份教程(https://university.webflow.com/article/horizontal-movement-on-scroll).

水平滾動

水平滾動是一個不錯的改變，它會讓你的注意力集中到內(nèi)容上，并打破傳統(tǒng)的垂直布局。

Proud and Torn(https://proudandtorn.org/)是一個關(guān)于匈牙利歷史的網(wǎng)站，使用水平滾動來突出它所涵蓋的不同時代。

回顧我們之前討論過的藝術(shù)網(wǎng)頁設(shè)計和藝術(shù)史——我們使用水平滾動作為另一種讓人們保持活躍和參與的方式。

我們這邊有給出一個關(guān)于水平滾動的教程（https://webflow.com/blog/creating-horizontal-scrolling）將讓能設(shè)計出屬于自己的網(wǎng)站。

粘性定位

Pudding是Ali Wong的喜劇作品原創(chuàng)網(wǎng)站，上面有關(guān)于如何設(shè)計「粘性定位」的教程（https://pudding.cool/process/scrollytelling-sticky）。粘性定位是將一個元素暫時放在一個設(shè)計中，引起人們的注意，繼續(xù)滾動一會兒，它就會固定在頁面的某一個位置。我們都是上面那份教程的粉絲，它以一種容易理解的方式分解了這個過程，這些都是通過滾動來實現(xiàn)的效果。

（譯者注：sticky 是css position中的一種新增屬性，相當(dāng)于relative和fixed的結(jié)合體。這個屬性的表現(xiàn)就是現(xiàn)實中你見到的吸附效果。）

創(chuàng)建一個粘性側(cè)邊欄

我們剛才討論了粘性定位，那做出一個粘性側(cè)邊欄效果又會如何呢？

滾動一段時間后，側(cè)邊欄就會固定在某一個位置，用這種效果來做導(dǎo)航實在是非常好用。

這里也提供一個小教程給大家作為參考，以方便在自己的項目中使用這種效果：https://university.webflow.com/article/position-sticky

網(wǎng)頁設(shè)計讓你能以更加豐富的方式去講述一個故事

網(wǎng)頁已經(jīng)改變了講故事的方式。有了動畫，特效和互動，閱讀不再是被動的體驗。滾動視差是一種多媒體的體驗，可以激發(fā)更深層次的思考和理解。它展示了很多不能單獨用語言來表達(dá)的東西，使得讀者也成為一個積極的參與者。

原文鏈接：https://webflow.com/blog/scrollytelling-guide    Jeff Cardello

譯者微信公眾號：「彩云譯設(shè)計」