淺析APP中預加載圖設計

什么是預加載圖?就是在當用戶進入APP的時候還沒完全加載出來時候,在用戶面前所呈現(xiàn)的內(nèi)容信息,這些場景是提升產(chǎn)品體驗的一個環(huán)節(jié),今天就來聊聊這些場景下其他產(chǎn)品是如表達的,提前掌握這種場景表達方法,便于我們在今后項目中能夠快速找準適合自己產(chǎn)品內(nèi)容呈現(xiàn)方式。
預加載有哪些表達方式
預計加載過程中表現(xiàn)形式有加載等待(轉(zhuǎn)圈動畫或其他GIF動畫),加載歷史緩存數(shù)據(jù),提前加載一半,逐步加載,后臺提供默認加載圖,當然還有加載失敗場景。今天我們這里只討論預加載中的Content表達方式,我分析提煉了幾個常用的視覺表達方式:
- 預加載LOGO品牌元素
- 色塊
- 布局
- 提供默認灰色圖
- 無內(nèi)容加載
- 使用高斯模糊
預加載LOGO品牌元素
他是什么?在加載過程中,會預先在用戶面前呈現(xiàn)出來一些圖像元素,通過LOGO或者相關圖標來表達,給用戶一種前期的心理預期要呈現(xiàn)的大致內(nèi)容
解析:
- 優(yōu)點是能提前預期所呈現(xiàn)的內(nèi)容,品牌感知能力強,用戶記憶強,一看就知道是什么內(nèi)容
- 缺點是適配麻煩,不同樣式圖片都需要切圖,增加APP包大小,安卓還需要單獨切點九圖片來適配等等,有些人肯定會問,安卓為何就不能切整張圖啦?哈哈你可以試一試,如果你想你們包大小超大的話。
色塊預覽
他是什么?在加載過程中,會預先在用戶面前呈現(xiàn)出來一些色塊元素,這種做法方法是: 直接讀取圖片的顏色,取什么顏色?大致是圖片中的主色調(diào),面積大的者讀取圖片平均色,當然后臺需要有一個強大色庫來支撐且需要提供一種或者2種默認顏色,因為避免取色失敗,目前這樣做的產(chǎn)品有蘋果音樂、天貓App、Pinterest、Twitter、花瓣移動端等等,當然蘋果音樂加載不出來是直接提供默認的logo色塊。
解析:
- 優(yōu)點是圖片適配非常方便,全端展現(xiàn)方式提供一套色庫即可,畫面不枯燥,最后補充一點,截圖真的好難截啊,說明這些應用優(yōu)化的真的很牛,Pinterest是個奇葩比較好截。
- 需要色庫配得好,顏色需要設計師親自調(diào),當然我目前還沒想到有更好的方法,如果有請各位元老大神告訴我下,感謝。
布局加載
它是什么?在加載過程中,會預先在用戶面前呈現(xiàn)內(nèi)容布局大致樣式:
解析:使用布局加載實現(xiàn)是比較簡單的,全端適配簡單。
提供默認灰色圖
它是什么?在加載過程中,會預先在用戶面前呈現(xiàn)出來一些灰色圖像元素
解析:特別說明下Twitter是采用的兩種表達方式,一種是提供默認灰色圖,一種是圖片取色,一般灰色值采用#F2F2F2,優(yōu)點畫面干凈,適配簡單,這里說明下,可以開發(fā)寫,可以我們自己提供,但是推薦我們提供,免得增加累贅代碼。
無內(nèi)容顯示
它是什么?在加載過程中,不出現(xiàn)任何占位符,直接負型空間展示。
解析:
- 這兩者其實都有兩種表達方式一種是這種空內(nèi)容,一種是提供灰色默認圖,只是所在場景不一樣,這種加載效率最高
- 缺點是如果網(wǎng)速比較慢,半天加載不出來,用戶產(chǎn)生焦略心理,以為軟件BUG,不推薦使用
使用高斯模糊
它是什么?在加載過程中,會預先在用戶面前呈現(xiàn)出來一些圖像元素通過高斯模糊來表達。
解析:
- 通過把預加載出來的圖片進行高斯模糊處理,Instgram也是采用提供灰色圖和高斯模糊兩種方式,好玩有趣
- 缺點是高斯模糊會有一定的功耗,加載慢,不建議使用
產(chǎn)品設計策略
通過以上分析在做默認加載預覽過程中實現(xiàn)方式推薦有以下幾個方式,根據(jù)自己產(chǎn)品特色選用合適的表達方式:
作者:Tony,微信公眾號:洞見設計,人人都是產(chǎn)品經(jīng)理專欄作家。百度設計師。很樂意幫助年輕設計師成長,簡歷指導,每周分享最有價值的設計經(jīng)驗,擅長產(chǎn)品體驗設計,關注【洞見設計】后臺回復“彩蛋”領取設計資料。
本文由 @TONY 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可,禁止轉(zhuǎn)載。
題圖來自 Pexels,基于 CC0 協(xié)議
嗨總監(jiān),想問下關于布局加載開發(fā)那邊怎么實現(xiàn)呢?是我們做一張頁面布局的圖還是?
同問
有兩種,一種是真的。就是類似于淘寶、知乎。他們就是根據(jù)具體內(nèi)容生成框架圖。另一種是假的,整體框架變化不大的,就做一張靜態(tài)圖,具體哪個app我忘記了。
良心貼
連高斯模糊都出來了
良心帖
學習了,就是還有些不明白,能問一下:“安卓還需要單獨切點九圖片來適配”是啥意思嘛?
安卓切碘酒圖是為了減少包大小呢,碘酒圖可以自由拉伸的,所以只需要切中間帶圖標部分和邊緣有點點底板就好啦,如果還是不清楚可以加我微信
點贊
謝謝大美女pettyjoy
很有用
哈哈,希望是有用的
有用!謝謝總結 ??
干貨滿滿,點贊
小丸子真棒