網頁滾動特效要怎麼設計?來看看這12個網站

網頁滾動特效要怎麼設計?來看看這12個網站

動效在如今的網站上已經無處不在了,儘管它們很常見,但是這些動效用的是否合適,是否真正創造了足夠優秀的用戶體驗,還鮮有討論。今天我要聊的「滾動瀏覽動效」是網頁設計中最常見,也是最有用的一種動效。

動效在如今的網站上已經無處不在了,儘管它們很常見,但是這些動效用的是否合適,是否真正創造了足夠優秀的用戶體驗,還鮮有討論。
今天我要聊的「滾動瀏覽動效」是網頁設計中最常見,也是最有用的一種動效。
雖然滾動瀏覽動效並不一定適用與每個網站,但是使用這一動效的網站通常有著更加有趣和優雅的體驗。
今天的文章,我們蒐集了一些我覺得在這個動效上設計很突出的幾個網站與你分享一下。

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 的首頁整個頁面都充分運用了動效技術,動效與圖標、文字、圖像、背景、甚至裝飾元素都緊密結合到了一起,雖然其中一些技術細節使用範圍並不大,但是這個數量的動效集中到一起,互補干擾,所創造的體驗還是非常有意思的。
如果你喜歡這樣的設計,並且想運用到自己的網站當中來,那麼最好確保每個動效都足夠快速、高效,才能達到這樣整齊劃一的效果。

Category

GogoShark 給你最好的網頁設計

無論您的事業才剛起步、漸上軌道,或計劃向大中華區拓展市場,GogoShark 團隊將提供全方位的服務,為您量身打造數位品牌形象。