UI設計-彈出窗口怎么做？

時間：2023-07-22 12:42:02 | 來源：網(wǎng)站運營

時間：2023-07-22 12:42:02 來源：網(wǎng)站運營

UI設計-彈出窗口怎么做？：#杭州UI培訓#優(yōu)途UI教育

前言

彈出窗口我們經(jīng)?？吹?，但彈出窗口有哪些類型，設計時應該注意什么呢？就很多UI設計師不清楚了，今天和大家分享UI設計彈出窗口類型。

彈窗的分類

一般根據(jù)是否打斷用戶操作，把彈窗分類為模態(tài)彈窗（重提示）、非模態(tài)彈窗（輕提示）

模態(tài)彈窗：打斷用戶的操作行為，用戶必須對彈窗進行操作，否則不能進行其他操作。

優(yōu)點：可以很好的獲取用戶的視覺焦點。

缺點：就是會導致用戶當前的操作流程中斷。

非模態(tài)彈窗

不會限制用戶操作，通常會有時間限制，出現(xiàn)幾秒會自動消失

優(yōu)點：不會打斷用戶操作

缺點：容易被用戶忽略

我們常見的類型有信息選擇確定運營活動信息輸入選擇這幾種類型的。

信息選擇確定又分為四種

第一種：系統(tǒng)功能授權，如百度地圖，它上面就彈出“是否允許訪問麥克風”，還有網(wǎng)上廚房“是否允許訪問位置”的彈窗，這里的話就是系統(tǒng)自帶的授權彈窗。

第二種：版本更新，升級的彈窗通常會弱化不升級的按鈕，突出升級的按鈕，像案例展示的有兩個，大家可以看一看，像升級的話顏色做的比較亮一些，這個按鈕不升級的話就是比較弱化，權重沒有那么高。

第三種：消息通知彈窗，像高德地圖與和餓了么的消息提醒彈窗都屬于，后期APP為了推送消息，主動提示你開啟某些消息的一個通知。

第四種：重要提示/信息的二次確認，同程汽車購票的這個彈窗屬于消息提示，告知用戶相關信息，百度網(wǎng)盤的彈窗屬于信息確認，詢問用戶選擇哪種方式下載。

第五運營彈窗，通常是一些活動廣告領優(yōu)惠券等，它主要吸引用戶去點擊參加一些活動，像這類彈窗的話在視覺設計上是比較吸引人的，它的顏色都是比較豐富一些的，造型很多樣，它會根據(jù)運營的內(nèi)容，突出“領取、參與、查看”等一些按鈕強化，弱化關閉按鈕，案例是連續(xù)簽到領取紅包，像“馬上參與”按鈕是比較強化的，顏色比較鮮亮，但它的關閉按鈕下面的一個叉號的話是比較灰色的，就比較不明顯。

一個618的活動，20元無門檻券，它下面“點擊速搶”按鈕就做的比較大，讓客戶一眼就看到了。

第六：信息輸入，像這類彈窗的話，通常是一些比較簡單的信息選擇或者內(nèi)容填寫，通常只有確定和取消兩個按鈕，像微博對于關注的人，分組及備注，操作簡單，設置備注是直接調(diào)出鍵盤即可輸入方便快捷。

第七：浮層，一般是指用戶點擊某個浮層就會出現(xiàn)一個臨時的氣泡，對其功能進行一些補充，用戶需要點擊功能區(qū)域操作或者點擊空白處取消才能進入下一步操作。

浮層的話分為指向浮層，像這類浮層的話，一般是伴隨有個小三角指向，有強調(diào)歸屬氣泡，里面的功能通常是以單一的文字或文字加圖片的形式來結合，大家可以看一下下圖，支付寶和微信的頂部加號補充浮層，展現(xiàn)形式差不多，只是UI形式不一樣，支付寶是白色氣泡黑色半透明遮罩，微信是深灰色的氣泡。

最右邊那張圖片的話，在復制文字很常見，比如說我們復制一些文字的時候會出現(xiàn)一個彈窗，就是一個拷貝查詢之類的。




以上就是分享的就是彈窗類型，希望對大家有幫助，優(yōu)途UI教育專注互聯(lián)網(wǎng)高端UI培訓。