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

彈窗，按照功能定義可以分為Alert、Confirm、Prompt三種，這是在PC端和移動(dòng)端都適用的一種功能性分類方法。

PC端軟件和移動(dòng)端應(yīng)用中的彈窗是它們和用戶之間進(jìn)行信息交互的重要方式之一，也是GUI（Graphical User Interface）重要的組成部分。

在最早的 CLI（Command Line Interface-命令行界面）界面時(shí)，囿于文字的表現(xiàn)形式和交互形式的單一性，并沒有彈窗的界面元素，但已經(jīng)有了類似的提示信息，但不是模態(tài)的，用戶很容易忽略。

CLI的模仿彈窗效果

在GUI交互方式誕生后，在操作系統(tǒng)里和在瀏覽器上，逐漸出現(xiàn)并完善了三種基本的彈框類型，這三種彈窗類型分別針對(duì)三種不同的使用場(chǎng)景，這些彈框都是模態(tài)的，如果用戶不對(duì)當(dāng)前的彈框界面元素做出反饋，就不能進(jìn)行后續(xù)操作，這三種彈窗形式分別是：

一、Alert彈窗

Alert彈窗是用模態(tài)方式阻止用戶當(dāng)前操作，并告知用戶相關(guān)信息。

Alert彈框

Alert彈窗僅僅單向通知用戶某個(gè)信息，不能收集用戶的反饋信息，系統(tǒng)僅僅偵測(cè)判斷用戶被動(dòng)接收到信息并點(diǎn)擊了“確定”按鈕，系統(tǒng)就會(huì)解散彈窗并繼續(xù)進(jìn)行后續(xù)操作。

Alert彈窗的交互特點(diǎn)是：模態(tài)地阻斷用戶當(dāng)前和界面的其他交互，強(qiáng)迫用戶點(diǎn)擊“確定”按鈕來確保用戶明確了解當(dāng)前發(fā)生的狀況，Alert彈窗只是線性流程上的一個(gè)斷點(diǎn)，一個(gè)安全閥，本身除了返回是否執(zhí)行的狀態(tài)，不返回任何其他值，所以也不可能在點(diǎn)擊“確定”按鈕后提供不同支路。

所以Alert彈窗最適合的使用場(chǎng)景包括：強(qiáng)出錯(cuò)提示、強(qiáng)知會(huì)通知、新手引導(dǎo)、系統(tǒng)反饋等等不需要用戶給出選擇，只需要用戶單向被動(dòng)接收系統(tǒng)信息的使用場(chǎng)景。

Alert 彈窗的交互流程

Alert彈窗在IE和Chrome等瀏覽器上可以用Javascript代碼快速實(shí)現(xiàn)，你可以在瀏覽器地址欄輸入“javascript:alert();”查看效果。

Alert彈窗以其簡(jiǎn)單易用、可遞歸使用、可本地調(diào)用等特性而受到開發(fā)者青睞，成為最廣泛使用的一種交互控件，然而也正是因?yàn)槠溥@種使用簡(jiǎn)單的特性而成為垃圾代碼、惡意代碼的重要工具。

日本刈谷市警方近日質(zhì)詢并指控了一名13歲的女學(xué)生，起因是她將一段惡意代碼的鏈接放到了在線公告欄上，廣泛傳播代碼。

這段有問題的惡意代碼是彈出警告消息的無限循環(huán)，每當(dāng)你點(diǎn)擊“確定”就會(huì)立即顯示新的消息，這種惡意代碼就是利用了Aert彈窗的簡(jiǎn)單易用的特性。

惡意代碼展示效果

而這段代碼只有短短幾行：

for ( ; ; ) {window.alert(“　∧_∧　ババババn（ ?ω?)=つ≡つn（っ ≡つ=つn`/　　)n(ノΠＵn何回閉じても無駄ですよ～wwnm9（＾Д＾）プギャー！！n　byソル (@0_Infinity_)”)}

為了抗議日本警察將國(guó)中女生當(dāng)做罪犯以及將分享鏈接定性為犯罪的荒謬行徑，東京的程序員Kimikazu Kato在GitHub上發(fā)布了一個(gè)名為L(zhǎng)et’s Get Arrested快來抓我啊的項(xiàng)目。將只包含上述代碼的項(xiàng)目托管到GitHub網(wǎng)站上，并呼吁大家一起分享，將犯罪行為置于警方觸手可及的顯眼位置。

這可以說是Alert彈框使用場(chǎng)景和被濫用可能的最佳代言了。

無論是在PC操作系統(tǒng)還是移動(dòng)端操作系統(tǒng)上，系統(tǒng)自帶的Alert彈窗都漸漸無法滿足產(chǎn)品設(shè)計(jì)者和開發(fā)者的不斷增加的用戶體驗(yàn)提升要求和功能需求，所以產(chǎn)生了很多種形式的自定義樣式。

多種多樣的自定義Alert 彈窗

但萬變不離其宗，Alert彈窗基本的交互特點(diǎn)：?jiǎn)蜗蛲ㄖ?、無需用戶選擇、模態(tài)顯示等等可以讓我們?cè)诹至挚偪偟慕换タ丶校谎劬驼J(rèn)出這種使用最頻繁、交互最簡(jiǎn)單的彈窗控件。

二、Confirm彈窗

上文講的是軟件交互的三大彈窗類型之Alert彈窗，下面要講的是三大彈窗類型的第二種：Confirm彈窗。又叫確認(rèn)彈窗、確定彈窗。這種彈窗也是模態(tài)打斷用戶當(dāng)前操作，需要用戶在Yes和No之間做出一個(gè)選擇，然后再根據(jù)返回的布爾值來進(jìn)行后續(xù)的交互。

Confirm彈窗的使用場(chǎng)景是需要用戶在“Yes”和“No”之間做一個(gè)抉擇，以決定后續(xù)支路流程的進(jìn)行，同時(shí)如果需要，用戶選擇后產(chǎn)生的布爾值結(jié)果可以保存至云端，所以Confirm彈窗的后續(xù)流程是一個(gè)多支路可選的、可云端存儲(chǔ)的流程，特別適用于二次確認(rèn)重要操作行為、協(xié)議簽署、允許系統(tǒng)調(diào)用傳感器、退出時(shí)提醒保存等場(chǎng)景。

普通的Confirm彈窗

我們舉一個(gè)簡(jiǎn)單的例子，假如系統(tǒng)需要確定用戶是否吃過早飯，并會(huì)根據(jù)用戶的回答給出不同的系統(tǒng)反饋，同時(shí)把用戶的選擇結(jié)果記錄到云端，交互流程如下：

Confirm彈窗的交互流程

你可以在瀏覽器地址欄輸入如下代碼來體驗(yàn)一下這個(gè)過程：

javascript:if(confirm(“早飯吃了嗎?”)){alert(“恭喜你！”)}else{alert(“好遺憾！”);}

在移動(dòng)操作系統(tǒng)iOS和安卓中，也引入了這個(gè)基本的彈窗控件，并保留了其基本形式，并在提示文字的基礎(chǔ)上，新增了一個(gè)標(biāo)題的文字區(qū)域。

移動(dòng)端Confirm彈框有標(biāo)題和正文文字區(qū)域

同時(shí)iOS和安卓等移動(dòng)操作系統(tǒng)在普通Confrim彈窗控件的基礎(chǔ)上，還新增了多選彈框，這就極大程度上拓展了Confrim的使用場(chǎng)景和應(yīng)用范圍，畢竟有很多時(shí)候，我們需要做出的選擇不是“Yes”和“No”，而是“選擇一”、“選擇二”……“選擇N”。

多選Confirm彈窗

當(dāng)然在使用這種多選的彈窗控件時(shí)，返回值也不再是一個(gè)布爾值，而是一個(gè)UInt（unsigned integers）數(shù)值。系統(tǒng)會(huì)根據(jù)返回的Int數(shù)值決定后續(xù)流程的展現(xiàn)和記錄到云端的工作。

和Alert彈窗一樣，產(chǎn)品設(shè)計(jì)者和開發(fā)者也發(fā)現(xiàn)了原生的Confirm控件有時(shí)候無法滿足用戶和應(yīng)用更美觀、更易用等要求，于是自定義Confirm彈窗控件也就應(yīng)運(yùn)而生了。

自定義控件

自定義控件的好處是產(chǎn)品設(shè)計(jì)人員開發(fā)者可以隨意定制Confrim彈窗上的任何元素，包括標(biāo)題、正文樣式、“確定/取消”按鈕的文字、新增其他字段，甚至還可以增加圖片和改變彈窗的外觀。這樣就可以根據(jù)設(shè)計(jì)者的不同要求定制不同的Confrim彈窗，讓Confrim彈窗的使用范圍更加擴(kuò)大化。

自定義的布爾值Confrim彈窗

多選的Confrim彈窗

但不管Confirm彈窗的形式怎么變化，我們還是很容易就能憑借它的特點(diǎn)把它從眾多的交互控件中辨認(rèn)出來，那就是Confrim彈窗會(huì)模態(tài)地阻斷用戶當(dāng)前其他交互并強(qiáng)制用戶在幾個(gè)選項(xiàng)中做出選擇，系統(tǒng)能夠根據(jù)用戶的選擇給出的選擇提供不同的后續(xù)流程。Confirm彈窗和Alert彈窗一樣，已經(jīng)成為了GUI界面上最最基礎(chǔ)的交互控件。

三、Prompt彈窗

Prompt彈窗是在1995年javascript誕生時(shí)和Alert彈窗、Confirm彈窗一起出現(xiàn)的三大彈窗方式之一，但命運(yùn)軌跡卻完全不同。

Prompt彈窗的基本形式

我們先來分析一下Prompt彈窗不同于另外兩種彈窗形式的主要特點(diǎn)：Prompt彈窗也是模態(tài)阻斷用戶其他交互行為，要求用戶首先完成當(dāng)前彈窗的任務(wù)，輸入系統(tǒng)要求的信息，或選擇不輸入任何信息，選擇“取消”按鈕解散彈窗。Prompt彈窗的運(yùn)行機(jī)制如下：

Prompt彈窗運(yùn)行機(jī)制

要測(cè)試Prompt控件的運(yùn)行效果，可以在瀏覽器地址欄輸入如下代碼：

javascript:if(prompt(“早飯吃了什么”)==’面包’){alert(“面包有益身體健康”)}else{alert(“很遺憾”)}

相較于另外兩種彈窗形式的不可或缺和應(yīng)用廣泛，Prompt彈窗似乎難以逃避消亡的最終命運(yùn)，在PC端的Native Software和瀏覽器里，基本上已經(jīng)難覓其蹤跡，在移動(dòng)端除了一些操作系統(tǒng)級(jí)的交互上偶爾可以見到這個(gè)控件之外，移動(dòng)App里基本上已經(jīng)難覓其蹤跡。

原生Prompt控件

除了這種原生控件，我們還能見到很多類似的變體，都算是Prompt控件的延伸和擴(kuò)展：

Prompt控件的擴(kuò)展

Prompt控件的延伸

造成Prompt彈窗逐漸消亡的原因很多，初步分析下來主要有以下幾個(gè)因素導(dǎo)致Prompt逐漸式微：

1. 原生的Prompt彈窗應(yīng)用場(chǎng)景很少，而大部分可以使用的場(chǎng)景都可以被其他形式的交互控件替代。

隨著移動(dòng)互聯(lián)網(wǎng)技術(shù)的發(fā)展，幾種主要的移動(dòng)應(yīng)用類型已經(jīng)基本定型，同時(shí)這些應(yīng)用內(nèi)部的流程頁(yè)面也已經(jīng)基本標(biāo)準(zhǔn)化，登錄、注冊(cè)、設(shè)置、購(gòu)買、預(yù)訂、添加、刪除都已經(jīng)有標(biāo)準(zhǔn)的UI控件支持，在這種情況下，強(qiáng)提醒、模態(tài)顯示的Prompt就很難再有用武之地了。

2. 原生的Prompt彈窗校驗(yàn)機(jī)制比較弱，很難控制用戶輸入信息的類型，造成臟數(shù)據(jù)和服務(wù)器被hack風(fēng)險(xiǎn)。

Prompt控件的先天不足決定了用戶輸入數(shù)據(jù)很難被控制，雖然可以進(jìn)行簡(jiǎn)單的本地校驗(yàn)，但這種開放性輸入框的用戶體驗(yàn)非常差。

系統(tǒng)很難控制用戶輸入數(shù)據(jù)格式

3. 彈窗形式的不斷發(fā)展和變化拓展和模糊了幾種彈窗形式的邊界。

下面這個(gè)登陸界面和驗(yàn)證碼彈窗，是否屬于Prompt彈窗的延伸，還是其他控件的延伸？這些界定已經(jīng)隨著彈窗形式的不斷發(fā)展變化越來越模糊，很多時(shí)候我們只是拿這些界面的功能來標(biāo)注和稱呼，如“登錄彈窗”，“驗(yàn)證碼彈窗”，而不再考慮它是從那種基礎(chǔ)彈窗形式衍生出來的，又或者，從這幾大類彈窗形式誕生之初，這種分類方式就不是按照很科學(xué)的方式來界定的。

登錄彈窗

驗(yàn)證碼彈窗

4. iOS通過使用Prompt彈窗來界定系統(tǒng)級(jí)交互和App級(jí)交互的區(qū)別

iOS使用原聲的Prompt彈窗樣式來隱喻系統(tǒng)級(jí)的交互，但這種方式也開始受到黑客和釣魚應(yīng)用的模仿，目前已經(jīng)出現(xiàn)很多釣魚網(wǎng)站模仿iOS原生Prompt彈窗控件樣式來獲取用戶賬號(hào)密碼，而用戶之所以中招，很大程度上也是因?yàn)槭艿竭@種形式隱喻的暗示影響，所以蘋果要么加強(qiáng)監(jiān)管審核，要么可能就要考慮更加安全可控的交互方式，畢竟這種原生的Prompt彈窗的偽造成本太低了。

釣魚網(wǎng)站模擬原生樣式獲取用戶Apple ID

所以，從某種意義上來說，也可以認(rèn)為Prompt彈窗并沒有式微，而是隨著技術(shù)發(fā)展和需求提升以多姿多彩的擴(kuò)展和變異的形式生存下來，只是這些控件都不再以Prompt為名，但他們身上都有著Prompt彈窗的某些特點(diǎn)和烙印。

移動(dòng)操作系統(tǒng)彈窗定義

前面簡(jiǎn)述了PC時(shí)代產(chǎn)生的和沿用至今的三種基本彈窗類型，在移動(dòng)互聯(lián)網(wǎng)迅速發(fā)展的今天，這幾種基本類型的原生形態(tài)的使用場(chǎng)景逐漸弱化，而衍生和擴(kuò)展出的其他類型彈窗形式層出不窮。但萬變不離其宗，我們?cè)谝姷竭@些彈窗的時(shí)候，還是可以很容易地把它們歸類到那三種基本類型里，但移動(dòng)端用戶界面已經(jīng)不會(huì)再簡(jiǎn)單按照這種方式進(jìn)行分類了。

1. 移動(dòng)端的顯示界面特點(diǎn)決定了很多原來在PC端不需要彈窗顯示的控件，在移動(dòng)端囿于分辨率和物理尺寸局限性而不能沿X軸和Y軸橫向擴(kuò)展，只能在Z軸縱向擴(kuò)展，異化為彈窗展示。

移動(dòng)端很多控件由于空間限制只能層級(jí)擴(kuò)展

如PC端的排序和篩選控件，在空間足夠的前提下，最早是側(cè)邊欄顯示的控件，后來伴隨著UI風(fēng)格的演化，部分出現(xiàn)在列表上方折疊/展開顯示，但在移動(dòng)端有限的空間里，只能采用側(cè)邊滑出彈窗的方式來展示。

篩選排序UI控件在PC端的展示

2. 彈窗在移動(dòng)端的具體分類方式也因操作系統(tǒng)不同而有不同的分類方法。

在移動(dòng)端的不同的操作系統(tǒng)上，彈窗有不同的分類方式，有些甚至連命名都已經(jīng)完全改變。

在iOS操作系統(tǒng)上，在組件層級(jí)上，彈窗被歸為“Alerts（警示）”，而蘋果是這樣解釋的：

Alerts convey important information related to the state of your app or the device, and often request feedback. An alert consists of a title, an optional message, one or more buttons, and optional text fields for gathering input. Aside from these configurable elements, the visual appearance of an alert is static and can’t be customized.

Alerts

其中Confirm的多按鈕，Prompt的輸入框都變成了Alert彈窗的可選元素，三種彈窗形式都合并入“Alert”彈窗，可謂是“三分歸晉，天下一統(tǒng)”了。

當(dāng)然蘋果也意識(shí)到了僅從表現(xiàn)層（View）定義Alert彈窗還不夠，還從結(jié)構(gòu)層（App Architecture）上定義了模態(tài)（Modality）的表現(xiàn)形式，這個(gè)是比較貼近我們所說的廣義的“彈窗”概念的。

Modality creates focus by preventing people from doing other things until they complete a task or dismiss a message or view. Action sheets, alerts, and activity views provide modal experiences. When a modal view appears onscreen, the user must make a choice by tapping a button or otherwise exiting the modal experience. Some apps implement modal views, such as while editing an event in Calendar or choosing a bookmark in Safari. A modal view can occupy the entire screen, an entire parent view, such as a popover, or a portion of the screen. A modal view typically includes completion and cancel buttons that exit the view.

iOS的模態(tài)展示

這種分類形式，基本上就涵蓋了所有的彈窗形式，跟本文所闡釋的“彈窗”涵蓋范圍基本上一致，即“僅限于模態(tài)的Z軸上的不同視覺層級(jí)”，所以并不包括氣泡和Tooltips、Toast、Snackbar等雖然Z軸方向上層級(jí)不同，但并非模態(tài)顯示的那些控件。

彈窗三維解剖圖

而安卓系統(tǒng)的Material Design關(guān)于彈窗的定義在展現(xiàn)層上更加細(xì)碎，Material Design把主要的彈窗展示類型歸入“Dialogs”控件，但又有很多特例歸入了其他的控件形式如抽屜式導(dǎo)航、Sheets:Bottom、Sheets:side、等其他控件。

Dialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.

Material Design對(duì)Dialog的定義

可以看到，這種定義比較曖昧，非?；\統(tǒng)且缺少指導(dǎo)意義。

而在更高的交互層級(jí)描述中，Material Design把這些彈窗控件歸入了“Confirmation”部分，當(dāng)然Confirmation部分基本對(duì)應(yīng)了iOS系統(tǒng)的模態(tài)分類，但Material Design基本沒提模態(tài)交互這回事。

When a UI requests confirmation from a user, it asks if they want to proceed with the action they just took. It may be paired with a warning or critical information related to that action.Confirmation isn’t necessary when the consequences of an action are reversible or negligible. For example, if a check mark shows an image has been selected, further confirmation is unnecessary.

Material Design對(duì)Confirmation的定義

所以總體來看，iOS和安卓操作系統(tǒng)對(duì)彈窗都從交互層面和展現(xiàn)層面來進(jìn)行了定義，但相較而言，iOS的關(guān)于彈窗的定義則更清晰明確，更有指導(dǎo)意義一些。

移動(dòng)端彈窗的幾種表現(xiàn)形式

彈窗，或者嚴(yán)格意義上來說，模態(tài)彈窗，在前面按照功能定義分為Alert、Confirm、Prompt三種，這是在PC端和移動(dòng)端都適用的一種功能性分類方法，在移動(dòng)端，可以依據(jù)它們的表現(xiàn)形式不同而分為如下幾種，當(dāng)然其中有些依據(jù)不同的分類方法可以歸入蒙版、浮層等不同的分類，但也可以作為彈窗的表現(xiàn)形式：

1. 引導(dǎo)彈窗（引導(dǎo)浮層/引導(dǎo)蒙版）

引導(dǎo)彈窗(Coach Marks)是彈窗的一種特殊應(yīng)用形式，其主要目標(biāo)是引導(dǎo)新用戶快速了解和掌握應(yīng)用的新功能和操作方式，所以部分蒙板遮罩位置會(huì)鏤空把要描述的元素露出，同時(shí)配合文字描述和操作按鈕，以達(dá)到幫助用戶快速上手的目標(biāo)。

引導(dǎo)彈窗

引導(dǎo)彈窗是唯一的把當(dāng)前場(chǎng)景（Context）結(jié)合到彈窗里合并顯示但仍保持模態(tài)交互方式的彈窗形式。

2. 全屏彈窗

全屏彈窗是指浮層從下方滑入并覆蓋整個(gè)屏幕的浮層樣式，一般這種彈窗比較容易同切換頁(yè)面相混淆，用戶處于當(dāng)前界面的分支流程而非下一步流程時(shí)較多使用，用戶會(huì)有一種還停留在當(dāng)前頁(yè)面的心理認(rèn)知，一般使用關(guān)閉或取消按鈕解散彈窗而非返回以暗示用戶此時(shí)仍處于當(dāng)前場(chǎng)景中。

全屏彈窗

3. 側(cè)邊彈窗

此類彈窗一般由屏幕上端或下端切入并覆蓋部分屏幕，主要用來作為選擇、輸入項(xiàng)的輔助展示界面，因被覆蓋的界面部分只有局部且此浮層主要由用戶主動(dòng)觸發(fā)，所以用戶并無明顯的被打斷和跳出的感覺。用戶點(diǎn)擊蒙板區(qū)域或選擇操作項(xiàng)后解散彈窗。

側(cè)邊彈窗

操作按鈕列表是iOS系統(tǒng)的原生控件，也是此浮層的一種特殊表現(xiàn)形式。

操作按鈕列表

4.?居中彈窗

居中彈窗是平臺(tái)使用較多的一種表現(xiàn)形式，彈窗中心點(diǎn)位于屏幕正中，既是視覺焦點(diǎn)，也便于用戶操作。各種消息框、信息簡(jiǎn)介都屬于這種形式。用戶點(diǎn)擊關(guān)閉按鈕或蒙板區(qū)域解散彈窗。

居中彈窗

5.?運(yùn)營(yíng)彈窗

運(yùn)營(yíng)彈窗是以營(yíng)銷活動(dòng)展示為目的，浮層以豎向中心點(diǎn)為基點(diǎn)居中對(duì)齊，內(nèi)容區(qū)域主背景可以設(shè)計(jì)為異形，即圖片以PNG格式保存，透明的部分鏤空。以增加設(shè)計(jì)自由度。有操作按鈕和關(guān)閉按鈕便于用戶查看活動(dòng)詳情或解散按鈕。

運(yùn)營(yíng)彈窗

因?yàn)橛脩袅?xí)慣于在看到運(yùn)營(yíng)彈窗時(shí)視線向右上方尋找關(guān)閉按鈕，所以有些App為了增加點(diǎn)擊率而把關(guān)閉按鈕放在其他位置。

運(yùn)營(yíng)彈窗

以上就是彈窗的幾種不同表現(xiàn)形式，一般來說每種表現(xiàn)形式都有自己擅長(zhǎng)表現(xiàn)的使用場(chǎng)景如全屏彈窗適合于表單較多的分支任務(wù)或圖片、文件選擇，側(cè)邊彈窗適合于篩選和排序定義等，重要的是，用合適的載體來應(yīng)用于合適的場(chǎng)景中，才能發(fā)揮最佳效果。

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

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