APP圖片載入樣式彙總

摘要： App要與伺服器進行資料交換，伺服器接收到請求之後向App傳輸相應資料。在這個過程中，由於網路原因，需要花費一定時間，這個時候就要用到loading載入。Loading需要做兩件事：一是告訴使用者APP在處理資料，二是要避免使用者因等待而煩躁。在此對APP圖片的載入樣式做出...

App要與伺服器進行資料交換，伺服器接收到請求之後向App傳輸相應資料。在這個過程中，由於網路原因，需要花費一定時間，這個時候就要用到loading載入。Loading需要做兩件事：一是告訴使用者APP在處理資料，二是要避免使用者因等待而煩躁。在此對APP圖片的載入樣式做出總結。

1.無佔位符或預設圖

特點：在整個頁面載入過程中，現將文字加載出來，圖片在載入完成之前暫不出現，目前已漸漸捨棄；

優點：載入速度快，程式簡單。

缺點：或許會丟掉重要的資訊，無法建立信息獲取的閉環。另外容易因為圖片的突然出現，影響使用者的閱讀順序，使用者體驗感差。

2.有佔位符或預設圖

特點：先載入框架，再載入框架內的資料。一般文字先加載出來，由於圖片載入慢，會用佔位符或者預設圖片來填充。

優點：先載入文字，保證使用者閱讀的順暢性。

缺點：或許會丟掉重要的資訊，無法建立資訊獲取的閉環。

樣式：目前主流有如下幾種樣式（歡迎補充）

2.1  無圖樣式

2.1.1  灰色無圖樣式

在圖片載入完成之前，在圖片的位置先顯示一個灰色的佔位符。

2.1.2  彩色無圖樣式

在圖片載入完成之前，在圖片的位置先顯示一個彩色的佔位符，具體的顏色可以按照圖片的顏色讀取，也可以按照某種規律設定。

2.2  有圖樣式

2.2.1  灰色+logo樣式

在給一個預設佔位符圖片的基礎上，加上APP的logo，起到傳達品牌作用。

2.2.2  APP主色+logo樣式

在圖片佔位符的基礎上，加上APP的logo，宣傳品牌。不同的是，佔位符圖的背景會根據APP的風格或者圖片的顏色整體的排布，保證的APP風格的延續性，讓使用者在閱讀的時候感覺很順暢，降低使用者的焦躁感。

例如：毒物APP的圖片都是以黑色為主色調，那麼圖片佔位符就用黑色+毒物的logo；聚美APP的圖片都是以白色為主色調，那麼佔位符就用白色+聚美的logo。

2.2.3  灰色+自定義圖示樣式

在灰色佔位符的基礎上，加上icon，這個icon可以按照APP的內容確定。

例如：QQ音樂的自定義圖示是一個光碟icon，騰訊新聞的自定義圖示是一個連結icon。

目前主流的樣式，我總結的基本就是這些，歡迎指導和補充！