97久久人人超碰国产精品,欧美婷婷六月丁香综合色,久久久久精品国产

搜索

APP

起點(diǎn)課堂會員權(quán)益

職業(yè)體系課特權(quán)

線下行業(yè)大會特權(quán)

個(gè)人IP打造特權(quán)

30+門專項(xiàng)技能課

1300+專題課程

12場職場軟技能直播

12場求職輔導(dǎo)直播

12場專業(yè)技能直播

會員專屬社群

榮耀標(biāo)識

發(fā)布

注冊 | 登錄

什么是模態(tài)？

YMOOOM

2022-05-23

1 評論 11848 瀏覽 17 收藏

11 分鐘

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

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

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

一、定義

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

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

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

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

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

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

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

二、模態(tài)的應(yīng)用

1. 人機(jī)交互

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

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

2. 用戶界面

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

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

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

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

三、易混淆點(diǎn)

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

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

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

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

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

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

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