最近在項(xiàng)目評審當(dāng)中偶然發(fā)現(xiàn)很多設(shè)計師喜歡把一些重要的信息通過彈窗的形式傳達(dá)給用戶，也說不出設(shè)計根據(jù)是什么，完全靠著自己的設(shè)計直覺在使用模態(tài)手法。但是這種一知半解的設(shè)計直覺到底對不對，模態(tài)設(shè)計形式到底是為了阻斷用戶任務(wù)而存在，還是其他目的，今天我們來聊一聊。

01 「彈窗」是個野生概念

不知道各位設(shè)計師日常工作中跟別人交流時是否會用「彈窗」與其他崗位同事去交流，其實(shí)本質(zhì)上「彈窗」是對產(chǎn)品當(dāng)中彈出信息的籠統(tǒng)叫法，是一種形而上學(xué)的概念。在各大設(shè)計語言當(dāng)中找不到對于「彈窗」這個概念的定義，「popover-氣泡卡片」、「alerts-報警對話框」、「action sheets-動作菜單」等一些組件樣式在日常工作中都會被大家叫成「彈窗」。

02 「模態(tài)」的交互概念

來自iOS的定義：

「模態(tài)」是一種設(shè)計手法，它以臨時出現(xiàn)的形式顯示內(nèi)容，需要明確的操作才能退出，其主要目的有二：

1、幫助用戶專注于一個獨(dú)立任務(wù)或一組相關(guān)選項(xiàng)。

2、確保用戶接收到重要信息，并在必要時確保操作正確。

來自Fluent的定義：

「模態(tài)」是暫時的彈出窗口，它將用戶的焦點(diǎn)從當(dāng)前任務(wù)中離開，并強(qiáng)制用戶與彈出窗口內(nèi)信息進(jìn)行互動。

合理的定義：

「模態(tài)」是強(qiáng)制用戶完成某種任務(wù)的交互設(shè)計技巧，其承載的外觀形式可以是「popover氣泡卡片」、「alerts報警對話框」、「action sheets動作菜單」一些組件。

需要注意是「模態(tài)」的目的是讓你用戶聚焦當(dāng)前信息，而不是阻斷或者中斷當(dāng)前任務(wù)。

03「模態(tài)窗口」的交互概念

系統(tǒng)通過創(chuàng)建一個子窗口來禁用主窗口，目的讓用戶聚焦子窗口信息，同時必須與子窗口進(jìn)行交互，才能返回到父級應(yīng)用程序的一種交互模式。

特別注意：

1、在用戶界面設(shè)計中，模態(tài)窗口是從屬于應(yīng)用程序主窗口的。

2、是否有燈箱效果，是否出現(xiàn)在屏幕中心等一切條件都是外在形式，與其是不是「模態(tài)窗口」并無直接關(guān)系。

04「模態(tài)窗口」的作用范圍

根據(jù)上文「模態(tài)窗口」具有從屬關(guān)系的原因，直接造成它也有起作用的范圍。由于移動端app都是單線程應(yīng)用，造成現(xiàn)在很多初級設(shè)計師下意識的以為「模態(tài)窗口」就是全局起作用，如果做過桌面端產(chǎn)品的話就會很清楚的明白「模態(tài)窗口」只針對他父級應(yīng)用的主窗口起作用，只有系統(tǒng)級別的「模態(tài)窗口」才會去全局起作用。

05「模態(tài)窗口」的設(shè)計注意點(diǎn)

至此，同學(xué)們應(yīng)該對何時使用「模態(tài)窗口」有了一個大致的了解，剩下的問題是“我們該如何設(shè)計它？”

盡量減少使用模態(tài)

哈哈哈！「模態(tài)窗口」使用注意點(diǎn)第一條就是盡量減少使用模態(tài)。因?yàn)橥ǔＨ藗兏矚g以非線性方式與產(chǎn)品進(jìn)行交互。僅當(dāng)需要引起用戶“特別注意”、“必須完成”、“放棄任務(wù)”等一些重要場景時才使用「模態(tài)窗口」。

顯示關(guān)閉按鈕

在窗口頂部始終顯示關(guān)閉按鈕（或“取消”/“放棄”/“最小化”/...）。當(dāng)用戶迷路時，可以輕松關(guān)閉「模態(tài)窗口」并回父級應(yīng)用程序的主窗口當(dāng)中繼續(xù)當(dāng)前任務(wù)。

留下報警說明與解決方式

當(dāng)「模態(tài)窗口」屬于報警類型時，需要在窗口信息中留下“為什么會造成報警的原因”以及“如何解除報警的方法”，同時提供的信息要讓用戶易于理解，這樣才不會一而再再而三的惹惱用戶。

保持模態(tài)任務(wù)簡單、簡短和專注

1、盡量讓「模態(tài)窗口」的任務(wù)簡捷。

2、用戶可能會在操作模態(tài)信息時忽略他們暫停的任務(wù)，所以在視覺設(shè)計上，要將「模態(tài)窗口」與「主窗口」做出層次結(jié)構(gòu)，例如用燈箱效果。

3、如果任務(wù)太復(fù)雜，全屏模態(tài)體驗(yàn)可以最大限度地讓用戶減少干擾，盡可能快速完成模態(tài)任務(wù)。

禁止「模態(tài)窗口」疊加

1、一次「模態(tài)窗口」已經(jīng)破壞用戶了當(dāng)前任務(wù)操作流程，如果多次疊加容易造成用戶對任務(wù)信息的錯亂，甚至迷失在「模態(tài)窗口」當(dāng)中。

2、從開發(fā)角度來看，「模態(tài)窗口」疊加造成維護(hù)成本高，兼容性變差。

06 文末小結(jié)

在我看來，「模態(tài)」的概念是當(dāng)今產(chǎn)品設(shè)計中最被忽視的用戶體驗(yàn)原則之一，由于移動互聯(lián)網(wǎng)的興起，很多設(shè)計師入行就做移動端，造成對「模態(tài)」對概念一知半解。全面了解「模態(tài)」的含義，并且選擇合適的場景去使用它是作為設(shè)計師的必修課之一。

如果你喜歡這篇文章，歡迎關(guān)注上面的公眾號

最后歡迎有問題的小伙伴加微信：yw5201a1?溝通交流。

更多干貨可關(guān)注微信公眾號：產(chǎn)品劉

··················END··················

今日研報：貝殼研究院發(fā)布《2021住房消費(fèi)品質(zhì)服務(wù)報告》，公眾號后臺回復(fù)“?電影營銷”，即可下載完整PDF文件。

RECOMMEND

推薦閱讀

HR要我薪資流水，可我多報了怎么辦？

老司機(jī)教你做B端產(chǎn)品經(jīng)理

B端產(chǎn)品經(jīng)理，應(yīng)從哪些方面理解業(yè)務(wù)？

這樣準(zhǔn)備，面試成功率提升30%

點(diǎn)擊“閱讀原文”

查看更多干貨

總結(jié)

以上是生活随笔為你收集整理的做了这么多项目才知道「模态弹窗」是这么用的的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。