淺析APP中預加載圖設計

 預計加載過(guò)程中表現形式有加載等待（轉圈動(dòng)畫(huà)或其他GIF動(dòng)畫(huà)），加載歷史緩存數據，提前加載一半，逐步加載，后臺提供默認加載圖，當然還有加載失敗場(chǎng)景。今天我們這里只討論預加載中的Content表達方式，我分析提煉了幾個(gè)常用的視覺(jué)表達方式：UeO安徽網(wǎng)庫 地方門(mén)戶(hù)新聞?wù)?/span>

預加載LOGO品牌元素UeO安徽網(wǎng)庫 地方門(mén)戶(hù)新聞?wù)?/span>

色塊UeO安徽網(wǎng)庫 地方門(mén)戶(hù)新聞?wù)?/span>

布局UeO安徽網(wǎng)庫 地方門(mén)戶(hù)新聞?wù)?/span>

提供默認灰色圖UeO安徽網(wǎng)庫 地方門(mén)戶(hù)新聞?wù)?/span>

無(wú)內容加載UeO安徽網(wǎng)庫 地方門(mén)戶(hù)新聞?wù)?/span>

使用高斯模糊UeO安徽網(wǎng)庫 地方門(mén)戶(hù)新聞?wù)?/span>

預加載LOGO品牌元素UeO安徽網(wǎng)庫 地方門(mén)戶(hù)新聞?wù)?/span>

他是什么？在加載過(guò)程中，會(huì )預先在用戶(hù)面前呈現出來(lái)一些圖像元素，通過(guò)LOGO或者相關(guān)圖標來(lái)表達，給用戶(hù)一種前期的心理預期要呈現的大致內容UeO安徽網(wǎng)庫 地方門(mén)戶(hù)新聞?wù)?/span>

UeO安徽網(wǎng)庫 地方門(mén)戶(hù)新聞?wù)?/span>

解析：UeO安徽網(wǎng)庫 地方門(mén)戶(hù)新聞?wù)?/span>

優(yōu)點(diǎn)是能提前預期所呈現的內容，品牌感知能力強，用戶(hù)記憶強，一看就知道是什么內容UeO安徽網(wǎng)庫 地方門(mén)戶(hù)新聞?wù)?/span>

缺點(diǎn)是適配麻煩，不同樣式圖片都需要切圖，增加APP包大小，安卓還需要單獨切點(diǎn)九圖片來(lái)適配等等，有些人肯定會(huì )問(wèn)，安卓為何就不能切整張圖啦？哈哈你可以試一試，如果你想你們包大小超大的話(huà)。UeO安徽網(wǎng)庫 地方門(mén)戶(hù)新聞?wù)?/span>

色塊預覽UeO安徽網(wǎng)庫 地方門(mén)戶(hù)新聞?wù)?/span>

他是什么？在加載過(guò)程中，會(huì )預先在用戶(hù)面前呈現出來(lái)一些色塊元素，這種做法方法是： 直接讀取圖片的顏色，取什么顏色？大致是圖片中的主色調，面積大的者讀取圖片平均色，當然后臺需要有一個(gè)強大色庫來(lái)支撐且需要提供一種或者2種默認顏色，因為避免取色失敗,目前這樣做的產(chǎn)品有蘋(píng)果音樂(lè )、天貓App、Pinterest、Twitter、花瓣移動(dòng)端等等,當然蘋(píng)果音樂(lè )加載不出來(lái)是直接提供默認的logo色塊。UeO安徽網(wǎng)庫 地方門(mén)戶(hù)新聞?wù)?/span>

 UeO安徽網(wǎng)庫 地方門(mén)戶(hù)新聞?wù)?/span>

解UeO安徽網(wǎng)庫 地方門(mén)戶(hù)新聞?wù)?/span>

優(yōu)點(diǎn)是圖片適配非常方便，全端展現方式提供一套色庫即可，畫(huà)面不枯燥，最后補充一點(diǎn)，截圖真的好難截啊，說(shuō)明這些應用優(yōu)化的真的很牛，Pinterest是個(gè)奇葩比較好截。UeO安徽網(wǎng)庫 地方門(mén)戶(hù)新聞?wù)?/span>

需要色庫配得好，顏色需要設計師親自調，當然我目前還沒(méi)想到有更好的方法，如果有請各位元老大神告訴我下，感謝。UeO安徽網(wǎng)庫 地方門(mén)戶(hù)新聞?wù)?/span>

布局加載UeO安徽網(wǎng)庫 地方門(mén)戶(hù)新聞?wù)?/span>

它是什么？在加載過(guò)程中，會(huì )預先在用戶(hù)面前呈現內容布局大致樣式：UeO安徽網(wǎng)庫 地方門(mén)戶(hù)新聞?wù)?/span>

 UeO安徽網(wǎng)庫 地方門(mén)戶(hù)新聞?wù)?/span>

解析：使用布局加載實(shí)現是比較簡(jiǎn)單的，全端適配簡(jiǎn)單。UeO安徽網(wǎng)庫 地方門(mén)戶(hù)新聞?wù)?/span>

提供默認灰色圖UeO安徽網(wǎng)庫 地方門(mén)戶(hù)新聞?wù)?/span>

它是什么？在加載過(guò)程中，會(huì )預先在用戶(hù)面前呈現出來(lái)一些灰色圖像元素UeO安徽網(wǎng)庫 地方門(mén)戶(hù)新聞?wù)?/span>

解析：特別說(shuō)明下Twitter是采用的兩種表達方式，一種是提供默認灰色圖，一種是圖片取色，一般灰色值采用#F2F2F2，優(yōu)點(diǎn)畫(huà)面干凈，適配簡(jiǎn)單，這里說(shuō)明下，可以開(kāi)發(fā)寫(xiě)，可以我們自己提供，但是推薦我們提供，免得增加累贅代碼。UeO安徽網(wǎng)庫 地方門(mén)戶(hù)新聞?wù)?/span>

無(wú)內容顯示UeO安徽網(wǎng)庫 地方門(mén)戶(hù)新聞?wù)?/span>

它是什么？在加載過(guò)程中，不出現任何占位符，直接負型空間展示。UeO安徽網(wǎng)庫 地方門(mén)戶(hù)新聞?wù)?/span>

 UeO安徽網(wǎng)庫 地方門(mén)戶(hù)新聞?wù)?/span>

解析：UeO安徽網(wǎng)庫 地方門(mén)戶(hù)新聞?wù)?/span>

 UeO安徽網(wǎng)庫 地方門(mén)戶(hù)新聞?wù)?/span>

這兩者其實(shí)都有兩種表達方式一種是這種空內容，一種是提供灰色默認圖，只是所在場(chǎng)景不一樣，這種加載效率最高UeO安徽網(wǎng)庫 地方門(mén)戶(hù)新聞?wù)?/span>

缺點(diǎn)是如果網(wǎng)速比較慢，半天加載不出來(lái)，用戶(hù)產(chǎn)生焦略心理，以為軟件BUG，不推薦使用UeO安徽網(wǎng)庫 地方門(mén)戶(hù)新聞?wù)?/span>

使用高斯模糊UeO安徽網(wǎng)庫 地方門(mén)戶(hù)新聞?wù)?/span>

它是什么？在加載過(guò)程中，會(huì )預先在用戶(hù)面前呈現出來(lái)一些圖像元素通過(guò)高斯模糊來(lái)表達。UeO安徽網(wǎng)庫 地方門(mén)戶(hù)新聞?wù)?/span>

 UeO安徽網(wǎng)庫 地方門(mén)戶(hù)新聞?wù)?/span>

解析：UeO安徽網(wǎng)庫 地方門(mén)戶(hù)新聞?wù)?/span>

通過(guò)把預加載出來(lái)的圖片進(jìn)行高斯模糊處理，Instgram也是采用提供灰色圖和高斯模糊兩種方式，好玩有趣UeO安徽網(wǎng)庫 地方門(mén)戶(hù)新聞?wù)?/span>

缺點(diǎn)是高斯模糊會(huì )有一定的功耗，加載慢，不建議使用UeO安徽網(wǎng)庫 地方門(mén)戶(hù)新聞?wù)?/span>

產(chǎn)品設計策略UeO安徽網(wǎng)庫 地方門(mén)戶(hù)新聞?wù)?/span>

通過(guò)以上分析在做默認加載預覽過(guò)程中實(shí)現方式推薦有以下幾個(gè)方式，根據自己產(chǎn)品特色選用合適的表達方式UeO安徽網(wǎng)庫 地方門(mén)戶(hù)新聞?wù)?/span>