前言：在日常工作中，有很多看似平凡的小細節，常被大家忽視，卻影響著用戶的真實體驗。 今天我們就來聊聊容易被設計者也容易被用戶忽略的小細節——非模態彈框。

目錄：

1.什么是非模態彈框

在解釋什么是非模態彈框之前，先解釋一下什么是彈框。彈框是產品與用戶互動過程中，產品回應用戶的窗戶。它的模樣可謂是千變萬化，但萬變不離其宗。在交互形式上它分為兩種形式，模態彈窗和非模態彈窗。

模態彈框是指在向用戶傳遞信息的同時，還需要用戶操作的彈框。而非模態彈框一般被設計來向用戶傳遞信息的，不需要用戶操作或者操不操作都不影響其他流程。它是一種輕量級的反饋機制。有hud/toast/snackbar/Noticebar四類? 。

2.分類以及應用場景

下面我們來具體聊聊這四類非模態彈框以及它們的應用場景

1.hud(透明指示層)是iOS系統的一種提示（調節音量時出現的那個提示就是hud），是iOS系統私有的，第三方APP無法直接使用，因此出現了各種模仿它的第三方控件，例如MBProgressHUD、SVProgressHUD，從此以后HUD就成了IOS開發者里達成共識的半官方語言。

2.toast原本安卓系統的控件。優先用于系統提示且有很多規范（比如只能出現在底部，不能帶圖標）。不過現在iOS中也在使用，并且形式多樣化?

3.snackbar也是安卓系統的控件。它可以被理解為是加強版的toast。樣式與規則與toast非常像，但也有不同點，snackbar支持主動關閉?

4.Noticebar通常位于導航欄下方，一般用作系統提醒、活動提醒等通知。重要級別低于Modal高于 Toast。支付寶螞蟻會員以及今日頭條中消息通知都是Noticebar。

3.設計原則

1.在需要用戶等待的場景下，提供小動效，如菊花。為什么呢？一方面是為了緩解用戶等待的焦躁感，另一方是為了跟用戶產生互動，讓用戶知道已經在加載，而不是被卡住了。

2..文案簡潔明了。意思簡單明確就好，不要為了標新立異，去用一些非主流的詞，一旦讓用戶去想這是什么意思，就是失敗。本來出現的時間就短，一旦用戶短暫卡住，可能就看不完全部內容，從而不知道整體的意思。

4.優缺點

雖然說交互形式本身沒有好壞，主要看是否適合自己的產品需求。但是交互形式也是有優缺點的，只有在清楚這些優缺點的情況下，才能更好的做出選擇，讓形式更好的服務內容。

非模態彈框的優點:

對頁面的遮擋比較少，不會對用戶當前的操作產生很大的干擾；

相對獨立，完全不影響頁面布局；

給用戶的操作做出反饋，緩解用戶的焦慮感。

非模態彈框的缺點：

占據位置小，容易讓用戶忽略；

雖然是非模態的，但也會打斷用戶心流；

出現時間短，且用戶又不能對非模態彈框進行控制，容易讓用戶產生失控感；

注意事項

凡事要適可而止，非模態彈框雖然是弱提示，但也要適可而止，不要不停的彈。在這里就不得不提某金融APP，可能是為了刻意表現用戶量，不停的彈彈框，誰誰誰成功借了多少錢，過度會造成用戶的反感。

5.特殊案例以及商業變現

特殊案例

1.也有一些特殊情況，它們屬于非模態彈框的變體又或者說是非模態彈框的妙用。

例如愛奇藝中想要引導用戶對正在追的劇進行收藏，會在用戶打開愛奇藝時，出現一個浮層動效，提示用戶“長按試試”。當然用戶按不按都不會對其他流程產生影響。這種的其實也屬于非模態彈框。?

2.還有有一種特殊案例，非常常見，但很多時候，我們卻不知道該把它歸到哪類交互組件中——消息提示的小紅點。網易云音樂中，個人中心的消息提示，就是通過小紅點提示的。

商業變現

設計不僅要讓用戶感覺好，還要讓公司有利可圖。這就要求設計者從公司戰略角度去思考問題，在滿足公司需求的基礎上，讓用戶覺得易用、好用。“不動聲色”就能實現商業變現，是最好不過的了。

網易考拉中，在購物車環節，利用非模態彈框，推廣產品的會員。美圖秀秀屬于工具類產品，本身不具盈利屬性，那么如何利用自身流量去盈利，非模態彈框就是一種很好的形式。在選擇圖片的界面下方，利用非模態彈框打廣告。既實現流量變現的目的，又不會打斷用戶的操作流程，造成用戶的反感。?

6.非模態彈框的替代形式

非模態彈框屬于輕量型反饋，不會打斷用戶當前的操作流程，但也會對用戶造成干擾，而且容易被用戶忽略，所以有的情況下，我們可以用更優的替代方案。

1.多態按鈕

此外多態按鈕的使用也可以幫助我們解放彈框的壓力。例如，支付寶的支付界面，立即支付按鈕可以跳轉到付款成功的狀態，這時候就沒有必要再用彈框給用戶提示了。

2.當前頁面展開疊起

有的時候，我們也可以用展開疊起的方式代替彈框。例如百度地圖在展示具體線路圖時，

就是通過展開疊起，這樣也不會打斷用戶操作流程。?

3.頁面內提示

這種提示可以常駐在頁面里，即使用戶短時間內注意力轉移，提示也不會消失，確保用戶能一直完整的看到。此外頁面內提示能容納更多信息量，與頁面本身風格比較契合，沒有阻塞感，適合表單錯誤提示、加載過渡。如小度音箱中填寫表單有誤，直接在內容下方提示；掌上生活中在填寫表單的過程中，沒有收到驗證碼，直接在時間計算器旁邊提示。?

4.動效

有操作就要有反饋，非模態彈框雖然已經是輕量反饋機制，不會打斷用戶的操作流程，但是它畢竟也是屬于彈框。彈框彈多了，會讓用戶產生厭倦感。有時候我們也可以用微動效代替彈框。

例如大佬說中，關注用戶，通過按鈕動效來表示關注成功；京東到家中通過落體動效，模擬真實加購物車效果。

5.震動和聲音

震動和聲音也是一種操作反饋。例如微信的搖一搖，在用戶搖的過程中，通過震動和聲音的反饋，給用戶營造一種物理的真實感。

總結

在強調用戶體驗的今天，一點細微的交互變動，都能帶給用戶不一樣的體驗，甚至關系到用戶的去留。這就要求我們設計者不斷累積，盡善盡美，以一顆匠心打磨自己的產品。