旗下產業(yè): A產業(yè)/?A實習/?A計劃
全國統(tǒng)一咨詢熱線:010-5367 2995
首頁 > 熱門文章 > UI設計 > UI設計中彈窗設計指南

UI設計中彈窗設計指南

時間:2020-10-26來源:m.5wd995.cn點擊量:作者:Gella
時間:2020-10-26點擊量:作者:Gella

 

  相信很多小伙伴們在日常使用APP的時候經常會彈出一個小窗口,比如:軟件版本更新、逛商城彈出優(yōu)惠券、簽到等等。那么大家對彈窗了解嗎?今天AAA教育胡老師就和大家聊聊彈窗那些事兒。
 

UI設計中彈窗設計指南
 

  彈窗的官方定義中斷用戶當前操作并對其作出補充,或中斷用戶當前操作并對其作出反饋。彈窗又稱為對話框,是App與用戶進行交互的常見方式之一。
 

  彈窗在交互中一般分為兩種形式:模態(tài)彈窗與非模態(tài)彈窗
 

  模態(tài)彈窗——模態(tài)彈窗會打斷用戶的正常操作,要求用戶必須對其進行回應,否則不能繼續(xù)其它操作;非模態(tài)彈窗則不會影響用戶的操作,用戶可以不對其進行回應,非模態(tài)彈窗通常都有時間限制,出現(xiàn)一段時間后就會自動消失。
 

  非模態(tài)彈窗——非模態(tài)彈窗一般被設計成用來告訴用戶信息內容,而模態(tài)彈窗除了告訴用戶信息內容外還需要用戶進行功能操作。
 

  兩者的區(qū)別就是在于需不需要用戶對其進行回應。
 

  模態(tài)彈窗的優(yōu)點
 

  蘋果的設計規(guī)范中對模態(tài)的定義是:幫助人們專注于一個獨立的任務或一組緊密相關的選項,確保人們收到關鍵信息,并在必要時采取行動。
 

  因為模態(tài)彈框的這些特點,很多情況下使用非常有效。首先,因為處于獨占模式,彈框能夠迅速抓住用戶的注意力;其次,層級清晰,半透明遮罩能讓用戶感覺自己沒有離開原頁面,清楚當前在哪里,接下來要做什么;其次在當前頁面彈出可以避免二次頁面加載和跳轉,能夠快速向用戶展示信息。
 

UI設計中彈窗設計指南
 

  模態(tài)彈窗缺點
 

  任何事物都是有兩面性的,正是因為模態(tài)彈窗有這樣那樣的優(yōu)點,所以,一旦使用不恰當將對用戶體驗造成很大的影響。
 

  1. 模態(tài)彈窗打斷了用戶的基本操作。
 

  好的用戶體驗會在用戶沒有察覺的情況下引導用戶進行完成目標。但是模態(tài)彈窗就恰恰相反,用戶需要主動去處理彈窗,否者就會影響下面的操作。
 

  2. 模態(tài)彈窗可能會屏蔽內容的上下文。
 

  移動端屏幕尺寸有限,雖然停留在當前頁面,但彈窗也占據(jù)了頁面很大一塊主要部分,而突然出現(xiàn)的彈窗可能讓用戶忘記了剛才的內容,唄遮擋的信息也可能正好與彈窗內容有很強的關聯(lián)性。
 

UI設計中彈窗設計指南

 

  彈窗設計原則
 

  彈窗按照功能可以分為:系統(tǒng)提示、操作反饋、用戶引導、信息輸入、廣告通知等。不同的彈窗類型適合不同的設計方法,對用戶的作用也相差甚遠。設計師工作中需要根據(jù)目的和場景選擇合適的類型。
 

  有些APP特別喜歡用彈窗,但當彈窗頻繁出現(xiàn)時,過多的打斷用戶的操作可能會引起用戶煩躁并習慣性的關閉,而被完全忽略。如果當真出現(xiàn)緊急情況需要用戶交互或者反饋時就可能出現(xiàn)一些意外。
 

  并不是所有的彈窗設計都會被用戶接受,特別是廣告類彈窗常常會被用戶所厭惡。我們在使用彈窗的時候要盡量克制,要考慮信息內容的必要性和目的性(商業(yè)推廣或者增值服務等目的),來選擇是否使用彈窗和使用哪種方式和樣式的彈窗。一旦選擇使用彈窗,請盡量少用,一般情況下都把彈窗的層級控制在只有一級(即關閉了一個彈窗后不會馬上出現(xiàn)新的彈窗),接連不斷的出現(xiàn)彈窗只會增加用戶想要卸載App的欲望。

預約申請免費試聽課

填寫下面表單即可預約申請免費試聽!怕錢不夠?可先就業(yè)掙錢后再付學費! 怕學不會?助教全程陪讀,隨時解惑!擔心就業(yè)?一地學習,可推薦就業(yè)!

?2007-2021/北京漫動者教育科技有限公司版權所有
備案號:京ICP備12034770號

?2007-2022/ m.5wd995.cn 北京漫動者數(shù)字科技有限公司 備案號: 京ICP備12034770號 監(jiān)督電話:010-53672995 郵箱:bjaaa@aaaedu.cc

京公網(wǎng)安備 11010802035704號

網(wǎng)站地圖