小白自學(xué)APP設(shè)計:APP空狀態(tài)界面設(shè)計教程【一】

昨天25學(xué)堂分享了一篇APP設(shè)計術(shù)語解讀:什么是APP空狀態(tài)界面設(shè)計,在文章中,主要跟大家介紹了什么是app的空狀態(tài),空狀態(tài)出現(xiàn)在app哪些情況和場景當(dāng)中。

當(dāng)我們熟悉和理解了這些APP空狀態(tài)相關(guān)知識和術(shù)語之后,才能著手設(shè)計這些看似輕微的app空狀態(tài)界面設(shè)計。

這節(jié)課主要講解如何來設(shè)計APP空狀態(tài)界面。算是一篇小白自學(xué)APP設(shè)計的教程。

APP空狀態(tài)設(shè)計足夠優(yōu)秀的話可以提高用戶體驗,使得用戶留存率增加。這也是25學(xué)堂為什么要跟大家談?wù)凙PP空狀態(tài)界面設(shè)計的原因。

 

第一步:善于發(fā)現(xiàn)和積累APP空狀態(tài)界面

學(xué)會和發(fā)現(xiàn)現(xiàn)有APP設(shè)計當(dāng)中的一些常見的APP空狀態(tài)界面設(shè)計靈感。下面就是來自手機(jī)瀏覽器當(dāng)中的一些空狀態(tài)常見界面效果圖。 ?這些有愛的設(shè)計可以激發(fā)我們的設(shè)計靈感。

app空狀態(tài)設(shè)計

看到上面這些,你的腦海當(dāng)中有沒有回憶出一些有意思的空狀態(tài)的場景呢?

如果沒有,可以跟隨我們來看下這幾個經(jīng)典的APP空狀態(tài)界面設(shè)計。

 

第一種:有權(quán)限控制的。比如需要登錄或者注冊才能看到的一些app界面。

需要登錄才能看到的界面APP設(shè)計

25學(xué)堂點評:這一種APP空狀態(tài)設(shè)計:先提示,然后告訴你點擊登錄按鈕登錄。非常卡通可愛的界面設(shè)計。對于這樣有權(quán)限控制的app界面設(shè)計,需要非常的小心和用心。這個細(xì)節(jié)處理不好,損失的用戶轉(zhuǎn)化率是很大。如果你只是彈出警告層。這是粗魯?shù)谋憩F(xiàn)方式。

多看APP的空狀態(tài)設(shè)計學(xué)習(xí)

25學(xué)堂點評:這一種是比較直接的告訴你暫時沒內(nèi)容,需要進(jìn)行下拉操作才能添加。 ?這也是非常棒的引導(dǎo)性app空狀態(tài)設(shè)計。

QQ空間APP添加特別關(guān)心好友界面設(shè)計

25學(xué)堂點評:這一種是更高級的一種空狀態(tài)APP設(shè)計。首先告訴你沒有特別關(guān)心的好友,在界面當(dāng)中顯示你有特別關(guān)心好友的界面和假想的狀態(tài)。 第三步就是引導(dǎo)你去添加。

非常的完美的APP空狀態(tài)界面設(shè)計案例。

 

第二種場景:斷網(wǎng)的時候的APP空狀態(tài)界面設(shè)計。

網(wǎng)絡(luò)錯誤的app界面設(shè)計

25學(xué)堂點評:這是一種APP的設(shè)計風(fēng)格。學(xué)會善于app的動畫和企業(yè)logo元素來過渡這樣的場景界面。也是非常形象的表達(dá)。

 

app斷網(wǎng)界面設(shè)計

app斷網(wǎng)界面設(shè)計2

以上2個案例都是非常形象的表達(dá)了無網(wǎng)絡(luò)的時候,提示用戶采用刷新或者重新聯(lián)網(wǎng)的操作。而且把網(wǎng)絡(luò)的標(biāo)志設(shè)計的非常逼真。場景也很合理。都是我們app設(shè)計師需要考慮的一個因素。APP使用場景的設(shè)計。

以上2種場景都是?在APP產(chǎn)品的初體驗中,空狀態(tài)的首要目標(biāo)就是教育引導(dǎo)用戶,幫助用戶快速了解產(chǎn)品的首要功能跟操作方式,避免用戶在操作過程中產(chǎn)生挫敗感等負(fù)面情緒。

未完待續(xù)..... ? ?謝謝大家對25學(xué)堂的支持和關(guān)注!

 

每天更新,
全站高品質(zhì)素材免費(fèi)下載!