UI設(shè)計(jì)中的12個(gè)基本動(dòng)效

　　本文主要說的是指向性動(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)文章。