我大膽預(yù)測(cè)了一下，以后App的加載動(dòng)畫(huà)都應(yīng)該遵循越來(lái)越簡(jiǎn)潔的設(shè)計(jì)原則，突出內(nèi)容，去掉無(wú)用的、過(guò)渡的形式設(shè)計(jì)。也許無(wú)文字提示的加載動(dòng)畫(huà)確實(shí)是一個(gè)流行趨勢(shì)！

對(duì)于視覺(jué)設(shè)計(jì)師來(lái)說(shuō)，其實(shí)我們有很大的優(yōu)勢(shì)，如果我們的思維邏輯清晰并且樂(lè)于總結(jié)，那么我們總結(jié)的內(nèi)容將不僅僅只是一個(gè)大的分類(lèi)總結(jié)，還能夠提供一些具體的執(zhí)行方法，并且將執(zhí)行過(guò)程中踩到的坑和大家一起分享討論。

今天我要分享的是關(guān)于加載動(dòng)畫(huà)的知識(shí)體系及簡(jiǎn)單的制作方法，至于特殊場(chǎng)景總結(jié)不全之處，還請(qǐng)批判指正。

大綱如下：

1. 加載動(dòng)畫(huà)存在的意義
2. 加載動(dòng)畫(huà)的使用場(chǎng)景
3. 前段開(kāi)發(fā)實(shí)現(xiàn)動(dòng)畫(huà)的方法
4. 工作中輸出加載動(dòng)畫(huà)的方法與步驟
5. 制作加載動(dòng)畫(huà)時(shí)的注意事項(xiàng)
6. 加載動(dòng)畫(huà)的流行趨勢(shì)

一、加載動(dòng)畫(huà)存在的意義

眾所周知，app服務(wù)器在加載數(shù)據(jù)的時(shí)候需要用戶等待一段時(shí)間，為了緩解用戶等待過(guò)程中的焦慮情緒，設(shè)計(jì)者可以采用加載動(dòng)畫(huà)的方式來(lái)緩解用戶的等待時(shí)間，使整個(gè)等待過(guò)程變得更加友好、流暢。

一個(gè)好的加載動(dòng)畫(huà)分為兩個(gè)層次：

• 第一個(gè)層次是滿足用戶的基本心理預(yù)期，緩解等待的焦慮；
• 第二個(gè)層次是要給出用戶一定的驚喜，甚至讓用戶對(duì)加載動(dòng)畫(huà)抱有期待、好奇的心理。

這里我們暫時(shí)先只討論第一個(gè)層次的內(nèi)容，因?yàn)檫@已經(jīng)能夠滿足大多數(shù)app的需求了。至于如何做出讓用戶驚喜的加載動(dòng)畫(huà)（如餓了么、京東的加載動(dòng)畫(huà)），我們可以另外討論。

二、加載動(dòng)畫(huà)的使用場(chǎng)景

查閱大量關(guān)于加載的資料后，發(fā)現(xiàn)很多教程與文章都是從樣式的維度來(lái)分類(lèi)的，今天我們換個(gè)維度，從使用場(chǎng)景出發(fā)，來(lái)打造屬于我們自己的加載動(dòng)畫(huà)設(shè)計(jì)體系。

加載動(dòng)畫(huà)的常見(jiàn)使用場(chǎng)景一共分為以下5種：

1. 下拉刷新加載
2. 切換新頁(yè)面數(shù)據(jù)加載
3. 頁(yè)面上拉加載
4. 頁(yè)面局部加載
5. 啟動(dòng)頁(yè)加載

我們還是一個(gè)一個(gè)來(lái)了解：

1. 下拉刷新加載

下拉刷新可以讓用戶在看到本地?cái)?shù)據(jù)的同時(shí)去重新加載數(shù)據(jù)，以確保用戶可以看到最新的內(nèi)容。

下拉加載一般分為兩種形式：動(dòng)畫(huà)加文字（如今日頭條下拉加載樣式）、純動(dòng)畫(huà)（如網(wǎng)易郵箱）。

如下圖：

2. 切換新頁(yè)面數(shù)據(jù)加載

當(dāng)切換到新頁(yè)面時(shí)，常常會(huì)有加載數(shù)據(jù)的時(shí)候，這也是加載動(dòng)畫(huà)使用最多的場(chǎng)景，市面上的加載樣式也是多種多樣，如：白屏加載、toast加載、進(jìn)度條加載、導(dǎo)航欄加載等等。

3. 頁(yè)面上拉加載

當(dāng)一個(gè)頁(yè)面數(shù)據(jù)量過(guò)大時(shí)，服務(wù)器不會(huì)一次性將內(nèi)容全部加載，而是加載一部分，只有當(dāng)用戶向上拉動(dòng)頁(yè)面時(shí)，才會(huì)加載更多，如下圖：

上拉加載的樣式不會(huì)過(guò)于復(fù)雜，一般采用比較簡(jiǎn)單的轉(zhuǎn)圈動(dòng)畫(huà)來(lái)實(shí)現(xiàn)。

4. 頁(yè)面局部加載

常見(jiàn)的局部加載場(chǎng)景有視頻列表、加載圖片的占位圖等，如下圖：

5. 啟動(dòng)頁(yè)加載

為了緩解用戶啟動(dòng)app時(shí)的等待時(shí)間，有些app會(huì)將啟動(dòng)頁(yè)設(shè)計(jì)成一個(gè)加載動(dòng)畫(huà)，如京東、百度貼吧等，不僅使等待時(shí)間變得有趣，并且增加了品牌記憶，達(dá)到了一箭雙雕的效果。

三、前端開(kāi)發(fā)實(shí)現(xiàn)動(dòng)畫(huà)的方法

1. 調(diào)取系統(tǒng)自帶樣式

系統(tǒng)自帶樣式比較簡(jiǎn)單，iOS系統(tǒng)的樣式是一個(gè)菊花，安卓系統(tǒng)的是一個(gè)轉(zhuǎn)圈的圓線。

2. 設(shè)計(jì)師直接提供gif動(dòng)圖

這種提供gif的方法，一般適用于比較大場(chǎng)景的加載動(dòng)畫(huà)，如啟動(dòng)頁(yè)。

需要注意的是原生系統(tǒng)是不支持gif控件的，iOS需要調(diào)取網(wǎng)頁(yè)的gif，而安卓需要調(diào)取播放器才能實(shí)現(xiàn)動(dòng)動(dòng)畫(huà)的展現(xiàn)，所以如果不是特殊場(chǎng)景，一般不推薦使用gif控件來(lái)實(shí)現(xiàn)動(dòng)畫(huà)。

3. 前端自己將動(dòng)畫(huà)用代碼寫(xiě)出來(lái)

最常用的一種方式就是讓前端哥哥自己將動(dòng)畫(huà)寫(xiě)出來(lái)，當(dāng)然這時(shí)候你還是要做出一個(gè)示范動(dòng)畫(huà)， 并告知?jiǎng)赢?huà)的規(guī)則是怎樣的（下文會(huì)詳細(xì)說(shuō)明）。

四、工作中輸出加載動(dòng)畫(huà)的方法與步驟

講了這么多內(nèi)容其實(shí)只是讓大家對(duì)整個(gè)加載動(dòng)畫(huà)的全局有個(gè)認(rèn)知，在執(zhí)行過(guò)程中有理有據(jù)，避免無(wú)從下手的情況出現(xiàn)。換句話說(shuō)，在了解以上內(nèi)容后，至少我們知道了某種場(chǎng)景下該做什么，至于怎么做，我用一個(gè)下拉刷新的動(dòng)畫(huà)實(shí)例來(lái)具體講解一下輸出加載動(dòng)畫(huà)的過(guò)程。

1. 確定使用場(chǎng)景與實(shí)現(xiàn)方法

• 使用場(chǎng)景：下拉刷新
• 實(shí)現(xiàn)方式：前端代碼實(shí)現(xiàn)

2. 設(shè)計(jì)師制作下拉刷新動(dòng)畫(huà)，并透徹理解動(dòng)畫(huà)機(jī)制

動(dòng)畫(huà)如下圖（參考QQ郵箱下拉加載）：

制作過(guò)程中，我們可以優(yōu)先考慮加入品牌元素在動(dòng)畫(huà)中，如品牌logo、品牌顏色、品牌名稱，這些都可以融入到加載動(dòng)畫(huà)當(dāng)中。

3. 輸出加載動(dòng)畫(huà)的規(guī)范

如下圖：

首先你需要將動(dòng)畫(huà)本身的規(guī)則寫(xiě)出來(lái)，如我們目前制作的這三個(gè)小球，一個(gè)循環(huán)內(nèi)平均有6個(gè)關(guān)鍵節(jié)點(diǎn)，每個(gè)節(jié)點(diǎn)需要0.3秒，也就是循環(huán)一次需要1.8秒，我們將其動(dòng)作全部分解輸出給開(kāi)發(fā)，并將圓球的大小、顏色等信息注明，這樣開(kāi)發(fā)看到規(guī)則后就會(huì)一目了然，保證動(dòng)畫(huà)的還原度。

然而這僅僅只是做了動(dòng)畫(huà)本身的規(guī)則，我們還需要考慮動(dòng)畫(huà)與頁(yè)面間的關(guān)系，例如下圖是一個(gè)下拉松開(kāi)手指后，頁(yè)面正在加載的狀態(tài)，我們不僅要考慮正在加載的狀態(tài)，還要考慮其下拉過(guò)程中可能會(huì)發(fā)生的情況。

總的來(lái)說(shuō)，我們需要標(biāo)明動(dòng)畫(huà)加載時(shí)，動(dòng)畫(huà)與導(dǎo)航欄的間距，與內(nèi)容區(qū)的間距，且下拉過(guò)程中哪個(gè)間距是可變的、哪個(gè)間距是不可變的等等，甚至還需要考慮可拉動(dòng)的最大距離是多少，當(dāng)然拉動(dòng)時(shí)的彈性是系統(tǒng)自帶的，一般不予考慮。

只有將這些內(nèi)容全部考慮清楚并輸出規(guī)范，才算是一個(gè)合格的下拉加載動(dòng)畫(huà)。

這里我舉的例子是動(dòng)畫(huà)中沒(méi)有文案的情況，當(dāng)有文案時(shí)，考慮的內(nèi)容會(huì)更多，如：一個(gè)下拉過(guò)程可能會(huì)有“下拉加載”、釋放加載、正在加載這三個(gè)狀態(tài)，而當(dāng)加載完成后，還需有反饋狀態(tài)告訴用戶有多少條新的信息，如新聞?lì)惖南吕⑿?。如下圖：

大家有興趣可以自行了解一下，這里就不予過(guò)多解釋了。

五、制作加載動(dòng)畫(huà)時(shí)的注意事項(xiàng)

1. 不論你的動(dòng)畫(huà)有多好看、多吸引眼球，如果成本太高或者過(guò)于復(fù)雜都是無(wú)法落地的，所以我們要遵循簡(jiǎn)單實(shí)用的原則來(lái)進(jìn)行設(shè)計(jì)，不要過(guò)度設(shè)計(jì)。

2. 其實(shí)在開(kāi)發(fā)哥哥那里，他們的時(shí)間計(jì)算單位是毫秒（1秒等于1000毫秒），也沒(méi)有動(dòng)畫(huà)里“幀”的概念。所以，如果你能用代碼的語(yǔ)言（毫秒）與開(kāi)發(fā)哥哥溝通，他會(huì)更喜歡你的，萬(wàn)一是個(gè)開(kāi)發(fā)妹妹，你懂的！

3. 這一條我相信不只是在做加載動(dòng)畫(huà)時(shí)需要考慮的，所有的交互視覺(jué)場(chǎng)景，都需要考慮這條原則：任何交互動(dòng)作所導(dǎo)致的狀態(tài)都需要考慮正常狀態(tài)與異常狀態(tài)。拿加載動(dòng)畫(huà)來(lái)說(shuō)，我們需要考慮加載成功的反饋與加載失敗的反饋，并將之注明在輸出規(guī)范中(雖然有些場(chǎng)景的加載的確沒(méi)有反饋狀態(tài)，但是在考慮全局時(shí)，這些都是我們前期必須思考的內(nèi)容）。

六、加載動(dòng)畫(huà)的流行趨勢(shì)

對(duì)于加載動(dòng)畫(huà)的流行趨勢(shì)，不論是交互還是視覺(jué)，國(guó)外很多主流app都是非常簡(jiǎn)潔并且無(wú)文字提示的，下面是部分截圖：

所以我大膽預(yù)測(cè)了一下，以后app的加載動(dòng)畫(huà)都應(yīng)該遵循越來(lái)越簡(jiǎn)潔的設(shè)計(jì)原則，突出內(nèi)容，去掉無(wú)用的、過(guò)渡的形式設(shè)計(jì)。也許無(wú)文字提示的加載動(dòng)畫(huà)確實(shí)是一個(gè)流行趨勢(shì)！

以上就是目前階段我對(duì)于加載動(dòng)畫(huà)的一些總結(jié)與分析，希望能對(duì)于你有一點(diǎn)啟發(fā)作用，如果你有不同的見(jiàn)解，歡迎與我一起交流，大家共同進(jìn)步。

很榮幸之前的幾篇文章相繼被《人人都是產(chǎn)品經(jīng)理》、《IXDC》、《優(yōu)設(shè)網(wǎng)》、《簡(jiǎn)書(shū)》、推薦至首頁(yè)及公眾號(hào)傳播，讓我有了很大的動(dòng)力。為了讓所有關(guān)注我的人得到實(shí)實(shí)在在的收獲，我會(huì)對(duì)自己出品的文章愈加要求嚴(yán)格。

作者：菜心（微信號(hào)：410628210 ?微信公眾號(hào)：菜心設(shè)計(jì)鋪），華為ITUX用戶體驗(yàn)設(shè)計(jì)師（主視覺(jué)），3年工作經(jīng)驗(yàn)，參與華為Welink、3MS、連長(zhǎng)社區(qū)等多個(gè)項(xiàng)目的用戶體驗(yàn)設(shè)計(jì)工作。歡迎大家互相交流關(guān)注。

本文由 @菜心 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。