2019-8-1 資深UI設(shè)計者
如果您想訂閱本博客內(nèi)容,每天自動發(fā)到您的郵箱中, 請點(diǎn)這里
彈窗在設(shè)計中運(yùn)用的非常廣泛,基本上每個應(yīng)用都會涉及到。恰好這段時間我也在整理公司設(shè)計組件這一塊,所以就想總結(jié)分享一下。設(shè)計師都會使用彈窗,但對于彈窗背后的分類及運(yùn)用可能還不是特別了解,在寫這篇文章之前,我查看了很多應(yīng)用及資料,所以下面會有大量的案例,相信大家看完可以對彈窗的認(rèn)識更明確,做設(shè)計規(guī)范的時候也能有自己的想法。
現(xiàn)在的彈窗分為兩種,一種是模態(tài)彈窗(重提示),一種是非模態(tài)彈窗(輕提示)。
常見的模態(tài)彈窗:Dialog/Alert、Actionbar、Popover/Popup
常見的非模態(tài)彈窗:Toast/Hud、Tips、Snackbar
一、模態(tài)彈窗
Dialog/Alert 對話框
對話框是我們常用的彈窗,安卓開發(fā)語言是Dialog,iOS開發(fā)語言Alert,它通常出現(xiàn)在頁面的中間,對話框/警示框的類別非常多,對用戶的干擾比較大。前面之所以說模態(tài)彈窗是一種重提示,是因?yàn)樗枰脩糁鲃佑|發(fā)選擇才可以繼續(xù)當(dāng)前的操作。
① 信息-選擇確定
特點(diǎn):這類彈窗通常是一些系統(tǒng)功能的授權(quán)、版本更新、消息通知、重要提示等,通常只有1~3個主按鈕,只需要用戶進(jìn)行簡單的選擇。
下圖舉例分析:
iOS詢問是否刪除APP,就屬于重要提示彈窗,它一般會用在像刪除、確認(rèn)提交...一些比較重要的功能操作中。
小紅書的這個是否允許使用網(wǎng)絡(luò)彈窗,大家一定在許多APP中都見過,這屬于一個系統(tǒng)自帶的授權(quán)彈窗。
馬蜂窩與天貓的消息提醒彈窗,一個屬于初次使用APP時,系統(tǒng)自帶的彈窗,一個屬于使用后期APP為了推送消息,主動提示你開啟消息通知。
有錢花和愛奇藝的版本升級彈窗,都屬于偏運(yùn)營類的彈窗,這一類的彈窗通常會弱化暫不升級的按鈕,突出升級主按鈕。
② 信息-輸入勾選
特點(diǎn):這類彈窗通常是輸入一些比較少的信息或者勾選信息,常用于備注輸入、規(guī)格選擇、分組選擇等,通常只有確定和取消兩個按鈕。
下圖舉例分析:
微博對于已關(guān)注人的分組及備注,都屬于信息輸入及勾選類彈窗,操作通常都比較簡單。
③ 信息-傳達(dá)展示
特點(diǎn):這類彈窗通常是一些廣告、紅包優(yōu)惠、節(jié)日活動等一些運(yùn)營類彈窗,主要是吸引用戶點(diǎn)擊及參加活動,這類運(yùn)營彈窗通常會設(shè)計的比較吸引人,造型各異,會突出領(lǐng)取、查看等大按鈕,弱化關(guān)閉按鈕。
下圖舉例分析:
拼多多和餓了么這類的紅包優(yōu)惠彈窗,就不多說了,大家都懂,它們最主要的目的就是吸引用戶點(diǎn)擊,提升購買率。
美團(tuán)的變黃送好禮彈窗,屬于一次比較大的品牌升級,它主要目的是讓用戶更好的了解并接受品牌色升級。整體的元素及動效設(shè)計都非常清晰,視覺感很強(qiáng)。
支付寶的這個猜世界杯贏螞蟻積分的彈窗,屬于活動彈窗,它的整體設(shè)計非常貼合主題。
Actionbar操作欄
Actionbar主要分為Action Views和Action Sheets。它們通常是由底部彈出,它的操作及信息會比對話框類型的彈窗更多更復(fù)雜。這種當(dāng)前頁面的下拉彈窗好處就是,可以讓用戶清楚的感知當(dāng)前的操作,比跳轉(zhuǎn)到新頁面更加有安全感。還有一個特殊的抽屜式彈窗也順便說一下。
① Action Views操作視圖
特點(diǎn):這類視圖彈窗通常占屏比較多,以文字、圖標(biāo)等形式展示各種功能,也可以說這類的彈窗是一個小型的頁面。它一般從底部彈出,不太強(qiáng)調(diào)歸屬,大多出現(xiàn)在購買、支付、分享等場景。
下圖舉例分析:
百度云盤的這個+號擴(kuò)展彈窗比較特殊,它也可以說是浮層,占滿整個屏幕,它最吸引人的還是它的小動效。
京東購買時的彈窗和支付寶付款時的彈窗,都是比較典型的,在各種電商產(chǎn)品及付款頁面用的非常多。
轉(zhuǎn)轉(zhuǎn)這個的鍵盤與輸入為一體的彈窗,設(shè)計的非常人性化,讓用戶一次就可以輸入多個價格。大大提高了用戶的操作效率。
網(wǎng)易云音樂的分享彈窗就是典型的以文字與圖標(biāo)來展示功能的。
微信讀書的底部閱讀設(shè)置彈窗,比較特殊,為了使用戶沉浸閱讀,它是比較隱藏的,而且非常輕量化。
② Action Sheets 操作列表
特點(diǎn):操作列表相對于操作視圖,它更單一。主要是以文字展示功能按鈕,重要敏感的功能操作一般會用主題顏色或紅色顯示,主要運(yùn)用在一些日??丶?、功能選擇、刪除、保存等場景。
下圖舉例分析:
Keep的選擇日期,屬于iOS原生控件,非常常見。
淘寶的選擇地址彈窗,整個展示的非常清晰全面,而且用戶每選擇一項(xiàng),就會有相應(yīng)的顯示。
支付寶和天貓超市的兩種列表彈窗,就不多說了,簡單的功能選擇都會采用這種。
③ 抽屜式彈窗
特點(diǎn):這種抽屜式彈窗一般從左右兩邊彈出,經(jīng)常運(yùn)用在一些導(dǎo)航擴(kuò)展和目錄展示中,它能承載比較多的信息,基本上都是用來放一些不太常用的功能。
下圖舉例分析:
微信讀書及一些其他閱讀類產(chǎn)品,由于目錄很長,而且一般是從上到下瀏覽的,所以基本都采用了這種抽屜式彈窗。
小紅書的這個抽屜式彈窗,以圖標(biāo)和文字的形式展示了一些不是很常用的功能,為我的頁面節(jié)約了不少空間。
Popover/Popup 浮層
Popover是ios的開發(fā)語言,popup是安卓的開發(fā)語言,浮層是指,用戶點(diǎn)擊某個功能后浮出一個臨時氣泡對其作出補(bǔ)充,它通常會伴隨著半透明的遮罩或者投影襯底,用戶需要點(diǎn)擊功能區(qū)域操作,或者點(diǎn)擊空白處取消,才能進(jìn)入下一步操作。它與上面操作欄的最大區(qū)別就在于,它更強(qiáng)調(diào)歸屬,可以出現(xiàn)在頁面的任何地方,而操作欄一般只出現(xiàn)在底部,不強(qiáng)調(diào)歸屬。
① 指向浮層
特點(diǎn):這類的浮層一般伴隨有小三角指向,強(qiáng)調(diào)歸屬。氣泡里面的功能通常以單一的文字或文字與圖標(biāo)結(jié)合的形式來展示,主要運(yùn)用在頂部加號補(bǔ)充、復(fù)制、分享轉(zhuǎn)發(fā)等場景。
下圖舉例分析:
支付寶和美團(tuán)的頂部加號補(bǔ)充浮層,展示形式是差不多的,只是UI樣式不一樣,一個是白色氣泡黑色半透明遮罩,一個是深灰色氣泡。
微信讀書和微信的選擇文字氣泡,在文字復(fù)制中很常見,通常會與其他轉(zhuǎn)發(fā)收藏小功能一起出現(xiàn)。
② 導(dǎo)航篩選浮層
特點(diǎn):所謂導(dǎo)航篩選,自然是與導(dǎo)航分不開的,再加上浮層是比較強(qiáng)調(diào)歸屬的,所以它通常會與導(dǎo)航連在一起,一般出現(xiàn)在頂部。
下圖舉例分析:
美團(tuán)的導(dǎo)航篩選,因?yàn)檫x項(xiàng)及開關(guān)很多,所以它的底部會有兩個主按鈕,一個完成,一個重置。
餓了么的這個只有一個功能選項(xiàng),所以它一般是直接選擇就收起浮層了。
③ 引導(dǎo)浮層
特點(diǎn):引導(dǎo)浮層的作用就是引導(dǎo)用戶更好的使用產(chǎn)品及交互,降低用戶的學(xué)習(xí)成本。它通常會出現(xiàn)在用戶首次進(jìn)入APP的時候,一般只會出現(xiàn)一次,點(diǎn)擊空白位置或我知道了浮層就會消失。
下圖舉例分析:
QQ音樂與微醫(yī)的引導(dǎo)浮層都是用戶首次進(jìn)入應(yīng)用時,給出的功能搬家提醒浮層。
二、非模態(tài)彈窗
Toast/Hud 提示框
Hud是ios的控件名詞,Toast是安卓的控件名詞,它們都屬于一種輕提示,給予用戶及時反饋,讓用戶知道自己當(dāng)前所處的狀態(tài)。
Hud一般只出現(xiàn)在屏幕的中央,以毛玻璃的樣式表現(xiàn),內(nèi)容展示比較富豐富。
Toast可以出現(xiàn)在屏幕任意位置,通常以黑色半透明的小框來表現(xiàn),內(nèi)容一般是純文字提示或者文字與圖標(biāo)結(jié)合提示。
① 狀態(tài)提示
特點(diǎn):狀態(tài)提示的Toast,它們一般都是反饋用戶當(dāng)前操作的狀態(tài),只出現(xiàn)1到2秒就會自動消失,場景一般是關(guān)注成功、密碼錯誤、音量提示、靜音、清除緩存等。
下圖舉例分析:
移動的屬于操作遇阻提示。
京東的屬于操作成功反饋。
iOS的音量控制屬于毛玻璃Hud。
微信的清除緩存屬于正在操作狀態(tài)。
② 按鍵提示
特點(diǎn):按鍵Toast提示與狀態(tài)提示不同,它們一般自動出現(xiàn)或者點(diǎn)擊觸發(fā)才會出現(xiàn),用于對功能點(diǎn)的補(bǔ)充說明,讓用戶對功能有更深的了解。
下圖舉例分析:
螞蟻森林里點(diǎn)擊樹木就會出現(xiàn)相關(guān)信息,當(dāng)然它也會自動出現(xiàn),點(diǎn)擊其他區(qū)域也會自動消失。
知乎的消息標(biāo)簽不僅有小紅點(diǎn)提示,還會在上方自動出現(xiàn)數(shù)字提示。
Snackbar
Snackbar是Android中的一個控件。它一般會在超時自動關(guān)閉或者在屏幕上滑動關(guān)閉,它沒有Toast那么輕量,設(shè)置出現(xiàn)的時間會比Toast長,而且可以點(diǎn)擊按鈕進(jìn)行交互。
下圖舉例分析:
UC瀏覽器的Snackbar,是在提示用戶上滑,來查看更多內(nèi)容,它需要滑動或者超時才能關(guān)閉。
京東的Snackbar,是在為用戶推薦商品,提示用戶點(diǎn)擊箭頭來查看喜歡的商品,它比UC瀏覽器多了一個關(guān)閉的按鈕。
Tips提示
Tips與Snackbar最主要的區(qū)別就是:Tips它是內(nèi)嵌在頁面上的,而Snackbar則是浮在頁面上的。Tips一般要讓用戶主動觸發(fā)關(guān)閉按鈕或點(diǎn)擊進(jìn)入下級頁面才會消失,一般用于需要用戶感知到的通知信息,或者植入廣告。
下圖舉例分析:
百度云盤在下載視頻時,就會出現(xiàn)一個Tips的提示,讓用戶觀看廣告來得到加速下載。這種提示雖說是廣告,但它抓住了用戶的場景及心理,觀看廣告的幾率大大提升。
愛奇藝的Tips提示就屬于重要通知提示了,提示用戶VIP即將到期,續(xù)費(fèi)可優(yōu)惠,它們都有一個主按鈕及關(guān)閉按鈕,需要用戶主動觸發(fā)提示才會消失。
規(guī)范總結(jié)
目前的彈窗樣式非常多,你能想到的,你想不到的基本都可以技術(shù)實(shí)現(xiàn)。但這同時也帶來一個問題,那就是“不規(guī)范”。以上提到的彈窗種類,你只需要選擇符合你產(chǎn)品要求的幾個類型,最好不要在一個產(chǎn)品中運(yùn)用多個同種類型的彈窗,否則后期會很難規(guī)范及組件化,當(dāng)然運(yùn)營廣告類彈窗可以另當(dāng)別論。
差不多就寫完了...大家覺得有幫助的話,記得點(diǎn)在看和轉(zhuǎn)發(fā)~
藍(lán)藍(lán)設(shè)計( tweetduck.com )是一家專注而深入的界面設(shè)計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)。
藍(lán)藍(lán)設(shè)計的小編 http://tweetduck.com