共有幾種類(lèi)型
預(yù)計(jì)加載過(guò)程中表現(xiàn)形式有加載等待(轉(zhuǎn)圈動(dòng)畫(huà)或其他GIF動(dòng)畫(huà))，加載歷史緩存數(shù)據(jù)，提前加載一半，逐步加載，后臺(tái)提供默認(rèn)加載圖，當(dāng)然還有加載失敗場(chǎng)景。今天我們這里只討論預(yù)加載中的Content表達(dá)方式，我分析提煉了幾個(gè)常用的視覺(jué)表達(dá)方式：
1. 顯示品牌元素
2.色塊
3. 布局
4.默認(rèn)灰色圖
5.空白展示
6.使用高斯模糊
1.顯示品牌元素
它是什么？在加載過(guò)程中，會(huì)預(yù)先在用戶(hù)面前呈現(xiàn)出來(lái)一些圖像元素，通過(guò)LOGO或者相關(guān)圖標(biāo)來(lái)表達(dá)，給用戶(hù)一種前期的心理預(yù)期要呈現(xiàn)的大致內(nèi)容。
解析：
1. 優(yōu)點(diǎn)是能提前預(yù)期所呈現(xiàn)的內(nèi)容，品牌感知能力強(qiáng)，用戶(hù)記憶強(qiáng)，一看就知道是什么內(nèi)容。
2.缺點(diǎn)是適配麻煩，不同樣式圖片都需要切圖，增加APP包大小，安卓還需要單獨(dú)切點(diǎn)九圖片來(lái)適配等等，有些人肯定會(huì)問(wèn)，安卓為何就不能切整張圖啦?哈哈你可以試一試，如果你想你們包大小超大的話(huà)。
2.色塊預(yù)覽
什么是色快預(yù)覽？就是在加載過(guò)程中，會(huì)預(yù)先在用戶(hù)面前呈現(xiàn)出來(lái)一些色塊元素，這種做法方法是:直接讀取圖片的顏色， 取什么顏色?大致是圖片中的主色調(diào)，面積大的者讀取圖片平均色，當(dāng)然后臺(tái)需要有一個(gè)強(qiáng)大色庫(kù)來(lái)支撐且需要提供一種或者2種默認(rèn)顏色，因?yàn)楸苊馊∩?，目前這樣做的產(chǎn)品有蘋(píng)果音樂(lè)、Pinterest、 Twitter、 花瓣移動(dòng)端等等,當(dāng)然蘋(píng)果音樂(lè)加載不出來(lái)是直接提供默認(rèn)的logo色塊。
解析：
1. 優(yōu)點(diǎn)是圖片適配非常方便，全端展現(xiàn)方式提供一套色庫(kù)即可，畫(huà)面不枯燥，韓國(guó)很多app以及Pinterest都是很好的案例
2.默認(rèn)色板庫(kù)顏色要高級(jí)，飽和度低，如果處理不好，多個(gè)展示效果會(huì)很差
3.布局加載
什么是布局加載？就是加載過(guò)程中，會(huì)預(yù)先在用戶(hù)面前呈現(xiàn)內(nèi)容布局大致樣式。
解析：
使用布局加載實(shí)現(xiàn)是比較簡(jiǎn)單的，全端適配簡(jiǎn)單。
4.默認(rèn)灰色圖
它是什么？在加載過(guò)程中，會(huì)預(yù)先在用戶(hù)面前呈現(xiàn)出來(lái)一些灰色圖像元素。
解析：
特別說(shuō)明下Twitter是采用的兩種表達(dá)方式，一種是提供默認(rèn)灰色圖，一種是圖片取色，一般灰色值采用#F2F2F2，優(yōu)點(diǎn)畫(huà)面干凈，適配簡(jiǎn)單，這里說(shuō)明下，可以開(kāi)發(fā)寫(xiě)，可以我們自己提供，但是推薦我們提供，免得增加累贅代碼。
5.空白顯示
它是什么？在加載過(guò)程中，不出現(xiàn)任何占位符，直接負(fù)型空間展示。
解析：
1.這兩者其實(shí)都有兩種表達(dá)方式一種是這種空內(nèi)容，一種是提供灰色默認(rèn)圖，只是所在場(chǎng)景不一樣。
2.缺點(diǎn)是如果網(wǎng)速比較慢，半天加載不出來(lái)，用戶(hù)產(chǎn)生焦略心理，以為軟件BUG，不推薦使用。
6.使用高斯模糊
它是什么？在加載過(guò)程中，會(huì)預(yù)先在用戶(hù)面前呈現(xiàn)出來(lái)一些圖像元素通過(guò)高斯模糊來(lái)表達(dá)。
解析：
1. 通過(guò)把預(yù)加載出來(lái)的圖片進(jìn)行高斯模糊處理，Instgram也是采用提供灰色圖和高斯模糊兩種方式，好玩有趣。
2.缺點(diǎn)是高斯模糊會(huì)有一定的功耗，加載慢，不建議使用。
設(shè)計(jì)策略
通過(guò)以上分析在做默認(rèn)加載預(yù)覽過(guò)程中實(shí)現(xiàn)方式推薦有以下幾個(gè)方式，根據(jù)自己產(chǎn)品特色選用合適的表達(dá)方式
1.顯示品牌元素
優(yōu)點(diǎn)是能提前預(yù)期所呈現(xiàn)的內(nèi)容，品牌感知能力強(qiáng)，用戶(hù)記憶強(qiáng)，一看就知道是什么內(nèi)容
2.色塊預(yù)覽
時(shí)尚年輕，適配簡(jiǎn)單，不枯燥
3.布局加載
使用布局加載實(shí)現(xiàn)是比較簡(jiǎn)單的，全端適配簡(jiǎn)單
4.默認(rèn)灰色
一般灰色值采用#F2F2F2， 優(yōu)點(diǎn)畫(huà)面干凈，適配簡(jiǎn)單
5.空白顯示
最不推薦一種方式，會(huì)像頁(yè)面有bug
6.高斯模糊
提供默灰色底圖和取色混搭，高斯模糊和灰色地圖混搭，有特色，新鮮感。
今天一個(gè)簡(jiǎn)單的分享，希望幫助設(shè)計(jì)中，做任何設(shè)計(jì)時(shí)候都有思考，能掌握這個(gè)設(shè)計(jì)的規(guī)律，這樣我們?cè)谧鲈O(shè)計(jì)決策時(shí)候更加有理有據(jù)！
原文地址： 我們的設(shè)計(jì)日記（公眾號(hào)）
作者：Tony
