文章總結(jié)了過度動效設計的五種思路，同時分析了每種設計思路的適用情景和優(yōu)缺點，enjoy!

在產(chǎn)品功能滿足需求的基礎上，設計好的交互動效能讓產(chǎn)品錦上添花。

作為一個設計小白，剛開始接觸交互動效，對動效設計毫無思緒，在dribble看了上百個動效之后，我總結(jié)了以下幾個過渡動效的設計技巧并分析每種動效的適用情景和優(yōu)缺點。

Johny vino是dribble上的人氣設計師，他的作品里面包含了大量的交互動效設計，本文中所有的案例都來源于此設計師，這里也有他整理的作品網(wǎng)站，，如果需要動效設計靈感，可以參考下他的作品。

過渡動效設計主要可以從以下五個角度來設計：

一、頁面或頁面元素上滑

By Johny vino

人的視線一般是從上至下的，頁面向上滑動，頁面元素從上至下呈現(xiàn)，看起來會有較好的延續(xù)性和連貫性。

適用情景：

二級頁（圖一）、列表頁（圖二）

優(yōu)點：

1. 比較常見，不容易出錯；
2. 符合用戶瀏覽屏幕的習慣，從上至下。
3. 延續(xù)性和連貫性較強。
4. 開發(fā)成本低。

缺點：

若頁面元素不是同時出現(xiàn)，而是依次呈現(xiàn)，整體的動效時間可能會延長，需要好好把握速度和呈現(xiàn)的方式。

二、左滑過渡

By Johny vino

左滑過渡是最常見的界面過渡動效，目前市面上大多數(shù)APP產(chǎn)品的界面都采用這種過渡方式。

適用情境：

步驟任務、二級頁

一般步驟任務界面中會有下一步按鈕或是“下一步”的箭頭，點擊后下一步操作界面左滑過渡，動效與箭頭的方向一致，整體的動效看起來更加流暢。

優(yōu)點：

1. 比較常見，不容易出錯；
2. 能讓用戶明確地知道進入二級頁面或進入下一步驟；
3. 開發(fā)成本地。

缺點：

和上滑一樣，若頁面元素不是同時出現(xiàn)，而是依次呈現(xiàn)，整體的動效時間可能會延長，需要好好把握速度和呈現(xiàn)的方式。

三、界面之間相同元素的變換

By Johny vino

動效的其中一個作用是形成視線引導，通過動效引導用戶去看界面中希望用戶注意到的元素。

如圖一中，不同界面之間唱片都是相同的元素，唱片的放大會讓用戶的視線集中在唱片上，進而做出下一步操作，點擊放大的唱片選擇歌曲。

圖二中，最后點贊完之后，愛心會回到右上角，我們的視線也會跟著動效移動到右上角的愛心，在這個過程中，界面給了我們反饋：點贊成功。

適用情景；

不同界面中有相同的元素，需要引導用戶視線的情景。

優(yōu)點：

1. 過渡自然；
2. 視線引導；
3. 動效形式新穎，能吸引用戶注意。

缺點：

1. 開發(fā)成本較高。
2. 容易過度設計，若元素之間的過渡沒設計好，反而會畫蛇添足。

四、縮放過渡

分為兩種情況：

1. 界面元素縮放進入界面

By Johny vino

縮放進入的元素往往能吸引用戶的注意，視線會停留在縮放的元素。

適用情景：

界面中有較大的元素或圖片，適合做縮放處理的情景；需要引導用戶視線的情景。

優(yōu)點：

1. 視線引導；
2. 動效形式新穎，能吸引用戶注意。

缺點：

1. 開發(fā)成本較高。
2. 元素縮放的時間可能會延長整體動效時間；

2. 元素放大后淡出

By Johny vino

By Tabby Jewett

By Cosimo Wise

By Lgor Chebotarev

從dribble上看到，大部分成功/完成后的界面過渡都是采用元素放大后淡出的設計，用戶完成了某項任務應該給予積極的反饋，元素放大的效果其實就是想給用戶成功的反饋。

適用情景:

成功/完成界面

優(yōu)點：

1. 給予積極反饋；
2. 銜接自然。

缺點：

適用情景比較單一。

五、形狀之間的變化過渡

By Johny vino

原界面中的形狀通過一定的形變形成新的界面，比如圖中的按鈕形變成一個新的界面。

適用情景:

1. 兩個界面之間的元素有共同點，例如顏色相同等；
2. 元素之間易于形變。

優(yōu)點：

1. 過渡自然；
2. 動效形式新穎，能吸引用戶注意。

缺點：

1. 開發(fā)成本較高。
2. 形變的時間可能會使整體動效時間延長。

總結(jié)

本文總結(jié)了過渡動效設計的五種思路:

一、頁面或頁面元素上滑；

二、左滑過渡；

三、界面之間相同元素的變換；

四、縮放過渡；

五、形狀之間的變化過渡

文章分析每種設計思路的適用情景和優(yōu)缺點，最后要提醒大家，優(yōu)秀的動效應該是快速且流暢、給交互以恰當?shù)姆答?、提升操作感受和提供良好的視覺效果的，做動效的時候要時刻牢記這些原則，不要過度設計。

交互設計小白，剛接觸交互動效，歡迎大家在評論區(qū)討論交流，如果文章中有說的不對的或不完整的歡迎大家指出補充，謝謝。

本文由 @?? 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖來自Unsplash，基于CC0協(xié)議