本文主要說的是指向性動(dòng)效。什么是指向性動(dòng)效,是指能夠有效的描述物體之間的邏輯關(guān)系,同時(shí)通過視覺效果,可視化的描述用戶操作時(shí)候當(dāng)前的狀態(tài),用戶可以很清晰的感受到物體與物體之間的位置或者層級關(guān)系。今天AAA教育郭老師就帶大家了解一下UI設(shè)計(jì)中的12個(gè)基本動(dòng)效。
指向型動(dòng)效的分類
1.滑動(dòng)
信息列表會(huì)跟隨著用戶的交互手勢而動(dòng),然后卡片到相應(yīng)的位置上,保持整齊感,它屬于指向型動(dòng)畫,物體的滑動(dòng)取決于用戶是用那種手勢滑動(dòng)的。它的作用就是通過指向型轉(zhuǎn)場,有效幫助用戶清理頁面層級的排列情況。
2.擴(kuò)大
頁面中的卡片會(huì)從縮略圖轉(zhuǎn)化為全屏視圖(一般這個(gè)卡片的中心點(diǎn)也會(huì)跟隨移動(dòng)到屏幕的中央)。反向動(dòng)效就是卡片從全屏視圖轉(zhuǎn)換為縮略圖。它的優(yōu)點(diǎn)是能清楚的告訴用戶點(diǎn)擊的地方被放大了。
3.最小化
頁面元素點(diǎn)擊之后縮小,然后移動(dòng)到屏幕上相應(yīng)的位置,相反的動(dòng)效就是擴(kuò)大,從縮略圖重新變?yōu)槿痢?br />
這樣做的好處是能夠清楚的告訴用戶,最小化的元素可以在哪里被找到,如果沒有動(dòng)效引導(dǎo),可能用戶需要花時(shí)間去尋找。
4.切換對象
當(dāng)前頁面移動(dòng)到后面,新的頁面移動(dòng)到前面,這樣能夠清楚解釋頁面之間是進(jìn)行切換的,不會(huì)顯得轉(zhuǎn)換的太突兀和莫名其妙。
5.展開推疊
堆疊在一起的元素被展開。能夠清楚的告訴用戶每個(gè)元素的排列情況,從哪里來到哪里去,也顯得更加有趣。
6.翻頁
當(dāng)用戶實(shí)施滑動(dòng)手勢的時(shí)候,出現(xiàn)像現(xiàn)實(shí)生活中翻頁一般的效果。真正動(dòng)效轉(zhuǎn)場也能夠清晰的展現(xiàn)列表層級的信息架構(gòu),并且模仿現(xiàn)實(shí)生活中的動(dòng)效更加富有情感。
7.添加到列表
新的元素加入到原有的列表中,舊的元素被推開而不是替換,從而有現(xiàn)實(shí)中騰出位置的感覺,這種轉(zhuǎn)場效果能夠清楚的展現(xiàn)列表重新排列的過程,讓用戶知道新舊信息的位置,不會(huì)產(chǎn)生迷惑。
8.導(dǎo)航標(biāo)簽轉(zhuǎn)換
根據(jù)內(nèi)容的轉(zhuǎn)換,按鈕相應(yīng)的在視覺上做出改變,而標(biāo)題是隨著內(nèi)容移動(dòng)而改變的,這樣能夠清晰的展示標(biāo)簽和內(nèi)容之間的從屬關(guān)系,讓用戶能夠清晰理解頁面之間的架構(gòu)。
9.融合
元素會(huì)根據(jù)用戶的點(diǎn)擊交互而分離或者是結(jié)合,用戶可以感受到元素與元素之間的關(guān)聯(lián),比起直接切換,顯然用融合動(dòng)畫更加有趣。
10.滾動(dòng)
根據(jù)用戶的手勢進(jìn)行滾動(dòng)操作,非常使用與列表信息的查看。這個(gè)交互方式是我們用的最頻繁的,仙子我們也可以加入一些動(dòng)效使這個(gè)交互更加的有趣和豐富。
11.平移
當(dāng)一張圖片在我們有限的屏幕里沒有辦法看完的時(shí)候,會(huì)使用這樣的效果。除了放大效果,這樣的平移還可以加上動(dòng)效配合一些功能使用。
12.保存指示器
用戶一旦進(jìn)行保存、下載某個(gè)物體,物體會(huì)復(fù)制一份,同時(shí)縮小、移動(dòng)到保存指示器中。這樣可以提示用戶下載或者是收藏的內(nèi)容在哪里可以找到,能夠告訴用戶對象已經(jīng)被添加。
因此,您現(xiàn)在已經(jīng)了解了與UI設(shè)計(jì)師的工作相關(guān)的主要技能。如果您想了解更多信息,請?jiān)L問AAA教育,包含有關(guān)在該領(lǐng)域工作的更多相關(guān)文章。
填寫下面表單即可預(yù)約申請免費(fèi)試聽!怕錢不夠?可先就業(yè)掙錢后再付學(xué)費(fèi)! 怕學(xué)不會(huì)?助教全程陪讀,隨時(shí)解惑!擔(dān)心就業(yè)?一地學(xué)習(xí),可推薦就業(yè)!
?2007-2022/ m.5wd995.cn 北京漫動(dòng)者數(shù)字科技有限公司 備案號: 京ICP備12034770號 監(jiān)督電話:010-53672995 郵箱:bjaaa@aaaedu.cc