超碰av在线|无码精品一区二区三区在线|伊人色色日韩一级片内射视频群批_欧美丰满少妇人妻HD高清在线_亚洲一区二区中文_亚洲无码动漫专区

這些懸浮動(dòng)效的常見(jiàn)玩法你都知道嗎?

2017-3-13    周周

如果您想訂閱本博客內(nèi)容,每天自動(dòng)發(fā)到您的郵箱中, 請(qǐng)點(diǎn)這里

動(dòng)效是如今UI設(shè)計(jì)中的重要組成部分,也是目前最熱門(mén)的設(shè)計(jì)趨勢(shì)之一。在之前的《在現(xiàn)代網(wǎng)頁(yè)設(shè)計(jì)中,動(dòng)效有哪些常見(jiàn)的用法》這篇文章中,我們探討了動(dòng)效對(duì)于交互和用戶的重要意義,動(dòng)效在不同的環(huán)節(jié)發(fā)揮的作用越越來(lái)越大。而今天我們要聊的是光標(biāo)懸停,這也是近年動(dòng)效設(shè)計(jì)的熱點(diǎn)之一。

正是由于Material Design 和蘋(píng)果所引領(lǐng)的動(dòng)效設(shè)計(jì)風(fēng)潮,許多曾經(jīng)有過(guò)的設(shè)計(jì)技巧和元素正在逐步回歸,而懸停就是其中之一。但是相比于曾經(jīng)那些閃爍彈跳的,現(xiàn)如今的光標(biāo)懸停來(lái)的更加微妙,更加強(qiáng)調(diào)功能性和體驗(yàn)。

和其他動(dòng)效相似,光標(biāo)懸停讓交互的引導(dǎo)性更強(qiáng),有的還帶有預(yù)覽的作用,它的使用范圍非常廣,大到全屏,小到提示和導(dǎo)航元素,不一而足。

接下來(lái),我們通過(guò)實(shí)戰(zhàn)案例看看,光標(biāo)懸停目前有哪些創(chuàng)新的玩法。

首頁(yè)動(dòng)效

光標(biāo)懸停用的好,能成為你的網(wǎng)頁(yè)整體設(shè)計(jì)中的大殺器。當(dāng)你光標(biāo)懸停在特定的位置的時(shí)候,整頁(yè)的動(dòng)效隨之觸發(fā),視覺(jué)上是相當(dāng)驚艷的。

比如Haus 這個(gè)頁(yè)面,觸發(fā)動(dòng)效之后,整頁(yè)的卡通角色在屏幕上走來(lái)走去,這個(gè)工作量和效果都是相當(dāng)驚人的。觸發(fā)動(dòng)效前,只有標(biāo)題文字會(huì)在屏幕上舞動(dòng)。

觸發(fā)全屏幕動(dòng)畫(huà)之后,讓用戶覺(jué)得愉悅而不是給用戶帶來(lái)壓力。這中間的平衡很難把握。在這個(gè)案例中,設(shè)計(jì)師讓黑色的背景和白色的非襯線體來(lái)構(gòu)成對(duì)比,而中間留出空間給動(dòng)效。這種設(shè)計(jì)手法是為了鼓勵(lì)用戶在向下滾動(dòng)前,盡量多和屏幕上的內(nèi)容進(jìn)行互動(dòng)。

按鈕

一個(gè)簡(jiǎn)單的動(dòng)效實(shí)際上能夠讓用戶的點(diǎn)擊欲望提升一大截。看起來(lái),為按鈕做是一件很簡(jiǎn)單的事情,是吧?正是因此,按鈕的懸停動(dòng)效一直都很火,也是設(shè)計(jì)師們最快能想到的。

一個(gè)設(shè)計(jì)良好的按鈕懸停動(dòng)效,能讓用戶更好的理解按鈕的功能,并吸引用戶觸發(fā)它。上面的案例來(lái)自 Luke Etheridge,當(dāng)光標(biāo)懸停到按鈕上的時(shí)候,色彩改變,通過(guò)變化告知用戶,這個(gè)按鈕可以點(diǎn)擊。

圖庫(kù)和輪播圖

網(wǎng)頁(yè)中的圖庫(kù)和輪播圖也是相當(dāng)常見(jiàn)的控件。幾乎所有的圖庫(kù)和輪播圖都帶有動(dòng)效,從圖片切換的動(dòng)效到光標(biāo)懸浮顯現(xiàn)的箭頭,圖庫(kù)和輪播圖和按鈕的懸浮動(dòng)效一樣,堪稱(chēng)這類(lèi)動(dòng)效的典范。

不過(guò),動(dòng)效要設(shè)計(jì)合格也是非常講究的,Material Design 對(duì)于動(dòng)效的要求非常值得參考學(xué)習(xí):

·動(dòng)效要快速
·動(dòng)效要清晰
·動(dòng)效要有凝聚力

上方的這個(gè)動(dòng)效案例源自于設(shè)計(jì)師Baptiste Dumas之手,所有的這些動(dòng)效都非常的迅速,絕不拖泥帶水,所有的內(nèi)容之間都有著明顯的界限,而內(nèi)容和內(nèi)容之間又通過(guò)動(dòng)效相互串在了一起,如同行云流水一般順暢。

導(dǎo)航和菜單

不管你喜歡不喜歡,隱藏式導(dǎo)航是目前最流行的設(shè)計(jì)趨勢(shì)之一。大量的懸停動(dòng)效的加入,讓用戶可以在擁有干凈清爽的界面的同時(shí),順暢自然的隨著導(dǎo)航瀏覽不同的內(nèi)容。

懸停動(dòng)效的加入,讓代表菜單的漢堡圖標(biāo)可以隨著光標(biāo)移動(dòng)而出現(xiàn)或者消失,用戶可以在菜單或者導(dǎo)航出現(xiàn)的時(shí)候點(diǎn)擊內(nèi)容,而無(wú)需查看的時(shí)候移開(kāi)光標(biāo),就能擁有一個(gè)開(kāi)闊的視野。

上面名為Oxen Made 的網(wǎng)站首頁(yè)就有兩個(gè)地方采用了懸停動(dòng)效,引導(dǎo)用戶點(diǎn)擊,右上角的Menu 菜單按鈕在鼠標(biāo)懸停上去的時(shí)候會(huì)改變顏色,點(diǎn)擊呼出菜單;右下方的三角形按鈕采用了同樣的動(dòng)效,引導(dǎo)用戶向下翻頁(yè),查看更多的內(nèi)容。

這些微妙的動(dòng)效和背景下快速切換的視頻內(nèi)容構(gòu)成了鮮明的對(duì)比,用戶會(huì)很容易發(fā)現(xiàn)它們的存在,被吸引注意力,并且被引導(dǎo)著去交互。

表單和字段

表單和其中的字段內(nèi)容是使用鼠標(biāo)懸停的大戶。幾乎你所訪問(wèn)的每一個(gè)網(wǎng)站都或多或少需要你填寫(xiě)表單,提交信息。如果表單越容易填寫(xiě),獲取用戶信息的成功率就越高。

并不是說(shuō)表單本身一定要非常簡(jiǎn)單,或者非常有趣,而是你需要讓用戶清楚如何填寫(xiě)表單,格式是怎樣的,以及是否填寫(xiě)正確。這個(gè)時(shí)候,光標(biāo)懸停的就顯得非常重要了。

正如同上面所展示出的這個(gè)案例。通過(guò)動(dòng)效和圖標(biāo)等信息,用戶被告知了哪些信息是需要被輸入的,當(dāng)他們輸入完成后,點(diǎn)擊登錄,確認(rèn)的動(dòng)畫(huà)立刻就出現(xiàn)了。這個(gè)案例是APP的。在桌面端上,你可以讓說(shuō)明在光標(biāo)懸浮在特定字段上的時(shí)候借助動(dòng)效呈現(xiàn)說(shuō)明,將說(shuō)明信息推送到用戶眼前。

如果你不知道從哪里開(kāi)始下手設(shè)計(jì)懸浮動(dòng)效的話,表單是你的首要選擇。至少在這個(gè)環(huán)節(jié),用戶是有預(yù)期的,而他們的需求也不復(fù)雜:使用簡(jiǎn)單的動(dòng)效給予用戶清晰的說(shuō)明,和正確的反饋。

相關(guān)資源

如果你想立刻馬上動(dòng)手試一試懸浮動(dòng)效的話,下面的資源可以實(shí)現(xiàn)你的愿望:

·Hover.css: 這是一組使用CSS3實(shí)現(xiàn)的懸浮,它可以應(yīng)用到按鈕、鏈接、LOGO、SVG、圖片等元素上。它還提供了CSS、Sass和Less的版本。

·Image hover effects: 這是一組幫你實(shí)現(xiàn)圖片懸浮的代碼。

·Icon hover effects: 這是一組簡(jiǎn)單的懸浮,它會(huì)讓圓形的圖標(biāo)看起來(lái)更加顯眼。

·Amazing WordPress hover effects: 這是為WordPress 用戶所準(zhǔn)備的光標(biāo)懸浮,純CSS3,不依賴其他組件。這個(gè)合集包含了幾十個(gè)備選樣式。

·W3Schools – CSS3 Transitions: 從0開(kāi)始學(xué)習(xí)CSS3過(guò)渡。

結(jié)語(yǔ)

懸停動(dòng)效看起來(lái)很麻煩很棘手,但是實(shí)際上很簡(jiǎn)單,使用CSS動(dòng)效,幾乎任何人都可以輕松的在網(wǎng)頁(yè)中實(shí)現(xiàn)這個(gè)功能。它是輕量級(jí)的,并且有大量的現(xiàn)成的代碼供你使用。

不過(guò),重點(diǎn)在于你需要把握懸停動(dòng)效的核心規(guī)則:它是要有用的,而不僅僅是炫酷的效果。

藍(lán)藍(lán)設(shè)計(jì)www.miumiuwan.com )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)

 

分享本文至:

日歷

鏈接

個(gè)人資料

存檔