模態(tài)框是一個(gè)漂亮的小功能，可讓您在網(wǎng)站頂部顯示不同的消息，被吹捧為非常有用。有些人甚至聲稱它們的幫助足以完全取代我們都非常討厭的橫幅廣告。但是網(wǎng)頁(yè)設(shè)計(jì)中的模態(tài)是用戶體驗(yàn)災(zāi)難嗎？
如果您不熟悉該術(shù)語(yǔ)，模態(tài)是當(dāng)訪問(wèn)者單擊超鏈接或懸停圖像時(shí)出現(xiàn)的對(duì)話窗口。
假設(shè)您想收集現(xiàn)場(chǎng)訂閱者，或者您希望訪問(wèn)者注冊(cè)免費(fèi)贈(zèng)品。在這種情況下，您可以使用模態(tài)。
然而，許多網(wǎng)頁(yè)設(shè)計(jì)師——以及一些網(wǎng)站訪問(wèn)者——反對(duì)在網(wǎng)頁(yè)設(shè)計(jì)中使用模式。主要論點(diǎn)是它會(huì)影響用戶體驗(yàn)。但是網(wǎng)頁(yè)設(shè)計(jì)中的模態(tài)是用戶體驗(yàn)災(zāi)難嗎？請(qǐng)仔細(xì)閱讀，找出答案。
 
模態(tài)是做什么的？模態(tài)框通常在網(wǎng)頁(yè)上顯示為彈出窗口，請(qǐng)求訪問(wèn)者采取行動(dòng)。大多數(shù)情況下，它們會(huì)在單擊頁(yè)面元素后出現(xiàn)。
也稱為燈箱，模式隔離頁(yè)面的主要內(nèi)容。在重新評(píng)估頁(yè)面之前，用戶必須完成模式請(qǐng)求的操作或關(guān)閉它。
網(wǎng)頁(yè)設(shè)計(jì)師使用模態(tài)來(lái)吸引訪問(wèn)者的注意力。由于無(wú)法訪問(wèn)其他頁(yè)面內(nèi)容，因此訪問(wèn)者必須與模式交互。
 
UX中模態(tài)的缺點(diǎn)雖然 UX 中的模態(tài)有不同的缺點(diǎn)，但它們都?xì)w結(jié)為一個(gè)缺點(diǎn)——中斷。當(dāng)模態(tài)出現(xiàn)時(shí)，它們會(huì)打斷用戶正在做的任何事情。
與常規(guī)彈出窗口不同，用戶不能簡(jiǎn)單地忽略模式并繼續(xù)瀏覽。因此，模態(tài)需要立即關(guān)注。 
用戶可能感興趣并決定與模態(tài)交互。但是，如果模態(tài)的內(nèi)容與頁(yè)面的內(nèi)容不同，用戶可能會(huì)在與模態(tài)交互后忘記他們?cè)谧鍪裁础?br /> 此外，有時(shí)模式需要與頁(yè)面上的信息相關(guān)的操作。例如，假設(shè)用戶想要在采取行動(dòng)之前查看信息。在這種情況下，他們將不得不關(guān)閉模式，因?yàn)橹黜?yè)無(wú)法訪問(wèn)。
統(tǒng)計(jì)數(shù)據(jù)顯示，高達(dá)82% 的用戶不喜歡彈窗。大多數(shù)網(wǎng)站訪問(wèn)者并不了解網(wǎng)頁(yè)設(shè)計(jì)的技術(shù)細(xì)節(jié)。因此，他們將無(wú)法區(qū)分常規(guī)彈出窗口和模式。
畢竟，模態(tài)框是一種彈出窗口。一些用戶可能會(huì)認(rèn)為模式更糟糕，因?yàn)樗鼈儠?huì)使頁(yè)面的主要內(nèi)容變暗，使其無(wú)法訪問(wèn)。
此外，人們希望訪問(wèn)一個(gè)網(wǎng)站并立即獲得他們想要的東西。因此，時(shí)間很重要。因此，需要花費(fèi)時(shí)間的操作的模態(tài)可能會(huì)使網(wǎng)站失去訪問(wèn)者。
有了所有這些缺點(diǎn)，您就可以理解為什么許多網(wǎng)頁(yè)設(shè)計(jì)師說(shuō)模態(tài)是網(wǎng)頁(yè)設(shè)計(jì)中的 UX 災(zāi)難。
 
模態(tài)在 UX 中有用嗎？在某些情況下，模態(tài)很有幫助，它們可以改善用戶體驗(yàn)。許多網(wǎng)頁(yè)設(shè)計(jì)師都對(duì)模式的有用性發(fā)誓，不難理解為什么。
首先，模態(tài)可以幫助簡(jiǎn)化網(wǎng)站的內(nèi)容。例如，如果您的網(wǎng)站相對(duì)復(fù)雜，包含大量?jī)?nèi)容和元素，用戶可以立即退出頁(yè)面。
您可以使用模態(tài)來(lái)解釋頁(yè)面上的內(nèi)容，以免用戶感到困惑。當(dāng)用戶單擊后退按鈕時(shí)，模式可能會(huì)顯示。模態(tài)可以突出頁(yè)面上最關(guān)鍵的內(nèi)容，并告訴用戶下一步該做什么。
其次，如果您必須吸引用戶的注意力，模式是非常寶貴的。例如，您可能想要顯示警告或傳遞用戶在繼續(xù)瀏覽之前必須知道的任何重要信息。
如前所述，用戶可以輕松忽略彈出窗口，尤其是當(dāng)它在新窗口中打開(kāi)時(shí)。但是，對(duì)于模態(tài)框，用戶在繼續(xù)之前必須至少查看內(nèi)容。
第三，模態(tài)可以使網(wǎng)頁(yè)更易于導(dǎo)航。考慮到缺點(diǎn)，這聽(tīng)起來(lái)很諷刺，但如果實(shí)施得當(dāng)，那就是真的。您可以將一些元素設(shè)置為顯示為模式，而不是在網(wǎng)頁(yè)上打包不同的元素。
例如，您可以擁有一個(gè)僅包含文本的頁(yè)面以提高可讀性。然后，用戶可以單擊以查看圖像和視頻等視覺(jué)元素作為模態(tài)。
 
如何正確使用模態(tài)正確使用模態(tài)是確保它們不會(huì)對(duì) UX 產(chǎn)生負(fù)面影響的關(guān)鍵。以下是一些可以使用模態(tài)的理想情況：
1. 顯示警告
使用模態(tài)來(lái)給用戶重要的警告是理想的，特別是如果他們的后續(xù)行動(dòng)有嚴(yán)重的后果。
例如，當(dāng)用戶單擊刪除按鈕時(shí)，大多數(shù)網(wǎng)站都會(huì)顯示模式。刪除總是至關(guān)重要的，因?yàn)樵诖蠖鄶?shù)情況下，它是不可逆的。
一個(gè)實(shí)際的例子是一個(gè)電子商務(wù)網(wǎng)站，用戶選擇從他們的購(gòu)物車中刪除商品。您可以使用模式在刪除之前要求用戶確認(rèn)。
2.輸入或收集信息
模態(tài)在提示用戶輸入信息方面是有效的。有時(shí)，用戶必須在繼續(xù)瀏覽之前輸入特定的詳細(xì)信息。
一個(gè)實(shí)際的例子是用戶想要提交評(píng)論的評(píng)論網(wǎng)站。在提交評(píng)論之前，您可以使用模態(tài)請(qǐng)求用戶名和其他必要信息。
3. 簡(jiǎn)化導(dǎo)航
如前所述，模態(tài)可以簡(jiǎn)化復(fù)雜的網(wǎng)站。此外，它將幫助用戶更好地導(dǎo)航，這是用戶體驗(yàn)的提升。
一個(gè)實(shí)際的例子是一個(gè)有很多故事和更新的新聞網(wǎng)站。您可以使用模式突出顯示當(dāng)天的熱門(mén)新聞故事，以便用戶可以一鍵訪問(wèn)網(wǎng)頁(yè)。
 
模態(tài)是用戶體驗(yàn)中的災(zāi)難嗎？總之，模式會(huì)影響網(wǎng)站的用戶體驗(yàn)，因?yàn)樵L問(wèn)者必須與它們交互。但是它并不總是必須是負(fù)面影響。
錯(cuò)誤使用時(shí)，Modal 會(huì)成為網(wǎng)頁(yè)設(shè)計(jì)中的 UX 災(zāi)難。但是，如果您遵循良好的做法，模式可以改善您網(wǎng)站的用戶體驗(yàn)。
通常，僅在必要時(shí)使用模態(tài)，并且不會(huì)讓用戶感到沮喪。