全栈工程师?
嗯.....目前并不是!

過渡動效的五種設計思路

文章總結了過度動效設計的五種思路,同時分析了每種設計思路的適用情景和優缺點,enjoy!

在產品功能滿足需求的基礎上,設計好的交互動效能讓產品錦上添花。

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

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

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

一、頁面或頁面元素上滑

By Johny vino

人的視線一般是從上至下的,頁面向上滑動,頁面元素從上至下呈現,看起來會有較好的延續性和連貫性。

適用情景:

二級頁(圖一)、列表頁(圖二)

優點:

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

缺點:

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

二、左滑過渡

By Johny vino

左滑過渡是最常見的界面過渡動效,目前市面上大多數APP產品的界面都採用這種過渡方式。

適用情境:

步驟任務、二級頁

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

優點:

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

缺點:

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

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

By Johny vino

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

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

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

適用情景;

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

優點:

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

缺點:

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

四、縮放過渡

分為兩種情況:

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

By Johny vino

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

適用情景:

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

優點:

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

缺點:

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

2. 元素放大后淡出

By Johny vino

By Tabby Jewett

By Cosimo Wise

By Lgor Chebotarev

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

適用情景:

成功/完成界面

優點:

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

缺點:

適用情景比較單一。

五、形狀之間的變化過渡

By Johny vino

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

適用情景:

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

優點:

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

缺點:

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

總結

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

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

二、左滑過渡;

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

四、縮放過渡;

五、形狀之間的變化過渡

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

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

 

版权声明:本文采用知识共享 署名4.0国际许可协议 [BY-NC-SA] 进行授权
文章名称:《過渡動效的五種設計思路》
文章链接:https://www.pmbear.com/%e9%81%8e%e6%b8%a1%e5%8b%95%e6%95%88%e7%9a%84%e4%ba%94%e7%a8%ae%e8%a8%ad%e8%a8%88%e6%80%9d%e8%b7%af/
本站资源仅供个人学习交流,请于下载后24小时内删除,不允许用于商业用途,否则法律问题自行承担。

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

大前端WP主题 更专业 更方便

联系我们联系我们