設計趨勢:創新懸停效應,你看過了嗎?

Comment

UI/UX設計
3

動效是如今UI設計中的重要組成部分,也是目前最熱門的設計趨勢之一。在之前的《在現代網頁設計中,動效有哪些常見的用法》這篇文章中,我們探討了動效對於交互和用戶的重要意義,動效在不同的環節發揮的作用越越來越大。而今天我們要聊的是光標懸停特效,這也是近年動效設計的熱點之一。

正是由於Material Design 和蘋果所引領的動效設計風潮,許多曾經有過的設計技巧和元素正在逐步回歸,而懸停特效就是其中之一。但是相比於曾經那些閃爍彈跳的特效,現如今的光標懸停特效來的更加微妙,更加強調功能性和體驗。

和其他動效相似,光標懸停特效讓交互的引導性更強,有的還帶有預覽的作用,它的使用範圍非常廣,大到全屏,小到提示和導航元素,不一而足。

接下來,我們通過實戰案例看看,光標懸停特效目前有哪些創新的玩法。

 

首頁動效

1

光標懸停特效用的好,能成為你的網頁整體設計中的大殺器。當你光標懸停在特定的位置的時候,整頁的動效隨之觸發,視覺上是相當驚豔的。

比如Haus 這個頁面,觸發動效之後,整頁的卡通角色在屏幕上走來走去,這個工作量和效果都是相當驚人的。觸發動效前,只有標題文字會在屏幕上舞動。

觸發全屏幕動畫之後,讓用戶覺得愉悅而不是給用戶帶來壓力。這中間的平衡很難把握。在這個案例中,設計師讓黑色的背景和白色的非襯線體來構成對比,而中間留出空間給動效。這種設計手法是為了鼓勵用戶在向下滾動前,盡量多和屏幕上的內容進行互動。

 

按鈕特效

2

一個簡單的動效實際上能夠讓用戶的點擊慾望提升一大截。看起來,為按鈕做特效是一件很簡單的事情,是吧?正是因此,按鈕的懸停動效一直都很火,也是設計師們最快能想到的。

一個設計良好的按鈕懸停動效,能讓用戶更好的理解按鈕的功能,並吸引用戶觸發它。上面的案例來自 Luke Etheridge,當光標懸停到按鈕上的時候,色彩改變,通過變化告知用戶,這個按鈕可以點擊。

 

圖庫和輪播圖

3

網頁中的圖庫和輪播圖也是相當常見的控件。幾乎所有的圖庫和輪播圖都帶有動效,從圖片切換的動效到光標懸浮顯現的箭頭,圖庫和輪播圖和按鈕的懸浮動效一樣,堪稱這類動效的典範。

不過,動效要設計合格也是非常講究的,Material Design 對於動效的要求非常值得參考學習:

·動效要快速
·動效要清晰
·動效要有凝聚力

上方的這個動效案例源自於設計師Baptiste Dumas之手,所有的這些動效都非常的迅速,絕不拖泥帶水,所有的內容之間都有著明顯的界限,而內容和內容之間又通過動效相互串在了一起,如同行雲流水一般順暢。

 

導航和菜單

4

不管你喜歡不喜歡,隱藏式導航是目前最流行的設計趨勢之一。大量的懸停動效的加入,讓用戶可以在擁有乾淨清爽的界面的同時,順暢自然的隨著導航瀏覽不同的內容。

懸停動效的加入,讓代表菜單的漢堡圖標可以隨著光標移動而出現或者消失,用戶可以在菜單或者導航出現的時候點擊內容,而無需查看的時候移開光標,就能擁有一個開闊的視野。

上面名為Oxen Made 的網站首頁就有兩個地方採用了懸停動效,引導用戶點擊,右上角的Menu 菜單按鈕在鼠標懸停上去的時候會改變顏色,點擊呼出菜單;右下方的三角形按鈕採用了同樣的動效,引導用戶向下翻頁,查看更多的內容。

這些微妙的動效和背景下快速切換的視頻內容構成了鮮明的對比,用戶會很容易發現它們的存在,被吸引註意力,並且被引導著去交互。

 

表單和字段

5

表單和其中的字段內容是使用鼠標懸停特效的大戶。幾乎你所訪問的每一個網站都或多或少需要你填寫表單,提交信息。如果表單越容易填寫,獲取用戶信息的成功率就越高。

並不是說表單本身一定要非常簡單,或者非常有趣,而是你需要讓用戶清楚如何填寫表單,格式是怎樣的,以及是否填寫正確。這個時候,光標懸停的特效就顯得非常重要了。

正如同上面所展示出的這個案例。通過動效和圖標等信息,用戶被告知了哪些信息是需要被輸入的,當他們輸入完成後,點擊登錄,確認的動畫立刻就出現了。這個案例是APP的。在桌面端上,你可以讓說明在光標懸浮在特定字段上的時候借助動效呈現說明,將說明信息推送到用戶眼前。

如果你不知道從哪裡開始下手設計懸浮動效的話,表單是你的首要選擇。至少在這個環節,用戶是有預期的,而他們的需求也不復雜:使用簡單的動效給予用戶清晰的說明,和正確的反饋。

 

相關資源

如果你想立刻馬上動手試一試懸浮動效的話,下面的資源可以實現你的願望:

·Hover.css: 這是一組使用CSS3實現的懸浮特效,它可以應用到按鈕、鏈接、LOGO、SVG、圖片等元素上。它還提供了CSS、Sass和Less的版本。

·Icon hover effects: 這是一組簡單的懸浮特效,它會讓圓形的圖標看起來更加顯眼。

·Amazing WordPress hover effects: 這是為WordPress 用戶所準備的光標懸浮特效,純CSS3,不依賴其他組件。這個合集包含了幾十個備選樣式。

·W3Schools – CSS3 Transitions: 從0開始學習CSS3過渡特效。

 

結語

懸停動效看起來很麻煩很棘手,但是實際上很簡單,使用CSS動效,幾乎任何人都可以輕鬆的在網頁中實現這個功能。它是輕量級的,並且有大量的現成的代碼供你使用。

不過,重點在於你需要把握懸停動效的核心規則:它是要有用的,而不僅僅是炫酷的效果。

 

 

frankbite-關注UI設計/前端/網頁,如果您喜歡我們的文章,歡迎 Follow 我們的 Facebook 專頁,我們將為您提供最新、最實用的資訊!

%e6%9c%aa%e5%91%bd%e5%90%8d-1_03

 

原文地址:designshack