app交互動效設(shè)計(jì)是整個(gè)APP設(shè)計(jì)項(xiàng)目當(dāng)中的一個(gè)非常重要的點(diǎn)。這塊做好了,你的APP項(xiàng)目的用戶體驗(yàn)也不會差到哪里去。
那你作為一名APP設(shè)計(jì)師,你有沒有真正的去按照APP?UI動效設(shè)計(jì)原則來認(rèn)真嚴(yán)格的執(zhí)行呢?
如果還沒有,那請各位從今天開始認(rèn)真開始學(xué)習(xí)起來吧。對照著來看看吧~~~
1. 材質(zhì)
給用戶展示界面元素是由什么構(gòu)成的:輕盈的還是笨重的?死板的還是靈活的?平面的還是多維度的?你需要讓用戶對界面元素的交互模式有個(gè)基本的感覺。
2. 運(yùn)動軌跡
你需要闡明運(yùn)動的自然屬性。一般原則顯示沒有生命的機(jī)械物體的運(yùn)動軌跡通常都是直線,而有生命的物體擁有更為復(fù)雜和非直線性的運(yùn)動軌跡。您要決定您的UI要給用戶呈現(xiàn)的什么樣的印象,并且將這種屬性賦予它。
3. 時(shí)間
在設(shè)計(jì)動效時(shí),時(shí)間是最有爭議的和最重要的考慮之一。在現(xiàn)實(shí)世界中,物體并不遵守直線運(yùn)動規(guī)則因?yàn)樗鼈冃枰獣r(shí)間來加速或者減速,使用曲線運(yùn)動規(guī)則會讓元素的移動變得更加自然。
4.聚焦動效
要集中注意力于屏幕的某一特定區(qū)域。例如,閃爍的圖標(biāo)就會吸引用戶的注意,用戶會知道那有個(gè)提醒并去點(diǎn)擊。這種動效常用于有太多細(xì)節(jié)和元素從而無法將特殊元素區(qū)別化的界面中。
5. 跟隨和重疊
跟隨是一個(gè)動作的終止部分。物體不會迅速地停止或者開始移動,每個(gè)運(yùn)動都可以被拆解為每個(gè)部分按照各自速率移動的細(xì)小動作。例如,當(dāng)您扔個(gè)球,在球出手后,您的手也依然在移動。
重疊意味著在第一個(gè)動作結(jié)束前開始的第二個(gè)動作,這樣可以吸引用戶的注意力,因?yàn)閮蓚€(gè)動作之間并沒有一段靜止期。
如下圖的某錢包APP的界面設(shè)計(jì)欣賞:
6. 次要動效
次要動效原則類似于跟隨和重疊原則。簡要地講,主要動效可被次要動效伴隨。次要動效使畫面更加生動,但如果一不小心就會引起用戶不必要的分神。
7. 緩入和緩出
緩入/緩出是設(shè)計(jì)的基礎(chǔ)原則,尤其是在移動開發(fā)UI動效,和普通的動畫制作中同等重要。雖然易于理解,但此原則卻常常容易被忽略。緩入/緩出原則是來自于現(xiàn)實(shí)世界中物體不可能立刻開始或者立刻停止運(yùn)動的事實(shí)。任何物體都需要一定的時(shí)間用來加速或者減速。當(dāng)你使用緩入/緩出原則來設(shè)計(jì)動效時(shí),將會導(dǎo)出非常真實(shí)的運(yùn)動模式。
8. 預(yù)期
預(yù)期原則適用于提示性視覺元素。在動效展現(xiàn)之前,我們給用戶點(diǎn)時(shí)間讓他們預(yù)測一些要發(fā)生的事情。完成預(yù)期其中一種方法就是使用我們上述的緩入原則。物體朝特定方向移動也可以給出預(yù)期視覺提示:例如,一疊卡片出現(xiàn)在屏幕上,你可以讓這疊卡片最上面的一張卡傾斜,那么用戶就可以推測出這些卡片可以移動。
9. 韻律
動效中的韻律和音樂與舞蹈中的韻律有著同樣的功能;它使動效結(jié)構(gòu)化。使用韻律可以使您的動效更加自然。
10. 夸張
夸張的表現(xiàn)方法常常會被用到,但它并不是那么容易被闡釋,因?yàn)樗腔诒豢鋸埢念A(yù)期動作或效果。它可以幫助吸引額外的注意力到特殊元素上。
以上就是今天25學(xué)堂的小編想要跟大家分享的10條非常實(shí)用的UI動效設(shè)計(jì)原則。
全站高品質(zhì)素材免費(fèi)下載!