設計師必看|優秀網頁的沉浸式動態設計

語言: CN / TW / HK

在使用網頁時,恰到好處的網頁動效能讓頁面更加流暢,比如加載時的小動效,能緩解用户的負面情緒,一些和品牌結合的動畫效果也能起到加強品牌的作用,讓用户對品牌記憶度更深。所以動效設計不僅僅是效果展示,而是在幫助提升用户體驗。小編根據網頁特性,為大家總結了幾類有趣的網頁動效設計,從導航框架到光標懸停、滾動狀態一網打盡,一起來看看吧!

#01

生動的導航/菜單

菜單導航是網頁中用户最常用的交互區域。有趣生動的導航交互可以引起用户探索網頁內容的興趣,帶用户深入瞭解網頁要傳達的信息,也可以使複雜的網頁內容結構更直觀的展示在用户眼前,便於用户理解全局。

01. 內容動態導航

Spinning image selector,這個動態導航讓圖片像唱片一樣有序的分類和排列並可以跟隨鼠標轉動,選圖片的過程變得像逛唱片店一樣有意思。

▲ Spinning image selector

Your Plan, Your Planet是關於可持續未來規劃的動效網頁作品,所以它的首頁導航設計以水、食物、能量等生活元素為主,鼠標滑動選擇不同的元素懸停進入內容,讓整個網頁非常富有可愛創意和設計感。

▲ Your Plan, Your Planet

02. 跟隨型進度導航

Living with OCD 採用了onepage的方式用户可以通過鼠標滾動瀏覽,同時在底部提供了一個類似於Milestone的導航幫助用户快遞抵達自己關心的內容。

▲ Living with OCD

03. 全屏動態導航

除此之外,全屏頁也是非常常見的導航菜單動效方式,可以更加沉浸在整體氛圍中。

▲ 全頁面導航動效

所以是時候在網頁上拋開傳統的吸頂導航和側邊導航了,嘗試一下全新的方式,這裏可以很好的發揮你的設計創意,讓網站有趣起來。

#02

不起眼的頁腳

網頁底部頁腳,是網站最不起眼的部分。但也正是這塊最不起眼、容易忽略的部分,在網站中卻有着至關重要的功能擔當。通常頁腳包括站點基礎信息、社交鏈接、法律信息、隱私政策和使用條款。在最不起眼的頁腳裏,如何做出出彩的動效呢?

01. 打破邊界的飛入飛出

沒有什麼比來段舞蹈更能表達快樂了,插畫裏巧用動感舞蹈的飛人、表情打破邊界設計,外加多角色舞蹈、互動的手勢、時髦的形狀、有趣的字體、多彩的顏色,給頁面注入一點額外的快樂。

▲ 打破邊界的設計

02. 貼近主題的互動方式

隨着鼠標的移動,人與人之間通過分享連接在一起。加上黑白灰的配色方案,更好的營造主題氛圍。沒有顏色,讓用户更好的聚焦內容去思考。

▲ 畫面感結合

03. 霓虹燈變色過渡效果

夢幻的霓虹燈氛圍感十足,很享受這種流行色趨勢,切換真實和想象,給人一種進入另一層境界的感覺。夢幻和神祕,適合高科技產品的發佈會、工程落地的展示、效果圖的真實預演等。

▲ 氛圍感拉滿

04. 隱藏彩蛋驚喜功能

一堆高亮色的卡片堆積在底部,顯的額外亮眼。隨着鼠標的移動、點擊上去,可以進行操作和互動。很巧妙的運用顏色對比去引導用户點擊彩蛋,從而給網站注入更多一些有趣和超預期的期待。

▲  製造小驚喜的地方

05. 打造有趣的故事

一隻小鹿在廣闊的平原奔跑,從太陽升起到落下。有趣的故事畫面,讓人流連忘返,有效的提升品牌心智和影響力。

▲  小鹿打造有趣故事

#03

獨有的鼠標懸停

鼠標懸停是網頁特有的交互形式,相較移動端手指觸碰屏幕某區域時無論是點擊、長按或滑動一定會產生的操作行為,鼠標可以在無操作行為時依然長時間停留在屏幕上,而當光標在網頁中的部分按鈕、文字、圖片等元素上停留時,該元素可能會產生變化或是有新內容彈出,輔助頁面信息的表達。很多網頁設計都會在光標懸停效果上加入一些巧思,讓網站設計的更出彩。

01. 流暢的色彩變換

其中,最常見的懸停效果,即鼠標懸停操作按鈕時會產生顏色甚至形狀變化,示意該區域可點擊。

▲ 流暢的色彩變換

02. 元素結合

除了用於提示該元素為可操作的行動點外,也經常用户輔助傳遞更多信息,正常狀態下只展示基礎信息,在鼠標懸停時才展開詳細信息,即保障了頁面常態展示下清爽和簡潔的佈局同時也增加了趣味性。

▲  懸停元素結合

03. 製造懸停視差

以上提到的懸停效果具備一定功能性,但也有設計師會在網頁設計中融入很多讓畫面更有趣、更豐富、僅用於展示的懸停效果,如下圖例中光標懸停在海報時的翻起效果、鼠標移動時畫面元素跟隨產生的視差效果。

▲ 鼠標懸停視差

04. 異常狀態的小互動

最後,分享幾個與網站交互結合不錯的鼠標懸停案例,讓用户在瀏覽網站甚至遇到404的情況時不再枯燥。

▲ 異常狀態小互動

#04

眼前一亮的加載

加載狀態是頁面切換間最常出現,也常會與品牌結合去做些小心思設計的地方。當然,除了品牌結合或是旋轉的小圈圈加載還有些有意思的加載方式。

01. 結合主題加載

網頁加載的等待頁面,恰當的結合網頁主題其實可以變得有趣且有用。比如鮮花網站的加載被設計成一束鮮花盛開的過程,花朵全部盛開後加載完成。短暫的等待期間可以自然的強調網站主題,同時為用户提供一個精緻的視覺體驗。同樣作為結合主題的案例,攝影網站的加載頁呈現的是相冊翻閲,加載完成想要打開的圖片自然的被呈現,用户體驗沉浸且流暢。

▲ 結合主題,相冊翻閲加載

02. 數字加載

數字計數作為最傳統的加載進度呈現方式,其實也可以做的新潮有趣。比如通過對數字字體進行特殊設計,同時數字輪播時與背景互相影響產生層次疊加的效果,視覺體驗更加豐富。或者將數字轉譯為手勢表達,輕鬆、直觀且日常化。

▲ 數字加載

#05

漸近的搜索與篩選

網頁因其更高效的鼠標點擊操作及更多的空間使用,出現了搜索與篩選項融合的交互形態,此類融合方式使用分層和漸進的展示方式,確保檢索過程是順暢且無更多的跳轉。

01. 動態前置搜索結果

國外某旅行類web平台——66°Nord,將篩選項類型結合搜索入口進行聚合展示,篩選後反饋結果數據,在旅行類場景中,一些非常顯性的信息,如目的地、酒店類型、價格等在搜索中起到非常重要的作用,搜索的關鍵也就在於“我要非常快的選好這幾個屬性,然後查看結果即可”,這種動效處理就很好的滿足了用户需求。

▲ 66°Nord

02. 絲滑展示搜索結果

搜索輸入過程中,過程信息及目標結果應及時反饋,聯想文字過程中通過顏色高亮閃現增強錄入文字的確定性,通過篩選項進一步過濾結果,篩選面板給予放大響應,同時列表刷新浮現搜索結果,過程連續無中斷如絲般順滑;簡單的操作通過細緻入微的動效為用户增加了一些交互反饋上的細膩關懷。

▲ 從搜索輸入到結果展示過程絲滑

#06

效果絕佳的WebGL

隨着 WebGL 技術的發展和元宇宙的熱門,3D 元素在網頁設計中的使用頻率越來越高。3D 風格的網站相比以往,有着更豐富的視覺表達手段和多樣化的交互形態。我們常見的使用 3D 技術設計的網站主要是信息可視化類,例如數據可視化、園區/機場信息可視化(數字孿生)等,又或者是一些 3D 網頁小遊戲。除此之外,還有一些不太常見的、使用 3D 技術去更好的表達產品或概念的網站。

▲ 概念汽車產品在網頁中的沉浸式體驗

▲ 概念時裝秀在網頁中的沉浸式體驗

Don't blidly follow the crowd.(不要盲目從眾)

▲俄羅斯的萬神殿雕塑

寫在最後

恰到好處的動效設計能讓網頁帶來新的感受,看完這些,網頁設計師們可以也在自己的項目中嘗試起來,説不準會有意想不到的效果哦~

評論區歡迎大家分享有意思的網頁動效設計哦:smile:

本期作者:極致匠心的牛牛們

//////   END  //////

淘寶設計,一個服務於全球億萬消費者體驗的設計團隊,致力於讓設計觸動人心,讓商業美而簡單。 歡迎加入我們,公眾號後台回覆“招聘”,瞭解最新招聘信息。