本文筆者針對預(yù)加載中的Content表達(dá)方式，通過案例，分析提煉了幾個常用的視覺表達(dá)方式。

什么是預(yù)加載圖？

——就是在當(dāng)用戶進(jìn)入APP的時候還沒完全加載出來時候，在用戶面前所呈現(xiàn)的內(nèi)容信息，這些場景是提升產(chǎn)品體驗的一個環(huán)節(jié)，今天就來聊聊這些場景下表達(dá)方式。

預(yù)計加載過程中表現(xiàn)形式有加載等待（轉(zhuǎn)圈動畫或其他GIF動畫），加載歷史緩存數(shù)據(jù)，提前加載一半，逐步加載，后臺提供默認(rèn)加載圖，當(dāng)然還有加載失敗場景。

今天我們這里只討論預(yù)加載中的Content表達(dá)方式，我分析提煉了幾個常用的視覺表達(dá)方式：

1. 顯示品牌元素
2. 色塊
3. 布局
4. 默認(rèn)灰色圖
5. 空白展示
6. 使用高斯模糊

一、顯示品牌元素

它是什么？

在加載過程中，會預(yù)先在用戶面前呈現(xiàn)出來一些圖像元素，通過LOGO或者相關(guān)圖標(biāo)來表達(dá)，給用戶一種前期的心理預(yù)期要呈現(xiàn)的大致內(nèi)容。

解析：

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

二、色塊預(yù)覽

什么是色快預(yù)覽？

——就是在加載過程中，會預(yù)先在用戶面前呈現(xiàn)出來一些色塊元素，這種做法方法是：直接讀取圖片的顏色， 取什么顏色?大致是圖片中的主色調(diào)，面積大的者讀取圖片平均色。

當(dāng)然，后臺需要有一個強大色庫來支撐且需要提供一種或者2種默認(rèn)顏色，因為避免取色失敗。目前這樣做的產(chǎn)品有蘋果音樂、Pinterest、 Twitter、 花瓣移動端等等，當(dāng)然蘋果音樂加載不出來是直接提供默認(rèn)的logo色塊。

解析：

• 優(yōu)點是：圖片適配非常方便，全端展現(xiàn)方式提供一套色庫即可，畫面不枯燥，韓國很多app以及Pinterest都是很好的案例。
• 默認(rèn)色板庫顏色要高級，飽和度低，如果處理不好，多個展示效果會很差。

三、布局加載

什么是布局加載？就是加載過程中，會預(yù)先在用戶面前呈現(xiàn)內(nèi)容布局大致樣式。

解析：使用布局加載實現(xiàn)是比較簡單的，全端適配簡單。

四、默認(rèn)灰色圖

它是什么？

——在加載過程中，會預(yù)先在用戶面前呈現(xiàn)出來一些灰色圖像元素。

解析：

特別說明下Twitter是采用的兩種表達(dá)方式，一種是提供默認(rèn)灰色圖，一種是圖片取色。一般灰色值采用#F2F2F2，優(yōu)點畫面干凈，適配簡單，這里說明下，可以開發(fā)寫，可以我們自己提供，但是推薦我們提供，免得增加累贅代碼。

五、空白顯示

它是什么？在加載過程中，不出現(xiàn)任何占位符，直接負(fù)型空間展示。

解析：

• 這兩者其實都有兩種表達(dá)方式一種是這種空內(nèi)容，一種是提供灰色默認(rèn)圖，只是所在場景不一樣。
• 缺點是：如果網(wǎng)速比較慢，半天加載不出來，用戶產(chǎn)生焦略心理，以為軟件BUG，不推薦使用。

六、使用高斯模糊

它是什么？

——在加載過程中，會預(yù)先在用戶面前呈現(xiàn)出來一些圖像元素通過高斯模糊來表達(dá)。

解析：

• 通過把預(yù)加載出來的圖片進(jìn)行高斯模糊處理，Instgram也是采用提供灰色圖和高斯模糊兩種方式，好玩有趣。
• 缺點是：高斯模糊會有一定的功耗，加載慢，不建議使用。

設(shè)計策略

通過以上分析在做默認(rèn)加載預(yù)覽過程中實現(xiàn)方式推薦有以下幾個方式，根據(jù)自己產(chǎn)品特色選用合適的表達(dá)方式

1. 顯示品牌元素

優(yōu)點是能提前預(yù)期所呈現(xiàn)的內(nèi)容，品牌感知能力強，用戶記憶強，一看就知道是什么內(nèi)容。

2. 色塊預(yù)覽

時尚年輕，適配簡單，不枯燥。

3. 布局加載

使用布局加載實現(xiàn)是比較簡單的，全端適配簡單。

4. 默認(rèn)灰色

一般灰色值采用#F2F2F2， 優(yōu)點畫面干凈，適配簡單。

5. 空白顯示

最不推薦一種方式，會像頁面有bug

6. 高斯模糊

提供默灰色底圖和取色混搭，高斯模糊和灰色地圖混搭，有特色，新鮮感。

今天一個簡單的分享，希望幫助設(shè)計中，做任何設(shè)計時候都有思考，能掌握這個設(shè)計的規(guī)律，這樣我們在做設(shè)計決策時候更加有理有據(jù)！下周見。

#專欄作家#

Sky，微信公眾號：我們的設(shè)計日記（ID：helloskys），人人都是產(chǎn)品經(jīng)理專欄作家。支付寶體驗設(shè)計專家，阿里巴巴天貓設(shè)計專家；10年知名互聯(lián)網(wǎng)公司設(shè)計經(jīng)驗，對于產(chǎn)品從0到1、品牌定位、金融產(chǎn)品、設(shè)計規(guī)范、運營規(guī)范、大促等有豐富實戰(zhàn)經(jīng)驗。

本文原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。

題圖來自Unsplash, 基于CC0協(xié)議。