APP反饋提示設(shè)計(jì)之彈出框設(shè)計(jì),超贊

APP反饋提示設(shè)計(jì)也是我們?nèi)粘PP設(shè)計(jì)當(dāng)中的一項(xiàng)必不可少的工作,無(wú)論是APP設(shè)計(jì)、還是客戶端的開(kāi)發(fā)人員、還包括web前端(或H5)工程師們,都必須了解APP反饋機(jī)制反饋提示信息的設(shè)計(jì)。

今天25學(xué)堂將跟大家一起重點(diǎn)來(lái)聊聊APP反饋提示設(shè)計(jì)之彈出框設(shè)計(jì)。也就是彈窗設(shè)計(jì)。

如下圖這樣的界面設(shè)計(jì):

APP彈窗設(shè)計(jì)

APP反饋提示設(shè)計(jì)之彈出框設(shè)計(jì)2APP反饋提示設(shè)計(jì)之彈出框設(shè)計(jì)3

看完這三個(gè)案例,是不是發(fā)現(xiàn)彈窗界面設(shè)計(jì)也基本通用的,設(shè)計(jì)元素就那三塊。

1】、遮罩層(如黑色透明背景)

2】、彈出窗體(設(shè)計(jì)師重點(diǎn)發(fā)揮設(shè)計(jì)創(chuàng)意的舞臺(tái)和視覺(jué)元素)

3】、關(guān)閉按鈕的設(shè)計(jì)

 

說(shuō)道這里,學(xué)堂君再來(lái)跟大家回顧一下反饋的設(shè)計(jì)原則:

1、為用戶在各個(gè)階段的反饋提供必要、積極、即時(shí)的反饋

2、避免過(guò)渡反饋,以免給用戶帶來(lái)不必要的打擾

3、能夠及時(shí)看到效果的、簡(jiǎn)單的操作,可以省略反饋提示

4、所提供的反饋,要能讓用戶用最便捷的方式完成選擇

5、未不同類型的反饋?zhàn)霾町惢O(shè)計(jì)

6、不要打斷用戶的意識(shí)流,避免遮擋用戶可能回去查看或操作的對(duì)象。

 

復(fù)習(xí)了APP反饋提示設(shè)計(jì)原則,接下來(lái)我們?cè)O(shè)計(jì)彈出框設(shè)計(jì)就會(huì)知道需要注意哪些方面啦。

 

下面25學(xué)堂就跟大家分享3種不一樣的彈窗設(shè)計(jì)方案:也是目前比較流行的彈窗設(shè)計(jì)。

1、常見(jiàn)的彈窗設(shè)計(jì)就是提示用戶的信息,只需用戶做出Yes 或 NO 的交互操作。

彈出框設(shè)計(jì)-創(chuàng)意布局

 

2、彈窗設(shè)計(jì)是為了告知用戶目前活動(dòng)的結(jié)果和排名。

彈出框設(shè)計(jì)-創(chuàng)意布局2

 

3、某種活動(dòng)主題的或產(chǎn)品的提示促銷信息的彈窗設(shè)計(jì)。如下圖所示

彈出框設(shè)計(jì)-創(chuàng)意布局3

以上就是25學(xué)堂幫大家整理的三種場(chǎng)景的彈出框設(shè)計(jì)方案,值得我們?nèi)ピO(shè)計(jì)學(xué)習(xí)。

 

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