動效在如今的網站上已經無處不在了，盡管它們很常見，但是這些動效用的是否合適，是否真正創造了足夠優秀的用戶體驗，還鮮有討論。

今天我要聊的“滾動瀏覽動效”是網頁設計中最常見，也是最有用的一種動效。雖然滾動瀏覽動效并不一定適用與每個網站，但是使用這一動效的網站通常有著更加有趣和優雅的體驗。今天的文章，我們搜集了一些我覺得在這個動效上設計很突出的幾個網站與你分享一下。
?

1. TOMORROW SLEEP

在這個網站上，你會注意到它所采用的滾動瀏覽動效非常柔和，整個布局當中，各種文本和CTA元素會隨著滾動逐步顯現。

設計師在設計的時候，并沒有讓所有元素都默認隱去，而是讓絕大多數的圖片、背景以及裝飾元素都保持顯示，在滾動過程中，逐步顯現的是文本和CTA元素，這樣的設計很容易讓用戶被這些內容所吸引。
?

2. TWIST

和第一個網站不同的地方在于，Twist 采用了我們更常見的滾動瀏覽動效：頁面原本空無一物，隨著加載和滾動，所有的元素都逐步在白色的背景上逐步顯現。

雖然有些元素會因為加載的原因加載沒有那么快，但是不會讓用戶等太久就會出現。Twist 這種動效同樣保持著柔和自然的特點。

3. YARN APP

這個 Yarn APP的著陸頁的設計比起前面的兩個案例要相對復雜一點，它在頁面中采用了不同樣式的加載動效來呈現APP 的各方面特性和賣點。

隨著用戶向下滾動，用來呈現APP 特點的界面圖會伴隨著不同類型的滾動瀏覽動效而出現，相互交替，營造出豐富多樣的瀏覽體驗。

由于整個頁面的視覺設計都保持著簡約的特征，動效的多樣反而不會讓人覺得花哨。
?

4. DASHFLOW

在所有的這些滾動瀏覽特效設計當中，Dashflow 所采用的動效技術是最常見的。

整個頁面采用了時下最流行的單頁式布局，這也使得滾動時候的動效大多都是沿著橫向或者縱向運動。

這些動效雖然簡單，但是通過合理的搭配，一樣創造出流暢順滑、令人難忘的體驗。

5. QUUU PROMOTE

Quuu Promote 這個網站的動效設計非常的克制，僅在CTA 元素上使用。

不能說這樣的設計是否轉化率更高，但是視覺上的效果是很明顯的。當你打開頁面向下滾動的時候，會發現僅有CTA 按鈕是綠色的，并且它們在出現于頁面視野內時，左右輕微晃動，吸引用戶的注意力。頁面其他地方的元素都保持靜止，這種鮮明的對比使得CTA 元素非常突出。

6. QONTO

Qonto 的首頁展示了一個成熟的滾動瀏覽動效設計作品應有的素質。整個網站使用的動效類型也不多，良好的視覺設計構成了它的基礎，從圖標、按鈕、裝飾元素到內容區塊，都隨著瀏覽而逐步加載、展現，這些動效的存在感都比較強，不是太微妙，但是也不會影響到瀏覽。
?

7. HIKE

和前一個案例正好相反，Hike 的官網為你展現了微妙的滾動動效是怎么設計的。

頁面中靜態和動態元素雜糅，動態元素的動效運動速度很快，在你的視覺捕捉到它們的時候，基本上就停止運動了，讓你發覺卻又不帶來干擾。

8. PROJECT FI

Google 的 Project Fi 的介紹頁面采用了夢幻般的動效來強化整個體驗。隨著頁面的滾動，大的內容區塊之間會小幅度地加速運動，創造動態的視覺體驗，而其中所承載的圖標和扁平化的插畫，則會以更快的速度，從下方向上浮現。

元素的展現速度并不慢，幅度也控制得恰到好處，速度差則將信息的層次感得到了強化。有趣的地方在于，當你滾動到頁面底部，再向上滾動的時候，會發現動效的運動方向會正好反過來。
?

9. BASE

Base CRM 的首頁是個很好的案例證明簡單的動效同樣可以創造出優秀的體驗。他們首頁上所采用的這種滾動漸現的動效是經過定制的，和其他的同類動效并不完全一樣。

但是它依然很典型，不復雜，雖然看起來展現內容時候的幅度并不小，但是它對于體驗的影響并不大。

整個網站的布局足夠簡約，空間留白也很多。如果他們的動效能夠加載得更快一點，就完美了。
?

10. ANYLIST

作為一個APP的推廣頁面，Anylist 的網頁設計可以算得上漂亮了。Anylist 頁面中唯一一個運動的動效是你剛剛打開的時候，從底部運動到頂部的手機截圖，而當你向下滾動瀏覽的時候，頁面元素會由透明開始逐步顯現，并不會隨著滾動而運動。整個頁面的滾動動效設計的頗為有凝聚力。

11. ERNEST

和其他的滾動瀏覽動效不同，Ernest 這個網站在這個合集當中，是獨樹一幟的。

它的首頁采用了視差滾動的設計，同樣是單頁設計，但是頁面被明顯分割為幾個不同的部分，滾動會觸發動效加載下一個頁面中的元素，元素運動幅度都很大，頁面的定位感很強，不會因為滾動而停留在某個中間狀態。

你可以使用側面的導航來快速跳轉到不同的部分，這也是單頁設計和視差滾動設計中常見的元素。

12. TAXINET

Taxinet 的首頁整個頁面都充分運用了動效技術，動效與圖標、文字、圖像、背景、甚至裝飾元素都緊密結合到了一起，雖然其中一些技術細節使用范圍并不大，但是這個數量的動效集中到一起，互補干擾，所創造的體驗還是非常有意思的。

如果你喜歡這樣的設計，并且想運用到自己的網站當中來，那么最好確保每個動效都足夠快速、高效，才能達到這樣整齊劃一的效果。

【好動效是這樣養成的】

1. 《要做動效？這75款動效工具讓你無所不能（上）》
2. 《要做動效？這75款動效工具讓你無所不能（下）》
3. 《這5個牢不可破的設計規則，是你打造優秀動效的標準》
4. 《超全面！騰訊出品的交互微動效設計指南》

原文地址：webdesignerdepot
原文作者：JAKE ROCHELEAU
優設譯文：@陳子木

本文由優設網原創翻譯，請尊重版權和譯者成果，轉摘請附上優設鏈接，違者必究。謝謝各位編輯同仁配合。

【優設網 原創文章 投稿郵箱：yuan@uisdc.com】

================明星欄目推薦================

優優教程網： UiiiUiii.com 是優設旗下優質中文教程網站，分享了大量PS、AE、AI、C4D等中文教程，為零基礎設計愛好者也準備了貼心的知識樹專欄。開啟免費自學新篇章，按照我們的專欄一步步學習，一定可以迅速上手并制作出酷炫的視覺效果。

設計導航：國內人氣最高的設計網址導航，設計師必備：http://hao.uisdc.com