設(shè)計(jì)師都會(huì)使用彈窗塘装，但對(duì)于彈窗背后的分類及運(yùn)用可能還不是特別了解急迂，在寫這篇文章之前，我查看了很多應(yīng)用及資料蹦肴，所以下面會(huì)有大量的案例袋毙，相信大家看完可以對(duì)彈窗的認(rèn)識(shí)更明確，做設(shè)計(jì)規(guī)范的時(shí)候也能有自己的想法冗尤。

現(xiàn)在的彈窗分為兩種听盖，一種是模態(tài)彈窗（重提示），一種是非模態(tài)彈窗（輕提示）裂七。

常見的模態(tài)彈窗：Dialog/Alert皆看、Actionbar、Popover/Popup

常見的非模態(tài)彈窗：Toast/Hud背零、Tips腰吟、Snackbar

一、模態(tài)彈窗

Dialog/Alert ?對(duì)話框

對(duì)話框是我們常用的彈窗，安卓開發(fā)語(yǔ)言是Dialog毛雇，iOS開發(fā)語(yǔ)言Alert嫉称，它通常出現(xiàn)在頁(yè)面的中間，對(duì)話框/警示框的類別非常多灵疮，對(duì)用戶的干擾比較大织阅。前面之所以說(shuō)模態(tài)彈窗是一種重提示，是因?yàn)樗枰脩糁鲃?dòng)觸發(fā)選擇才可以繼續(xù)當(dāng)前的操作震捣。

①?信息-選擇確定

特點(diǎn)：這類彈窗通常是一些系統(tǒng)功能的授權(quán)荔棉、版本更新、消息通知蒿赢、重要提示等润樱，通常只有1～3個(gè)主按鈕，只需要用戶進(jìn)行簡(jiǎn)單的選擇羡棵。

②?信息-輸入勾選

特點(diǎn)：這類彈窗通常是輸入一些比較少的信息或者勾選信息壹若，常用于備注輸入、規(guī)格選擇皂冰、分組選擇等舌稀，通常只有確定和取消兩個(gè)按鈕。

③?信息-傳達(dá)展示

特點(diǎn)：這類彈窗通常是一些廣告灼擂、紅包優(yōu)惠壁查、節(jié)日活動(dòng)等一些運(yùn)營(yíng)類彈窗，主要是吸引用戶點(diǎn)擊及參加活動(dòng)剔应，這類運(yùn)營(yíng)彈窗通常會(huì)設(shè)計(jì)的比較吸引人睡腿，造型各異，會(huì)突出領(lǐng)取峻贮、查看等大按鈕席怪，弱化關(guān)閉按鈕。

Actionbar操作欄

Actionbar主要分為Action Views和Action Sheets纤控。它們通常是由底部彈出挂捻，它的操作及信息會(huì)比對(duì)話框類型的彈窗更多更復(fù)雜。這種當(dāng)前頁(yè)面的下拉彈窗好處就是船万，可以讓用戶清楚的感知當(dāng)前的操作刻撒，比跳轉(zhuǎn)到新頁(yè)面更加有安全感。還有一個(gè)特殊的抽屜式彈窗也順便說(shuō)一下耿导。

①?Action?Views操作視圖

特點(diǎn)：這類視圖彈窗通常占屏比較多声怔，以文字、圖標(biāo)等形式展示各種功能舱呻，也可以說(shuō)這類的彈窗是一個(gè)小型的頁(yè)面醋火。它一般從底部彈出，不太強(qiáng)調(diào)歸屬，大多出現(xiàn)在購(gòu)買芥驳、支付柿冲、分享等場(chǎng)景。

②?Action Sheets?操作列表

特點(diǎn)：操作列表相對(duì)于操作視圖兆旬，它更單一假抄。主要是以文字展示功能按鈕，重要敏感的功能操作一般會(huì)用主題顏色或紅色顯示爵憎，主要運(yùn)用在一些日晨祝控件婚瓜、功能選擇宝鼓、刪除、保存等場(chǎng)景巴刻。

③ 抽屜式彈窗

特點(diǎn)：這種抽屜式彈窗一般從左右兩邊彈出愚铡，經(jīng)常運(yùn)用在一些導(dǎo)航擴(kuò)展和目錄展示中，它能承載比較多的信息胡陪，基本上都是用來(lái)放一些不太常用的功能沥寥。

Popover/Popup?浮層

Popover是ios的開發(fā)語(yǔ)言，popup是安卓的開發(fā)語(yǔ)言柠座，浮層是指邑雅，用戶點(diǎn)擊某個(gè)功能后浮出一個(gè)臨時(shí)氣泡對(duì)其作出補(bǔ)充，它通常會(huì)伴隨著半透明的遮罩或者投影襯底妈经，用戶需要點(diǎn)擊功能區(qū)域操作淮野，或者點(diǎn)擊空白處取消，才能進(jìn)入下一步操作吹泡。它與上面操作欄的最大區(qū)別就在于骤星，它更強(qiáng)調(diào)歸屬，可以出現(xiàn)在頁(yè)面的任何地方爆哑，而操作欄一般只出現(xiàn)在底部洞难，不強(qiáng)調(diào)歸屬。

① 指向浮層

特點(diǎn)：這類的浮層一般伴隨有小三角指向揭朝，強(qiáng)調(diào)歸屬队贱。氣泡里面的功能通常以單一的文字或文字與圖標(biāo)結(jié)合的形式來(lái)展示，主要運(yùn)用在頂部加號(hào)補(bǔ)充潭袱、復(fù)制露筒、分享轉(zhuǎn)發(fā)等場(chǎng)景。

②?導(dǎo)航篩選浮層

特點(diǎn)：所謂導(dǎo)航篩選敌卓，自然是與導(dǎo)航分不開的慎式，再加上浮層是比較強(qiáng)調(diào)歸屬的，所以它通常會(huì)與導(dǎo)航連在一起，一般出現(xiàn)在頂部瘪吏。

③?引導(dǎo)浮層

特點(diǎn)：引導(dǎo)浮層的作用就是引導(dǎo)用戶更好的使用產(chǎn)品及交互癣防，降低用戶的學(xué)習(xí)成本。它通常會(huì)出現(xiàn)在用戶首次進(jìn)入APP的時(shí)候掌眠，一般只會(huì)出現(xiàn)一次蕾盯，點(diǎn)擊空白位置或我知道了浮層就會(huì)消失。

二蓝丙、非模態(tài)彈窗

Toast/Hud?提示框

Hud是ios的控件名詞级遭，Toast是安卓的控件名詞，它們都屬于一種輕提示渺尘，給予用戶及時(shí)反饋挫鸽，讓用戶知道自己當(dāng)前所處的狀態(tài)。

Hud一般只出現(xiàn)在屏幕的中央鸥跟，以毛玻璃的樣式表現(xiàn)丢郊，內(nèi)容展示比較富豐富。

Toast可以出現(xiàn)在屏幕任意位置医咨，通常以黑色半透明的小框來(lái)表現(xiàn)枫匾，內(nèi)容一般是純文字提示或者文字與圖標(biāo)結(jié)合提示。

① 狀態(tài)提示

特點(diǎn)：狀態(tài)提示的Toast拟淮，它們一般都是反饋用戶當(dāng)前操作的狀態(tài)干茉，只出現(xiàn)1到2秒就會(huì)自動(dòng)消失，場(chǎng)景一般是關(guān)注成功很泊、密碼錯(cuò)誤角虫、音量提示、靜音撑蚌、清除緩存等上遥。

②?按鍵提示

特點(diǎn)：按鍵Toast提示與狀態(tài)提示不同，它們一般自動(dòng)出現(xiàn)或者點(diǎn)擊觸發(fā)才會(huì)出現(xiàn)争涌，用于對(duì)功能點(diǎn)的補(bǔ)充說(shuō)明粉楚，讓用戶對(duì)功能有更深的了解。

Snackbar

Snackbar是Android中的一個(gè)控件亮垫。它一般會(huì)在超時(shí)自動(dòng)關(guān)閉或者在屏幕上滑動(dòng)關(guān)閉模软，它沒有Toast那么輕量，設(shè)置出現(xiàn)的時(shí)間會(huì)比Toast長(zhǎng)饮潦，而且可以點(diǎn)擊按鈕進(jìn)行交互燃异。

Tips提示

Tips與Snackbar最主要的區(qū)別就是：Tips它是內(nèi)嵌在頁(yè)面上的，而Snackbar則是浮在頁(yè)面上的继蜡。Tips一般要讓用戶主動(dòng)觸發(fā)關(guān)閉按鈕或點(diǎn)擊進(jìn)入下級(jí)頁(yè)面才會(huì)消失回俐，一般用于需要用戶感知到的通知信息逛腿，或者植入廣告。

規(guī)范總結(jié)

目前的彈窗樣式非常多仅颇，你能想到的单默，你想不到的基本都可以技術(shù)實(shí)現(xiàn)。但這同時(shí)也帶來(lái)一個(gè)問題忘瓦，那就是“不規(guī)范”搁廓。以上提到的彈窗種類，你只需要選擇符合你產(chǎn)品要求的幾個(gè)類型耕皮，最好不要在一個(gè)產(chǎn)品中運(yùn)用多個(gè)同種類型的彈窗境蜕，否則后期會(huì)很難規(guī)范及組件化，當(dāng)然運(yùn)營(yíng)廣告類彈窗可以另當(dāng)別論凌停。

差不多就寫完了...大家覺得有幫助的話粱年，記得點(diǎn)在看和轉(zhuǎn)發(fā)～