UI交互動(dòng)畫如何設(shè)計(jì)?

UI交互動(dòng)畫如何設(shè)計(jì)?UI交互動(dòng)畫設(shè)計(jì)需要注意哪方面?界面主要顯示狀態(tài)之間的連續(xù)性，表示共享元素之間的關(guān)系并將用戶的注意力引向他們應(yīng)該注意和采取行動(dòng)的事物上，小編就特地來(lái)總結(jié)一下動(dòng)畫的設(shè)計(jì)技巧。

一、使標(biāo)簽內(nèi)容可滑動(dòng)

一個(gè)好的動(dòng)畫會(huì)將內(nèi)容從一種狀態(tài)轉(zhuǎn)換為另一個(gè)狀態(tài)，優(yōu)秀的動(dòng)畫則是使內(nèi)容在不同的狀態(tài)轉(zhuǎn)換之間保持連續(xù)性。當(dāng)你設(shè)計(jì)像標(biāo)簽或彈出菜單類似的交互時(shí)，可以嘗試將內(nèi)容的位置與打開它的操作相關(guān)聯(lián)。這樣你不僅可以提升內(nèi)容的可見(jiàn)性，還可以為內(nèi)容的位置設(shè)置動(dòng)畫。當(dāng)你在設(shè)計(jì)這個(gè)動(dòng)畫的時(shí)候，還可以添加一個(gè)滑動(dòng)手勢(shì)，將你從一個(gè)內(nèi)容帶到另一個(gè)內(nèi)容。

二、連接卡片的共享元素

一個(gè)好的動(dòng)畫使用向左或向上滑動(dòng)等過(guò)渡細(xì)節(jié)來(lái)展示內(nèi)容；一個(gè)優(yōu)秀的動(dòng)畫通過(guò)共享元素的動(dòng)畫來(lái)建立兩個(gè)狀態(tài)之間的聯(lián)系。在不同狀態(tài)之間制作動(dòng)畫時(shí)，查看ui交互之間是否有存在共享元素并將它們聯(lián)系起來(lái)。在使用 InVision Studio 時(shí)，創(chuàng)建 Motion 轉(zhuǎn)換時(shí)會(huì)自動(dòng)連接兩個(gè)屏幕之間重復(fù)的組件，這使得原型動(dòng)畫的制作變得輕而易舉。

三、把注意力放在重要的事情上

一個(gè)好的動(dòng)畫會(huì)使用顏色，大小和位置來(lái)突出用戶需要注意或采取的重要操作；優(yōu)秀的動(dòng)畫會(huì)使用動(dòng)畫來(lái)引起用戶對(duì)重要操作的關(guān)注，并且不會(huì)對(duì)用戶造成干擾。當(dāng)用戶需要對(duì)重要事項(xiàng)采取行動(dòng)時(shí)，請(qǐng)嘗試設(shè)置動(dòng)畫來(lái)吸引他們的注意力。從一個(gè)微妙的動(dòng)畫開始，增加與動(dòng)作重要程度相關(guān)的強(qiáng)度（大小，顏色和速度的變化）。同時(shí)僅將其用于關(guān)鍵操作，您使用此效果的次數(shù)越多，其影響就越小，并且用戶獲得的煩惱也會(huì)越多。

UI交互動(dòng)畫如何設(shè)計(jì)?