APP彈窗的分類及設計技巧

刷了很多文章吮成,看到各式各樣的彈窗分類要出,今天總結一下烙心。

什么是彈窗?

彈窗又稱為對話框耀怜,是App與用戶進行交互的常見方式之一作瞄。彈窗分為模態(tài)彈窗和非模態(tài)彈窗兩種茶宵,兩者的區(qū)別在于需不需要用戶對其進行回應。模態(tài)彈窗會打斷用戶的正常操作宗挥,要求用戶必須對其進行回應乌庶,否則不能繼續(xù)其它操作;非模態(tài)彈窗則不會影響用戶的操作属韧,用戶可以不對其進行回應安拟,非模態(tài)彈窗通常都有時間限制,出現(xiàn)一段時間后就會自動消失宵喂。

無論是模態(tài)還是非模態(tài)糠赦,彈窗都是位于當前頁面的最頂層。模態(tài)彈窗常常都還會伴隨半透明的遮罩來吸引用戶的視覺焦點,以突出彈窗的信息內容拙泽。非模態(tài)彈窗一般被設計成用來告訴用戶信息內容淌山,而模態(tài)彈窗除了告訴用戶信息內容外還需要用戶進行功能操作。

常見的彈窗分類用下面這個圖就可以解釋清楚啦~

(麻麻說自己做的圖要寫上大名)

1. Dialog(Alerts)

需要用戶對彈窗進行操作后才能執(zhí)行其他操作顾瞻。優(yōu)勢在于提醒明顯泼疑,能夠對用戶行為進行定向性預測。

(圖片來自網(wǎng)絡)

2. Actionbar(Action Sheets荷荤、Acitivity Views)

提供用戶多種選擇的彈窗退渗,此為用戶主動發(fā)出操作。優(yōu)勢在于可以承載多種選項蕴纳,實現(xiàn)多應用之間操作会油。

(圖片來自網(wǎng)絡)
(圖片來自網(wǎng)絡)

3. Popover

用戶單擊某個控件或頁面某個區(qū)域后出現(xiàn)的臨時復層,通彻琶可以再次隱藏翻翩。優(yōu)勢在于用戶操作時頁面邏輯清晰,當前頁面因隱藏多項低頻操作使得界面簡潔稻薇。

(圖片來自網(wǎng)絡)

4. Toast/HUD

信息給予用戶及時反饋嫂冻,確保用戶知曉自己所處的狀態(tài),并做出相應的措施塞椎。優(yōu)勢在于提示輕盈桨仿,不會對用戶操作帶來太大阻礙。

(圖片來自網(wǎng)絡)
(圖片來自網(wǎng)絡)

5. Snackbar

向用戶反饋信息忱屑,可以交互蹬敲。優(yōu)勢可以弱化提醒的同時,增加操作莺戒。

(圖片來自網(wǎng)絡)


對于UI設計師而言伴嗡,理論上的分類清晰還遠遠不夠,還需要針對視覺从铲、文案瘪校、以及其他商業(yè)需求進行權衡。常見的有以下方面:

【視覺方面】

1. 彈窗文案簡潔名段,表意清晰無歧義

比如阱扬,彈窗提醒文字為“是否要刪除該項?”伸辟,操作為“是”和“否”會讓用戶猶豫不清是刪除還是不是刪除麻惶,若換成“刪除”和“取消”就不會有歧義了。

2. 設計風格盡量簡約

3. 彈窗的設計風格可以根據(jù)應用設計風格進行重塑

比如信夫,微博Toast彈窗就根據(jù)微博整體風格進行設計窃蹋。

4. 可進行誘導性設計

常見的如希望用戶點擊的按鈕放在右邊卡啰,放大點擊按鈕弱化關閉按鈕等。

5. 危險操作需警示

如刪除時需要將“刪除”操作警示警没。

【交互方面】

1. 彈窗的出現(xiàn)盡量不干擾用戶使用

2. 具有同種層級的彈窗使用相同的樣式

3. 同種Toast彈窗位置保持相同

4. 注意彈窗頻率

今天先整理些理論匈辱,明天的文章會從可操作的方法講述彈窗如何制作。

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
  • 序言:七十年代末杀迹,一起剝皮案震驚了整個濱河市亡脸,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌树酪,老刑警劉巖浅碾,帶你破解...
    沈念sama閱讀 219,427評論 6 508
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異嗅回,居然都是意外死亡及穗,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,551評論 3 395
  • 文/潘曉璐 我一進店門绵载,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人苛白,你說我怎么就攤上這事娃豹。” “怎么了购裙?”我有些...
    開封第一講書人閱讀 165,747評論 0 356
  • 文/不壞的土叔 我叫張陵懂版,是天一觀的道長。 經(jīng)常有香客問我躏率,道長躯畴,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 58,939評論 1 295
  • 正文 為了忘掉前任薇芝,我火速辦了婚禮蓬抄,結果婚禮上,老公的妹妹穿的比我還像新娘夯到。我一直安慰自己嚷缭,他們只是感情好,可當我...
    茶點故事閱讀 67,955評論 6 392
  • 文/花漫 我一把揭開白布耍贾。 她就那樣靜靜地躺著阅爽,像睡著了一般。 火紅的嫁衣襯著肌膚如雪荐开。 梳的紋絲不亂的頭發(fā)上付翁,一...
    開封第一講書人閱讀 51,737評論 1 305
  • 那天,我揣著相機與錄音晃听,去河邊找鬼百侧。 笑死着帽,一個胖子當著我的面吹牛,可吹牛的內容都是我干的移层。 我是一名探鬼主播仍翰,決...
    沈念sama閱讀 40,448評論 3 420
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼观话!你這毒婦竟也來了予借?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 39,352評論 0 276
  • 序言:老撾萬榮一對情侶失蹤频蛔,失蹤者是張志新(化名)和其女友劉穎灵迫,沒想到半個月后,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體晦溪,經(jīng)...
    沈念sama閱讀 45,834評論 1 317
  • 正文 獨居荒郊野嶺守林人離奇死亡瀑粥,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 37,992評論 3 338
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了三圆。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片狞换。...
    茶點故事閱讀 40,133評論 1 351
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖舟肉,靈堂內的尸體忽然破棺而出修噪,到底是詐尸還是另有隱情,我是刑警寧澤路媚,帶...
    沈念sama閱讀 35,815評論 5 346
  • 正文 年R本政府宣布黄琼,位于F島的核電站,受9級特大地震影響整慎,放射性物質發(fā)生泄漏脏款。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 41,477評論 3 331
  • 文/蒙蒙 一裤园、第九天 我趴在偏房一處隱蔽的房頂上張望撤师。 院中可真熱鬧,春花似錦比然、人聲如沸丈氓。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,022評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽万俗。三九已至,卻和暖如春饮怯,著一層夾襖步出監(jiān)牢的瞬間闰歪,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,147評論 1 272
  • 我被黑心中介騙來泰國打工蓖墅, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留库倘,地道東北人临扮。 一個月前我還...
    沈念sama閱讀 48,398評論 3 373
  • 正文 我出身青樓,卻偏偏與公主長得像教翩,于是被迫代替她去往敵國和親杆勇。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 45,077評論 2 355

推薦閱讀更多精彩內容