編輯導(dǎo)讀：我們經(jīng)常會(huì)收到各種彈窗，它們的目的主要是為回應(yīng)用戶(hù)或讓用戶(hù)回應(yīng)，是用戶(hù)與產(chǎn)品間對(duì)話(huà)的一種方式。但是，彈窗也不是多多益善。如何彈、什么時(shí)候彈？這些都是有章法的。本文作者總結(jié)梳理了一套彈窗設(shè)計(jì)原則，一起來(lái)看看吧。

產(chǎn)品經(jīng)理：我覺(jué)得這里要加個(gè)彈窗，你去設(shè)計(jì)吧。

設(shè)計(jì)師：emmm…

彈窗到底該不該加？怎么加？用什么形態(tài)展示？真正的作用是什么？這些真的是產(chǎn)品經(jīng)理說(shuō)了算嗎？

好的產(chǎn)品通常會(huì)在恰當(dāng)?shù)臅r(shí)間、合適的位置給出合理的反饋，彈窗也是必不可少的反饋方式，不反饋、反饋不及時(shí)或反饋不合理都會(huì)帶來(lái)不好的使用體驗(yàn)，甚至誤導(dǎo)用戶(hù)，從而導(dǎo)致用戶(hù)流失。

很多時(shí)候，產(chǎn)品經(jīng)理會(huì)從商業(yè)角度、公司業(yè)務(wù)、資源限制等方面考慮問(wèn)題，但這些未必是用戶(hù)所需要的，設(shè)計(jì)師不應(yīng)該完全按照產(chǎn)品需求做設(shè)計(jì)，否則就成了只會(huì)照搬產(chǎn)品原型的“美工”。需要做的是從用戶(hù)角度出發(fā)，把產(chǎn)品需求轉(zhuǎn)化成設(shè)計(jì)目標(biāo)，只有經(jīng)過(guò)反復(fù)的推敲、認(rèn)真分析，最終才能打磨出服務(wù)于用戶(hù)的彈窗設(shè)計(jì)，所以彈窗該不該加、如何加就成了設(shè)計(jì)師不可推卸的責(zé)任和使命。

本篇文章將圍繞著彈窗類(lèi)型、使用場(chǎng)景、轉(zhuǎn)化率及常見(jiàn)問(wèn)題為側(cè)重點(diǎn)，將自己對(duì)彈窗的理解、設(shè)計(jì)經(jīng)驗(yàn)分享給大家，幫助大家對(duì)彈窗組件有更清晰的認(rèn)識(shí)，為后續(xù)避坑設(shè)計(jì)出更好的彈窗做準(zhǔn)備。

一、彈窗的基本介紹

1. 彈窗的定義

當(dāng)我們與應(yīng)用產(chǎn)生主動(dòng)或被動(dòng)交互時(shí)，頁(yè)面上層會(huì)彈出容器，將可承載的文本、按鈕、選項(xiàng)、標(biāo)簽或表單等任一內(nèi)容與之組合，就可以用來(lái)傳遞信息、狀態(tài)反饋、引導(dǎo)用戶(hù)等操作，這就是彈窗。

彈窗的目的主要是為回應(yīng)用戶(hù)或讓用戶(hù)回應(yīng)，是用戶(hù)與產(chǎn)品間對(duì)話(huà)的一種方式，在線上各種場(chǎng)景中都有可能碰到，相當(dāng)于產(chǎn)品的線上小助理。不同類(lèi)型的彈窗其作用不同，但最終都是為了滿(mǎn)足跟用戶(hù)之間的友好交流。

2. 彈窗組件的構(gòu)成

彈窗組件的樣式很多，如浮層、對(duì)話(huà)框、下拉菜單、toast等，且iOS、Android官方平臺(tái)也都根據(jù)自身的規(guī)范對(duì)組件進(jìn)行命名，不管如何稱(chēng)呼，其常見(jiàn)的彈窗組件絕大多數(shù)都是由以下元素組成：

• 容器：作為承載彈窗的文本、圖片等內(nèi)容，容器必不可少，有的彈窗直接以蒙層作為容器，如toast；
• 蒙層：為了和底層內(nèi)容分離，避免信息混淆，通常會(huì)在界面上層（容器下層）設(shè)置一個(gè)不透明度為20%~60%的純黑色蒙層。部分小型彈窗不設(shè)蒙層，但會(huì)為容器設(shè)置投影，例如篩選器的展開(kāi)、下拉菜單等；
• 文本：文本是彈窗傳達(dá)信息主體的必要條件，如標(biāo)題、按鈕等，即便把文本融入圖片，也能一目了然；
• 圖片：用于運(yùn)營(yíng)彈窗傳達(dá)更多信息內(nèi)容的方式之一，為了對(duì)用戶(hù)產(chǎn)生更強(qiáng)的吸引力，還可設(shè)計(jì)成動(dòng)態(tài)效果；
• 表單：為成功進(jìn)入下一步做準(zhǔn)備，如輸入密碼（iOS設(shè)備下載應(yīng)用前的必要步驟）。也可以是當(dāng)前頁(yè)面流程的分支，例如輸入優(yōu)惠券等；
• 選項(xiàng)：條件較少的選項(xiàng)可使用彈窗完成，單選、復(fù)選在選項(xiàng)不超過(guò)6個(gè)的情況下都可使用；
• 圖標(biāo)：在弱化次要操作的情況下，通常會(huì)將關(guān)閉彈窗按鈕設(shè)計(jì)成圖標(biāo)放在右上角或彈窗下方，目的是突出主操作，鼓勵(lì)用戶(hù)從彈窗中進(jìn)入下一步，另外還有單選、復(fù)選、提示等按鈕；
• 按鈕：是進(jìn)入下一步或回到上一步（去掉彈窗）的操作入口，部分應(yīng)用也可以點(diǎn)擊彈窗以外的空白區(qū)域讓彈窗消失，但同樣會(huì)提供按鈕以方便用戶(hù)更容易操作。toast等短時(shí)間自動(dòng)消失的彈窗無(wú)需設(shè)置按鈕。

二、彈窗體系分類(lèi)

1. 模態(tài)彈窗

用戶(hù)在完成任務(wù)的過(guò)程中，界面會(huì)出現(xiàn)彈窗打斷用戶(hù)的操作行為，用戶(hù)必須通過(guò)主動(dòng)點(diǎn)擊才可以進(jìn)行下一步操作，這即是模態(tài)彈窗。

模態(tài)彈窗通常能較好的獲取用戶(hù)的視覺(jué)焦點(diǎn)，并通過(guò)承載的內(nèi)容、按鈕主次層級(jí)來(lái)引導(dǎo)用戶(hù)完成他們的需求，這也會(huì)根據(jù)用戶(hù)、產(chǎn)品側(cè)重點(diǎn)的不同，彈出樣式也有所不同，常見(jiàn)的模態(tài)彈窗有對(duì)話(huà)框、動(dòng)作欄、浮層…等。

1.1 對(duì)話(huà)框Dialog/Alert

對(duì)話(huà)框是很常見(jiàn)的彈窗，主要在打斷用戶(hù)后并提供選項(xiàng)操作，對(duì)用戶(hù)的干擾較大，通常會(huì)配備1~3個(gè)操作按鈕，而且會(huì)把用戶(hù)最期待的或產(chǎn)品最期待用戶(hù)操作的按鈕突出顯示。

對(duì)話(huà)框類(lèi)型的彈窗主要分為主動(dòng)、被動(dòng)兩種觸發(fā)類(lèi)型，主動(dòng)彈窗：信息的二次確認(rèn)、輸入內(nèi)容、前置條件選擇、風(fēng)險(xiǎn)警示等；被動(dòng)彈窗：版本更新、運(yùn)營(yíng)宣傳、消息通知、系統(tǒng)功能授權(quán)等。

1.2 動(dòng)作欄Actionbar

動(dòng)作欄是通過(guò)用戶(hù)主動(dòng)操作后彈出的內(nèi)容信息，基本都是從底部彈出，屏幕占用比例根據(jù)內(nèi)容量的多少比較隨意，從小區(qū)域、半屏、再到全屏隨處可見(jiàn)。

動(dòng)作欄相比對(duì)話(huà)框則能承載更多、更豐富的功能信息，在用戶(hù)清晰感知當(dāng)前操作及反饋的情況下，比跳轉(zhuǎn)到新的頁(yè)面更有安全感。

1.3 浮層Popover/Popup

浮層是指用戶(hù)操作某個(gè)功能/內(nèi)容后，會(huì)在附近出現(xiàn)一個(gè)帶有視覺(jué)引導(dǎo)性質(zhì)的彈窗，最常見(jiàn)的浮層就是下拉菜單/彈窗等，浮動(dòng)于頂層窗口并指向觸發(fā)操作的位置。

例如很多社交娛樂(lè)類(lèi)型的應(yīng)用右上角有一個(gè)“+”入口，里面會(huì)放置部分常用功能。部分浮層底部沒(méi)有設(shè)置不透明度的蒙層，為了與頁(yè)面信息更好的區(qū)分，會(huì)給浮層容器加上投影，避免與底部信息混淆。

2. 非模態(tài)彈窗

相比模態(tài)彈窗，非模態(tài)彈窗屬較為輕量，觸發(fā)后以一種非阻礙的的方式呈現(xiàn)，不會(huì)打斷用戶(hù)的當(dāng)前操作，主要是給予用戶(hù)即時(shí)反饋，讓用戶(hù)清楚應(yīng)用當(dāng)前的交互后狀態(tài)。非模態(tài)彈窗不強(qiáng)制用戶(hù)操作，根據(jù)反饋信息的重要程度及意愿，可在一定的時(shí)間內(nèi)自動(dòng)消失，也可等待用戶(hù)操作后消失，常見(jiàn)的有以下幾種：

2.1 提示框Toast/Hud

用于反饋用戶(hù)操作成功、警告、錯(cuò)誤等當(dāng)前狀態(tài)信息，可能出現(xiàn)在任何位置（底部/中間/頂部），在呈現(xiàn)樣式上，相同等級(jí)的模塊統(tǒng)一位置、風(fēng)格即可，無(wú)需用戶(hù)有任何操作，出現(xiàn)2s左右自動(dòng)消失。

Toast只有純文字提示，例如格式錯(cuò)誤、刷新成功、刪除成功等；Hud會(huì)使用文字+圖標(biāo)樣式，例如添加到購(gòu)物車(chē)、關(guān)注成功等。

2.2 提示對(duì)話(huà)框Snackbar

Snackbar早期只是Android系統(tǒng)的一種彈窗控件，后在iOS、Web前端都會(huì)使用到，可以看作是toast的加強(qiáng)版。一般只出現(xiàn)在屏幕底部，存在的時(shí)間比toast長(zhǎng)，提供0~1個(gè)操作入口，可自動(dòng)消失，也可與用戶(hù)產(chǎn)生交互后消失或者跳轉(zhuǎn)至其他頁(yè)面。

Snackbar反饋的重要程度強(qiáng)于toast，例如，某個(gè)應(yīng)用今天有重要提醒，同時(shí)又不想影響用戶(hù)的其他操作，會(huì)在用戶(hù)首次進(jìn)入時(shí)彈出提醒，并提供關(guān)閉操作入口，等待用戶(hù)通過(guò)手動(dòng)關(guān)閉（部分自動(dòng)關(guān)閉），加強(qiáng)用戶(hù)記憶。

2.3 通知Notice

最有代表性的就是消息通知、系統(tǒng)推送，在設(shè)備未鎖屏的情況下，通常從頂部彈出，停留幾秒后自動(dòng)消失，鎖屏后，不同設(shè)備彈出的位置也有所不同。Notice的前提是需要在應(yīng)用設(shè)置中打開(kāi)消息通知開(kāi)關(guān)，具備應(yīng)用外推送功能的，需在設(shè)備系統(tǒng)設(shè)置中開(kāi)啟通知權(quán)限。

2.4 透明指示層HUD

HUD是一種在透明元素上通過(guò)填充、反饋用戶(hù)當(dāng)前交互操作的指示層，實(shí)時(shí)生效，例如視頻類(lèi)產(chǎn)品中的調(diào)整音量、亮度、控制進(jìn)度條等。

三、彈窗的使用場(chǎng)景

當(dāng)我們對(duì)彈窗體系有了一定了解后，就需要清楚什么場(chǎng)景需要設(shè)計(jì)彈窗？用什么類(lèi)型的彈窗？

產(chǎn)品最終都是服務(wù)于用戶(hù)，如果僅憑自己的主觀意見(jiàn)亂加一通，整的花里胡哨，彈窗就成了干擾元素，很大程度上會(huì)影響用戶(hù)體驗(yàn)。什么樣的場(chǎng)景適合什么類(lèi)型的彈窗，我們可以從以下幾點(diǎn)來(lái)說(shuō)明。

1. 打斷用戶(hù)的操作

風(fēng)險(xiǎn)警示：當(dāng)用戶(hù)的某種操作可能存在風(fēng)險(xiǎn)，為避免操作失誤，會(huì)彈出對(duì)話(huà)框打斷用戶(hù)，并給予一定的風(fēng)險(xiǎn)提示引起用戶(hù)的注意，讓其有足夠的時(shí)間確認(rèn)是否真的需要進(jìn)行下一步操作，如：刪除、放棄福利機(jī)會(huì)、退出登錄等，會(huì)彈出對(duì)話(huà)框提示操作后可能引起的后果。

前置條件：部分任務(wù)在流程中設(shè)有一定的前置條件，需要滿(mǎn)足條件才能進(jìn)入下一步操作，通常這種情況會(huì)根據(jù)內(nèi)容量的多少、重要程度以對(duì)話(huà)框或動(dòng)作欄的樣式彈出，例如下單時(shí)選擇優(yōu)惠券、支付方式。

任務(wù)關(guān)鍵節(jié)點(diǎn)：用戶(hù)在滿(mǎn)足任務(wù)的基本條件后，需要操作一個(gè)關(guān)鍵步驟才能成功，則會(huì)彈出對(duì)話(huà)框讓用戶(hù)完成最后一步操作，例如提交訂單、表單、輸入支付密碼等。

2. 定制化彈窗

這類(lèi)彈窗主要從產(chǎn)品角度出發(fā)，不會(huì)過(guò)于在乎用戶(hù)是否需要、會(huì)不會(huì)反感，都會(huì)引導(dǎo)或強(qiáng)制用戶(hù)操作。

例如產(chǎn)品發(fā)布新版本，會(huì)強(qiáng)制用戶(hù)更新，否則將無(wú)法使用。還有各大電商APP，在進(jìn)入首頁(yè)時(shí)會(huì)彈出一堆紅包、優(yōu)惠券，刻意將取消/關(guān)閉入口弱化，給用戶(hù)返回造成一定的難度，利用突出的視覺(jué)、動(dòng)態(tài)效果突出主題增加吸引力，以達(dá)到轉(zhuǎn)化用戶(hù)的目的。

3. 二次確認(rèn)

二次確認(rèn)也是一種打斷用戶(hù)的操作行為，但跟上面純粹的打斷用戶(hù)相比其作用更大，主要是在用戶(hù)已做好選擇的情況下再次彈出確認(rèn)，以免操作結(jié)果造成用戶(hù)認(rèn)知上的偏差。雖然從用戶(hù)體驗(yàn)角度出發(fā)，用最少的操作、最簡(jiǎn)單的流程滿(mǎn)足用戶(hù)所需是產(chǎn)品追求的目標(biāo)之一，但通過(guò)權(quán)和利弊之后，二次確認(rèn)的出現(xiàn)實(shí)屬迫不得已的折中方案，它能夠起到給用戶(hù)多一次思考避免誤操作、同樣的含義換種方式表達(dá)、重要的內(nèi)容加深二次記憶等作用。

二次確認(rèn)使用得當(dāng)，可以避免用戶(hù)、產(chǎn)品的潛在風(fēng)險(xiǎn)，但若是從主觀角度一味的濫用，就成了對(duì)用戶(hù)的惡意干擾、影響使用體驗(yàn)，導(dǎo)致出現(xiàn)因多步驟操作增加任務(wù)完成難度、降低轉(zhuǎn)化率、損害產(chǎn)品形象等問(wèn)題，所以需要從業(yè)務(wù)（用戶(hù)側(cè)、產(chǎn)品側(cè)）實(shí)際角度出發(fā)，兩相其害（加-影響使用體驗(yàn)；不加-造成一定損失）取其輕的考慮是否需要增加二次確認(rèn)彈窗。

當(dāng)用戶(hù)的某個(gè)操作可能帶來(lái)不可逆轉(zhuǎn)、錯(cuò)誤嚴(yán)重程度較高時(shí)，例如：放棄僅有一次機(jī)會(huì)的較好福利、手機(jī)系統(tǒng)還原、應(yīng)用賬號(hào)注銷(xiāo)等，系統(tǒng)都會(huì)給予二次確認(rèn)，降低用戶(hù)認(rèn)知偏差后，以確保用戶(hù)是經(jīng)過(guò)多次思考才做出的決定，即便后續(xù)給用戶(hù)造成損失也不會(huì)過(guò)于降罪產(chǎn)品，產(chǎn)品也算是“問(wèn)心無(wú)愧”了。

4. 簡(jiǎn)單提示

常見(jiàn)于用戶(hù)操作之后的狀態(tài)反饋，即便用戶(hù)沒(méi)有注意到，也不會(huì)造成較大的損失、或結(jié)果已經(jīng)注定，相對(duì)來(lái)說(shuō)成本較低，大部分出現(xiàn)在任務(wù)過(guò)程中的提示（可重復(fù)）和結(jié)果反饋，以確保用戶(hù)知曉當(dāng)前所處狀態(tài)。

非模態(tài)彈窗toas樣式居多，例如加載中、操作成功、刷新結(jié)果、清除緩存等，可出現(xiàn)在其他類(lèi)型的彈窗之后或同時(shí)存在。

四、如何設(shè)計(jì)有效的彈窗

1. 前提條件

優(yōu)秀的彈窗需要從視覺(jué)、交互兩方面思考，視覺(jué)上簡(jiǎn)潔、易懂，交互上可操作且可控。

視覺(jué)層面：首先需要做到的是易懂，這時(shí)候就非常注重文案清晰程度及按鈕層級(jí)關(guān)系了，彈出的信息需能直擊要害，用戶(hù)看了能一目了然才是關(guān)鍵；其次，彈窗屬于一種干擾信息的存在，設(shè)計(jì)必須簡(jiǎn)潔，在彈出時(shí)需要考慮是否會(huì)過(guò)度影響（影響是一定會(huì)有的、且看如何降低）用戶(hù)的其他操作。假想我們正在玩游戲、突然來(lái)了電話(huà)全屏幕覆蓋（傳統(tǒng)來(lái)電），自己會(huì)以最快的速度掛掉電話(huà)，回到游戲中后發(fā)現(xiàn)自己已領(lǐng)“盒飯”，即便來(lái)電是多么的理所當(dāng)然，但心里必定是非常不痛快的，那么，如果來(lái)電以彈窗的形式且占據(jù)屏幕很小區(qū)域（如今的來(lái)電方式）是不是就給了用戶(hù)足夠反應(yīng)時(shí)間及緩沖時(shí)間呢？

交互層面：彈出的內(nèi)容及操作入口需清晰可操作，雖然有時(shí)基于業(yè)務(wù)需求，產(chǎn)品更希望用戶(hù)能進(jìn)行下一步操作而并非回到上一步，即便如此，我們也只能通過(guò)弱化次要操作以突出主要操作，用戶(hù)有來(lái)去自由的權(quán)利，如果弱化至用戶(hù)看不清、甚至找不到的程度，即便提供了次要操作入口，也會(huì)存在反面作用；另外需注意用戶(hù)對(duì)產(chǎn)品的可控性，不管產(chǎn)品如何期望用戶(hù)進(jìn)入下一步轉(zhuǎn)化，但不能強(qiáng)制，一定要給用戶(hù)提供回去的路（強(qiáng)制版本更新除外），否則，任性的用戶(hù)可能會(huì)直接結(jié)束應(yīng)用，甚至因產(chǎn)品過(guò)于霸道直接卸載。

2. 設(shè)計(jì)目的

首先，設(shè)計(jì)師應(yīng)該理解產(chǎn)品需求，分別從用戶(hù)側(cè)（能給用戶(hù)帶來(lái)什么？滿(mǎn)足什么樣的需求？避免什么損失?…）、產(chǎn)品側(cè)（能給產(chǎn)品帶來(lái)什么？產(chǎn)品如何期望？是否合理？能得到什么樣的結(jié)果？…）分析為什么要加彈窗，然后將分析的結(jié)果轉(zhuǎn)化為設(shè)計(jì)目標(biāo)，以確保彈窗根據(jù)不同的需求，在恰當(dāng)?shù)臅r(shí)間、適合的樣式合理的呈現(xiàn)給用戶(hù)。

其次，在得到設(shè)計(jì)目標(biāo)后，同樣需要從設(shè)計(jì)側(cè)、技術(shù)側(cè)思考彈窗組件的一致性。從設(shè)計(jì)角度，團(tuán)隊(duì)所有成員需要對(duì)該組件有清晰且統(tǒng)一的認(rèn)知，了解組件的使用場(chǎng)景，以確保不會(huì)錯(cuò)用、濫用，如果增加或更換新人設(shè)計(jì)師，很容易學(xué)習(xí)和上手，提升效率；站在技術(shù)角度，一致性的常用彈窗組件，便于開(kāi)發(fā)做組件封裝后續(xù)復(fù)用，減少不必要的重復(fù)工作，大大提高開(kāi)發(fā)效率。

3. 設(shè)計(jì)思路

在UI設(shè)計(jì)中，組件的設(shè)計(jì)思路基本相通，旨在滿(mǎn)足產(chǎn)品的實(shí)用性、視覺(jué)的統(tǒng)一性，主要圍繞著以下幾點(diǎn)進(jìn)行：

• 基礎(chǔ)定義：利用清晰易懂且簡(jiǎn)短的文案描述彈窗組件的內(nèi)容及目的。
• 類(lèi)型及構(gòu)成：明確彈窗的類(lèi)型，如模態(tài)/非模態(tài)，將其拆分并注明每個(gè)小元素的具體信息。
• 規(guī)則用法：彈窗出現(xiàn)的位置、包含的具體內(nèi)容及信息的展示規(guī)則，比如哪些場(chǎng)景可復(fù)用。
• 交互狀態(tài)：交互流程邏輯清晰，擬請(qǐng)產(chǎn)品交互前、交互中、交互后如何反饋以及用戶(hù)隨時(shí)可能碰到的問(wèn)題。

五、需關(guān)注的問(wèn)題點(diǎn)

1. 信息的層級(jí)關(guān)系

設(shè)計(jì)彈窗時(shí)需要注意信息的主次層級(jí)關(guān)系，優(yōu)先傳達(dá)用戶(hù)想要的或產(chǎn)品想要讓用戶(hù)知道的，以確保重要的信息在第一時(shí)間傳達(dá)給用戶(hù)。

2. 展現(xiàn)形式

彈窗需要根據(jù)實(shí)際的場(chǎng)景合理使用，不能為了簡(jiǎn)潔而過(guò)分刪減內(nèi)容、更不能畫(huà)蛇添足。例如一些偏向于操作狀態(tài)、系統(tǒng)報(bào)告類(lèi)的提示可以使用簡(jiǎn)單的反饋，而可能造成用戶(hù)損失的提醒就需要刻意打斷用戶(hù)，給予更明確的提示甚至二次確認(rèn)。

△ 例如刪除內(nèi)容就需要使用模態(tài)彈窗明確提醒用戶(hù)，如果用非模態(tài)很可能被用戶(hù)忽略從而帶來(lái)不可逆的損失。

3. 文案表述

因彈窗本身承載內(nèi)容有一定的局限性，固文案一定要簡(jiǎn)潔且精確，能用一句話(huà)說(shuō)清楚的就不要過(guò)于啰嗦，不僅容器的空間有限且用戶(hù)的耐性也有限，需要在有限的空間、有效的時(shí)間內(nèi)清晰的表達(dá)出核心內(nèi)容。

4. 彈出的時(shí)機(jī)及頻率

針對(duì)運(yùn)營(yíng)彈窗，如果彈出的時(shí)間不對(duì)或過(guò)于頻繁，可能會(huì)造成用戶(hù)反感，所以需要把握好彈出時(shí)機(jī)及頻率。

例如用戶(hù)有一張未使用的優(yōu)惠券，如果用戶(hù)每次進(jìn)入應(yīng)用都看到彈出提醒，確實(shí)又沒(méi)有購(gòu)買(mǎi)商品的意愿，總是被彈窗打斷真的就很煩，那么可以將提醒彈窗設(shè)置為每日首次進(jìn)入應(yīng)用時(shí)提示、每累計(jì)進(jìn)入應(yīng)用5次后提示、即將到期提示或者用戶(hù)有購(gòu)買(mǎi)意愿且優(yōu)惠券支持改品類(lèi)時(shí)提示等，總之，需要控制在大部分用戶(hù)的可接受范圍內(nèi)。

六、總結(jié)

本篇文章主要系統(tǒng)的分析了彈窗組件分類(lèi)及使用場(chǎng)景，總結(jié)的雖然不是很全面，但能讓很多新手設(shè)計(jì)師清楚認(rèn)知彈出組件的定義及用法。另外，彈窗不管如何設(shè)計(jì)，都需要有一個(gè)不斷優(yōu)化的過(guò)程，要根據(jù)產(chǎn)品的實(shí)際情況不斷思考與打磨，通過(guò)腦暴或已知問(wèn)題作出更好的改善。

能清楚認(rèn)知、理解、使用彈窗組件是一個(gè)成熟UI設(shè)計(jì)師必備的條件，當(dāng)然，并不能以此定義設(shè)計(jì)師是否優(yōu)秀，在此基礎(chǔ)上，還需通過(guò)持續(xù)的學(xué)習(xí)探索，挖掘出更多技巧，不斷提高自身的專(zhuān)業(yè)能力。

#專(zhuān)欄作家#

大漠飛鷹；公眾號(hào)：能量眼球，人人都是產(chǎn)品經(jīng)理專(zhuān)欄作家。致力于產(chǎn)品需求的驅(qū)動(dòng)、產(chǎn)品體驗(yàn)的挖掘，利用設(shè)計(jì)的手段為受眾用戶(hù)帶來(lái)更好的體驗(yàn)，即好看、好用。

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

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