起點課堂會員權益
職業體系課特權
線下行業大會特權
個人IP打造特權
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業技能直播
會員專屬社群
榮耀標識做了這么多項目，才知道「模態彈窗」是這么用的！
編輯導語：彈窗是產品將信息傳遞給用戶的形式之一，那么，你知道模態彈窗應當在什么情況下使用嗎？這需要設計師對模態這一概念有清楚的理解和體驗。本篇文章里，作者對模態的定義、以及模態彈窗的應用等方面做了解讀，不妨來看一下。
最近在項目評審當中偶然發現很多設計師喜歡把一些重要的信息通過彈窗的形式傳達給用戶，也說不出設計根據是什么，完全靠著自己的設計直覺在使用模態手法。但是這種一知半解的設計直覺到底對不對，模態設計形式到底是為了阻斷用戶任務而存在，還是其他目的，今天我們來聊一聊。
一、「彈窗」是個野生概念
不知道各位設計師日常工作中跟別人交流時是否會用「彈窗」與其他崗位同事去交流，其實本質上「彈窗」是對產品當中彈出信息的籠統叫法，是一種形而上學的概念。在各大設計語言當中找不到對于「彈窗」這個概念的定義，「popover-氣泡卡片」、「alerts-報警對話框」、「action sheets-動作菜單」等一些組件樣式在日常工作中都會被大家叫成「彈窗」。
二、「模態」的交互概念
1. 來自iOS的定義
「模態」是一種設計手法，它以臨時出現的形式顯示內容，需要明確的操作才能退出，其主要目的有二：
- 幫助用戶專注于一個獨立任務或一組相關選項。
- 確保用戶接收到重要信息，并在必要時確保操作正確。
2. 來自Fluent的定義
「模態」是暫時的彈出窗口，它將用戶的焦點從當前任務中離開，并強制用戶與彈出窗口內信息進行互動。
3. 合理的定義
「模態」是強制用戶完成某種任務的交互設計技巧，其承載的外觀形式可以是「popover氣泡卡片」、「alerts報警對話框」、「action sheets動作菜單」一些組件。
需要注意是「模態」的目的是讓你用戶聚焦當前信息，而不是阻斷或者中斷當前任務。
三、「模態窗口」的交互概念
系統通過創建一個子窗口來禁用主窗口，目的讓用戶聚焦子窗口信息，同時必須與子窗口進行交互，才能返回到父級應用程序的一種交互模式。
特別注意：
- 在用戶界面設計中，模態窗口是從屬于應用程序主窗口的。
- 是否有燈箱效果，是否出現在屏幕中心等一切條件都是外在形式，與其是不是「模態窗口」并無直接關系。
四、「模態窗口」的作用范圍
根據上文「模態窗口」具有從屬關系的原因，直接造成它也有起作用的范圍。由于移動端APP都是單線程應用，造成現在很多初級設計師下意識的以為「模態窗口」就是全局起作用，如果做過桌面端產品的話就會很清楚地明白「模態窗口」只針對他父級應用的主窗口起作用，只有系統級別的「模態窗口」才會去全局起作用。
五、「模態窗口」的設計注意點
至此，同學們應該對何時使用「模態窗口」有了一個大致的了解，剩下的問題是“我們該如何設計它？”
1. 盡量減少使用模態
哈哈哈！「模態窗口」使用注意點第一條就是盡量減少使用模態。因為通常人們更喜歡以非線性方式與產品進行交互。僅當需要引起用戶“特別注意”、“必須完成”、“放棄任務”等一些重要場景時才使用「模態窗口」。
2. 顯示關閉按鈕
在窗口頂部始終顯示關閉按鈕（或“取消”/“放棄”/“最小化”/…）。當用戶迷路時，可以輕松關閉「模態窗口」并回父級應用程序的主窗口當中繼續當前任務。
3. 留下報警說明與解決方式
當「模態窗口」屬于報警類型時，需要在窗口信息中留下“為什么會造成報警的原因”以及“如何解除報警的方法”，同時提供的信息要讓用戶易于理解，這樣才不會一而再再而三地惹惱用戶。
4. 保持模態任務簡單、簡短和專注
1）盡量讓「模態窗口」的任務簡捷。
2）用戶可能會在操作模態信息時忽略他們暫停的任務，所以在視覺設計上，要將「模態窗口」與「主窗口」做出層次結構，例如用燈箱效果。
3）如果任務太復雜，全屏模態體驗可以最大限度地讓用戶減少干擾，盡可能快速完成模態任務。
5. 禁止「模態窗口」疊加
1）一次「模態窗口」已經破壞用戶了當前任務操作流程，如果多次疊加容易造成用戶對任務信息的錯亂，甚至迷失在「模態窗口」當中。
2）從開發角度來看，「模態窗口」疊加造成維護成本高，兼容性變差。
六、文末小結
在我看來，「模態」的概念是當今產品設計中最被忽視的用戶體驗原則之一，由于移動互聯網的興起，很多設計師入行就做移動端，造成對「模態」對概念一知半解。全面了解「模態」的含義，并且選擇合適的場景去使用它是作為設計師的必修課之一。
#專欄作家#
月亮與六便士，公眾號：月亮體驗設計坊，人人都是產品經理專欄作家。前大廠用戶體驗設計師，擅長交互原理闡述、作品集指導、設計趨勢風格、求職經驗分享等。
本文原創發布于人人都是產品經理，未經作者許可，禁止轉載。
題圖來Unsplash，基于CC0協議。
- 目前還沒評論，等你發揮！
