匯總UI中使用動效的3個關鍵點

   隨著技術的快速發展,動效不再是視覺上的華美,更多的用戶所要求的期望功能。動效解決了很多功能問題和接口,可以真正與用戶互動。

下面讓我們探索動效的關鍵策略,提高界面接口的功能增加情感的力量。

1.系統狀態

香港彩票透码 www.kptln.icu 在你的程序在后臺總發生一些過程,如正在從服務器下載數據,進行計算。這總是需要一些時間的。你需要讓用戶知道這個程序沒有凍結,顯示正在處理的狀態。視覺交互給用戶一種控制程序的感覺。

  加載完成度

加載時間對大多數產品是不可避免的。而動效雖然不能解決這個問題,但會減少一點問題。

當我們不能縮短時,當然可以使等待變得更愉快。

有創意的過程動效可以減少用戶感知的時間。動效影響用戶感知你的產品,使它看起來比實際上更好。

如果一個應用在加載時為用戶提供了一些有趣的事情,這會使得用戶更少關注等待本身。

圖片來源:Ramotion

  下拉刷新

這組很流行的動效是“下拉刷新”,它發起一個移動設備上的內容更新的過程。

圖片來源:Zee Young

提示:刷新動效應該與設計整體匹配——如果應用很小,動效也應該是。

  通知

因為運動會吸引注意力,動效是一個令人愉快的方式可以與沒有太多經驗的用戶進行交互。

移動的對象立即抓住了用戶的注意力。圖片來源:Arjun Kani

2.導航和轉換

最基本的動效是轉換。這種類型的動效背后的邏輯是幫助用戶理解發生在頁面上的布局的變化,改變了什么以及以后如何再次改變。一個典型的例子是一個漢堡包按鈕,進行切換隱藏內容。

動效設計可以有效地引導用戶愉快的接受通知。

圖片來源:Gal Shir

盡管漢堡包動效可能在這里是最推薦的,還是有很多其他方式的動畫導航。

  導航之間的轉換

設計師使用動效在導航之間切換用戶上下文,解釋屏幕上的元素的變化。

不同狀態之間的轉換應該充當中介的UI,幫助用戶理解屏幕上的變化是發生了什么。

圖片來源:Ehsan Rahimi

   視覺元素之間的層次結構和聯系

動效可以完美的描述對象,并說明它們如何進行交互的。

動效說明了元素是如何交互的。

圖片來源:Vitaly Rubtsov

  功能變化

在某些情況下,設計師們不得不設計一個在一定條件下變化的操作按鈕。我們經常在空間受限的手機設計中看到。

“開始”和“停止”按鈕可能是最常見的多態按鈕的例子。

圖片來源:KREATIVA Studio

這種類型的動畫顯示了當用戶進行交互時元素是怎樣改變的。在下面的示例中,當用戶按浮動操作按鈕,加號變成了一支鉛筆。這表示鉛筆是主要的功能。這個小的細節意味著接下來發生不同的情況,知道圖標意味著這兩種狀態。

按鈕改變從一個“ ”到“鉛筆”表明按鈕的功能發生了變化。

圖片來源:Material Design

3.視覺反饋

視覺反饋對于任何用戶界面都至關重要。它可以讓用戶有控制感,讓用戶感覺理解在給定的時間的當前上下文的系統。

  反饋確認

用戶界面的元素如按鈕和控件應該是真實的,即使他們是在另一個圖層后面。

在物質世界中,按鈕、控件和其他與我們進行交互的對象。人們期望用戶界面控件具有類似的響應能力。

為了彌合這一差距,視覺和運動軌跡需要即時輸入,動畫的外觀和方式可以直接進行操作。

按鈕響應用戶的點擊。圖片來源:Material Design

  可視化的行為的結果

動效可以提高每一個交互并且是加強用戶預成型的操作。

在下面的例子中,當用戶點擊“支付”,一個轉輪短暫出現在應用中表示成功的狀態。動效讓用戶覺得他們可以很容易支付而且用戶會很喜歡這樣的細節。

視覺反應可以增加用戶的參與度并取悅用戶。圖片來源:Micha?l Villar

   工具和教程

下面的教程可以幫助你把動效融入你的Android或者iOS項目中:

  • 用Adobe After Effects制作動效

  • 用圖形和動效指南幫助你為應用程序添加一個動效到你的Android程序

  • 使用iOS自定義的動畫項目

總結

動效在使用時是一種強大的復雜的方式。它為設計增加了生命,即使是最簡單的交互,也能讓你的作品脫穎而出。精心設計的動效增強用戶體驗。


來源:ui中國

上一篇: 十個必須嘗試的設計工具

下一篇: UI設計——細節決定成敗

分享到: 更多
传奇胖妞赌博输50万 时时彩免费软件下载 qq分分彩计划软件 pk10走势图视频教学 利赢棋牌游戏送10元 哪几款彩票计划软件好用 pk10模式长期稳赚冠亚组合 幸运飞艇稳赚技巧 组三全包稳赚倍投方案 NBA盘口 香港曾道六肖精选一肖 时时彩极速赛车技巧 资金盘提现困难 江苏福利彩票快三开奖 幸运三块大小什么技巧 富民3肖6码·默认论坛