APP彈窗的分類及設計技巧

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

什么是彈窗?

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

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

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

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

1. Dialog(Alerts)

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

(圖片來自網絡)

2. Actionbar(Action Sheets、Acitivity Views)

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

(圖片來自網絡)
(圖片來自網絡)

3. Popover

用戶單擊某個控件或頁面某個區(qū)域后出現的臨時復層,通??梢栽俅坞[藏。優(yōu)勢在于用戶操作時頁面邏輯清晰,當前頁面因隱藏多項低頻操作使得界面簡潔。

(圖片來自網絡)

4. Toast/HUD

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

(圖片來自網絡)
(圖片來自網絡)

5. Snackbar

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

(圖片來自網絡)


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

【視覺方面】

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

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

2. 設計風格盡量簡約

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

比如,微博Toast彈窗就根據微博整體風格進行設計。

4. 可進行誘導性設計

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

5. 危險操作需警示

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

【交互方面】

1. 彈窗的出現盡量不干擾用戶使用

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

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

4. 注意彈窗頻率

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

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
【社區(qū)內容提示】社區(qū)部分內容疑似由AI輔助生成,瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發(fā)布,文章內容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

相關閱讀更多精彩內容

友情鏈接更多精彩內容