關(guān)于APP動效設(shè)計的文章和干貨，25學(xué)堂分享了很多，今天學(xué)堂君在逛知乎的時候，還是發(fā)現(xiàn)了這樣的一篇關(guān)于移動動效設(shè)計到底解決了什么問題？為什么在我們的APP設(shè)計里面要有這樣的動效。

可以說是移動APP當(dāng)中最常見的7種動效設(shè)計方案。

1、視覺反饋

對于任何用戶界面來講，視覺反饋都是至關(guān)重要的。在現(xiàn)實生活中，人們和任何物體的交互都是伴隨著回應(yīng)的。

同樣地，人們期待從APP元素中得到一個類似的效果。App給的視覺，聽覺及觸覺反饋，使用戶感到他們在操控APP。同時視覺反饋有個更簡單的用途：它暗示著您的APP運行正常。當(dāng)一個按鈕在放大或者一個被滑動圖像在朝著正確方向移動，那么很明顯，這個APP在運行著呢，在回應(yīng)著用戶的操作。下面的例子顯示，當(dāng)用戶點擊屏幕以示完成任務(wù)時，包含有數(shù)據(jù)的方塊就縮小并且變成了綠色。

上圖APP動效圖片來自:Workout book

Tinder中使用的左劃喜歡右劃跳過被大家所熟知，而這種交互方式同樣也是一種視覺反饋。這個動畫效果已經(jīng)被我們實現(xiàn)出來放在開源庫Koloda中了。

上圖APP動效圖片來自：Koloda

2、功能改變

這種動效展示出元素在與用戶進行交互的時候是如何發(fā)生變化的當(dāng)您想要闡明一個元素功能如何變化時，這種動效是最好的選擇。它經(jīng)常與按鈕，圖標(biāo)和其它小設(shè)計元素一起使用。

從第一個例子中您可以看到一個圖標(biāo)從漢堡菜單變成了“X”狀，以表示按鈕的功能其實已經(jīng)發(fā)生了改變。

來自：Principle animation

第二個例子中，圖標(biāo)隨著內(nèi)容的變化而變化：

來自:Contact display switch

3、空間擴展

大部分的移動APP都有非常復(fù)雜的結(jié)構(gòu)，所以設(shè)計師的的工作就是盡可能地簡化APP的導(dǎo)航。對于這項任務(wù)來講，動效是極其有幫助的。如果您的動效展示出了元素被藏在哪里，那么用戶下次找起來就會很容易了。第一個例子中，我們看到導(dǎo)航欄的菜單，當(dāng)用戶點擊按鈕時，它顛倒過來了：

來自：Guillotine?

下面這個例子中，我們可以看到更多選項是如何從屏幕底部出現(xiàn)的，這也改進了用戶進行選擇的流程：

來自：Bottom navigation

4、元素的層次結(jié)構(gòu)及其交互

動效完美地描述了界面的各個部分并且闡明了它們之間是如何進行交互的。動效中每個元素都有其目的和定位。比如，一個按鈕可以激活彈出菜單，那么此菜單最好從按鈕彈出而不是從屏幕側(cè)面滑出來：這樣就會給用戶顯示按下按鈕的回應(yīng)。這樣就會幫助用戶理解這兩個元素（按鈕和彈出菜單）是有聯(lián)系的。

所有動效都應(yīng)該闡釋元素之間是如何聯(lián)系的。這種層次結(jié)構(gòu)和元素的互動對于一個直觀的界面來講是非常重要的。下面第一個例子顯示當(dāng)按鈕被點擊后菜單欄出現(xiàn)，并且在用戶的眼里，菜單欄和按鈕本質(zhì)上是同樣的元素，只是變大了：

來自：Hamburger menu

第二個例子中，一張包含信息的卡片在用戶點擊了之后變大，讓用戶知道這是同一個元素，唯一的不同是尺寸：

來自：3D Touch and Apple Pay concept.

5、視覺提示

動效暗示如何與元素進行交互。當(dāng)一款A(yù)PP的元素間有不可預(yù)估的互動模式時，動效提供視覺線索就十分必要了。在這個例子中，當(dāng)用戶打開一個博文系列時，帶有文章的卡片就從屏幕的右側(cè)出現(xiàn)，用戶就可以知道要水平地滑動來瀏覽這些卡片：

來自：Travel blog app.

第二個例子中，用了同樣的方法，只是運用到了社交圖標(biāo)上：

來自：Share and statistics menu concept

6、系統(tǒng)狀態(tài)

在您的APP中，總有那么幾個進程在后臺運行著：從服務(wù)器下載數(shù)據(jù)，進行計算等。您的任務(wù)就是讓用戶知道APP并沒有停止運行或者崩潰掉，要讓用戶知道APP在工作著。通過App表現(xiàn)出來的視覺符號的進展給用戶一種控制感。理想狀態(tài)下，APP中的每個進程都應(yīng)該被一個獨立的動效所伴隨。比如，當(dāng)音頻錄制正在進行，屏幕可能要顯示一條波動的音頻軌道。實時聲波動效就可以顯示出聲音的大小。

來自：Record audio sample.

這種動效最常見的一種類型就是下拉刷新動效：

來自：Latest news.

7、應(yīng)該是一個有趣的動效

有趣的動效可以畫龍點睛也可以畫虎類犬。它們通常都沒有什么意義，而且會讓開發(fā)的工作變得異常復(fù)雜。但一個非常獨特的動效就可能很吸引用戶并且讓您的APP脫穎而出。這是設(shè)計師讓用戶愛上他們產(chǎn)品的一個秘密武器。獨特的動效可以助您創(chuàng)立一個識別度高的品牌。

在我們的例子中，移動的圓圈看起來非常別致并且很吸引人的注意力。

沿著屏幕移動的這種效果能夠帶來愉悅感和游戲感，簡單并且有趣。

來自：Workout book design concept.

我也非常確信下拉刷新的動效如果做成正在煮菜的鍋，會給人耳目一新的感受：

來自：Pull to Make Soup animation.

最后，25學(xué)堂提醒各位APP動效設(shè)計愛好者，在制作有趣的移動APP動效的適合，大家務(wù)必要注意以下兩點原則：

1）一定保證動效不會遮蓋或者隱藏APP的功能；

2）一定不能耗時間。