模态框是丨一个漂亮□□□□的小功能，可让您在□□□网站顶部□□显示不同◤的消息，被吹捧为△非常有用。有些人甚□□□□至声称它□□□□们的帮助□□□足以完全☆取代我们□□都非常讨□□□厌的横幅□□广告。但是网页□□□设计中的□□□□模态是用□□□户体验灾□□□□难吗？
如果您不□□熟悉该术□□□□语，模态是当□□□访问者单◣击超链接□□或悬停图□□像时出现★的对话窗●口。
假设您想◎收集现场□□□□订阅者，或者您希□□望访问者□□□□注册免费□□□□赠品。在这种情□□□况下，您可以使□□□□用模态。
然而，许多网页□□□设计师——以及一些□□□□网站访问□□者——反对在网□□□□页设计中□□□使用模式。主要论点▲是它会影□□响用户体□□□□验。但是网页□□□设计中的◥模态是用·户体验灾□□□难吗？请仔细阅□□□□读，找出答案。
 
模态是做□□什么的？模态框通□□□常在网页□□上显示为◉弹出窗口，请求访问▽者采取行□□□□动。大多数情▽况下，它们会在□□单击页面□□□□元素后出□□现。
也称为灯·箱，模式隔离□□页面的主◤要内容。在重新评□□估页面之□□□前，用户必须□□完成模式□□□□请求的操□□作或关闭□□□□它。
网页设计□□□□师使用模◉态来吸引♦访问者的❖注意力。由于无法□□□访问其他□□页面内容，因此访问□□□□者必须与□□□□模式交互。
 
UX中模态的□□缺点虽然 UX 中的模态□□□有不同的□□缺点，但它们都□□□□归结为一□□□个缺点——中断。当模态出□□□□现时，它们会打◉断用户正□□□□在做的任□□□何事情。
与常规弹○出窗口不□□□同，用户不能□□□简单地忽▼略模式并□□继续浏览。因此，模态需要□□□立即关注。 
用户可能·感兴趣并❖决定与模□□□□态交互。但是，如果模态□□□□的内容与❖页面的内·容不同，用户可能□□□会在与模◥态交互后□□□□忘记他们◎在做什么。
此外，有时模式□□□□需要与页□□□面上的信□□□息相关的□□操作。例如，假设用户•想要在采✦取行动之□□前查看信□□息。在这种情□□□□况下，他们将不□□□得不关闭□□模式，因为主页□□□□无法访问。
统计数据□□□□显示，高达82% 的用户不□□喜欢弹窗。大多数网◎站访问者□□□并不了解□□□□网页设计□□□□的技术细□□□节。因此，他们将无□□□法区分常□□规弹出窗□□□口和模式。
毕竟，模态框是□□□一种弹出•窗口。一些用户□□可能会认□□为模式更□□糟糕，因为它们□□会使页面□□□□的主要内□□□□容变暗，使其无法□□□访问。
此外，人们希望※访问一个□□□□网站并立□□□□即获得他□□□□们想要的□□□东西。因此，时间很重□□要。因此，需要花费□□时间的操◢作的模态□□□可能会使●网站失去□□访问者。
有了所有□□这些缺点，您就可以□□理解为什□□□□么许多网□□页设计师□□□说模态是□□□网页设计□□□□中的 UX 灾难。
 
模态在 UX 中有用吗？在某些情◈况下，模态很有□□□帮助，它们可以□□改善用户▼体验。许多网页□□□□设计师都□□□对模式的□□□□有用性发□□誓，不难理解□□□□为什么。
首先，模态可以※帮助简化•网站的内丨容。例如，如果您的□□网站相对♦复杂，包含大量□□□□内容和元◣素，用户可以□□□立即退出□□□页面。
您可以使□□□□用模态来丨解释页面□□上的内容，以免用户□□感到困惑。当用户单✦击后退按□□□□钮时，模式可能□□□□会显示。模态可以□□□突出页面□□□□上最关键□□□的内容，并告诉用□□□□户下一步◉该做什么。
其次，如果您必△须吸引用□□□□户的注意□□□□力，模式是非□□□□常宝贵的。例如，您可能想□□要显示警❖告或传递▼用户在继□□□□续浏览之❖前必须知●道的任何□□□重要信息。
如前所述，用户可以◈轻松忽略□□□□弹出窗口，尤其是当▽它在新窗◥口中打开♦时。但是，对于模态□□框，用户在继□□□□续之前必◆须至少查□□□看内容。
第三，模态可以□□使网页更□□□□易于导航。考虑到缺□□□□点，这听起来▲很讽刺，但如果实□□□□施得当，那就是真•的。您可以将□□□□一些元素□□□□设置为显□□□□示为模式，而不是在□□网页上打□□包不同的□□元素。
例如，您可以拥□□□□有一个仅□□□包含文本●的页面以□□□□提高可读□□性。然后，用户可以◢单击以查□□看图像和◢视频等视□□觉元素作□□□为模态。
 
如何正确□□□□使用模态□□□正确使用▼模态是确□□□保它们不□□□□会对 UX 产生负面□□影响的关□□键。以下是一▼些可以使□□用模态的□□□□理想情况：
1. 显示警告
使用模态□□来给用户□□□□重要的警◢告是理想□□□的，特别是如□□□□果他们的□□后续行动◤有严重的□□□□后果。
例如，当用户单□□□□击删除按□□钮时，大多数网△站都会显□□□□示模式。删除总是□□□□至关重要□□□□的，因为在大◣多数情况◢下，它是不可□□□逆的。
一个实际◥的例子是□□一个电子□□□商务网站，用户选择□□□从他们的◣购物车中□□□删除商品。您可以使□□用模式在□□□删除之前○要求用户□□□□确认。
2.输入或收集信息
模态在提□□□□示用户输□□□入信息方□□面是有效□□的。有时，用户必须□□□□在继续浏□□览之前输□□□入特定的●详细信息。
一个实际□□的例子是□□□□用户想要□□□□提交评论·的评论网□□□站。在提交评□□论之前，您可以使□□用模态请□□□求用户名□□和其他必□□要信息。
3. 简化导航
如前所述，模态可以□□□简化复杂□□的网站。此外，它将帮助□□用户更好◈地导航，这是用户□□□体验的提□□□升。
一个实际□□的例子是□□□一个有很○多故事和□□更新的新□□闻网站。您可以使✦用模式突○出显示当□□天的热门□□□新闻故事，以便用户□□□□可以一键★访问网页。
 
模态是用◇户体验中□□的灾难吗？总之，模式会影□□□□响网站的□□□用户体验，因为访问□□□□者必须与○它们交互。但是它并□□不总是必□□须是负面◉影响。
错误使用□□□□时，Modal 会成为网□□□□页设计中◣的 UX 灾难。但是，如果您遵□□循良好的□□□□做法，模式可以◣改善您网□□□站的用户□□□体验。
通常，仅在必要时使用模态，并且不会让用户感到沮丧。