在現(xiàn)代網(wǎng)頁設(shè)計中,動效有哪些常見的用法?

2022-11-17    分類: 網(wǎng)站建設(shè)

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

動效常用的一個地方就是進度條。加載進度條的加載動效會改變用戶對于時間的感知,通過轉(zhuǎn)移注意力的方式讓用戶等待感降低。

簡單的加載動效其實比復(fù)雜的更好。額外的東西,比如聲音效果就沒有存在的必要了。用戶在有趣的動效上投注了越多的注意力,就越容易忽略等待的過程。

即使加載時間很短,有趣的動效依然能讓這點時間變得好玩。

進度動效
動效還可以用來展示交互或者操作的進度。下面的這個加載進度條就是這類動效的代表:

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

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

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

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

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

當(dāng)前標(biāo)題:在現(xiàn)代網(wǎng)頁設(shè)計中,動效有哪些常見的用法?
網(wǎng)頁鏈接:http://www.muchs.cn/news30/214630.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供App設(shè)計、全網(wǎng)營銷推廣、網(wǎng)站策劃Google、做網(wǎng)站網(wǎng)站設(shè)計公司

廣告

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

小程序開發(fā)