B端設(shè)計｜模態(tài)、非模態(tài)框
2021-12-2 ui設(shè)計分享達(dá)人
最近在整理系統(tǒng)的組件規(guī)范，收集各個場景下的組件應(yīng)用，在搜集應(yīng)用控件時，彈窗的套用、混用、亂用情況挺多的。
主要是模態(tài)框和非模態(tài)框的使用。
模態(tài)框：一般會有一層黑色透明的蒙板，它打斷用戶所屬的主流程，不能進(jìn)行下去，只能到完成模態(tài)框的操作，才能返回到主流程中去，這個操作很明確，不會被誤解；
非模態(tài)框：一般沒有那一層蒙板，不會影響所屬的主流程，也不用擔(dān)心原有進(jìn)度會停止，仍然可以持續(xù)操作。即打開非模態(tài)也能看見底層的主流程。
概述
模態(tài)or 非模態(tài)，統(tǒng)稱為彈窗。樣式上可以理解為類似卡片，能夠幫助用戶快速定位獲取關(guān)鍵信息和進(jìn)行操作，它的內(nèi)容是靈活的，一般情況下包含文字、圖標(biāo)、按鈕。彈窗的設(shè)計是給用戶傳遞與當(dāng)前場景需要的操作相關(guān)的內(nèi)容。
會根據(jù)業(yè)務(wù)的需要、場景要求，衍生出其他類多種形態(tài)。大多情況下先對彈窗分類，再對應(yīng)到場景中使用。而實際上產(chǎn)品設(shè)計會從實際業(yè)務(wù)出發(fā)，從使用方式考慮，倒推來使用什么樣的彈窗符合要求。 遵循基本的界面設(shè)計原則，在多種場景下通過信息分層、字體的粗細(xì)、大小等方式展現(xiàn)出明顯的視覺層次，結(jié)合業(yè)務(wù)場景需要再按照閱讀順序慣例來布局，標(biāo)題使用對象的名字。目的是幫助用戶聚焦每一個關(guān)鍵信息上。
悄無聲息的，你在不在乎它，它都會出現(xiàn)的
全局提示：一般由系統(tǒng)主動發(fā)起，不是用戶請求的，大體分為進(jìn)度提醒、通知提醒、公告提醒 這個是由系統(tǒng)發(fā)起的，表明用戶當(dāng)前所在的操作的進(jìn)程中的位置，抑或是卡在進(jìn)度未操作，無響應(yīng)狀態(tài)，通知用戶。 位置：1·在頁面的頂部浮層顯示一塊區(qū)域，2·統(tǒng)一放置消息分類里
來自系統(tǒng)一些重要的信息推送給用戶，或者是來自其他用戶的提示信息，抑或是操作反饋。 位置：將其放在右上側(cè)，并自動關(guān)閉。
依然是由系統(tǒng)發(fā)起，提醒用戶需要關(guān)注的信息，一般包含系統(tǒng)迭代、系統(tǒng)錯誤、審核通過or不通過、系統(tǒng)維護(hù)提醒等以及其他活動信息。 位置：與進(jìn)度提醒同一位置，一般情況下并會在3S自動消失。 部分功能需要用戶打斷去確認(rèn)操作或是可能會造成比較危險的，不常用的，那么就需要改變用戶操作焦點，將用戶的注意力從原來流程中拎出來，那么這個時候需要一個方式隔離原有流程和需要當(dāng)前操作的內(nèi)容，模態(tài)框就是比較適用的。 疊加在系統(tǒng)窗口的彈出式窗口，彈框以對話的方式讓用戶參與進(jìn)來，以對話的方式與用戶產(chǎn)生交互操作。 對于某個模塊的層級過深的功能操作反饋，需要在提交之后的結(jié)果反饋中提供輔助導(dǎo)航返回到初始功能頁面。
在簡單的業(yè)務(wù)場景中，只需要用戶進(jìn)行確認(rèn)的“確認(rèn)”或“取消”等案例。一般情況下應(yīng)用在對內(nèi)容的提交、修改，在內(nèi)容詳情頁里的刪除操作，表格的批量刪除等 樣式：標(biāo)題（以所屬對象作為標(biāo)題）+文案（對對象的解釋說明）+操作按鈕。
在復(fù)雜的業(yè)務(wù)場景中，需要用戶進(jìn)行數(shù)據(jù)輸入一系列操作。一般會有新建內(nèi)容（新建內(nèi)容很多的就需要用新頁面，彈窗有限空間滿足不了大容量的數(shù)據(jù)輸入）、查看詳情（內(nèi)容多需要新頁面展示）、詳情編輯。 有部分場景下，新建內(nèi)容和編輯內(nèi)容是重合的。 一般樣式：標(biāo)題+數(shù)據(jù)輸入組件+操作按鈕
復(fù)雜樣式：標(biāo)題+數(shù)據(jù)輸入和數(shù)據(jù)展示組合控件+操作按鈕
特殊復(fù)雜業(yè)務(wù)中，單層模態(tài)框不能滿足實際業(yè)務(wù)的需要，考慮彈窗的容量大小以及主次用戶類別使用的情況下，會使用堆疊彈窗，在有限的條件下，能做的就是盡量將彈窗分層次。
在實際操作的過程中，常見的錯誤提示、部分晦澀難懂或?qū)I(yè)的術(shù)語、對功能組件的描述解釋、小模塊里的操作反饋、全文本展示，只會在用戶不明白用途的情況下，告知用戶，但不能妨礙用戶閱讀或是操作。 樣式：深色背景+文字描述；一般由鼠標(biāo)滑入目標(biāo)區(qū)域，展現(xiàn)氣泡提示框，鼠標(biāo)滑出即消失。
一般簡單場景中，對單條信息或者模塊內(nèi)的某一個內(nèi)容執(zhí)行操作確認(rèn)。 樣式：背景+（+圖標(biāo)）文案描述+操作按鈕；一般鼠標(biāo)點擊，顯示氣泡，點擊其他區(qū)域即消失。
復(fù)雜的場景中，氣泡框也承載需要用戶去執(zhí)行數(shù)據(jù)輸入的操作，將氣泡內(nèi)的執(zhí)行后的結(jié)果與原流程同步數(shù)據(jù)展示結(jié)果。
除此之外，氣泡框承載的內(nèi)容和模態(tài)框操作類型有重合部分，不同的是，氣泡框的數(shù)據(jù)與主流程的數(shù)據(jù)需要有對應(yīng)關(guān)系。
特殊場景需要，單層氣泡框不能滿足需求，內(nèi)容需要比較嚴(yán)謹(jǐn)?shù)母缸蛹夑P(guān)系，且并不是常用的，在考慮對后續(xù)的衍生，也會將不常用的功能隱藏，需要時再點擊彈出。 在某些復(fù)雜業(yè)務(wù)的場景下，需要模態(tài)框和非模態(tài)框搭配組合使用，特別是操作彈窗和氣泡框之間。 一般情況下，是操作彈窗—>氣泡框，（氣泡框—>操作彈窗這個類型不常有，主要是不符合用戶的使用習(xí)慣）
對于彈窗的使用，應(yīng)用到各個類型的用戶場景下選擇合適恰當(dāng)?shù)姆绞饺M足需求，也許不盡人意，但也是在進(jìn)步。不僅僅需要了解彈窗的類型，更需要了解業(yè)務(wù)場景，實際應(yīng)用過程中需要兩者相互碰撞，打破、重組，尋找到合適的方式。
