壹、定義1。情態“情態”是壹個外來詞，詞根為“Mode”。它的關聯詞“模態邏輯”和“真勢模式”也指物理計算機領域，擴展到我們的軟件設計領域可以簡化為“模式+狀態”，即“特定模式下的某種狀態”。
傑夫·拉斯金在《人性化界面》壹書中將計算機科學的“模態”定義為:人機界面是給定手勢的模態這句話有很多地方可以解釋，但是這句話真的太抽象了。相對而言，iOS人機指南中的解釋更好理解:“模式是壹種設計技術，它以臨時模式呈現內容，需要壹個明確的動作才能退出。以壹種模式呈現內容可以幫助人們專註於壹項獨立的任務或壹組密切相關的選項，以確保人們接收到關鍵信息並在必要時采取行動。”上面對模式的解釋有些是抽象的，而有些是具體的。綜合提煉關鍵信息可以解釋為:模式是人機交互過程中的壹種狀態，意味著用戶的相同操作在該模式下可以產生不同的結果。例如，在使用計算機時，直接單擊並按住Ctrl然後單擊將觸發不同的結果。
二、情態1的應用。人機交互在人機交互中，人是主導者。模式的主要應用是“切換”，根據切換狀態的時間可分為“臨時模式”和“長期模式”。臨時模式:您需要壹直控制壹個鍵才能進入另壹個系統狀態進行操作。例如，在默認的英文小寫輸入法的情況下，按住“Shift”並鍵入將切換到大寫輸入。長期模式:您只需要壹次操作，並且可以保持在切換狀態，直到再次取消操作。例如，如果英文小寫輸入法是默認輸入法，您可以通過按壹次“Caps Lock”切換到大寫輸入法。
2.用戶界面在用戶界面中，“系統”通常是模式的發起者。通常，用戶被迫以對話框的形式做出響應，在您完成與對話框的交互之前，您無法返回到上壹個主程序。“應用程序”的模態對話框和“操作系統”的模態對話框也有區別。兩者的使用原理相同，最大的區別是應用程序中的模態對話框只在當前程序中觸發，同時打開的多個程序互不影響。操作系統的模式對話框優先於所有應用程序。
3.非模態對話框非模態對話框不屬於“模態”相關組件的應用程序。在實際使用中，它將被命名為具有特定功能的組件，這裏與模態對話框進行對比說明。這是壹個非強制響應對話框，用於向用戶請求不必要的信息。也就是說，您可以忽略此對話框或繼續當前的工作而不為其提供任何信息，這樣所有窗口都可以打開並處於活動狀態或獲得焦點（人機交互的熱點）。非模態對話框的權重比模態對話框弱，並且有交互和非交互組件，因此應用廣泛。例如，它用於“詳細信息查看”和“操作通知”，應用程序和操作系統中的壹些小工具使用頁面將觸發無模式對話框。
3.困惑點由於用戶界面涉及的內容範圍很廣，有許多實際上不同的功能組件看起來很相似，不同的人的知識體系會導致壹些現有組件的“昵稱”現象。此外，國外用戶界面的發展早於國內，很多組件名稱的翻譯容易造成差異。主要制造商之間的組件命名尚未統壹，因此我們在實際工作中盡量確保合作者的命名統壹。
1.popover &；彈出窗口首先要指出的是，“彈出框”是壹個特定的組件名稱，而“彈出窗口”是所有彈出窗口的通用名稱。而彈出框在螞蟻設計和T設計中被稱為“泡泡卡”，在範圍上屬於包含關系。混淆的原因應該是中文翻譯接近，“box”和“window”的發音接近。在組件的命名上，Element叫彈出框，Ant Design叫泡泡卡。
2.mask（overlay）&；Mask在模態場景中，在當前任務頁面和對話框之間經常會出現壹個具有透明屬性的黑色層，稱為Mask。Matte是設計視頻圖像軟件，將帶有alpha通道的指定圖層的透明數據信息應用於目標圖層，以控制目標圖層的顯示範圍。在PS和AE等圖像和視頻編輯軟件中，mask和mask的功能是明確區分的。在Sketch和Figma等軟件中，實際上只有Mask，其功能是限制該層以上所有層的顯示範圍，就像畫壹個圓壹樣，其他層只能在這個圓內顯示。
螞蟻設計和Element都將這個具有透明屬性的黑色圖層稱為Mask，這實際上與設計軟件中的Mask功能相沖突。我認為在Vant 3中稱之為Overlay更合適。關於設計中是否需要使用掩模，有必要評估當前需求的優先級。
3.模態對話框&；對話框對話框實際上指的是同壹個功能組件，兩者都指的是上面提到的模式窗口，只是名稱不同。
四。總結本文主要是解釋模式的概念是什麽，並列舉了壹些基本案例來輔助理解。至於modal在平時設計中的具體做法，大家可以在各大廠商的組件庫中找到相應的案例，這裏就不過多展示了。模態（窗口）本質上是迫使用戶註意並必須采取行動。模態窗口中的內容應該減少以減輕用戶的記憶負擔。需要註意的是，在遊戲領域的相關人機交互和用戶界面設計中，模態是改善遊戲性和幫助用戶進入心流的常用方法。然而，在C端和B端，該模式往往會幹擾用戶的流量。請區分應用場景並謹慎使用。