APP交互動畫設計

來源:互聯網 閱讀:- 發布:2020-03-23 06:28:51

文/丘美玲 胡耀民 交互動畫是指動畫在播放時支持事件響應和交互功能。簡單說就是動畫在播放時可以接受某種控制,這種控制可以是用戶的某種操作,如點擊,聲控等,這種交互性提供了觀眾參與和控制動畫播放內容的手段,使觀眾由被動接受變為主動選擇。

高端機的性能不斷更新換代,手機操作系統的升級,使得交互動畫在App產品領域的應用非常普遍,APP用戶界面開始添加精美、細微的交互動畫,使得應用的體驗更具吸引力、更具動態性、更具引導性。

交互性、開放性和沉浸性是交互動畫的三大特性。在App中加入交互動畫能給用戶帶來一種舒適、自然和流暢的感覺,所以交互動畫逐漸成為了產品與用戶之間的溝通方式,成為產品的肢體語言。在App中適當的交互動畫具有以下三個作用:

①增強用戶直接操作的感覺。用戶在使用產品功能的同時,也追求簡易和暢順的操作,能與產品產生良好的互動。在設計App產品時,能合理地結合一些物理化的動畫,無論是動畫的時長,還是流暢性都達到了,這些交互動畫的運用就能讓交互更貼近用戶,給用戶提供舒適的體驗。

②提高用戶興趣,降低學習成本。通過巧妙的交互動畫讓用戶產生良好的心理感受,進而讓用戶更容易了解產品的功能,有時詳細功能的講解,往往不如一個簡單的交互動畫效果更具吸引力。

③強化品牌一致性。很多App產品都把交互動畫作為傳達品牌個性和內涵的重要途徑,我們不難發現很多熱門App產品都有非常出色的動效,獨特的交互動效已經成為了App的標志。

簡單說使用恰當的動效,就可以增加產品的識別性,可以幫助樹立品牌個性,可以為用戶帶來愉悅的體驗,有趣的印象彈出層、界面滑動、分屏、返回、前進等,這些交互動畫無不流露出品牌的特性與,所以優秀的交互動畫往往也會是一個產品的代言。

交互設計中要制作一個優秀的動畫,可以要從以下三個層面進行認識和思考。

做視覺感受順暢的交互動畫,不管是動態、文字按鈕還是動態圖像,最重要的兩點就是時間和節奏,需要注意的是盡量讓動畫符合人的視覺經驗。例如:緩動的效果,通常上自然界較為柔和動作的表現為慢入和慢出,又如拉伸、擠壓、預備動作,逆向緩沖等這些都屬于技巧的掌握。

尤其是做UI的動效,只有掌握論文這些技巧才能做出不錯的交互動畫,至少能做出及格的動效。掌握技巧不難,因為技巧都是比較公式化的,多模仿多借鑒好作品的效果,就可以做出較好的交互動效。

①動態聚焦。通過動態化的處理引導用戶聚焦界面的關鍵部位,以使交互體驗更加流暢。青蛙的眼睛能夠快速捕捉移動中的物體,人眼也具有相似特征,運動中的物體總能引起下意識的關注。

②示意過渡。過渡動效就是給界面的變化加上流暢的過渡,目的是引導用戶理解到底發生了什么,而不會使其不知所措。

③空間轉場。轉場動效是設計師普遍重視的一種特效,它的作用也是引導用戶,讓用戶更好地理解頁面跳轉,知道自己身在何方。

①謹慎地增加動畫,傳達有價值的信息。要有目的和限制性地使用運動效果和UI組件中的動態行為,并確保對結果進行測試。過度使用動態則會使App交互和看起來很迷惑,信息層級關系很難控制。真正優秀的動效不是只有漂亮外表的花瓶,還得具備優化交互和提升體驗的作用。

②簡化界面信息和交互層級。例如:顯示和隱藏二級操作項,利用動效可以有效控制界面中的信息隱藏,當重復進行某些操作后隱藏的內容會動態展開,從而達到簡化初始界面的目的,使界面大氣簡潔。又如使按鈕動效化能夠讓界面重要信息動態浮現在同一按鈕上,使得用戶的目光緊緊盯著按鈕,弱化了頁面跳轉帶來的干擾,使交互體驗更加流暢。

③使用風格類型一致的動畫。為了使動畫的風格保持一致,動效設計師在設計交互動畫的時候與手機內置動畫保持統一。例如:窗口內容的上下卷滾、元素的出現和消失,以及內容的放大、縮小等,但當你的動畫違背物理定律和自然法則的時候,用戶會感覺到非常不適應。

然而,切記不要動畫而動畫,而應該將其視為提升用戶體驗的新方法。

(此處已添加圈子卡片,請到今日頭條客戶端查看)

① 官方頭條號:設計智造 頂級創意設計師必備

② 本篇為 設計智造www.cocoo.top 編輯整理,版權歸原作者所有,轉載請注明出處!

推薦閱讀:蘋果8和蘋果7


1选五中奖规则