淺析APP中預(yù)加載圖設(shè)計

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

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

色塊nxs安徽網(wǎng)庫 地方門戶新聞?wù)?/span>

布局nxs安徽網(wǎng)庫 地方門戶新聞?wù)?/span>

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

無內(nèi)容加載nxs安徽網(wǎng)庫 地方門戶新聞?wù)?/span>

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

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

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

nxs安徽網(wǎng)庫 地方門戶新聞?wù)?/span>

解析：nxs安徽網(wǎng)庫 地方門戶新聞?wù)?/span>

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

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

色塊預(yù)覽nxs安徽網(wǎng)庫 地方門戶新聞?wù)?/span>

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

 nxs安徽網(wǎng)庫 地方門戶新聞?wù)?/span>

解nxs安徽網(wǎng)庫 地方門戶新聞?wù)?/span>

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

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

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

它是什么？在加載過程中，會預(yù)先在用戶面前呈現(xiàn)內(nèi)容布局大致樣式：nxs安徽網(wǎng)庫 地方門戶新聞?wù)?/span>

 nxs安徽網(wǎng)庫 地方門戶新聞?wù)?/span>

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

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

它是什么？在加載過程中，會預(yù)先在用戶面前呈現(xiàn)出來一些灰色圖像元素nxs安徽網(wǎng)庫 地方門戶新聞?wù)?/span>

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

無內(nèi)容顯示nxs安徽網(wǎng)庫 地方門戶新聞?wù)?/span>

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

 nxs安徽網(wǎng)庫 地方門戶新聞?wù)?/span>

解析：nxs安徽網(wǎng)庫 地方門戶新聞?wù)?/span>

 nxs安徽網(wǎng)庫 地方門戶新聞?wù)?/span>

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

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

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

它是什么？在加載過程中，會預(yù)先在用戶面前呈現(xiàn)出來一些圖像元素通過高斯模糊來表達(dá)。nxs安徽網(wǎng)庫 地方門戶新聞?wù)?/span>

 nxs安徽網(wǎng)庫 地方門戶新聞?wù)?/span>

解析：nxs安徽網(wǎng)庫 地方門戶新聞?wù)?/span>

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

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

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

通過以上分析在做默認(rèn)加載預(yù)覽過程中實現(xiàn)方式推薦有以下幾個方式，根據(jù)自己產(chǎn)品特色選用合適的表達(dá)方式nxs安徽網(wǎng)庫 地方門戶新聞?wù)?/span>