淺談APP設(shè)計(jì)中的默認(rèn)加載頁面設(shè)計(jì)-杭州UI培訓(xùn)

時(shí)間：2023-08-29 09:12:01 | 來源：網(wǎng)站運(yùn)營

時(shí)間：2023-08-29 09:12:01 來源：網(wǎng)站運(yùn)營

淺談APP設(shè)計(jì)中的默認(rèn)加載頁面設(shè)計(jì)-杭州UI培訓(xùn)：#杭州UI設(shè)計(jì)培訓(xùn)#UI培訓(xùn)#UI設(shè)計(jì)#優(yōu)途UI教育

什么是預(yù)加載圖呢?

預(yù)加載圖指的是當(dāng)用戶進(jìn)入APP的時(shí)候還沒完全加載出來的時(shí)候，所呈現(xiàn)給用戶的內(nèi)容信息。

它有哪些表現(xiàn)形式呢?

（1）等待方式(表現(xiàn)形式為轉(zhuǎn)圈動(dòng)畫或其他GIF動(dòng)畫)

（2）加載數(shù)據(jù)方式（表現(xiàn)形式有歷史緩存數(shù)據(jù)，提前加載一半，逐步加載，后臺(tái)提供默認(rèn)加載圖，當(dāng)然還有加載失敗場景。）

默認(rèn)加載頁面的表達(dá)方式

1、品牌元素

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

優(yōu)點(diǎn)：展示品牌，品牌感知能力強(qiáng)，用戶記憶強(qiáng)，一看就知道是什么內(nèi)容。

缺點(diǎn)：需要進(jìn)行不同樣式圖片的適配，增加APP包大小，安卓還需要單獨(dú)切點(diǎn)九圖片來適配等等。

2、色塊展示

加載時(shí)，表現(xiàn)出來一些色塊元素，這種做法方法是直接讀取圖片的顏色，取什么顏色？大致是圖片中的主色調(diào)，面積大的圖片讀取圖片平均色，當(dāng)然后臺(tái)需要有一個(gè)強(qiáng)大色庫來支撐且需要提供一種或者兩種默認(rèn)顏色，因?yàn)楸苊馊∩。壳斑@樣做的產(chǎn)品有蘋果音樂、Pinterest、 Twitter、 花瓣移動(dòng)端等，當(dāng)然蘋果音樂加載不出來是直接提供默認(rèn)的LOGO色塊。

優(yōu)點(diǎn)：圖片適配方便，全端展現(xiàn)方式提供一套色庫即可，畫面不枯燥。

缺點(diǎn)：需要色庫豐富，設(shè)計(jì)師要自調(diào)顏色，人力成本比較大。

3、內(nèi)容框架

在加載過程中，會(huì)預(yù)先在用戶面前呈現(xiàn)內(nèi)容框架布局大致樣式。

優(yōu)點(diǎn)：使用布局加載實(shí)現(xiàn)是比較簡單的，全端適配簡單。

4、灰色顏色

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

右圖優(yōu)點(diǎn)：比如Twitter是采用的兩種表達(dá)方式，一種是提供默認(rèn)灰色圖，一種是圖片取色，一般灰色值采用#F2F2F2，優(yōu)點(diǎn)畫面干凈，適配簡單。

5、留白運(yùn)用

在加載過程中，不出現(xiàn)任何占位符，直接空白展示。

優(yōu)點(diǎn)：這兩者其實(shí)都有兩種表達(dá)方式一種是這種空內(nèi)容，一種是提供灰色默認(rèn)圖，只是所在場景不一樣。

缺點(diǎn)：如果網(wǎng)速比較慢，加載不出來，用戶產(chǎn)生焦慮心理，以為軟件BUG，不推薦使用。

6、高斯模糊

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

優(yōu)點(diǎn)：通過把預(yù)加載出來的圖片進(jìn)行高斯模糊處理，Instgram也是采用提供灰色圖和高斯模糊兩種方式，好玩有趣。

缺點(diǎn)：高斯模糊會(huì)有一定的功耗，加載慢，不建議使用。

總結(jié):

經(jīng)過上面的講解，做默認(rèn)加載預(yù)覽過程中實(shí)現(xiàn)方式推薦有以下幾個(gè)方式，根據(jù)自己產(chǎn)品定位選用合適的表達(dá)方式。

1.LOGO品牌元素

2.彩色色塊

3.框架布局加載

4.默認(rèn)灰色灰色圖

5.留白運(yùn)用

6.高斯模糊