UI彈窗設計歸類小結

UI彈窗設計歸類小結

UI彈窗設計歸類小結,觀點,TC_IFX,原創文章站酷網,中國設計師互動平台。

彈窗的定義

彈窗是中斷用戶當前操作並對其作出補充,或中斷用戶當前操作並對其作出反饋。

(官方定義如上,其實就是在我們日常生活中,瀏覽頁面時,看到“點擊領取好禮”“版本更新”“體驗金到手了,確定不要了嗎”等等)

彈窗的分類

彈窗在交互中一般分為兩種形式:模態彈窗與非模態彈窗

模態彈窗——用於強提醒,可以獲取用戶的視覺焦點。就像剛提到的“點擊領取好禮” “版本更新”,具有一定的強制性,打擾性,需要你點擊或者關閉。常規用於「對話框」「表單彈窗」「項目選擇彈窗」「複雜信息展示」等。

非模態彈窗——與模態彈窗相反,它的優點是更加溫和,不會打擾到用戶;缺點是展示時間短,不適合展示重要信息,承載常見的系統彈窗,常規用於「系統通知」「全局提示」「警告提示」「氣泡卡片」「文字提示」等。

1、功能類彈窗| Actionbar

這類彈窗交互形式,通常由底部彈出,主要分為Action Views和Action Sheets。

優點:可以讓用戶清楚的感知當前的操作,比跳轉到新頁面更加有安全感。

2、版本更新| Dialog(Alerts)

版本升級彈窗,增加情感化設計,讓升級功能變得更有“溫度”。弱化告知按鈕,強化引導「立即更新」的動作按鈕。


3、重要提示/信息二次確認| Dialog(Alerts)

活動參與過程中,引導用戶去完成活動路徑,告知用戶相關信息,通過按鈕去強化引導。

4、運營活動彈窗| Dialog(Alerts)

這類彈窗日常工作中接觸最多,常見於運營活動,包括領劵,激活,參與活動等動作,主要吸引用戶點擊進入這個動作,用於拉新或者活動引導轉化。在頁面設計上,需要更多考慮畫面設計感,造型多樣化,第一眼吸引人眼球。根據運營目的突出活動優勢,強化按鈕或相關數字。

5、快捷導航/彈出式氣泡| Popover

這類彈窗,常常會讓人誤以為是“toast”,而popover屬於模態彈窗的一種。

彈出式氣泡——點擊某控件或區域彈出Popover後,Popover出現在使其觸發的控件附近,箭頭的指向可以引導用戶的注意力,而且把手指或鼠標指針從觸發控件移動到Popover的距離很近,操作非常順手、效率高。

快捷導航——將多個快捷功能入口收納到Popover中,通過“更多”、“加號”圖標觸發Popover,是國內主流App常見的做法。

6、ToastHUD

Toast提示框是一種非模態彈窗,它彈出一個小信息,作為提醒或消息反饋。一般用來顯示操作結果,或者應用狀態的改變。常見的toast狀態如下:

7、消息通知模塊——Snackbar

Snackbar和toast比較相似,比較相似,通常用於低干擾度的消息提示。該消息可被忽略且不會打斷用戶當前的操作。但相對Toast 而言,Snackbar 的優勢在於可讀性更強,還可以兼容1-2 個次要操作,適用場景會更加廣泛,比Toast 好用太多了。

最後:

使用彈窗要克制,並不是所有的彈窗設計都會被用戶接受,特別是廣告類彈窗常常會被用戶所厭惡,使用時要考慮信息內容的必要性和目的性(商業推廣或者增值服務等目的),溝通確定其內容的重要程度,再選擇使用最優樣式的彈窗設計。

Category

GogoShark 給你最好的網頁設計

無論您的事業才剛起步、漸上軌道,或計劃向大中華區拓展市場,GogoShark 團隊將提供全方位的服務,為您量身打造數位品牌形象。