文章總結(jié)了過度動(dòng)效設(shè)計(jì)的五種思路，同時(shí)分析了每種設(shè)計(jì)思路的適用情景和優(yōu)缺點(diǎn)，enjoy!

在產(chǎn)品功能滿足需求的基礎(chǔ)上，設(shè)計(jì)好的交互動(dòng)效能讓產(chǎn)品錦上添花。

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

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

過渡動(dòng)效設(shè)計(jì)主要可以從以下五個(gè)角度來設(shè)計(jì)：

一、頁面或頁面元素上滑

By Johny vino

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

適用情景：

二級(jí)頁（圖一）、列表頁（圖二）

優(yōu)點(diǎn)：

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

缺點(diǎn)：

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

二、左滑過渡

By Johny vino

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

適用情境：

步驟任務(wù)、二級(jí)頁

一般步驟任務(wù)界面中會(huì)有下一步按鈕或是“下一步”的箭頭，點(diǎn)擊后下一步操作界面左滑過渡，動(dòng)效與箭頭的方向一致，整體的動(dòng)效看起來更加流暢。

優(yōu)點(diǎn)：

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

缺點(diǎn)：

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

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

By Johny vino

動(dòng)效的其中一個(gè)作用是形成視線引導(dǎo)，通過動(dòng)效引導(dǎo)用戶去看界面中希望用戶注意到的元素。

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

圖二中，最后點(diǎn)贊完之后，愛心會(huì)回到右上角，我們的視線也會(huì)跟著動(dòng)效移動(dòng)到右上角的愛心，在這個(gè)過程中，界面給了我們反饋：點(diǎn)贊成功。

適用情景；

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

優(yōu)點(diǎn)：

1. 過渡自然；
2. 視線引導(dǎo)；
3. 動(dòng)效形式新穎，能吸引用戶注意。

缺點(diǎn)：

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

四、縮放過渡

分為兩種情況：

1. 界面元素縮放進(jìn)入界面

By Johny vino

縮放進(jìn)入的元素往往能吸引用戶的注意，視線會(huì)停留在縮放的元素。

適用情景：

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

優(yōu)點(diǎn)：

1. 視線引導(dǎo)；
2. 動(dòng)效形式新穎，能吸引用戶注意。

缺點(diǎn)：

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

2. 元素放大后淡出

By Johny vino

By Tabby Jewett

By Cosimo Wise

By Lgor Chebotarev

從dribble上看到，大部分成功/完成后的界面過渡都是采用元素放大后淡出的設(shè)計(jì)，用戶完成了某項(xiàng)任務(wù)應(yīng)該給予積極的反饋，元素放大的效果其實(shí)就是想給用戶成功的反饋。

適用情景:

成功/完成界面

優(yōu)點(diǎn)：

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

缺點(diǎn)：

適用情景比較單一。

五、形狀之間的變化過渡

By Johny vino

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

適用情景:

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

優(yōu)點(diǎn)：

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

缺點(diǎn)：

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

總結(jié)

本文總結(jié)了過渡動(dòng)效設(shè)計(jì)的五種思路:

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

二、左滑過渡；

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

四、縮放過渡；

五、形狀之間的變化過渡

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

交互設(shè)計(jì)小白，剛接觸交互動(dòng)效，歡迎大家在評(píng)論區(qū)討論交流，如果文章中有說的不對(duì)的或不完整的歡迎大家指出補(bǔ)充，謝謝。

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

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