在現(xiàn)代網(wǎng)頁(yè)設(shè)計(jì)中，動(dòng)效有哪些常見(jiàn)的用法？

令人愉悅的動(dòng)效幾乎已經(jīng)成為如今網(wǎng)頁(yè)設(shè)計(jì)的標(biāo)準(zhǔn)配置了，融入動(dòng)效的交互細(xì)節(jié)讓現(xiàn)代網(wǎng)頁(yè)同以往的設(shè)計(jì)在根本上區(qū)別開(kāi)來(lái)。動(dòng)效不僅可以表現(xiàn)狀態(tài)，引導(dǎo)用戶(hù)的關(guān)注點(diǎn)，幫助用于預(yù)測(cè)交互的結(jié)果，甚至影響用戶(hù)的行為。
在逐步的探索和發(fā)展過(guò)程中，動(dòng)效在網(wǎng)頁(yè)和APP中的運(yùn)用方法與技巧已經(jīng)逐步成熟，形成了一套相對(duì)系統(tǒng)的模式。今天的文章我們通過(guò)一系列實(shí)例，來(lái)展示一下動(dòng)效是如何改善整個(gè)用戶(hù)體驗(yàn)的。
加載動(dòng)效

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

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

即使加載時(shí)間很短，有趣的動(dòng)效依然能讓這點(diǎn)時(shí)間變得好玩。

進(jìn)度動(dòng)效
動(dòng)效還可以用來(lái)展示交互或者操作的進(jìn)度。下面的這個(gè)加載進(jìn)度條就是這類(lèi)動(dòng)效的代表：

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

視覺(jué)反饋
將界面反饋視覺(jué)化地呈現(xiàn)給用戶(hù)是非常實(shí)用的.良好的交互設(shè)計(jì)需要視覺(jué)反饋來(lái)支撐，傳達(dá)交互完成后的結(jié)果，讓交互可用、可見(jiàn)、可預(yù)期。網(wǎng)站界面中哪些元素可交互如果是不可知的、交互的結(jié)果也不可預(yù)期，混亂就不可避免了。周密的交互設(shè)計(jì)可以幫助用戶(hù)理解，將這種混亂降到低。
懸停動(dòng)效
桌面端交互主要還是借助觸控板和鼠標(biāo)，光標(biāo)懸停特效很大程度是為這種情況而存在的，同時(shí)，它也是常見(jiàn)的動(dòng)效之一。

當(dāng)用戶(hù)不知道某個(gè)控件怎用的時(shí)候，會(huì)很直覺(jué)地將光標(biāo)移動(dòng)到上面去，這個(gè)時(shí)候，懸停特效能夠很好的吸引他們的目光。
移動(dòng)端由于交互方式的差異，幾乎沒(méi)法使用懸停動(dòng)效。無(wú)論是按鈕還是輸入框，當(dāng)你點(diǎn)擊屏幕的時(shí)候就已經(jīng)觸發(fā)控件了，只能在隨后呈現(xiàn)結(jié)果，而無(wú)法像懸停動(dòng)效一樣預(yù)覽。

長(zhǎng)滾動(dòng)頁(yè)面
不得不說(shuō)，屏的設(shè)計(jì)一直是網(wǎng)頁(yè)設(shè)計(jì)的焦點(diǎn)所在，設(shè)計(jì)師將注意力集中在這個(gè)充滿(mǎn)價(jià)值的區(qū)域是有道理的。但是頁(yè)面余下的部分同樣很重要，事實(shí)上，有個(gè)說(shuō)法是“正常媒體頁(yè)面上百分之66%的用戶(hù)注意力都在屏之下”，因此結(jié)合了動(dòng)效的長(zhǎng)滾動(dòng)頁(yè)面同樣非常有用。
動(dòng)效讓滾動(dòng)式的交互充滿(mǎn)了趣味。
動(dòng)畫(huà)能夠讓長(zhǎng)滾動(dòng)頁(yè)面所承載的故事更加鮮活有意思，相比于炫酷的動(dòng)效，微妙的動(dòng)效給人的感覺(jué)更加到位。你可以將你的網(wǎng)站設(shè)計(jì)成可滾動(dòng)的“區(qū)塊”，每個(gè)區(qū)塊中呈現(xiàn)不同的內(nèi)容，下面的案例就是這么做的：

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

文章名稱(chēng)：在現(xiàn)代網(wǎng)頁(yè)設(shè)計(jì)中，動(dòng)效有哪些常見(jiàn)的用法？
URL地址：http://www.bm7419.com/news/214630.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供面包屑導(dǎo)航、虛擬主機(jī)、企業(yè)建站、網(wǎng)站改版、定制網(wǎng)站、網(wǎng)站設(shè)計(jì)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話(huà)：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)