10 招動畫效果讓你的 App 更有逼格

大量的實驗表明：

動態表情包比靜態表情圖更有趣；

動態圖比靜態圖更生動有吸引力；

App 裡的動態效果也要比靜態設計更能體現逼格。

看到這裡，你是不是開始計算自己的 App 有幾處動效了？那麼如何通過動態效果來提升自己 App 的使用者體驗呢？看完今天的文章你就知道怎麼做了。

首先要強調一點，好好閱讀安卓和 iOS 的官方文件，會避免很多彎路。蘋果和谷歌的官方開發者文件，都有一些專門講解動態效果的章節。他們也鼓勵開發者通過新增動效來優化 App 介面。

另外，一個 App 是討喜還是令人討厭，這之間只有一線之差。如果你的動效打擾到使用者的使用，那還不如還原靜態效果。動效的目的是為了提高使用者的興趣，增加使用者的參與度，可不是為了趕走使用者。

想提升使用者體驗？試試這10招動畫效果

無聊的 App 和有趣的體驗之間可能只差了一個動畫效果。好的動效能促進使用者的參與感，越用越愛用。

1.下拉體驗

下拉重新整理算是基本的動態效果，大部分智慧手機使用者都已習慣這種操作。這樣的重新整理動效可以減少使用者在等待內容載入時的焦躁感。以 Fitness Tracker 為例：它採用了一個小人在走路的動態效果。

2.登入引導

動態效果用得好，使用者引導不能少。在登入的過程中，新增動畫效果也可以打動使用者。下圖這個減肥 App 的使用者引導過程就設計的非常有趣，使用者在初次使用並設定自己的身高體重資訊時，介面不僅設計的乾淨整潔，還配有動畫效果。給人留下良好的第一印象。

3.載入體驗

頁面載入的過程中，你需要暫時轉移使用者的注意力，讓他們忽略等待這個頁面的時間。有些做的很好的動畫就完美地達成了這個效果。比如下面這個聊天應用，就用一根線連線起了所有的朋友。

4.有趣的引導頁

現在有很多 App 會把引導頁也做成動效的，這樣不僅看起來更有品質，也吧你的 App 特色介紹的更具體。Devin Ruppert 的引導頁設計，將一個複雜的 App 渲染成了一次其妙的冒險。讓使用者胃口大增。

5.互動性的教程

在做使用者的使用教程時，你也可以通過動效的形式來指導使用者，再也不需要長篇累牘的文字說明了。展示遠比說教的效果好。比如你想要引導使用者怎麼使用你的 App，光靠圖片和文字很難說講明白，但是一個簡單的動畫就能讓使用者秒懂如何操作使用。

6.清晰的反饋

使用者在使用你的 App 期間，時不時需要確認自己的操作是否正確，如果操作失敗，原因是什麼。這些都需要設計者考慮在內，在何時向使用者反饋他們的操作結果。比如，使用者完成支付操作後，如果能提示一個對號的動效就能讓他們覺得已經搞定了。

7.自然的過渡

從一個介面到另一個介面，如果兩者沒有太大的關聯，使用者會覺得突兀和尷尬。如果有一個過度效果，就會緩和一下這種。檢視一下Life minimal 經驗的視覺效果，他們是如何過渡的。

8.動態新聞流

在設計的時候，很重要的一點是將所有的元素以特別的形式排列，並邀請使用者繼續檢視後面的頁面。新聞類的應用可以採用這種點選標題、顯示更多內容的方式。我們推薦你檢視關於 UI 導航內容。

9.卡片動畫

在 App 內部使用的卡片式動畫可以簡潔地呈現所有複雜的資料。如果你想表達的內容用幾句話都說不完，不妨採用卡片式的結構作為你的解決方案。使用 3D touch 提供的互動效果則更佳，如下面的 Travel Blog。

10.按鈕互動

按鈕的動畫效果可以算是一種強烈的需求呀！此處能將功能和使用者期待結合起來，使用者點選按鈕之後，如果能看到動畫效果，也是一種操作成功的心裡暗示。此外，如果效果設計的有趣，還會有小驚喜。看一下 MarketMe 原型提供的範例：他們是如何新增搜尋按鈕的？

結語

動畫效果是一項提升使用者體驗的工程。有些是必須有的，有些是有了會更好的。你要做的不是一個平淡無奇的產品，而是能為使用者帶來難忘體驗的 App。