起點(diǎn)課堂會員權(quán)益
職業(yè)體系課特權(quán)
線下行業(yè)大會特權(quán)
個(gè)人IP打造特權(quán)
30+門專項(xiàng)技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導(dǎo)直播
12場專業(yè)技能直播
會員專屬社群
榮耀標(biāo)識過渡動效的五種設(shè)計(jì)思路
文章總結(jié)了過度動效設(shè)計(jì)的五種思路，同時(shí)分析了每種設(shè)計(jì)思路的適用情景和優(yōu)缺點(diǎn)，enjoy!
在產(chǎn)品功能滿足需求的基礎(chǔ)上，設(shè)計(jì)好的交互動效能讓產(chǎn)品錦上添花。
作為一個(gè)設(shè)計(jì)小白，剛開始接觸交互動效，對動效設(shè)計(jì)毫無思緒，在dribble看了上百個(gè)動效之后，我總結(jié)了以下幾個(gè)過渡動效的設(shè)計(jì)技巧并分析每種動效的適用情景和優(yōu)缺點(diǎn)。
Johny vino是dribble上的人氣設(shè)計(jì)師，他的作品里面包含了大量的交互動效設(shè)計(jì)，本文中所有的案例都來源于此設(shè)計(jì)師，這里也有他整理的作品網(wǎng)站，，如果需要?jiǎng)有гO(shè)計(jì)靈感，可以參考下他的作品。
過渡動效設(shè)計(jì)主要可以從以下五個(gè)角度來設(shè)計(jì)：
一、頁面或頁面元素上滑
By Johny vino
人的視線一般是從上至下的，頁面向上滑動，頁面元素從上至下呈現(xiàn)，看起來會有較好的延續(xù)性和連貫性。
適用情景：
二級頁（圖一）、列表頁（圖二）
優(yōu)點(diǎn)：
- 比較常見，不容易出錯(cuò)；
- 符合用戶瀏覽屏幕的習(xí)慣，從上至下。
- 延續(xù)性和連貫性較強(qiáng)。
- 開發(fā)成本低。
缺點(diǎn)：
若頁面元素不是同時(shí)出現(xiàn)，而是依次呈現(xiàn)，整體的動效時(shí)間可能會延長，需要好好把握速度和呈現(xiàn)的方式。
二、左滑過渡
By Johny vino
左滑過渡是最常見的界面過渡動效，目前市面上大多數(shù)APP產(chǎn)品的界面都采用這種過渡方式。
適用情境：
步驟任務(wù)、二級頁
一般步驟任務(wù)界面中會有下一步按鈕或是“下一步”的箭頭，點(diǎn)擊后下一步操作界面左滑過渡，動效與箭頭的方向一致，整體的動效看起來更加流暢。
優(yōu)點(diǎn)：
- 比較常見，不容易出錯(cuò)；
- 能讓用戶明確地知道進(jìn)入二級頁面或進(jìn)入下一步驟；
- 開發(fā)成本地。
缺點(diǎn)：
和上滑一樣，若頁面元素不是同時(shí)出現(xiàn)，而是依次呈現(xiàn)，整體的動效時(shí)間可能會延長，需要好好把握速度和呈現(xiàn)的方式。
三、界面之間相同元素的變換
By Johny vino
動效的其中一個(gè)作用是形成視線引導(dǎo)，通過動效引導(dǎo)用戶去看界面中希望用戶注意到的元素。
如圖一中，不同界面之間唱片都是相同的元素，唱片的放大會讓用戶的視線集中在唱片上，進(jìn)而做出下一步操作，點(diǎn)擊放大的唱片選擇歌曲。
圖二中，最后點(diǎn)贊完之后，愛心會回到右上角，我們的視線也會跟著動效移動到右上角的愛心，在這個(gè)過程中，界面給了我們反饋：點(diǎn)贊成功。
適用情景；
不同界面中有相同的元素，需要引導(dǎo)用戶視線的情景。
優(yōu)點(diǎn)：
- 過渡自然；
- 視線引導(dǎo)；
- 動效形式新穎，能吸引用戶注意。
缺點(diǎn)：
- 開發(fā)成本較高。
- 容易過度設(shè)計(jì)，若元素之間的過渡沒設(shè)計(jì)好，反而會畫蛇添足。
四、縮放過渡
分為兩種情況：
1. 界面元素縮放進(jìn)入界面
By Johny vino
縮放進(jìn)入的元素往往能吸引用戶的注意，視線會停留在縮放的元素。
適用情景：
界面中有較大的元素或圖片，適合做縮放處理的情景；需要引導(dǎo)用戶視線的情景。
優(yōu)點(diǎn)：
- 視線引導(dǎo)；
- 動效形式新穎，能吸引用戶注意。
缺點(diǎn)：
- 開發(fā)成本較高。
- 元素縮放的時(shí)間可能會延長整體動效時(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)：
- 給予積極反饋；
- 銜接自然。
缺點(diǎn)：
適用情景比較單一。
五、形狀之間的變化過渡
By Johny vino
原界面中的形狀通過一定的形變形成新的界面，比如圖中的按鈕形變成一個(gè)新的界面。
適用情景:
- 兩個(gè)界面之間的元素有共同點(diǎn)，例如顏色相同等；
- 元素之間易于形變。
優(yōu)點(diǎn)：
- 過渡自然；
- 動效形式新穎，能吸引用戶注意。
缺點(diǎn)：
- 開發(fā)成本較高。
- 形變的時(shí)間可能會使整體動效時(shí)間延長。
總結(jié)
本文總結(jié)了過渡動效設(shè)計(jì)的五種思路:
一、頁面或頁面元素上滑；
二、左滑過渡；
三、界面之間相同元素的變換；
四、縮放過渡；
五、形狀之間的變化過渡
文章分析每種設(shè)計(jì)思路的適用情景和優(yōu)缺點(diǎn)，最后要提醒大家，優(yōu)秀的動效應(yīng)該是快速且流暢、給交互以恰當(dāng)?shù)姆答?、提升操作感受和提供良好的視覺效果的，做動效的時(shí)候要時(shí)刻牢記這些原則，不要過度設(shè)計(jì)。
交互設(shè)計(jì)小白，剛接觸交互動效，歡迎大家在評論區(qū)討論交流，如果文章中有說的不對的或不完整的歡迎大家指出補(bǔ)充，謝謝。
本文由 @?? 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載
題圖來自Unsplash，基于CC0協(xié)議
- 目前還沒評論，等你發(fā)揮！
