中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

加載動畫遠不止我們看到的形式，背后還有關于加載性能的考慮。

數據是軟件的血液，數據只有不斷加載更新，軟件才有生命力。數據加載是用戶的經常性操作，因此是提升用戶體驗的重要方面，也是產品、設計、開發都要考慮的重要點。加載動畫遠不止我們看到的形式，背后還有關于加載性能的考慮。

我花了大量時間分析歸納，這里我以下3個分類出發，目的是為了盡量全面地描述加載動畫。

按場景分類

從操作的場景出發來，讓我們來詳細了解哪些操作會觸發加載動畫。

1. 下拉刷新

這是我們常用的下拉操作來刷新頁面數據。

常見兩種樣式：動畫+文字，純動畫。例如：今日頭條，美團。

對于新聞閱讀類APP，列表條目的刷新動畫，最好有這么3種狀態，用戶體驗會更好。

• 狀態1：下拉時，提示文字“松開刷新”。
• 狀態2：松開時，提示文字“刷新中”。
• 狀態3：顯示結果，提示文字“更新數據條數/更新時間/刷新失敗”。

大家可以參考今日頭條。

2.?上拉加載更多

當用戶手動向上拉動頁面時加載更多數據。

常采用簡單的轉圈樣式。

3. 頁面內的圖片視頻加載

當我們切換到新頁面時，為了減少用戶等待時間，會優先加載文本信息，后加載圖片和視頻。

圖片和視頻用默認圖占位。默認圖常見樣式有：品牌 LOGO，相關圖標，或提取圖片、logo的主色調來顯示。

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

當點擊提交或登錄按鈕后，在當前頁提示正在加載并處理，成功后進入下一頁面。

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

5. 跳轉新頁面

點擊列表、卡片模塊或者標簽欄圖標，跳轉至下一頁面并加載內容。絕大部分app采用這種加載方式，極大的增強了流暢感。

樣式可分為：

• toast動畫加載；
• 導航進度條加載；
• 白屏加；
• 下拉刷新。

6. 啟動頁

用戶打開app時，后臺加載數據，會有一段等待時間，設計啟動頁加載動畫可以緩解用戶等待情緒。

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

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

按性能分類

提前規劃好加載規則，可以極大地提升用戶體驗。

1. 預加載

通過預判，猜測用戶下一步的操作，提前加載好內容，不需要用戶手動操作。需要設置一次加載的數據量，避免浪費流量。

比如淘寶和考拉的首頁。

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

2. 同級加載

在一個頁面內加載完成所有tab的內容。

優點：同級頁面間切換時會很流暢。

3. 離線加載

網絡好的情況下加載一部分內容，防止信號不好時不可用。

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

• 優點：解決了沒網獲取數據的問題，保證了流暢性。
• 缺點：占用本地存儲空間，而且有時候加載的內容沒有用到。

4. 異步處理

用戶不用等待服務器反饋，可以進行其他操作。

比如，微信發布朋友圈時，點擊上傳后，不用刷新數據，就能看到發出的內容，微信會在后臺自行將文字圖片上傳到服務器，用戶不用等待上傳結果。

5. 優先加載

切換頁面時，由于頁面內容多，為了減少用戶等待時間，采用優先加載文字信息，后加載圖片和視屏。

圖片和視頻用默認圖占位。默認圖可用LOGO，相關圖標，或提取圖片、logo的主色調來顯示。

• 優點：能提前預期所呈現的內容，品牌感知能力強，用戶記憶強。
• 缺點：適配麻煩，不同樣式圖片都需要切圖，增加APP包大小，安卓還需要單獨切點九圖片來適配。
• 簡單處理方式：提供默認灰色圖，灰色值采用#F2F2F2，畫面干凈，適配簡單。

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

6. 框架加載

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

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

優點：實現簡單，適配簡單。

7. 智能加載

根據網絡環境自適應加載小圖或者無圖模式，視頻和動畫直接用一個占位符標識即可。

當網絡切換到GPRS或3G的時候，需要提醒用戶網絡變化。適用于有大量圖片或視頻的APP，如電商類或在線視頻類APP。

• 優點：根據具體場景來控件流量和加載速度。
• 缺點：不一定真實有效地命中用戶需求。

按樣式分類

這種分類角度很適合設計師設計加載動畫。

1. toast加載

即擋在頁面前的加載彈框，不能進行其他操作，只能點擊取消加載。

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

2. 導航欄loading

將導航欄標題臨時變成加載信息文字提示，配合轉圈動畫。

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

優點：不打斷用戶操作，屬于自動刷新功能。

3. 控件加載

常見點擊登錄按鈕，加載更多按鈕。

對某個控件進行操作后，控件變為加載狀態，此時控件不能重復操作，當加載完畢后，控件再作為顯示加載結果的狀態。這種加載方式是控件的自身狀態，不影響其他操作，請求失敗后可配合提示告知用戶失敗的原因。

4. 啟動頁加載

上面講過，這里不累述。

5. 頂部進度條加載

大多數不支持下拉刷新的頁面，在頁面切換操作時采用頂部進度條加載。

多出現在H5頁面中，特點是一次性加載完所有數據。若加載失敗，頁面為空。

設置為先慢后快有更好的體驗。

6. 白屏加載/全屏加載

未加載出的數據是空白，配合加載動畫讓等待不枯燥。

• 優點：能保證內容的整體性，全部加載完才能夠系統化的閱讀。
• 缺點：有非常強烈的等待感，3s以上會產生焦躁情緒。

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

7. 狀態欄加載

狀態欄轉圈加載。是ios系統默認加載樣式。

總結

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

講完了加載動畫，下面講一下設計師需要了解的知識。

（1）了解代碼是怎樣實現加載動畫的

• iOS系統的默認樣式是一個菊花，安卓系統的是一個轉圈的圓線。
• 原生系統是不支持gif控件的，iOS需調取網頁的gif，安卓需調取播放器才能實現gif動畫，如果不是特殊場景，不推薦用gif來實現動畫。啟動頁可用gif動畫。
• 讓前端寫動畫，需要設計師做示范動畫，并標注動畫的運動規則。

（2）示范動畫的制作規范

把動畫規則寫出來，交給開發。包含狀態描述，時間間隔，顏色，大小，與頁面的關系。多和開發溝通，會事半功倍。

（3）注意事項

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

作者：五月的太陽（微信公眾號：TomatoDesigner），視覺+交互設計師，3年互聯網產品設計經驗，歡迎關注公眾號交流學習。

本文由 @五月的太陽 原創發布于人人都是產品經理。未經許可，禁止轉載。

題圖由作者提供