令人愉悅的動(dòng)效幾乎已經(jīng)成為如今網(wǎng)頁(yè)設計的標準配置了，融入動(dòng)效的交互細節讓現代網(wǎng)頁(yè)同以往的設計在根本上區別開(kāi)來(lái)。動(dòng)效不僅可以表現狀態(tài)，引導用戶(hù)的關(guān)注點(diǎn)，幫助用于預測交互的結果，甚至影響用戶(hù)的行為。

在逐步的探索和發(fā)展過(guò)程中，動(dòng)效在網(wǎng)頁(yè)和APP中的運用方法與技巧已經(jīng)逐步成熟，形成了一套相對系統的模式。今天的文章我們通過(guò)一系列實(shí)例，來(lái)展示一下動(dòng)效是如何改善整個(gè)用戶(hù)體驗的。

加載動(dòng)效

動(dòng)效最常用的一個(gè)地方就是進(jìn)度條。加載進(jìn)度條的加載動(dòng)效會(huì )改變用戶(hù)對于時(shí)間的感知，通過(guò)轉移注意力的方式讓用戶(hù)等待感降低。

“如果你無(wú)法將等待的時(shí)長(cháng)縮短，那么盡量令這個(gè)過(guò)程有趣。

簡(jiǎn)單的加載動(dòng)效其實(shí)比復雜的更好。額外的東西，比如聲音效果就沒(méi)有存在的必要了。用戶(hù)在有趣的動(dòng)效上投注了越多的注意力，就越容易忽略等待的過(guò)程。

這個(gè)是Aviasales 的進(jìn)度條。

同樣的，你還可以考慮使用進(jìn)度條來(lái)展示多個(gè)不同的步驟：

界面框架

界面框架會(huì )將界面加載之后的大概樣式給展示出來(lái)，界面框架會(huì )讓用戶(hù)產(chǎn)生內容一瞬間就加載好了的錯覺(jué)。這種動(dòng)效可以應用在絕大多數的網(wǎng)頁(yè)和APP當中，它會(huì )明顯強化用戶(hù)的參與感。

視覺(jué)反饋

將界面反饋視覺(jué)化地呈現給用戶(hù)是非常實(shí)用的.良好的交互設計需要視覺(jué)反饋來(lái)支撐，傳達交互完成后的結果，讓交互可用、可見(jiàn)、可預期。網(wǎng)站界面中哪些元素可交互如果是不可知的、交互的結果也不可預期，混亂就不可避免了。周密的交互設計可以幫助用戶(hù)理解，將這種混亂降到最低。

懸停動(dòng)效

桌面端交互主要還是借助觸控板和鼠標，光標懸停特效很大程度是為這種情況而存在的，同時(shí)，它也是最常見(jiàn)的動(dòng)效之一。

當用戶(hù)不知道某個(gè)控件怎用的時(shí)候，會(huì )很直覺(jué)地將光標移動(dòng)到上面去，這個(gè)時(shí)候，懸停特效能夠很好的吸引他們的目光。

移動(dòng)端由于交互方式的差異，幾乎沒(méi)法使用懸停動(dòng)效。無(wú)論是按鈕還是輸入框，當你點(diǎn)擊屏幕的時(shí)候就已經(jīng)觸發(fā)控件了，只能在隨后呈現結果，而無(wú)法像懸停動(dòng)效一樣預覽。

吸引注意力

被運動(dòng)的事物所吸引，是人類(lèi)的生物本能。這也使得動(dòng)效成為了吸引用戶(hù)注意力的完美工具。

舉個(gè)例子，表單輸入的用戶(hù)體驗加入動(dòng)效就有很大的提升空間。比如你可以在用戶(hù)輸入完成或者輸入正確之后，給用戶(hù)一個(gè)點(diǎn)頭的動(dòng)效，在輸入錯誤之后左右晃動(dòng)提供“搖頭拒絕”的動(dòng)效，人性化地傳遞信息，用戶(hù)也是很容易理解的。

導航

從設計趨勢上來(lái)說(shuō)，越來(lái)越多的網(wǎng)站開(kāi)始選擇使用隱藏式的導航菜單，將更多的選項隱藏在漢堡菜單之后。而菜單的打開(kāi)和關(guān)閉中肯定需要動(dòng)效加持來(lái)降低突兀的過(guò)渡，如果設計的足夠精巧，用戶(hù)會(huì )立刻被吸引住。

下面是Brian Hoff Design 的網(wǎng)站設計，當用戶(hù)單機圓形箭頭按鈕的時(shí)候，一個(gè)超大的菜單會(huì )從側面彈出，彈出過(guò)程中不僅有動(dòng)畫(huà)，而且整個(gè)界面變暗會(huì )讓用戶(hù)更加難以忽略菜單的存在。

動(dòng)效幫助用戶(hù)將兩種不同的狀態(tài)和界面連接到了一起。

平滑的狀態(tài)切換

無(wú)論是從一個(gè)Tab切換到另外一個(gè)Tab，還是界面模式的變化，狀態(tài)切換是UI界面中最常見(jiàn)的情況，動(dòng)效能夠讓狀態(tài)切換平滑無(wú)比。在《Smart Transitions In User Experience Design》 這篇文章中， Adrian Zumbrunnen 提供了一個(gè)很好的粒子，動(dòng)效是如何幫助用戶(hù)理解上下文和狀態(tài)變化和不同的部分的。

簡(jiǎn)單對比一下下面的兩個(gè)案例，就知道生硬的切換和平滑切換之間的差別了。

創(chuàng )意特效

充滿(mǎn)創(chuàng )意的特效總能讓用戶(hù)真正難以忘懷，它們的價(jià)值在于取悅用戶(hù)，讓人記住。

長(cháng)滾動(dòng)頁(yè)面

不得不說(shuō)，首屏的設計一直是網(wǎng)頁(yè)設計的焦點(diǎn)所在，設計師將注意力集中在這個(gè)充滿(mǎn)價(jià)值的區域是有道理的。但是頁(yè)面余下的部分同樣很重要，事實(shí)上，有個(gè)說(shuō)法是“正常媒體頁(yè)面上百分之66%的用戶(hù)注意力都在首屏之下”，因此結合了動(dòng)效的長(cháng)滾動(dòng)頁(yè)面同樣非常有用。

“動(dòng)效讓滾動(dòng)式的交互充滿(mǎn)了趣味。

動(dòng)畫(huà)能夠讓長(cháng)滾動(dòng)頁(yè)面所承載的故事更加鮮活有意思，相比于炫酷的動(dòng)效，微妙的動(dòng)效給人的感覺(jué)更加到位。你可以將你的網(wǎng)站設計成可滾動(dòng)的“區塊”，每個(gè)區塊中呈現不同的內容，下面的案例就是這么做的：

結語(yǔ)

動(dòng)效拓展了界面的視覺(jué)維度，它連接交互，讓界面的功能和效果都更加圓融。

　　以上內容是由寶雞網(wǎng)站建設、寶雞網(wǎng)絡(luò )公司，寶雞世紀網(wǎng)絡(luò )為您編輯整理的“在現代網(wǎng)頁(yè)設計中，動(dòng)效有哪些常見(jiàn)的用法？” 的相關(guān)內容。我公司是在寶雞市工商局注冊的專(zhuān)業(yè)提供網(wǎng)站建設、網(wǎng)站優(yōu)化、網(wǎng)站推廣，軟件開(kāi)發(fā)的網(wǎng)絡(luò )技術(shù)企業(yè)，一直致力于面向寶雞地區黨政機關(guān)、企事業(yè)單位提供大中型門(mén)戶(hù)網(wǎng)站解決方案、移動(dòng)互聯(lián)網(wǎng)開(kāi)發(fā)（WAP手機門(mén)戶(hù)網(wǎng)站、微信開(kāi)發(fā)），以及中小型應用軟件開(kāi)發(fā)及其它信息化外包業(yè)務(wù)。目前已承建寶雞地區近760多家黨政機關(guān)及企業(yè)門(mén)戶(hù)網(wǎng)站，是寶雞網(wǎng)站建設行業(yè)有影響力的寶雞網(wǎng)絡(luò )公司。歡迎您來(lái)電咨詢(xún)。