淺析APP中預載入圖設計

什麼是預載入圖？就是在當用戶進入APP的時候還沒完全載入出來時候，在用戶面前所呈現的內容信息，這些場景是提升產品體驗的一個環節，今天就來聊聊這些場景下其他產品是如表達的，提前掌握這種場景表達方法，便於我們在今後項目中能夠快速找准適合自己產品內容呈現方式。

預載入有哪些表達方式

預計載入過程中表現形式有載入等待（轉圈動畫或其他GIF動畫），載入歷史緩存數據，提前載入一半，逐步載入，後台提供默認載入圖，當然還有載入失敗場景。今天我們這裡只討論預載入中的Content表達方式，我分析提煉了幾個常用的視覺表達方式：

• 預載入LOGO品牌元素
• 色塊
• 布局
• 提供默認灰色圖
• 無內容載入
• 使用高斯模糊

預載入LOGO品牌元素

他是什麼？在載入過程中，會預先在用戶面前呈現出來一些圖像元素，通過LOGO或者相關圖標來表達，給用戶一種前期的心理預期要呈現的大致內容

解析：

• 優點是能提前預期所呈現的內容，品牌感知能力強，用戶記憶強，一看就知道是什麼內容
• 缺點是適配麻煩，不同樣式圖片都需要切圖，增加APP包大小，安卓還需要單獨切點九圖片來適配等等，有些人肯定會問，安卓為何就不能切整張圖啦？哈哈你可以試一試，如果你想你們包大小超大的話。

色塊預覽

他是什麼？在載入過程中，會預先在用戶面前呈現出來一些色塊元素，這種做法方法是： 直接讀取圖片的顏色，取什麼顏色？大致是圖片中的主色調，面積大的者讀取圖片平均色，當然後台需要有一個強大色庫來支撐且需要提供一種或者2種默認顏色，因為避免取色失敗,目前這樣做的產品有蘋果音樂、天貓App、Pinterest、Twitter、花瓣移動端等等,當然蘋果音樂載入不出來是直接提供默認的logo色塊。

解析：

• 優點是圖片適配非常方便，全端展現方式提供一套色庫即可，畫面不枯燥，最後補充一點，截圖真的好難截啊，說明這些應用優化的真的很牛，Pinterest是個奇葩比較好截。
• 需要色庫配得好，顏色需要設計師親自調，當然我目前還沒想到有更好的方法，如果有請各位元老大神告訴我下，感謝。

布局載入

它是什麼？在載入過程中，會預先在用戶面前呈現內容布局大致樣式：

解析：使用布局載入實現是比較簡單的，全端適配簡單。

提供默認灰色圖

它是什麼？在載入過程中，會預先在用戶面前呈現出來一些灰色圖像元素

解析：特別說明下Twitter是採用的兩種表達方式，一種是提供默認灰色圖，一種是圖片取色，一般灰色值採用#F2F2F2，優點畫面乾淨，適配簡單，這裡說明下，可以開發寫，可以我們自己提供，但是推薦我們提供，免得增加累贅代碼。

無內容顯示

它是什麼？在載入過程中，不出現任何佔位符，直接負型空間展示。

解析：

• 這兩者其實都有兩種表達方式一種是這種空內容，一種是提供灰色默認圖，只是所在場景不一樣，這種載入效率最高
• 缺點是如果網速比較慢，半天載入不出來，用戶產生焦略心理，以為軟體BUG，不推薦使用

使用高斯模糊

它是什麼？在載入過程中，會預先在用戶面前呈現出來一些圖像元素通過高斯模糊來表達。

解析：

• 通過把預載入出來的圖片進行高斯模糊處理，Instgram也是採用提供灰色圖和高斯模糊兩種方式，好玩有趣
• 缺點是高斯模糊會有一定的功耗，載入慢，不建議使用

產品設計策略

通過以上分析在做默認載入預覽過程中實現方式推薦有以下幾個方式，根據自己產品特色選用合適的表達方式：

作者：TONY，華為音樂UI設計師，職業方向UXD，喜歡探索一切新鮮事物，愛分享，寫文章

本文由 @Tony 原創發佈於人人都是產品經理。未經許可，禁止轉載。

題圖來自 Pexels，基於 CC0 協議