做了這么多項(xiàng)目,才知道「模態(tài)彈窗」是這么用的!

0 評(píng)論 11965 瀏覽 21 收藏 9 分鐘

編輯導(dǎo)語:彈窗是產(chǎn)品將信息傳遞給用戶的形式之一,那么,你知道模態(tài)彈窗應(yīng)當(dāng)在什么情況下使用嗎?這需要設(shè)計(jì)師對(duì)模態(tài)這一概念有清楚的理解和體驗(yàn)。本篇文章里,作者對(duì)模態(tài)的定義、以及模態(tài)彈窗的應(yīng)用等方面做了解讀,不妨來看一下。

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

一、「彈窗」是個(gè)野生概念

做了這么多項(xiàng)目才知道「模態(tài)彈窗」是這么用的

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

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

做了這么多項(xiàng)目才知道「模態(tài)彈窗」是這么用的

1. 來自iOS的定義

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

  1. 幫助用戶專注于一個(gè)獨(dú)立任務(wù)或一組相關(guān)選項(xiàng)。
  2. 確保用戶接收到重要信息,并在必要時(shí)確保操作正確。

2. 來自Fluent的定義

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

3. 合理的定義

做了這么多項(xiàng)目才知道「模態(tài)彈窗」是這么用的

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

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

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

做了這么多項(xiàng)目才知道「模態(tài)彈窗」是這么用的

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

特別注意:

  1. 在用戶界面設(shè)計(jì)中,模態(tài)窗口是從屬于應(yīng)用程序主窗口的。
  2. 是否有燈箱效果,是否出現(xiàn)在屏幕中心等一切條件都是外在形式,與其是不是「模態(tài)窗口」并無直接關(guān)系。

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

做了這么多項(xiàng)目才知道「模態(tài)彈窗」是這么用的

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

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

至此,同學(xué)們應(yīng)該對(duì)何時(shí)使用「模態(tài)窗口」有了一個(gè)大致的了解,剩下的問題是“我們?cè)撊绾卧O(shè)計(jì)它?”

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

做了這么多項(xiàng)目才知道「模態(tài)彈窗」是這么用的

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

2. 顯示關(guān)閉按鈕

做了這么多項(xiàng)目才知道「模態(tài)彈窗」是這么用的

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

3. 留下報(bào)警說明與解決方式

做了這么多項(xiàng)目才知道「模態(tài)彈窗」是這么用的

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

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

做了這么多項(xiàng)目才知道「模態(tài)彈窗」是這么用的

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

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

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

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

做了這么多項(xiàng)目才知道「模態(tài)彈窗」是這么用的

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

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

六、文末小結(jié)

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

#專欄作家#

月亮與六便士,公眾號(hào):月亮體驗(yàn)設(shè)計(jì)坊,人人都是產(chǎn)品經(jīng)理專欄作家。前大廠用戶體驗(yàn)設(shè)計(jì)師,擅長交互原理闡述、作品集指導(dǎo)、設(shè)計(jì)趨勢風(fēng)格、求職經(jīng)驗(yàn)分享等。

本文原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理,未經(jīng)作者許可,禁止轉(zhuǎn)載。

題圖來Unsplash,基于CC0協(xié)議。

更多精彩內(nèi)容,請(qǐng)關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號(hào)或下載App
評(píng)論
評(píng)論請(qǐng)登錄
  1. 目前還沒評(píng)論,等你發(fā)揮!