UI動(dòng)效現(xiàn)如今在APP和網(wǎng)頁(yè)中幾乎已經(jīng)成為了基本的組成部分，經(jīng)過(guò)仔細(xì)打磨的UI動(dòng)效對(duì)于整個(gè)界面的提升是顯著的。

動(dòng)效設(shè)計(jì)呈現(xiàn)出狀態(tài)切換的過(guò)程，展現(xiàn)了元素之間的邏輯關(guān)系，并且吸引用戶的注意力，引導(dǎo)他們執(zhí)行有效的交互。

在設(shè)計(jì)UI動(dòng)效的過(guò)程中，Material Motion 的設(shè)計(jì)原則，IBM動(dòng)畫設(shè)計(jì)規(guī)則和UX動(dòng)效宣言都是不錯(cuò)的設(shè)計(jì)參考和指引。

遵循這些現(xiàn)有的規(guī)范，能夠很好地提升動(dòng)效本身的體驗(yàn)和效果，從走向。今天的動(dòng)效設(shè)計(jì)都是遵循著這些規(guī)范使用 InVision Studio 來(lái)進(jìn)行制作的。

卡片的展開動(dòng)效

卡片是常見的 UI 元素，左側(cè)的界面中，點(diǎn)擊卡片之后，展開新的界面；右側(cè)界面中，點(diǎn)擊卡片之后，卡片擴(kuò)展并填充整個(gè)屏幕。

點(diǎn)擊卡片之后，詳情頁(yè)向上滑出或者從左側(cè)滑出的設(shè)計(jì)很不錯(cuò)。