中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

作者對(duì)彈窗的基本樣式進(jìn)行了分析梳理，并總結(jié)了使用上需要注意的要點(diǎn)，與大家分享。

在設(shè)計(jì)Dialog彈窗時(shí)，我們大多時(shí)候直接拖控件，直接提交一個(gè)基礎(chǔ)的規(guī)范給前端，甚至只是給幾個(gè)彈窗樣式給他們，導(dǎo)致上線后出現(xiàn)不統(tǒng)一、使用混淆等情況。

盡管我們常說(shuō)要把重心放到重要的界面中，彈窗這些小問(wèn)題不用在意，但是如果我們通過(guò)學(xué)習(xí)整理，能提前規(guī)避這些問(wèn)題，何樂(lè)不為呢？

本篇文章就和大家分享了彈窗的基本樣式和使用注意要點(diǎn)，讓我們可以在實(shí)際設(shè)計(jì)時(shí)少走彎路。

目錄：

1. 什么是Dialog彈窗
2. 彈窗的基本樣式
3. 彈窗的使用場(chǎng)景

一、什么是Dialog彈窗

Dialog彈窗在iOS中也叫Alert，屬于模態(tài)彈窗的一種，使用時(shí)會(huì)打斷用戶的操作行為，用戶必須對(duì)其進(jìn)行操作才能解散彈窗，否則不能進(jìn)行其他操作。

二、Dialog彈窗的基本樣式

彈窗一般由信息區(qū)和操作區(qū)組成，根據(jù)展示內(nèi)容可分為：純文本、帶圖片、帶輸入、純圖片四種。

1. 純文本：多用于以傳遞信息為主的場(chǎng)景中，其優(yōu)勢(shì)是信息傳遞快、設(shè)計(jì)成本低。
2. 帶輸入：多用于信息提交類彈窗，其優(yōu)勢(shì)是可以快速錄入信息，不用跳轉(zhuǎn)新頁(yè)面。
3. 帶圖片：多用于以引導(dǎo)用戶操作的場(chǎng)景中，其優(yōu)勢(shì)是氛圍強(qiáng)，避免引起用戶反感。
4. 純圖片：純圖片在系統(tǒng)操作中較少出現(xiàn)，多用于平臺(tái)運(yùn)營(yíng)推廣中，其優(yōu)勢(shì)是造型新穎，活動(dòng)感強(qiáng)，能刺激用戶操作。

三、Dialog彈窗應(yīng)用場(chǎng)景

Dialog彈窗使用場(chǎng)景較多，在使用時(shí)也比較容易混淆，下面我整理了APP中10大常見(jiàn)的應(yīng)用場(chǎng)景，一起來(lái)看看它們適合采用哪種彈窗樣式吧。

1. 提示&通知

提示&通知可以看成路邊的一個(gè)告示牌，一些告示牌告訴我們前方有危險(xiǎn)要注意，一些告示只是單純提示前方有什么景點(diǎn)，因此在設(shè)計(jì)時(shí)采用的方式也不太一樣，如下圖。

當(dāng)告知前方有危險(xiǎn)，這時(shí)候就需要以信息傳遞為主，建議采用純文本的樣式，比如陌陌進(jìn)入聊天室彈窗；

當(dāng)只是單純提示，這時(shí)候就需要以營(yíng)造氛圍為主，建議采用帶圖片的樣式，比如蘇寧易購(gòu)活動(dòng)結(jié)束的提示。

注意：提示或通知的按鈕一般用“我知道了”來(lái)解散按鈕。

2. 規(guī)則說(shuō)明

規(guī)則說(shuō)明的應(yīng)用場(chǎng)景有兩種，一種是產(chǎn)品中的規(guī)則說(shuō)明，一種是抽獎(jiǎng)、積分兌換、打卡等活動(dòng)中，如下圖：

當(dāng)彈窗應(yīng)用在產(chǎn)品中的規(guī)則說(shuō)明時(shí)，這時(shí)候主要以傳遞信息為主，因此建議采用純文本樣式，比如閑魚(yú)擔(dān)保交易說(shuō)明。

當(dāng)彈窗應(yīng)用在抽獎(jiǎng)、積分兌換等活動(dòng)時(shí)，這時(shí)候需要以豐富活動(dòng)氣氛為主，建議采用帶圖片樣式，比如考拉公園的積分指數(shù)說(shuō)明。

3. 版本更新

當(dāng)APP有新版本上線時(shí)，一般會(huì)以彈窗的形式提醒用戶升級(jí)，設(shè)計(jì)時(shí)可考慮兩種情況，一種是常規(guī)更新，一種是主功能更新，如下圖：

當(dāng)應(yīng)用為常規(guī)更新時(shí)，可采用常規(guī)帶圖片的方式，比如愛(ài)奇藝票務(wù)。

當(dāng)應(yīng)用為主功能更新時(shí)，可采用走馬燈的形式，分步介紹功能，讓忙碌的用戶放緩步伐，耐心去了解功能，在確定是否更新，比如高德地圖。

4. 用戶協(xié)議

由于用戶協(xié)議往往是以傳遞內(nèi)容為主，因此設(shè)計(jì)時(shí)建議采用純文本的樣式進(jìn)行設(shè)計(jì)，如下圖：

注意:由于協(xié)議內(nèi)容較多，設(shè)計(jì)時(shí)大家要考慮彈窗的適配，確定好彈窗的寬高，如下圖：

寬度一般建議和系統(tǒng)彈窗保持一致，比如我的彈窗尺寸均是按照iOS的規(guī)范進(jìn)行設(shè)計(jì)的，寬度為540px(2倍圖)。高度就根據(jù)實(shí)際內(nèi)容的多少進(jìn)行設(shè)置，不過(guò)這里最好設(shè)置一個(gè)最大值，以保證iPhone5中能正常顯示，這里我設(shè)置為800px(該尺寸彈窗比例比較協(xié)調(diào))。

5. 授權(quán)彈窗

剛下載APP時(shí)系統(tǒng)都會(huì)提示開(kāi)啟通知、相機(jī)、定位等授權(quán)功能，為了最大程度的提高權(quán)限開(kāi)啟率，建議將所有需要授權(quán)的內(nèi)容都合并到一個(gè)彈窗中，供用戶選擇，如下圖：

如果應(yīng)用為工具類的應(yīng)用，那么授權(quán)彈窗可以用純文本+權(quán)限選擇的方式，如左圖。

如果應(yīng)用針對(duì)的娛樂(lè)類，那么授權(quán)彈窗建議用帶圖片+權(quán)限選擇的方式，如右圖：

注意：授權(quán)彈窗在設(shè)計(jì)時(shí)盡量避免一個(gè)授權(quán)一個(gè)彈窗，這樣很容易引起用戶反感，權(quán)限開(kāi)啟率也低。

6. 系統(tǒng)評(píng)分

系統(tǒng)評(píng)分主要是引導(dǎo)用戶去App Store評(píng)分，因此建議都采用帶圖片的設(shè)計(jì)方式，不過(guò)要注意按鈕的設(shè)計(jì)上，如下圖：

從上圖可以看到按鈕設(shè)計(jì)分為：1個(gè)按鈕、2個(gè)按鈕、3個(gè)按鈕的情況。

• 1個(gè)按鈕：直接引導(dǎo)用戶去評(píng)分，將建議或吐槽用小字進(jìn)行設(shè)計(jì)，同時(shí)取消設(shè)計(jì)在右上角的關(guān)閉按鈕上，加大用戶操作，這是一種常見(jiàn)的設(shè)計(jì)方式，比如知乎。
• 2個(gè)按鈕：評(píng)分和吐槽，取消為點(diǎn)擊屏幕任意部分，這是一種比較粗暴的方式，因?yàn)椴还苁窃u(píng)分還是吐槽，都是引導(dǎo)到App Store中去，容易引起用戶反感，不推薦這種方式，比如金貓管家。
• 3個(gè)按鈕：其按鈕順序一般為主要操作、次要操作、輔助操作，比如有范，這是目前比較推薦的設(shè)計(jì)方式。

7. 操作反饋

操作反饋一般出現(xiàn)在編輯、刪除、提交等表單操作過(guò)程中，根據(jù)操作環(huán)境不同一般可以分為兩類：警示類、反饋狀態(tài)類，如下圖：

警示類：一般以快速的傳遞信息為主，使用時(shí)多用純文字彈窗樣式，比如途家民宿。

反饋狀態(tài)類：一般以情感傳遞為主，因此多采用帶圖片、純圖片的設(shè)計(jì)方式，比如ofo、有道樂(lè)讀。

8. 信息提交

當(dāng)APP中一些信息填寫(xiě)不適合跳轉(zhuǎn)到新頁(yè)面時(shí)，會(huì)采用輸入彈窗的形式來(lái)設(shè)計(jì)，減少界面跳轉(zhuǎn)，如下圖：

注意：信息提交類彈窗在設(shè)計(jì)時(shí)盡量少填寫(xiě)、多選擇，因?yàn)樘顚?xiě)的時(shí)候會(huì)調(diào)出輸入鍵盤，會(huì)對(duì)彈窗進(jìn)行遮擋，影響操作，如下圖：

因此當(dāng)彈窗輸入內(nèi)容較多時(shí)不推薦使用該方式，關(guān)于信息提交類彈窗的設(shè)計(jì)，可看我之前寫(xiě)的《如何提高信息提交類彈窗的操作效率》這篇文章。

9. 功能引導(dǎo)

主要指通過(guò)彈窗引導(dǎo)用戶去實(shí)名認(rèn)證、完善資料、打卡、綁定手機(jī)等，一般建議采用帶圖片的方式，其設(shè)計(jì)重點(diǎn)在內(nèi)容上的設(shè)計(jì)。

內(nèi)容設(shè)計(jì)形式比較多，比如糗事百科直接文字表明是配合國(guó)家要求綁定手機(jī)，不然不能發(fā)言。

小時(shí)光給寶媽介紹寶寶的成長(zhǎng)情況，讓我點(diǎn)亮元?dú)鉂M滿的一天，這么正能量一定要點(diǎn)。

騰訊doki直接將明星說(shuō)的話放出，相比圖片來(lái)說(shuō)更有影響力，這種方式你更想為他打榜吧。

當(dāng)然，功能引導(dǎo)還有更多其他的方式，比如放出優(yōu)惠券、福利等，這里就不細(xì)說(shuō)了。

10. 運(yùn)營(yíng)廣告

運(yùn)營(yíng)彈窗的設(shè)計(jì)一般都采用純圖片的方式，不過(guò)根據(jù)應(yīng)用場(chǎng)景不同，表現(xiàn)手法上有所差異，如下圖：

運(yùn)營(yíng)彈窗的設(shè)計(jì)表現(xiàn)手法不限，可以是扁平、線條、2.5D等風(fēng)格，造型上也可以是中規(guī)中矩的矩形，也可以是充滿變化的異形等，設(shè)計(jì)時(shí)可根據(jù)具體的活動(dòng)類型選擇適合的表現(xiàn)手法。

劃重點(diǎn)

下面根據(jù)彈窗的樣式分別和大家整理下，彈窗的應(yīng)用場(chǎng)景，如下圖：

1. 純文本：多用于提示&通知中的危險(xiǎn)類、規(guī)則說(shuō)明、用戶協(xié)議、授權(quán)彈窗、操作反饋等需要強(qiáng)提醒用戶的場(chǎng)景。其優(yōu)勢(shì)是信息傳遞快、設(shè)計(jì)成本低。
2. 帶輸入：多用于信息提交類彈窗，其優(yōu)勢(shì)是可以快速錄入信息，不用跳轉(zhuǎn)新頁(yè)面。
3. 帶圖片：多用于產(chǎn)品中需要情感化表達(dá)的一些場(chǎng)景。比如：提示&通知單純提示類、活動(dòng)規(guī)則說(shuō)明、版本更新、授權(quán)彈窗、系統(tǒng)評(píng)分、操作反饋類、功能引導(dǎo)等。
4. 純圖片：純圖片在系統(tǒng)操作中較少出現(xiàn)，多用于平臺(tái)運(yùn)營(yíng)推廣中，比如活動(dòng)引導(dǎo)彈窗、廣告彈窗等。

作者：風(fēng)箏KK，《UI那些事兒》作者；公眾號(hào)：海鹽社

本文由 @風(fēng)箏KK 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖來(lái)自Unsplash，基于CC0協(xié)議