您當(dāng)前的位置 :首頁(yè) > 科技 > 電商
投稿

淺析APP中預(yù)加載圖設(shè)計(jì)

2018-06-25 11:22:28 來(lái)源: 作者: 責(zé)任編輯: 點(diǎn)擊圖片瀏覽下一頁(yè)

 預(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á)方式:UeO安徽網(wǎng)庫(kù) 地方門(mén)戶(hù)新聞?wù)?/span>

預(yù)加載LOGO品牌元素UeO安徽網(wǎng)庫(kù) 地方門(mén)戶(hù)新聞?wù)?/span>

色塊UeO安徽網(wǎng)庫(kù) 地方門(mén)戶(hù)新聞?wù)?/span>

布局UeO安徽網(wǎng)庫(kù) 地方門(mén)戶(hù)新聞?wù)?/span>

提供默認(rèn)灰色圖UeO安徽網(wǎng)庫(kù) 地方門(mén)戶(hù)新聞?wù)?/span>

無(wú)內(nèi)容加載UeO安徽網(wǎng)庫(kù) 地方門(mén)戶(hù)新聞?wù)?/span>

使用高斯模糊UeO安徽網(wǎng)庫(kù) 地方門(mén)戶(hù)新聞?wù)?/span>

預(yù)加載LOGO品牌元素UeO安徽網(wǎng)庫(kù) 地方門(mén)戶(hù)新聞?wù)?/span>

他是什么?在加載過(guò)程中,會(huì)預(yù)先在用戶(hù)面前呈現(xiàn)出來(lái)一些圖像元素,通過(guò)LOGO或者相關(guān)圖標(biāo)來(lái)表達(dá),給用戶(hù)一種前期的心理預(yù)期要呈現(xiàn)的大致內(nèi)容UeO安徽網(wǎng)庫(kù) 地方門(mén)戶(hù)新聞?wù)?/span>

淺析APP中預(yù)加載圖設(shè)計(jì)UeO安徽網(wǎng)庫(kù) 地方門(mén)戶(hù)新聞?wù)?/span>

解析:UeO安徽網(wǎng)庫(kù) 地方門(mén)戶(hù)新聞?wù)?/span>

優(yōu)點(diǎn)是能提前預(yù)期所呈現(xiàn)的內(nèi)容,品牌感知能力強(qiáng),用戶(hù)記憶強(qiáng),一看就知道是什么內(nèi)容UeO安徽網(wǎng)庫(kù) 地方門(mén)戶(hù)新聞?wù)?/span>

缺點(diǎn)是適配麻煩,不同樣式圖片都需要切圖,增加APP包大小,安卓還需要單獨(dú)切點(diǎn)九圖片來(lái)適配等等,有些人肯定會(huì)問(wèn),安卓為何就不能切整張圖啦?哈哈你可以試一試,如果你想你們包大小超大的話(huà)。UeO安徽網(wǎng)庫(kù) 地方門(mén)戶(hù)新聞?wù)?/span>

色塊預(yù)覽UeO安徽網(wǎng)庫(kù) 地方門(mén)戶(hù)新聞?wù)?/span>

他是什么?在加載過(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è)、天貓App、Pinterest、Twitter、花瓣移動(dòng)端等等,當(dāng)然蘋(píng)果音樂(lè)加載不出來(lái)是直接提供默認(rèn)的logo色塊。淺析APP中預(yù)加載圖設(shè)計(jì)UeO安徽網(wǎng)庫(kù) 地方門(mén)戶(hù)新聞?wù)?/span>

 UeO安徽網(wǎng)庫(kù) 地方門(mén)戶(hù)新聞?wù)?/span>

UeO安徽網(wǎng)庫(kù) 地方門(mén)戶(hù)新聞?wù)?/span>

優(yōu)點(diǎn)是圖片適配非常方便,全端展現(xiàn)方式提供一套色庫(kù)即可,畫(huà)面不枯燥,最后補(bǔ)充一點(diǎn),截圖真的好難截啊,說(shuō)明這些應(yīng)用優(yōu)化的真的很牛,Pinterest是個(gè)奇葩比較好截。UeO安徽網(wǎng)庫(kù) 地方門(mén)戶(hù)新聞?wù)?/span>

需要色庫(kù)配得好,顏色需要設(shè)計(jì)師親自調(diào),當(dāng)然我目前還沒(méi)想到有更好的方法,如果有請(qǐng)各位元老大神告訴我下,感謝。UeO安徽網(wǎng)庫(kù) 地方門(mén)戶(hù)新聞?wù)?/span>

布局加載UeO安徽網(wǎng)庫(kù) 地方門(mén)戶(hù)新聞?wù)?/span>

它是什么?在加載過(guò)程中,會(huì)預(yù)先在用戶(hù)面前呈現(xiàn)內(nèi)容布局大致樣式:淺析APP中預(yù)加載圖設(shè)計(jì)UeO安徽網(wǎng)庫(kù) 地方門(mén)戶(hù)新聞?wù)?/span>

 UeO安徽網(wǎng)庫(kù) 地方門(mén)戶(hù)新聞?wù)?/span>

解析:使用布局加載實(shí)現(xiàn)是比較簡(jiǎn)單的,全端適配簡(jiǎn)單。UeO安徽網(wǎng)庫(kù) 地方門(mén)戶(hù)新聞?wù)?/span>

提供默認(rèn)灰色圖UeO安徽網(wǎng)庫(kù) 地方門(mén)戶(hù)新聞?wù)?/span>

它是什么?在加載過(guò)程中,會(huì)預(yù)先在用戶(hù)面前呈現(xiàn)出來(lái)一些灰色圖像元素淺析APP中預(yù)加載圖設(shè)計(jì)UeO安徽網(wǎng)庫(kù) 地方門(mén)戶(hù)新聞?wù)?/span>

解析:特別說(shuō)明下Twitter是采用的兩種表達(dá)方式,一種是提供默認(rèn)灰色圖,一種是圖片取色,一般灰色值采用#F2F2F2,優(yōu)點(diǎn)畫(huà)面干凈,適配簡(jiǎn)單,這里說(shuō)明下,可以開(kāi)發(fā)寫(xiě),可以我們自己提供,但是推薦我們提供,免得增加累贅代碼。UeO安徽網(wǎng)庫(kù) 地方門(mén)戶(hù)新聞?wù)?/span>

無(wú)內(nèi)容顯示UeO安徽網(wǎng)庫(kù) 地方門(mén)戶(hù)新聞?wù)?/span>

它是什么?在加載過(guò)程中,不出現(xiàn)任何占位符,直接負(fù)型空間展示。淺析APP中預(yù)加載圖設(shè)計(jì)UeO安徽網(wǎng)庫(kù) 地方門(mén)戶(hù)新聞?wù)?/span>

 UeO安徽網(wǎng)庫(kù) 地方門(mén)戶(hù)新聞?wù)?/span>

解析:UeO安徽網(wǎng)庫(kù) 地方門(mén)戶(hù)新聞?wù)?/span>

 UeO安徽網(wǎng)庫(kù) 地方門(mén)戶(hù)新聞?wù)?/span>

這兩者其實(shí)都有兩種表達(dá)方式一種是這種空內(nèi)容,一種是提供灰色默認(rèn)圖,只是所在場(chǎng)景不一樣,這種加載效率最高UeO安徽網(wǎng)庫(kù) 地方門(mén)戶(hù)新聞?wù)?/span>

缺點(diǎn)是如果網(wǎng)速比較慢,半天加載不出來(lái),用戶(hù)產(chǎn)生焦略心理,以為軟件BUG,不推薦使用UeO安徽網(wǎng)庫(kù) 地方門(mén)戶(hù)新聞?wù)?/span>

使用高斯模糊UeO安徽網(wǎng)庫(kù) 地方門(mén)戶(hù)新聞?wù)?/span>

它是什么?在加載過(guò)程中,會(huì)預(yù)先在用戶(hù)面前呈現(xiàn)出來(lái)一些圖像元素通過(guò)高斯模糊來(lái)表達(dá)。淺析APP中預(yù)加載圖設(shè)計(jì)UeO安徽網(wǎng)庫(kù) 地方門(mén)戶(hù)新聞?wù)?/span>

 UeO安徽網(wǎng)庫(kù) 地方門(mén)戶(hù)新聞?wù)?/span>

解析:UeO安徽網(wǎng)庫(kù) 地方門(mén)戶(hù)新聞?wù)?/span>

通過(guò)把預(yù)加載出來(lái)的圖片進(jìn)行高斯模糊處理,Instgram也是采用提供灰色圖和高斯模糊兩種方式,好玩有趣UeO安徽網(wǎng)庫(kù) 地方門(mén)戶(hù)新聞?wù)?/span>

缺點(diǎn)是高斯模糊會(huì)有一定的功耗,加載慢,不建議使用UeO安徽網(wǎng)庫(kù) 地方門(mén)戶(hù)新聞?wù)?/span>

產(chǎn)品設(shè)計(jì)策略UeO安徽網(wǎng)庫(kù) 地方門(mén)戶(hù)新聞?wù)?/span>

通過(guò)以上分析在做默認(rèn)加載預(yù)覽過(guò)程中實(shí)現(xiàn)方式推薦有以下幾個(gè)方式,根據(jù)自己產(chǎn)品特色選用合適的表達(dá)方式UeO安徽網(wǎng)庫(kù) 地方門(mén)戶(hù)新聞?wù)?/span>

文章來(lái)源: 責(zé)任編輯:
版權(quán)聲明:
·凡注明來(lái)源為“安徽網(wǎng)庫(kù)”的所有文字、圖片、音視頻、美術(shù)設(shè)計(jì)和程序等作品,版權(quán)均屬安徽網(wǎng)庫(kù)所有。未經(jīng)本網(wǎng)書(shū)面授權(quán),不得進(jìn)行一切形式的下載、轉(zhuǎn)載或建立鏡像。
·凡注明為其它來(lái)源的信息,均轉(zhuǎn)載自其它媒體,轉(zhuǎn)載目的在于傳遞更多信息,并不代表本網(wǎng)贊同其觀點(diǎn)和對(duì)其真實(shí)性負(fù)責(zé)。
社會(huì) / 民生
不良信息舉報(bào)信箱 新聞熱線(xiàn) 技術(shù)服務(wù)
關(guān)于本站 | 廣告服務(wù) | 免責(zé)申明 | 招聘信息 | 聯(lián)系我們
安徽網(wǎng)庫(kù) 版權(quán)所有 Copyright(C)2005-2019 皖I(lǐng)CP備19011896號(hào)

皖公網(wǎng)安備 34010202601110號(hào)