編輯導語：彈框，在我們日常使用手機時都會碰到，那麼對于這些彈框，你是否有幾分好奇，不同模态的彈框有什麼差異？作者對彈框的分類和形式進行了總結，并分享了在設計時需要注意的幾點問題。

手機彈框相信大家都不陌生，那為什麼要設計彈框不設置界面？彈框到底有哪幾種形式？幾種彈框的區别在哪裡？在設計的時候需要注意些什麼？本文将從這幾個闆塊給大家分享一下彈框的設計。

一、彈框的分類

彈窗又稱為對話框，是App與用戶進行交互的常見方式之一。使用彈框可以減少用戶功能流程的頁面跳轉，當功能比較少的時候盡量使用彈框，但是如果功能選項中包括很多描述文字的時候，還是單獨設置成跳轉頁面會更好。

彈窗分為模态彈窗和非模态彈窗兩種，區分這兩種彈框隻需要記清楚一點，那就是到底需不需要用戶對這個彈框進行相關操作，需要操作的就是模态彈框，不需要操作的就是非模态彈框。

模态彈框往往會直接打斷用戶的操作，當出現模态彈框的時候，用戶必須對其進行操作，否則無法進行其他操作，也就是說模态彈框往往是提示用戶一些重要消息的。

但是非模态彈框往往不會影響用戶的正常操作，用戶不用對其有任何操作也會自動消失，因為非模态彈框通常都有時間限制，出現一段時間之後就會自動消失。從而也能夠看出來非模态彈框隻是用來通知用戶一些不太重要的消息的，單純地通知用戶，并不需要任何操作。

二、模态彈框

1. Dialog對話框

Dialog對話框是一種模态彈窗。當用戶進行了敏感操作，或者當App發生了較為嚴重性的狀态改變時，這種操作和改變會帶來影響性比較大的結果，就會出現Dialog對話框來提示用戶進行确認或選擇。比如退出App、進行付費下載等功能操作。

Dialog 對話框是由标題、信息内容和功能按鈕組成，如下圖，Dialog對話框隻有當用戶點擊了某個功能按鈕後彈窗才會消失，App随即執行該功能操作，進入相應的功能流程。

由于Dialog 對話框提示的都是比較重要的一些操作或者提醒，所以在設計的時候一定要簡潔、無異義，讓用戶一眼就能看到我接下來的操作會帶來什麼樣的影響或者後果。所以實際上大多數Dialog對話框都被設計成了沒有标題的形式，這樣的設計可以減少用戶的理解成本。

2. Actionbar功能框

Actionbar功能框可以看成是Dialog對話框的一種延伸設計，兩者都是模态彈窗，用戶必須進行回應，否則彈窗不會消失，用戶無法繼續其它操作。

Actoinbar和Dialog的區别在于Dialog往往隻會提供一個或兩個功能選項，但是Actoinbar往往會給用戶展示多個功能按鈕選擇，提供給用戶更多的功能選擇。而且Actionbar功能框還有一個特性，就是在彈框底部會存在一個固定的“取消”按鈕，點擊取消按鈕可直接關閉彈框。

對于Actionbar功能框而言還有一種展示形式，那就是當功能按鈕很多的時候，全部用文字列表的形式展示不太清楚，那就可以采用文字 圖标的形式來展示，這樣能展示的内容會更多，而且給到用戶的體驗感會更好。但是這種形式就需要對功能按鈕進行合理的UI設計和排列布局，符合用戶的視覺體驗。

三、非模态彈框

1. Toast 提示框

Toast提示框是一種非模态彈窗，往往會彈出一個提示框，作為提醒或消息反饋來用，一般用來顯示操作結果，或者應用狀态的改變。這個提示框往往會保存兩三秒就消失了。

例如你保存了一篇文章，App彈出一個Toast提示你消息已保存。

Toast 提示框往往也會在刷新界面時展現，比如微博動态刷新成功時，會有提示刷新成功提示框，這樣的設計會給用戶一種耳目一新的感覺，同時也不會感覺到這個彈框跟這個界面産生任何違和感。

2. Snackbar 提示對話框

Snackbar 提示對話框比較有意思的一點就是它同時融合了模态彈框和非模态彈框的一些特點，它除了去告知用戶一些信息的同時，還能跟用戶産生交互，也就是需要用戶簡單的操作。

比如下圖中收藏時會底部有會有彈框出現，同時在彈框中會出現功能按鈕，可以點擊操作，同時用戶如果不做任何操作，這條彈框也會在顯示三秒後自動消失。

3. Snackbar 提示對話框與toast提示框的區别

四、總結

在進行彈框設計時一定要謹慎，因為并不是所有的彈框設計都會被用戶接受，在使用彈窗的同時一定要考慮清楚彈框内容的重要性以及設計彈框的目的，根據這兩點來判斷我們是否需要使用彈框以及該使用哪種形式的彈框。而且彈框盡量少用，一定要避免一個接一個的彈框，這樣會引起用戶的反感。

總之作為産品經理在滿足用戶功能使用的同時一定要考慮用戶的體驗，結合多個案例去設計自己的産品。

此文僅代表個人看法，歡迎大家交流讨論~

本文由 @一起聊産品 原創發布于人人都是産品經理。未經許可，禁止轉載

題圖來自Unsplash，基于CC0協議

,