加載動(dòng)畫遠(yuǎn)不止我們看到的形式，背后還有關(guān)于加載性能的考慮。

數(shù)據(jù)是軟件的血液，數(shù)據(jù)只有不斷加載更新，軟件才有生命力。數(shù)據(jù)加載是用戶的經(jīng)常性操作，因此是提升用戶體驗(yàn)的重要方面，也是產(chǎn)品、設(shè)計(jì)、開發(fā)都要考慮的重要點(diǎn)。加載動(dòng)畫遠(yuǎn)不止我們看到的形式，背后還有關(guān)于加載性能的考慮。

我花了大量時(shí)間分析歸納，這里我以下3個(gè)分類出發(fā)，目的是為了盡量全面地描述加載動(dòng)畫。

按場景分類

從操作的場景出發(fā)來，讓我們來詳細(xì)了解哪些操作會觸發(fā)加載動(dòng)畫。

1. 下拉刷新

這是我們常用的下拉操作來刷新頁面數(shù)據(jù)。

常見兩種樣式：動(dòng)畫+文字，純動(dòng)畫。例如：今日頭條，美團(tuán)。

對于新聞閱讀類APP，列表?xiàng)l目的刷新動(dòng)畫，最好有這么3種狀態(tài)，用戶體驗(yàn)會更好。

• 狀態(tài)1：下拉時(shí)，提示文字“松開刷新”。
• 狀態(tài)2：松開時(shí)，提示文字“刷新中”。
• 狀態(tài)3：顯示結(jié)果，提示文字“更新數(shù)據(jù)條數(shù)/更新時(shí)間/刷新失敗”。

大家可以參考今日頭條。

2.?上拉加載更多

當(dāng)用戶手動(dòng)向上拉動(dòng)頁面時(shí)加載更多數(shù)據(jù)。

常采用簡單的轉(zhuǎn)圈樣式。

3. 頁面內(nèi)的圖片視頻加載

當(dāng)我們切換到新頁面時(shí)，為了減少用戶等待時(shí)間，會優(yōu)先加載文本信息，后加載圖片和視頻。

圖片和視頻用默認(rèn)圖占位。默認(rèn)圖常見樣式有：品牌 LOGO，相關(guān)圖標(biāo)，或提取圖片、logo的主色調(diào)來顯示。

4.?提交表單，登錄注冊

當(dāng)點(diǎn)擊提交或登錄按鈕后，在當(dāng)前頁提示正在加載并處理，成功后進(jìn)入下一頁面。

常見形式有：toast加載（下面會講）和控件加載。

5. 跳轉(zhuǎn)新頁面

點(diǎn)擊列表、卡片模塊或者標(biāo)簽欄圖標(biāo)，跳轉(zhuǎn)至下一頁面并加載內(nèi)容。絕大部分app采用這種加載方式，極大的增強(qiáng)了流暢感。

樣式可分為：

• toast動(dòng)畫加載；
• 導(dǎo)航進(jìn)度條加載；
• 白屏加；
• 下拉刷新。

6. 啟動(dòng)頁

用戶打開app時(shí)，后臺加載數(shù)據(jù)，會有一段等待時(shí)間，設(shè)計(jì)啟動(dòng)頁加載動(dòng)畫可以緩解用戶等待情緒。

從形式上分為：品牌展示，活動(dòng)頁面，廣告頁面，情懷頁面。

• 品牌展示：展示信息包括LOGO，品牌名稱，slogan等。
• 活動(dòng)頁面（可跳過）：活動(dòng)上線，或者一些隱藏功能，起到告知用戶的作用。
• 廣告頁面（可跳過）：最好配一些高大上的，有逼格的廣告圖。
• 充滿情懷頁面：如微信。

按性能分類

提前規(guī)劃好加載規(guī)則，可以極大地提升用戶體驗(yàn)。

1. 預(yù)加載

通過預(yù)判，猜測用戶下一步的操作，提前加載好內(nèi)容，不需要用戶手動(dòng)操作。需要設(shè)置一次加載的數(shù)據(jù)量，避免浪費(fèi)流量。

比如淘寶和考拉的首頁。

• 特點(diǎn)：有側(cè)邊滑塊，方便用戶判斷位置。預(yù)加載一般用在操作上拉加載更多，適用于瀑布流、長列表、商品列表等頁面。
• 優(yōu)點(diǎn)：無縫的使用體驗(yàn)。
• 缺點(diǎn)：沒有盡頭，用戶容易迷失瀏覽位置。耗流量，要結(jié)合網(wǎng)絡(luò)情況和加載內(nèi)容綜合考慮，可以只加載文字信息或關(guān)鍵信息。建議在WiFi網(wǎng)絡(luò)環(huán)境下采取預(yù)加載，而在蜂窩網(wǎng)絡(luò)狀態(tài)下則采用手動(dòng)加載。

2. 同級加載

在一個(gè)頁面內(nèi)加載完成所有tab的內(nèi)容。

優(yōu)點(diǎn)：同級頁面間切換時(shí)會很流暢。

3. 離線加載

網(wǎng)絡(luò)好的情況下加載一部分內(nèi)容，防止信號不好時(shí)不可用。

這種離線緩存的功能，適用于小說閱讀、新聞閱讀、視頻類APP。

• 優(yōu)點(diǎn)：解決了沒網(wǎng)獲取數(shù)據(jù)的問題，保證了流暢性。
• 缺點(diǎn)：占用本地存儲空間，而且有時(shí)候加載的內(nèi)容沒有用到。

4. 異步處理

用戶不用等待服務(wù)器反饋，可以進(jìn)行其他操作。

比如，微信發(fā)布朋友圈時(shí)，點(diǎn)擊上傳后，不用刷新數(shù)據(jù)，就能看到發(fā)出的內(nèi)容，微信會在后臺自行將文字圖片上傳到服務(wù)器，用戶不用等待上傳結(jié)果。

5. 優(yōu)先加載

切換頁面時(shí)，由于頁面內(nèi)容多，為了減少用戶等待時(shí)間，采用優(yōu)先加載文字信息，后加載圖片和視屏。

圖片和視頻用默認(rèn)圖占位。默認(rèn)圖可用LOGO，相關(guān)圖標(biāo)，或提取圖片、logo的主色調(diào)來顯示。

• 優(yōu)點(diǎn)：能提前預(yù)期所呈現(xiàn)的內(nèi)容，品牌感知能力強(qiáng)，用戶記憶強(qiáng)。
• 缺點(diǎn)：適配麻煩，不同樣式圖片都需要切圖，增加APP包大小，安卓還需要單獨(dú)切點(diǎn)九圖片來適配。
• 簡單處理方式：提供默認(rèn)灰色圖，灰色值采用#F2F2F2，畫面干凈，適配簡單。

注意：重要信息不能全部放在頭圖上，重要操作也不能用圖片按鈕，否則會有操作顯示不出來的風(fēng)險(xiǎn)。

6. 框架加載

先加載框架，文字用矩形條代替。

一般用于頁面元素比較多，框架比較固定，且內(nèi)容不為空的情況。配合優(yōu)先加載的方式，效果更佳。

優(yōu)點(diǎn)：實(shí)現(xiàn)簡單，適配簡單。

7. 智能加載

根據(jù)網(wǎng)絡(luò)環(huán)境自適應(yīng)加載小圖或者無圖模式，視頻和動(dòng)畫直接用一個(gè)占位符標(biāo)識即可。

當(dāng)網(wǎng)絡(luò)切換到GPRS或3G的時(shí)候，需要提醒用戶網(wǎng)絡(luò)變化。適用于有大量圖片或視頻的APP，如電商類或在線視頻類APP。

• 優(yōu)點(diǎn)：根據(jù)具體場景來控件流量和加載速度。
• 缺點(diǎn)：不一定真實(shí)有效地命中用戶需求。

按樣式分類

這種分類角度很適合設(shè)計(jì)師設(shè)計(jì)加載動(dòng)畫。

1. toast加載

即擋在頁面前的加載彈框，不能進(jìn)行其他操作，只能點(diǎn)擊取消加載。

• 形式：動(dòng)畫+文字
• 缺點(diǎn)：會打斷用戶操作，增加等待感，一般不建議用這種方式。一定要加上“取消”的操作，同時(shí)在安卓中的后退按鈕能關(guān)閉加載。

2. 導(dǎo)航欄loading

將導(dǎo)航欄標(biāo)題臨時(shí)變成加載信息文字提示，配合轉(zhuǎn)圈動(dòng)畫。

一般用在消息列表頁面，比如微信的聊天列表。

優(yōu)點(diǎn)：不打斷用戶操作，屬于自動(dòng)刷新功能。

3. 控件加載

常見點(diǎn)擊登錄按鈕，加載更多按鈕。

對某個(gè)控件進(jìn)行操作后，控件變?yōu)榧虞d狀態(tài)，此時(shí)控件不能重復(fù)操作，當(dāng)加載完畢后，控件再作為顯示加載結(jié)果的狀態(tài)。這種加載方式是控件的自身狀態(tài)，不影響其他操作，請求失敗后可配合提示告知用戶失敗的原因。

4. 啟動(dòng)頁加載

上面講過，這里不累述。

5. 頂部進(jìn)度條加載

大多數(shù)不支持下拉刷新的頁面，在頁面切換操作時(shí)采用頂部進(jìn)度條加載。

多出現(xiàn)在H5頁面中，特點(diǎn)是一次性加載完所有數(shù)據(jù)。若加載失敗，頁面為空。

設(shè)置為先慢后快有更好的體驗(yàn)。

6. 白屏加載/全屏加載

未加載出的數(shù)據(jù)是空白，配合加載動(dòng)畫讓等待不枯燥。

• 優(yōu)點(diǎn)：能保證內(nèi)容的整體性，全部加載完才能夠系統(tǒng)化的閱讀。
• 缺點(diǎn)：有非常強(qiáng)烈的等待感，3s以上會產(chǎn)生焦躁情緒。

多用在文章詳情頁，查看圖片，大部分跳轉(zhuǎn)頁面都是這種形式。

7. 狀態(tài)欄加載

狀態(tài)欄轉(zhuǎn)圈加載。是ios系統(tǒng)默認(rèn)加載樣式。

總結(jié)

1. 刷新最好有加載結(jié)果提示；
2. 假如加載失敗，需要給用戶提示；
3. 盡量使用非模態(tài)的加載方式，即避免使用toast加載方式，讓用戶可以進(jìn)行其他操作；
4. 即使一定要用模態(tài)加載，也要給一個(gè)取消加載的選項(xiàng)；
5. 情趣化設(shè)計(jì)加載動(dòng)畫，讓用戶等待不枯燥。

講完了加載動(dòng)畫，下面講一下設(shè)計(jì)師需要了解的知識。

（1）了解代碼是怎樣實(shí)現(xiàn)加載動(dòng)畫的

• iOS系統(tǒng)的默認(rèn)樣式是一個(gè)菊花，安卓系統(tǒng)的是一個(gè)轉(zhuǎn)圈的圓線。
• 原生系統(tǒng)是不支持gif控件的，iOS需調(diào)取網(wǎng)頁的gif，安卓需調(diào)取播放器才能實(shí)現(xiàn)gif動(dòng)畫，如果不是特殊場景，不推薦用gif來實(shí)現(xiàn)動(dòng)畫。啟動(dòng)頁可用gif動(dòng)畫。
• 讓前端寫動(dòng)畫，需要設(shè)計(jì)師做示范動(dòng)畫，并標(biāo)注動(dòng)畫的運(yùn)動(dòng)規(guī)則。

（2）示范動(dòng)畫的制作規(guī)范

把動(dòng)畫規(guī)則寫出來，交給開發(fā)。包含狀態(tài)描述，時(shí)間間隔，顏色，大小，與頁面的關(guān)系。多和開發(fā)溝通，會事半功倍。

（3）注意事項(xiàng)

• 遵循簡單實(shí)用的原則，不過度設(shè)計(jì)。
• 開發(fā)的時(shí)間單位是毫秒（1秒等于1000毫秒），沒有動(dòng)畫里“幀”的概念。
• 需考慮加載成功的反饋與加載失敗的反饋，并注明在規(guī)范中。

作者：五月的太陽（微信公眾號：TomatoDesigner），視覺+交互設(shè)計(jì)師，3年互聯(lián)網(wǎng)產(chǎn)品設(shè)計(jì)經(jīng)驗(yàn)，歡迎關(guān)注公眾號交流學(xué)習(xí)。

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

題圖由作者提供