過渡動(dòng)效的五種設(shè)計(jì)思路
文章總結(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):
- 比較常見,不容易出錯(cuò);
- 符合用戶瀏覽屏幕的習(xí)慣,從上至下。
- 延續(xù)性和連貫性較強(qiáng)。
- 開發(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):
- 比較常見,不容易出錯(cuò);
- 能讓用戶明確地知道進(jìn)入二級(jí)頁面或進(jìn)入下一步驟;
- 開發(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):
- 過渡自然;
- 視線引導(dǎo);
- 動(dòng)效形式新穎,能吸引用戶注意。
缺點(diǎn):
- 開發(fā)成本較高。
- 容易過度設(shè)計(jì),若元素之間的過渡沒設(shè)計(jì)好,反而會(huì)畫蛇添足。
四、縮放過渡
分為兩種情況:
1. 界面元素縮放進(jìn)入界面
By Johny vino
縮放進(jìn)入的元素往往能吸引用戶的注意,視線會(huì)停留在縮放的元素。
適用情景:
界面中有較大的元素或圖片,適合做縮放處理的情景;需要引導(dǎo)用戶視線的情景。
優(yōu)點(diǎn):
- 視線引導(dǎo);
- 動(dòng)效形式新穎,能吸引用戶注意。
缺點(diǎn):
- 開發(fā)成本較高。
- 元素縮放的時(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):
- 給予積極反饋;
- 銜接自然。
缺點(diǎn):
適用情景比較單一。
五、形狀之間的變化過渡
By Johny vino
原界面中的形狀通過一定的形變形成新的界面,比如圖中的按鈕形變成一個(gè)新的界面。
適用情景:
- 兩個(gè)界面之間的元素有共同點(diǎn),例如顏色相同等;
- 元素之間易于形變。
優(yōu)點(diǎn):
- 過渡自然;
- 動(dòng)效形式新穎,能吸引用戶注意。
缺點(diǎn):
- 開發(fā)成本較高。
- 形變的時(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é)議
- 目前還沒評(píng)論,等你發(fā)揮!