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

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

1. TOMORROW SLEEP

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

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

2. TWIST

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

雖然有些元素會(huì)因?yàn)榧虞d的原因加載沒(méi)有那么快，但是不會(huì)讓用戶等太久就會(huì)出現(xiàn)。Twist 這種動(dòng)效同樣保持著柔和自然的特點(diǎn)。

3. YARN APP

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

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

由于整個(gè)頁(yè)面的視覺(jué)設(shè)計(jì)都保持著簡(jiǎn)約的特征，動(dòng)效的多樣反而不會(huì)讓人覺(jué)得花哨。
?

4. DASHFLOW

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

整個(gè)頁(yè)面采用了時(shí)下最流行的單頁(yè)式布局，這也使得滾動(dòng)時(shí)候的動(dòng)效大多都是沿著橫向或者縱向運(yùn)動(dòng)。

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

5. QUUU PROMOTE

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

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

6. QONTO

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

7. HIKE

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

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

8. PROJECT FI

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

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

9. BASE

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

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

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

10. ANYLIST

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

11. ERNEST

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

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

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

12. TAXINET

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

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

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

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

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

本文由優(yōu)設(shè)網(wǎng)原創(chuàng)翻譯，請(qǐng)尊重版權(quán)和譯者成果，轉(zhuǎn)摘請(qǐng)附上優(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è)計(jì)愛(ài)好者也準(zhǔn)備了貼心的知識(shí)樹專欄。開啟免費(fèi)自學(xué)新篇章，按照我們的專欄一步步學(xué)習(xí)，一定可以迅速上手并制作出酷炫的視覺(jué)效果。

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