網(wǎng)頁滾動特效要怎么設(shè)計？來看看這12個網(wǎng)站

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

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

1. TOMORROW SLEEP

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

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

2. TWIST

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

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

3. YARN APP

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

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

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

4. DASHFLOW

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

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

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

5. QUUU PROMOTE

Quuu Promote 這個網(wǎng)站的動效設(shè)計非常的克制，僅在CTA 元素上使用。

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

6. QONTO

Qonto 的首頁展示了一個成熟的滾動瀏覽動效設(shè)計作品應(yīng)有的素質(zhì)。整個網(wǎng)站使用的動效類型也不多，良好的視覺設(shè)計構(gòu)成了它的基礎(chǔ)，從圖標、按鈕、裝飾元素到內(nèi)容區(qū)塊，都隨著瀏覽而逐步加載、展現(xiàn)，這些動效的存在感都比較強，不是太微妙，但是也不會影響到瀏覽。
?

7. HIKE

和前一個案例正好相反，Hike 的官網(wǎng)為你展現(xiàn)了微妙的滾動動效是怎么設(shè)計的。

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

8. PROJECT FI

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

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

9. BASE

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

但是它依然很典型，不復(fù)雜，雖然看起來展現(xiàn)內(nèi)容時候的幅度并不小，但是它對于體驗的影響并不大。

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

10. ANYLIST

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

11. ERNEST

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

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

你可以使用側(cè)面的導(dǎo)航來快速跳轉(zhuǎn)到不同的部分，這也是單頁設(shè)計和視差滾動設(shè)計中常見的元素。

12. TAXINET

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

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

【好動效是這樣養(yǎng)成的】

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

原文地址：webdesignerdepot
原文作者：JAKE ROCHELEAU
優(yōu)設(shè)譯文：@陳子木

本文由優(yōu)設(shè)網(wǎng)原創(chuàng)翻譯，請尊重版權(quán)和譯者成果，轉(zhuǎn)摘請附上優(yōu)設(shè)鏈接，違者必究。謝謝各位編輯同仁配合。

【優(yōu)設(shè)網(wǎng) 原創(chuàng)文章 投稿郵箱：yuan@uisdc.com】

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

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

設(shè)計導(dǎo)航：國內(nèi)人氣最高的設(shè)計網(wǎng)址導(dǎo)航，設(shè)計師必備：http://hao.uisdc.com