設計師應該要了解網頁上各種效果的實現能力，才能給用戶創造出非常吸引人的視覺體驗。
滾動頁面是一個很常規的操作，結合這個交互行為可以在設計上有哪些可以發揮的點呢？可能這對很多人來說，算是一塊知識盲區，那么就跟著這篇文章一起來學習吧！
視差滾動特效是用戶在滾動頁面的過程當中，頁面中不同元素隨之進行不同速率的運動，所營造出的接近3D的視覺效果。設計中增添音頻和視覺為內容賦予了更多的生機，傳達出許多純文字無法捕捉到的內容。滾動視差以步步推進的方式傳達出內容，以吸引人們閱讀，它利用了網頁的優勢呈現出非常棒的視覺效果。
當你想要表達一個細膩故事時，考慮使用滾動視差設計
滾動視差設計特別適合用來敘述一些細膩內容，隨著內容慢慢鋪開，通過設計能使得內容變得更加鮮活。滾動視差能夠突出故事內容，并把你吸引到它的敘述中。優秀的設計能夠使得每一頁的銜接自然流暢，使你在下滑頁面的過程中更加專注于內容。
我收集了一些非常好的滾動視差設計案例來幫助大家設計出屬于自己的網頁效果。
案例1：Millennials are screwed（千禧一代的困局）
我們經常都喜歡拿千禧一代來開玩笑，但這一代確實面臨著一些重大的挑戰。 Millennials are screwed（https://highline.huffingtonpost.com/articles/en/poor-millennials/）這個網站通過一位年輕人的眼睛向我們展示了這個世界，以便清楚地了解他們所面臨的挑戰。
故事是由一位千禧一代的自述，用一種比較幽默的手段講述了他們所面臨的財務困境和其他現實問題。
這個網頁是通過懷舊的視頻動畫游戲，結合像素化的圖形和一些有趣的視覺效果來呈現的。它抓住了千禧一代人的復雜情感，同時也是為了讓年輕人更容易接受和閱讀。
讀了網頁上的內容，不禁讓我對千禧一代產生了更多的同情。這就是一個很好的例子，使用智能，有趣的網頁設計來連接更多的讀者。
案例2：UTC is enough for everyone... right?（UTC對每個人來說都足夠，對嗎？）
對大多數人來說，世界標準時間（UTC）并不是一個特別吸引人的話題。但Zach Holman做了一個網站，解釋了它的工作原理以及使用時的復雜性。他的網站風趣幽默，把枯燥的理論講的通俗易懂。
在每一個分割內容之間會插入一些動態視頻背景，這些設計既特別，又不會令人生厭。這些驚艷的視覺沖突吸引了讀者的注意力，讓大家有興趣接下來會出現什么樣的炫目視覺效果。
任何讀過枯燥技術文章的人，都可能會昏昏入睡。這個案例在說明一件事，那就是富有創造力的展現形式可以將最枯燥的話題變得有趣。對于那些對程序設計不感興趣的人來說，這個網站應該算是一份非常有吸引力的讀物了。
案例3：Web design and art history（網頁設計和藝術史）
慢慢滾動鼠標瀏覽 網頁設計和藝術史（https://webflow.com/web-design-art-history）就像真的是在一座博物館里消磨時間（譯者注：我滑了好久）。每一個內容區間都像一個畫廊分支，展示了某一段時間內的流行趨勢。這個網站，記錄了藝術的演變。
由于網頁設計和視覺藝術有一些共通的語言，熟悉藝術史可以啟發自己創作出優秀的作品。如果你對藝術和設計感興趣，這個網站將會是一份很好的入門讀物。
案例4：The History of the Web: Interactions 2.0（Web設計歷史：交互2.0）
滾動視差設計的使用打破了傳統故事展示的局限，充分使用網頁這種載體將創意發揮到極致。
Introduction to Interactions 2.0（https://webflow.com/ix2） ，這個網站帶著讀者圍觀了從web最初始的階段一直到現如今不會寫代碼也能創造出很棒的網站的突破。網站里包含了許多令人愉悅的網頁效果，回看這些歷史不禁感嘆，趨勢的更新迭代是有快啊。
案例5：Time in Perspective（時間透視）
滾動視差設計是講述線性故事的完美媒介——還有什么比時間流逝更線性呢？從24小時直至宇宙的盡頭，在 Time in Perspective（https://wfs2.webflow.io/time-in-perspective）滾動觸發動畫時間軸，顯示每一個階段。這是一個很好的例子，使用網頁設計并不僅僅是為了營銷，設計同時也是創新教育的有力工具。
案例6：If the Moon Were Only 1 Pixel （如果月球只有一個像素）
If the Moon were only 1 pixel(http://joshworth.com/dev/pixelspace/pixelspace_solarsystem.html) 網站使用的是一種橫軸動畫，帶你穿越浩瀚的宇宙。Josh Worth在向女兒解釋到達火星需要多長時間后創建這個網站，他想知道自己是否能用電腦來繪制太空地圖。這個網站很好的聚焦于空間的深度，幫助我們理解宇宙的深邃。Josh Worth用一個像素代表了月球，然后顯示了與其相關的一切物體。
這個項目是另一個很好的例子，說明好的設計可以讓學習變得更有吸引力。
案例7：Ali Wong Structure of Stand-Up Comedy（Ali Wong的喜劇結構）
馬克吐溫有句名言：「解釋幽默就很像解剖一只青蛙，你在這個過程中是能學到很多，但最終你卻把它殺死了。」但遺憾的是，對于他來說，沒能等到數字時代的到來。
之前給出的很多案例都在討論把滾動效果應用于時間軸相關的內容。喜劇表演是一種敘事性的表演，節奏和組合的重要性與真正的笑話一樣。
Ali Wong Structure of Stand-Up Comedy（https://pudding.cool/2018/02/stand-up/）是對Ali Wong最新脫口秀《Baby Cobra》的分析，它分析節目中的每一個瞬間，每一個笑話，以顯示最大的笑點到底在哪里。這是一個關于時間和節奏如何能夠帶來更好效果的有趣研究，同時也讓我們了解到Ali Wong為什么能成為如此出色的作家和演員。
我們已經了解了如何使用不同滾動效果來講述不同類型的故事，以及其中包含的一些設計方法。為了幫助大家能做出自己的滾動視差效果，我收集了一些工具來幫助你。如果想在設計工作時進行嘗試，Webflow（https://webflow.com/）可能是最好的選擇。
滾動時以不同的速度移動元素是創建視差的一種方式。視差是一個簡單的效果，在故事中創造多維度的動畫，促使人們繼續閱讀。
在「網頁設計和藝術史」的網頁中使用了視差效果來展現這些幾何圖形。
打開這個教程(https://university.webflow.com/article/parallax-movement-on-scroll) 來開始制作這個效果。
在設計中使用滾動觸發的進度條是一種向人們展示所處位置并不斷推動他們前進的方式。這個藍色進度條固定在頁面的頂部，平滑的動畫從0擴展到100%。它提升了閱讀體驗，也成為了更好的導航。
當一個設計有太多的靜態內容時，閱讀起來會很累。在滾動模式下，長篇故事講述的過程中，動畫提供了一個很好的休息時間，隨著內容的淡入淡出，在閱讀體驗上做到了最好。
這種效果可以應用于文本或者視覺效果，我們在Graphic design archive中使用這種效果，標志著一個新的內容塊的開始。
我們在這里提供了一份教程(https://university.webflow.com/article/reveal-elements-on-scroll) 幫助大家理解這種效果的實現方法。
當頁面上有一個閑置的設計元素時，比如標題，為什么不給它一些活力呢？水平動畫喚醒了這些沉睡的設計元素，給予它們新的生命。以上面給出的例子來說明，水平移動標志著故事的開始，「Let's go outside」更具有吸引力。
這里我們也提供了一份教程(https://university.webflow.com/article/horizontal-movement-on-scroll).
水平滾動是一個不錯的改變，它會讓你的注意力集中到內容上，并打破傳統的垂直布局。
Proud and Torn(https://proudandtorn.org/)是一個關于匈牙利歷史的網站，使用水平滾動來突出它所涵蓋的不同時代。
回顧我們之前討論過的藝術網頁設計和藝術史——我們使用水平滾動作為另一種讓人們保持活躍和參與的方式。
我們這邊有給出一個關于水平滾動的教程（https://webflow.com/blog/creating-horizontal-scrolling）將讓能設計出屬于自己的網站。
Pudding是Ali Wong的喜劇作品原創網站，上面有關于如何設計「粘性定位」的教程（https://pudding.cool/process/scrollytelling-sticky）。粘性定位是將一個元素暫時放在一個設計中，引起人們的注意，繼續滾動一會兒，它就會固定在頁面的某一個位置。我們都是上面那份教程的粉絲，它以一種容易理解的方式分解了這個過程，這些都是通過滾動來實現的效果。
（譯者注：sticky 是css position中的一種新增屬性，相當于relative和fixed的結合體。這個屬性的表現就是現實中你見到的吸附效果。）
我們剛才討論了粘性定位，那做出一個粘性側邊欄效果又會如何呢？
滾動一段時間后，側邊欄就會固定在某一個位置，用這種效果來做導航實在是非常好用。
這里也提供一個小教程給大家作為參考，以方便在自己的項目中使用這種效果：https://university.webflow.com/article/position-sticky
網頁設計讓你能以更加豐富的方式去講述一個故事
網頁已經改變了講故事的方式。有了動畫，特效和互動，閱讀不再是被動的體驗。滾動視差是一種多媒體的體驗，可以激發更深層次的思考和理解。它展示了很多不能單獨用語言來表達的東西，使得讀者也成為一個積極的參與者。
原文鏈接：《A beginner's guide to scrollytelling》??Jeff Cardello
歡迎關注譯者的微信公眾號：「彩云譯設計」
復制本文鏈接 文章為作者獨立觀點不代表優設網立場，未經允許不得轉載。
發評論！每天贏獎品
點擊 登錄 后，在評論區留言，系統會隨機派送獎品
2012年成立至今，是國內備受歡迎的設計師平臺，提供獎品贊助 聯系我們
標志設計標準教程
已累計誕生 729 位幸運星
發表評論
↓ 下方為您推薦了一些精彩有趣的文章熱評 ↓