[ 非模態彈框 ] 知多少
前言：
在日常工作中，有很多看似平凡的小細節，常被大家忽視，卻影響著使用者的真實體驗。 今天我們就來聊聊容易被設計者也容易被使用者忽略的小細節——非模態彈框。
目錄：
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.還有有一種特殊案例，非常常見，但很多時候，我們卻不知道該把它歸到哪類互動元件中——訊息提示的小紅點。網易雲音樂中，個人中心的訊息提示，就是通過小紅點提示的。
商業變現
1.網易考拉中，在購物車環節，利用非模態彈框，推廣產品的會員。美圖秀秀屬於工具類產品，本身不具盈利屬性，那麼如何利用自身流量去盈利，非模態彈框就是一種很好的形式。在選擇圖片的介面下方，利用非模態彈框打廣告。既實現流量變現的目的，又不會打斷使用者的操作流程，造成使用者的反感。
6.非模態彈框的替代形式
非模態彈框屬於輕量型反饋，不會打斷使用者當前的操作流程，但也會對使用者造成干擾，而且容易被使用者忽略，所以有的情況下，我們可以用更優的替代方案。
1.多型按鈕
此外多型按鈕的使用也可以幫助我們解放彈框的壓力。例如，支付寶的支付介面，立即支付按鈕可以跳轉到付款成功的狀態，這時候就沒有必要再用彈框給使用者提示了。
2.當前頁面展開疊起
有的時候，我們也可以用展開疊起的方式代替彈框。例如百度地圖在展示具體線路圖時，
就是通過展開疊起，這樣也不會打斷使用者操作流程。
百度地圖——線路圖疊起狀態 百度地圖——線路圖展開狀態
3.頁面內提示
這種提示可以常駐在頁面裡，即使使用者短時間內注意力轉移，提示也不會消失，確保使用者能一直完整的看到。此外頁面內提示能容納更多資訊量，與頁面本身風格比較契合，沒有阻塞感，適合表單錯誤提示、載入過渡。如小度音箱中填寫表單有誤，直接在內容下方提示；掌上生活中在填寫表單的過程中，沒有收到驗證碼，直接在時間計算器旁邊提示。
4.動效
有操作就要有反饋，非模態彈框雖然已經是輕量反饋機制，不會打斷使用者的操作流程，但是它畢竟也是屬於彈框。彈框彈多了，會讓使用者產生厭倦感。有時候我們也可以用微動效代替彈框。
例如大佬說中，關注使用者，通過按鈕動效來表示關注成功；京東到家中通過落體動效，模擬真實加購物車效果。
5.震動和聲音
震動和聲音也是一種操作反饋。例如微信的搖一搖，在使用者搖的過程中，通過震動和聲音的反饋，給使用者營造一種物理的真實感。
總結
在強呼叫戶體驗的今天，一點細微的互動變動，都能帶給使用者不一樣的體驗，甚至關係到使用者的去留。這就要求我們設計者不斷累積，盡善盡美，以一顆匠心打磨自己的產品。