通過展開動效從卡片直接過渡到詳情頁是更的設(shè)計。

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

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

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

在列表中使用瀑布式展開動效

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

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

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

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

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

展開時的擴展動效

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

通過移動、覆蓋、展開的方式來呈現(xiàn)詳情頁的動效，視覺上看起來不錯。而點擊之后展開頂?shù)糁車脑兀椭車钠渌脑赜兴?，這樣的動效更加。

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

菜單的展開動效

左側(cè)的動效中，菜單從底部淡入界面，而右側(cè)的動效中，菜單是從被點擊的按鈕中擴展開的。

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

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