彈窗在設(shè)計(jì)中運(yùn)用的非常廣泛骤铃，基本上每個(gè)應(yīng)用都會(huì)涉及到拉岁。恰好這段時(shí)間我也在整理公司設(shè)計(jì)組件這一塊，所以就想總結(jié)分享一下惰爬。
設(shè)計(jì)師都會(huì)使用彈窗喊暖，但對(duì)于彈窗背后的分類及運(yùn)用可能還不是特別了解，在寫這篇文章之前撕瞧，我查看了很多應(yīng)用及資料陵叽，所以下面會(huì)有大量的案例狞尔，相信大家看完可以對(duì)彈窗的認(rèn)識(shí)更明確，做設(shè)計(jì)規(guī)范的時(shí)候也能有自己的想法巩掺。
現(xiàn)在的彈窗分為兩種偏序，一種是模態(tài)彈窗（重提示），一種是非模態(tài)彈窗（輕提示）胖替。
常見(jiàn)的模態(tài)彈窗：Dialog/Alert研儒、Actionbar、Popover/Popup
常見(jiàn)的非模態(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)單的選擇。
下圖舉例分析：
iOS詢問(wèn)是否刪除APP醒第，就屬于重要提示彈窗渔嚷，它一般會(huì)用在像刪除、確認(rèn)提交...一些比較重要的功能操作中稠曼。
小紅書的這個(gè)是否允許使用網(wǎng)絡(luò)彈窗形病，大家一定在許多APP中都見(jiàn)過(guò)，這屬于一個(gè)系統(tǒng)自帶的授權(quán)彈窗霞幅。
馬蜂窩與天貓的消息提醒彈窗漠吻，一個(gè)屬于初次使用APP時(shí)，系統(tǒng)自帶的彈窗司恳，一個(gè)屬于使用后期APP為了推送消息途乃，主動(dòng)提示你開啟消息通知。
有錢花和愛(ài)奇藝的版本升級(jí)彈窗抵赢，都屬于偏運(yùn)營(yíng)類的彈窗欺劳，這一類的彈窗通常會(huì)弱化暫不升級(jí)的按鈕唧取，突出升級(jí)主按鈕。
②?信息-輸入勾選
特點(diǎn)：這類彈窗通常是輸入一些比較少的信息或者勾選信息划提，常用于備注輸入枫弟、規(guī)格選擇、分組選擇等鹏往，通常只有確定和取消兩個(gè)按鈕淡诗。
下圖舉例分析：
微博對(duì)于已關(guān)注人的分組及備注，都屬于信息輸入及勾選類彈窗伊履，操作通常都比較簡(jiǎn)單韩容。
③?信息-傳達(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)閉按鈕毅弧。
下圖舉例分析：
拼多多和餓了么這類的紅包優(yōu)惠彈窗，就不多說(shuō)了当窗，大家都懂够坐，它們最主要的目的就是吸引用戶點(diǎn)擊，提升購(gòu)買率崖面。
美團(tuán)的變黃送好禮彈窗元咙，屬于一次比較大的品牌升級(jí)，它主要目的是讓用戶更好的了解并接受品牌色升級(jí)嘶朱。整體的元素及動(dòng)效設(shè)計(jì)都非常清晰蛾坯，視覺(jué)感很強(qiáng)。
支付寶的這個(gè)猜世界杯贏螞蟻積分的彈窗疏遏，屬于活動(dòng)彈窗脉课，它的整體設(shè)計(jì)非常貼合主題。
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)景。
下圖舉例分析：
百度云盤的這個(gè)+號(hào)擴(kuò)展彈窗比較特殊牺堰，它也可以說(shuō)是浮層拄轻，占滿整個(gè)屏幕，它最吸引人的還是它的小動(dòng)效伟葫。
京東購(gòu)買時(shí)的彈窗和支付寶付款時(shí)的彈窗恨搓，都是比較典型的，在各種電商產(chǎn)品及付款頁(yè)面用的非常多扒俯。
轉(zhuǎn)轉(zhuǎn)這個(gè)的鍵盤與輸入為一體的彈窗奶卓，設(shè)計(jì)的非常人性化一疯，讓用戶一次就可以輸入多個(gè)價(jià)格撼玄。大大提高了用戶的操作效率。
網(wǎng)易云音樂(lè)的分享彈窗就是典型的以文字與圖標(biāo)來(lái)展示功能的墩邀。
微信讀書的底部閱讀設(shè)置彈窗掌猛，比較特殊，為了使用戶沉浸閱讀眉睹，它是比較隱藏的荔茬，而且非常輕量化。
②?Action Sheets?操作列表
特點(diǎn)：操作列表相對(duì)于操作視圖竹海，它更單一慕蔚。主要是以文字展示功能按鈕，重要敏感的功能操作一般會(huì)用主題顏色或紅色顯示斋配，主要運(yùn)用在一些日晨嘴控件、功能選擇艰争、刪除坏瞄、保存等場(chǎng)景。
下圖舉例分析：
Keep的選擇日期甩卓，屬于iOS原生控件鸠匀，非常常見(jiàn)。
淘寶的選擇地址彈窗逾柿，整個(gè)展示的非常清晰全面缀棍，而且用戶每選擇一項(xiàng)宅此，就會(huì)有相應(yīng)的顯示。
支付寶和天貓超市的兩種列表彈窗爬范，就不多說(shuō)了诽凌，簡(jiǎn)單的功能選擇都會(huì)采用這種。
③ 抽屜式彈窗
特點(diǎn)：這種抽屜式彈窗一般從左右兩邊彈出坦敌，經(jīng)常運(yùn)用在一些導(dǎo)航擴(kuò)展和目錄展示中侣诵，它能承載比較多的信息，基本上都是用來(lái)放一些不太常用的功能狱窘。
下圖舉例分析：
微信讀書及一些其他閱讀類產(chǎn)品杜顺，由于目錄很長(zhǎng)，而且一般是從上到下瀏覽的蘸炸，所以基本都采用了這種抽屜式彈窗躬络。
小紅書的這個(gè)抽屜式彈窗，以圖標(biāo)和文字的形式展示了一些不是很常用的功能搭儒，為我的頁(yè)面節(jié)約了不少空間穷当。
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)景。
下圖舉例分析：
支付寶和美團(tuán)的頂部加號(hào)補(bǔ)充浮層裳仆，展示形式是差不多的腕让，只是UI樣式不一樣，一個(gè)是白色氣泡黑色半透明遮罩，一個(gè)是深灰色氣泡纯丸。
微信讀書和微信的選擇文字氣泡偏形，在文字復(fù)制中很常見(jiàn)，通常會(huì)與其他轉(zhuǎn)發(fā)收藏小功能一起出現(xiàn)觉鼻。
②?導(dǎo)航篩選浮層
特點(diǎn)：所謂導(dǎo)航篩選俊扭，自然是與導(dǎo)航分不開的，再加上浮層是比較強(qiáng)調(diào)歸屬的坠陈，所以它通常會(huì)與導(dǎo)航連在一起萨惑，一般出現(xiàn)在頂部。
下圖舉例分析：
美團(tuán)的導(dǎo)航篩選仇矾，因?yàn)檫x項(xiàng)及開關(guān)很多庸蔼，所以它的底部會(huì)有兩個(gè)主按鈕，一個(gè)完成贮匕，一個(gè)重置姐仅。
餓了么的這個(gè)只有一個(gè)功能選項(xiàng)，所以它一般是直接選擇就收起浮層了刻盐。
③?引導(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ì)消失。
下圖舉例分析：
QQ音樂(lè)與微醫(yī)的引導(dǎo)浮層都是用戶首次進(jìn)入應(yīng)用時(shí)供屉，給出的功能搬家提醒浮層行冰。
二、非模態(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ò)誤赵讯、音量提示盈咳、靜音、清除緩存等边翼。
下圖舉例分析：
移動(dòng)的屬于操作遇阻提示鱼响。
京東的屬于操作成功反饋。
iOS的音量控制屬于毛玻璃Hud组底。
微信的清除緩存屬于正在操作狀態(tài)丈积。
②?按鍵提示
特點(diǎn)：按鍵Toast提示與狀態(tài)提示不同，它們一般自動(dòng)出現(xiàn)或者點(diǎn)擊觸發(fā)才會(huì)出現(xiàn)债鸡，用于對(duì)功能點(diǎn)的補(bǔ)充說(shuō)明桶癣，讓用戶對(duì)功能有更深的了解。
下圖舉例分析：
螞蟻森林里點(diǎn)擊樹木就會(huì)出現(xiàn)相關(guān)信息娘锁，當(dāng)然它也會(huì)自動(dòng)出現(xiàn)牙寞，點(diǎn)擊其他區(qū)域也會(huì)自動(dòng)消失。?
知乎的消息標(biāo)簽不僅有小紅點(diǎn)提示莫秆，還會(huì)在上方自動(dòng)出現(xiàn)數(shù)字提示间雀。
Snackbar
Snackbar是Android中的一個(gè)控件。它一般會(huì)在超時(shí)自動(dòng)關(guān)閉或者在屏幕上滑動(dòng)關(guān)閉镊屎，它沒(méi)有Toast那么輕量惹挟，設(shè)置出現(xiàn)的時(shí)間會(huì)比Toast長(zhǎng)，而且可以點(diǎn)擊按鈕進(jìn)行交互缝驳。
下圖舉例分析：
UC瀏覽器的Snackbar连锯，是在提示用戶上滑，來(lái)查看更多內(nèi)容用狱，它需要滑動(dòng)或者超時(shí)才能關(guān)閉运怖。
京東的Snackbar，是在為用戶推薦商品夏伊，提示用戶點(diǎn)擊箭頭來(lái)查看喜歡的商品摇展，它比UC瀏覽器多了一個(gè)關(guān)閉的按鈕。
Tips提示
Tips與Snackbar最主要的區(qū)別就是：Tips它是內(nèi)嵌在頁(yè)面上的溺忧，而Snackbar則是浮在頁(yè)面上的咏连。Tips一般要讓用戶主動(dòng)觸發(fā)關(guān)閉按鈕或點(diǎn)擊進(jìn)入下級(jí)頁(yè)面才會(huì)消失，一般用于需要用戶感知到的通知信息鲁森，或者植入廣告祟滴。
下圖舉例分析：
百度云盤在下載視頻時(shí)，就會(huì)出現(xiàn)一個(gè)Tips的提示歌溉，讓用戶觀看廣告來(lái)得到加速下載垄懂。這種提示雖說(shuō)是廣告，但它抓住了用戶的場(chǎng)景及心理，觀看廣告的幾率大大提升埠偿。
愛(ài)奇藝的Tips提示就屬于重要通知提示了透罢，提示用戶VIP即將到期，續(xù)費(fèi)可優(yōu)惠冠蒋，它們都有一個(gè)主按鈕及關(guān)閉按鈕羽圃，需要用戶主動(dòng)觸發(fā)提示才會(huì)消失。
