1、擠壓和拉伸
在動畫當(dāng)中,擠壓和拉伸主要體現(xiàn)在對象在受到重力影響的情況下,物體的表現(xiàn),這種動畫效果能夠體現(xiàn)出質(zhì)量、重量和柔韌感。當(dāng)彈球在撞擊地面的時候,會呈現(xiàn)出這樣的擠壓和拉伸。在UI界面當(dāng)中,擠壓和拉伸則多呈現(xiàn)在按鈕類的元素上。比如當(dāng)按鈕被按下的時候,可以加入擠壓拉伸的效果,通過這種動效能夠很快讓按鈕呈現(xiàn)出接近真實的物理感。當(dāng)然,除了按鈕之外,它還可以體現(xiàn)在很多其他的交互元素上。
2、漸快和漸慢
現(xiàn)實世界當(dāng)中,絕大多數(shù)的事物的運動規(guī)律都遵循緩動的規(guī)律。換句話說,沒有東西是突然開始運動,又突然停止的,自由落體也是有加速過程的。所以,向UI元素當(dāng)中添加緩動效果,能夠讓元素看起來更加自然,符合預(yù)期,結(jié)合緩動和時間控制,就能夠定義整個界面的運動系統(tǒng)了。左側(cè)的為勻速運動,沒有緩動,而右側(cè)加了緩動之后,看起來更加自然。
3、表演與呈現(xiàn)方式
為角色設(shè)置舞臺,讓角色像登上舞臺一樣進(jìn)入場景。換句話說,你需要借用動畫效果來進(jìn)行「敘事」,考慮如何讓它進(jìn)入場景,如何呈現(xiàn),怎樣表演,如何借用鏡頭語言來引導(dǎo)用戶的注意力。在UI界面當(dāng)中,表演和呈現(xiàn)方式對應(yīng)的就是元素的放置位置,以及元素如何進(jìn)入界面,怎么抓住用戶注意力,進(jìn)行合理的動畫編排。當(dāng)你在思考如何呈現(xiàn)一個音樂APP的界面的時候,你可能需要基于用戶喜好來推薦類似歌曲,那么喜歡/收藏音樂將會是一個重要的交互,和這首歌相關(guān)的歌曲可能需要一個獨立的界面來呈現(xiàn),于是你要凸顯喜歡/收藏按鈕,要讓歌曲從列表中跳出,并且在下方列舉出相關(guān)的音樂。
4、弧形運動軌跡
純粹的直線運動的事物很少,從高出拋出的球的運動軌跡是弧形的。很多時候弧形軌跡更符合自然規(guī)律也符合我們的日常認(rèn)知。在UI界面當(dāng)中,重要的元素可以使用弧形運動軌跡來呈現(xiàn),會顯得更加自然舒適,尤其是那種沿著對角線運動的元素。
5、夸張
在很多場景當(dāng)中,角色需要具備有足夠的吸引人,那么可以使用某些夸張的動作來吸引更多的關(guān)注。在UI界面當(dāng)中,最重要的交互可以使用夸張的動效來強化,引起用戶的注意。Material Design當(dāng)中的FAB動效就是一個最典型的夸張式的動效,它最終的靜態(tài)效果是很吸引人的,因為它將一個按鈕的色彩擴展到整個界面,并且在所有元素的最上層,強調(diào)到了極致。使用FAB動效來進(jìn)行夸張在支付類APP中使用夸張的效果來強化
6、跟隨動作和重疊動作
沒有任何一種物體會突然停滯,通常運動是一個接著一個的。還有一個更加簡潔的表述為「動者恒動」。想象一下一只兔子從高出跳下,當(dāng)兔子開始運動的時候,它的耳朵會隨著運動而自然地偏移和擺動,當(dāng)兔子落地的時候,身體基本靜止之后,它的耳朵可能還在動。前一種情況是「跟隨動作」,視差滾動就是典型的跟隨動作。而后者則是「重疊動作」,前一個動作停止之后,某些部分仍然處于運動的狀態(tài)。
在UI界面當(dāng)中,可以讓元素在靜止之前,調(diào)用一個其他的交互和動效,從而讓整個動效和交互更加流暢連貫,且自然。模態(tài)彈出框的跟隨動作,在底層動效停止之后依然運動,然后才靜止下來。在滾動的時候,卡片和底部的元素以不同的速率運動,類似視差。