通過(guò)展開(kāi)動(dòng)效從卡片直接過(guò)渡到詳情頁(yè)是更的設(shè)計(jì)。

的動(dòng)效往往能夠通過(guò)變化讓人明白兩種狀態(tài)之間的內(nèi)在關(guān)聯(lián)。

在制作不同狀態(tài)之間變化的動(dòng)效的時(shí)候，注意兩個(gè)界面中共享的元素，并且將它作為橋梁，將兩個(gè)界面狀態(tài)連接到一起。

在使用 InVision Studio 創(chuàng)建原型的時(shí)候，這種同時(shí)存在前后兩屏中的控件會(huì)自動(dòng)連接起來(lái)，構(gòu)成動(dòng)效。這一功能使得動(dòng)效的構(gòu)建更加便捷。

在列表中使用瀑布式展開(kāi)動(dòng)效

左邊的列表使用了較為迅速的淡入淡出動(dòng)效，而右邊的列表當(dāng)中，淡入淡出以延時(shí)的方式呈現(xiàn)，效果類似瀑布的展開(kāi)方式。

淡入淡出的動(dòng)效讓元素遞次出現(xiàn)加上輕微的位移，比較自然，看起來(lái)不錯(cuò)。

列表元素通過(guò)延時(shí)次第出現(xiàn)，位移更加明顯，形同瀑布，在視覺(jué)和體驗(yàn)上更為。

瀑布式的展開(kāi)動(dòng)效只需要通過(guò)明顯的延時(shí)就能夠?qū)崿F(xiàn)，適當(dāng)?shù)乜刂乒?jié)奏，讓整個(gè)加載速度適當(dāng)?shù)臏p緩而不會(huì)太慢，讓用戶能夠感知到這個(gè)過(guò)程即可。

谷歌建議每個(gè)元素的延時(shí)不超過(guò)20毫秒。你可以在 Material Motion 中看到設(shè)計(jì)的原理和更多的實(shí)例。

展開(kāi)時(shí)的擴(kuò)展動(dòng)效

左側(cè)的動(dòng)效是內(nèi)容在頂層覆蓋列表，而右側(cè)的動(dòng)效是從中間擴(kuò)展將上下內(nèi)容頂開(kāi)。

通過(guò)移動(dòng)、覆蓋、展開(kāi)的方式來(lái)呈現(xiàn)詳情頁(yè)的動(dòng)效，視覺(jué)上看起來(lái)不錯(cuò)。而點(diǎn)擊之后展開(kāi)頂?shù)糁車脑兀椭車钠渌脑赜兴?dòng)，這樣的動(dòng)效更加。

界面中所有的元素都應(yīng)該是有「重量」的，某個(gè) UI 控件隨著動(dòng)效變化的時(shí)候，和周圍的元素發(fā)生互動(dòng)，則能夠強(qiáng)化這種實(shí)體感。

菜單的展開(kāi)動(dòng)效

左側(cè)的動(dòng)效中，菜單從底部淡入界面，而右側(cè)的動(dòng)效中，菜單是從被點(diǎn)擊的按鈕中擴(kuò)展開(kāi)的。

菜單從按鈕的位置淡入進(jìn)入界面的方式展現(xiàn)了兩者的關(guān)聯(lián)，這樣的設(shè)計(jì)還不錯(cuò)。

通過(guò)擴(kuò)展動(dòng)效的方式來(lái)呈現(xiàn)菜單的展開(kāi)，讓按鈕和菜單之間的關(guān)系得到了進(jìn)一步的加強(qiáng)，這樣的設(shè)計(jì)更加。