什么是模態(tài)？

學位論文 2023-05-21 發(fā)布于江蘇

展開全文

編輯導讀：“模態(tài)（Modal）”原先是物理計算機領(lǐng)域的詞匯,，引申到軟件設(shè)計領(lǐng)域可以簡化理解為“模式” “狀態(tài)”,。本文作者圍繞模態(tài)進行了分析，希望對你有幫助,。

最近在工作中發(fā)現(xiàn)關(guān)于“模態(tài)”這個詞的釋義和其對應組件的使用場景有所混淆,，對于其詳細解釋在網(wǎng)上的搜索結(jié)果也相當少。本著求實尋真的的原則,，查閱相關(guān)文檔,，結(jié)合案例分析，匯總這篇文檔,。

此外,，在不同學術(shù)領(lǐng)域中“模態(tài)”的概念和應用都有所區(qū)別，本篇中主要以用戶界面設(shè)計為中心展開敘述,。

一,、定義

1. 模態(tài)(Modal)

“模態(tài)（Modal）”是一個舶來詞匯,，詞根為“模式（Mode）”。其相關(guān)組詞“模態(tài)邏輯“,、”真勢模態(tài)”…也多指的是物理計算機領(lǐng)域,，引申到我們的軟件設(shè)計領(lǐng)域可以簡化理解為“模式” “狀態(tài)”，即“特定模式下的某種狀態(tài)”,。

“杰夫·拉斯金在《Humane Interface》對計算機科學的“模態(tài)”定義為：人機界面對于跟定的動作(gesture)是模態(tài)的(modal) ,。”有許多地方解釋模態(tài)引用了這句話,，但是這一句解釋的確實太抽象,，相對來說iOS人機指南中解釋更好理解一些：“模態(tài)是一種設(shè)計技術(shù)，它以一種臨時的模式呈現(xiàn)內(nèi)容,，需要一個明確的動作來退出,。以模式呈現(xiàn)內(nèi)容可以幫助人們專注于一個獨立的任務或一組密切相關(guān)的選項確保人們收到關(guān)鍵的信息，并在必要時對其采取行動,?！?/p> 文章圖片2

以上對于模態(tài)的解釋中有的抽象,有的具體,綜合提煉關(guān)鍵的信息可以解釋為:模態(tài)是人機交互過程中的一種狀態(tài),表現(xiàn)為用戶相同的操作在模態(tài)下可以產(chǎn)生不同的結(jié)果。例如在使用電腦時,，直接點擊和按住Ctrl再點擊就會有觸發(fā)不同的結(jié)果,。

2. 模態(tài)窗口(Modal window)

Bootstrap 5將模態(tài)解釋為當前頁面上部的對話框/彈出窗口，Ant Design也直接稱作模態(tài)對話框,。這其實就是在用戶界面設(shè)計中模態(tài)的具體應用,。

維基百科里對于模態(tài)窗口的定義為：“從屬于應用程序主窗口的圖形控制元素”。目的在于保留父級主窗口主流程的前提下,，使用一個子窗口來完成某些特定操作,。用戶需要先與模態(tài)窗口進行交互，然后才能返回父級程序,。

二,、模態(tài)的應用

1. 人機交互

在人機交互中,，人是主導者,。模態(tài)主要的應用是“切換”的作用，根據(jù)切換狀態(tài)的時間可分為“臨時模態(tài)”,、“長時模態(tài)”。

臨時模態(tài)：需要一直控制某一按鍵才能進入另一系統(tǒng)狀態(tài)進行操作,。例如默認英文小寫輸入法的情況下,，一直按住“Shift“再鍵入就會切換成大寫輸入。
長時模態(tài)：僅需一次操作,，就可以一直處在切換的狀態(tài)，直至再一次操作取消,。例如默認英文小寫輸入法的情況下,，按一次”Caps Lock“就可以切換成大寫輸入。

2. 用戶界面

在用戶界面中,，“系統(tǒng)”往往是模態(tài)的發(fā)起者,。通常以對話框的形式強制要求用戶回應，在未完成和對話框的交互前，不可以回到之前的主程序,。這里分為“應用程序”的模態(tài)對話框和“操作系統(tǒng)”的模態(tài)對話框也有所區(qū)分,。二者的使用原則一致,，最大區(qū)別在于，應用程序內(nèi)的模態(tài)對話框僅在當前程序內(nèi)觸發(fā)，同時開啟的多個程序之間互不影響,。而操作系統(tǒng)的模態(tài)對話框優(yōu)先于所有應用程序,。

3. 無模態(tài)對話框（Modeless）

無模態(tài)對話框并不屬于“模態(tài)”相關(guān)組件應用上，實際使用中會以具體的功能作為組件命名,，在此為了和模態(tài)對話框?qū)φ战忉尅?/p>

這是一種非強制回應的對話框,，用于向用戶請求非必須資料。即可以不理會這種對話框或不向其提供任何信息而繼續(xù)進行當前工作，所以窗口均可打開并處于活動狀態(tài)或是獲得焦點（人機交互熱點）,。無模態(tài)對話框的權(quán)級要弱于模態(tài)對話框，可交互、不可交互的組件都有,，因此使用范圍較廣。例如用于“詳情查看”,、“操作通知”，還有應用和操作系統(tǒng)中的一些小工具使用頁會觸發(fā)無模態(tài)對話框,。

三,、易混淆點

由于用戶界面中涉及到的內(nèi)容很廣，就有很多看起來類似的實際不同功能組件,，且各人的知識體系的不同,，對于一些既有組件就會出現(xiàn)“起小名”的現(xiàn)象。再加上用戶界面在國外的發(fā)展是早于國內(nèi)的,，對于許多組件命名在翻譯過來就很容易造成差異,。各大廠之間對于組件的命名也沒有達到統(tǒng)一，大家在實際工作中盡量保證協(xié)作人員之間的命名是統(tǒng)一的,。

1. 彈出框（Popover）& 彈窗（Pop-up window）

這里的首先指出“彈出框”是具體一個組件名稱,，“彈窗”是所有彈出的窗口泛指一類名稱。且彈出框（Popover）在Ant Design和T Design叫“氣泡卡片”,，兩者在范圍上屬于包含關(guān)系,，混淆的原因應該是漢語譯義接近再加上“框”和“窗”發(fā)音接近,。

關(guān)于組件命名上，Element叫彈出框,，Ant Design叫氣泡卡片,。

2. 遮罩（Mask,、Overlay）& 蒙板（Matte,、Mask）

在有模態(tài)的的場景中,，經(jīng)常會有一個黑色有透明屬性的圖層出現(xiàn)在當前任務頁和對話框之間,，這個就是遮罩（Mask）,。而蒙板（Matte）是設(shè)計視頻圖像軟件中將指定帶有alpha通道圖層的透明數(shù)據(jù)信息應用在目標圖層上，目的在于控制目標圖層的顯示范圍,。在PS,、AE一類圖像視頻編輯軟件中，對于遮罩和蒙板的功能區(qū)分的很明確,。而在Sketch,、Figma這類的軟件中其實只有Mask，功能是限制該圖層上方所有圖層的顯示范圍,，就像是畫了一個圈,，其他圖層就只能在這個圈的范圍內(nèi)顯示。

Ant Design,、Element都將這個黑色有透明屬性的圖層叫做Mask,，這與設(shè)計軟件中的Mask功能其實有所沖突。我覺得在Vant 3里將其稱作Overlay更適合一些,。