什么是模态，我应该什么时候使用？

网站上的任何经验都是较小的设计元素和决策的马赛克。这是一个你可能遇到的一个：你正在浏览一个网站，然后单击一些按钮。在屏幕上立即显示页面淡出和弹出窗口显示某些消息或提示操作，如注册电子邮件列表或下载内容优惠。

情态动词的目的可以用一个词来概括:焦点。如果你需要访问者关注一些简单的东西，模态窗口是最有效的方法之一。用户必须关闭模态，或者在其中完成一个特定的操作(例如，阅读消息并点击“OK”，填写表单等)。

这是一个简单的例子纽约人．这种模态提示我们订阅他们的时事通讯。raybetapp

图片来源

在设计师和用户之间，情态动词正呈现两极分化。许多人发现它们能够迅速将注意力吸引到一些重要的东西上，而另一些人则认为它们是对用户体验不受欢迎的干扰。

在实践中，这完全取决于模态是否设计良好和目的明确。如果操作得当，它们对你的用户和你的数据都是有帮助的技术最近的近20亿莫代尔弹出窗口的研究，前10％的最佳表演者以9.28％的显着速度转换。

情态动词的好处

除了引导焦点外，模态比其他显示元素有更多的好处。

简单

情态动词让事情变得简单。所有内容都停留在一个选项卡内，帮助访问者在模式出现之前与他们正在做的事情保持联系。

可见性

因为模态出现在用户的活动选项卡中，你可以确定它会被看到。如果这个提示出现在一个新窗口中，用户可能会错过它，或者在厌烦了弹出的广告后本能地关闭新窗口。

灵活性

情态动词还可以通过在浏览器中显示图像或视频等特色媒体来帮助保存页面空间lightbox．

莫代尔VS VILESESS.

我们称这种类型的元素为“模式”，因为它在其出现的网页上引入了一个次要的“模式”——或用户界面。模态窗口会禁用页面的大部分内容，并要求用户在继续之前先关注某个特定的窗口。Web设计者称模态窗口为“子”窗口，将页面的其余部分称为“父”窗口。

模态元素的对立面是“非模态”元素，它不会禁用父窗口。当非模态元素打开时，用户总是可以与父内容交互。非模态元素的例子包括下拉菜单、侧面板或弹出式元素，用户仍然可以点击其他页面元素。

模态VS弹出

尽管情态动词和弹出窗口的功能非常相似，但两者之间的区别在于它们所需要的关注量:情态动词不允许你与页面上的其他元素进行交互，这需要用户立即采取行动。相反，如果用户选择不与弹出窗口互动，他们可以自由地继续与网站互动，而弹出窗口仍然在屏幕上，直到用户参与进来。这是因为弹出窗口的设计是非模态的。

情态动词什么时候在网页设计中使用?

任何时候您需要用户查看或执行特定的东西，模态Windows都是有效的。通常（但并非总是）出现在某些触发事件之类的触发事件（如按钮）之上，滚动事件或某些退出意图之后出现。Web设计中的模块中最常见的用途包括警告，警报，确认，表单，媒体显示和多步过程。

警告、警报和确认

当一个用户真的应该会看到一些东西，模态窗口在引导注意力方面很出色。模态可以包含关于重大事件或错误的警告、关于某些操作的后果的警告，或对已完成流程的确认。例如:

图片来源

只在最关键的信息上使用情态动词。例如，错误主动地阻止了期望的操作完成(例如，“由于服务器错误，我们无法完成您的请求。”请刷新页面并重试。”)和无法恢复的操作(例如，“您确定要继续吗?”)都是使用模态的合理原因。“cookie策略”警告就没那么多了——把这个留给非模态通知窗口或条吧。

形式

如果你的网站上的一个流程需要用户提交信息，你可以在一个模式窗口中放置一个表单。你会经常看到它作为登录/注册专用页面的替代，或者推广电子邮件通讯、内容提供或折扣代码的页面。raybetapp

许多网站，如波士顿环球报，仅将它们的内容限制为成员，这可以通过模态向非成员发出信号：

图片来源

通常，这种模式的触发是CTA点击或其他按钮点击，但网站在滚动事件后抛出模式也很常见。你是否认为这个触发器太让人分心，这取决于你，但要知道，如果有些游客认为它无关紧要，他们会为此感到困扰。

媒体显示

媒体经常支持网页的主要内容，并为浏览体验设置音调。但是，如果图像库或视频用作您网站上的焦点，则模态窗口允许访问者在隔离中查看它，而无需在另一个页面中打开它。

例如，用户可以单击父页面上的缩略图，这将打开相关图像库的模态，通过窗口两侧的箭头按钮可以轻松导航。这种实现对于产品和产品组合的展示尤其有效。

缩略图还可以打开一个视频模式，该模式将视频像自己的小影院一样显示，然后在视频完成后关闭。互联网服务提供商星星网站信息页面列出了几个这样呈现的视频:

图片来源

使用模态来显示媒体的另一个好处是空间效率。媒体往往会占用宝贵的页面空间，但用较小的缩略图来访问图库或视频播放器可以节省宝贵的空间。

多步骤的过程

对于网站上耗时更长、能耗更大的操作(创建用户档案、注册服务或完成工具设置)，可以考虑将每个步骤分离到各自的模态窗口中，以便体验更易于管理。这种技术以“向导”或“安装指南”的形式在软件应用程序中很雷竞技苹果下载官方版常见。进度应该以条形、小点序列、数字或其他指示符的形式显示在窗口中。

Pinterest在他们的账户创建过程中做得很好。请注意顶部的进度指示器。

图片来源

情态在网络上很常见，你的访问者可以区分有用的情态和无意义的或者设计糟糕的情态。确保您的模态是高质量的，坚持以下八个最佳实践模式窗口设计:

1.有意且不常使用情态动词。

情态动词在设计上具有颠覆性。它们往往出人意料地出现在浏览体验的流程中，并总是将焦点从它们的父窗口转移开。对于用户来说，这是一个高成本，所以情态动词应该总是帮助用户实现他们的目标，而不是阻碍他们。

为了让访问者与您的网站变得恼火，只有当您绝对需要时才部署模态窗口，并且只有他们协助用户的主要目标。更少的东西，而且用户可能会忘记他们的原始目标并变得沮丧。

以下是常见模式使用的一些最佳实践:

• 警告和警报- 只有关键的错误和永久行动应提示模态显示。
• 形式- 坚持收集所需信息的人或至少显着提高他们在您网站上的经验。并且，多步模态进程中的所有步骤都应该与用户的最终目标高度相关。
• 其他元素-对于任何不符合条件的交互元素或步骤，使用非模态显示代替。

2.关闭所有背景元素。

为了有效地将所有的注意力吸引到模态上，所有的背景元素在视觉上和功能上都必须在子窗口后面逐步淘汰。你可以这样做:

• 视觉效果-模态通常模糊和/或变暗大多数或所有父元素。这给人的印象是模态窗口位于其他内容之上。模态周围的一些投影也可以创建这种效果。
• 取消激活功能-确保模态窗口之外的页面元素是可点击或可通过键盘选择的，并考虑禁用滚动。任何来自父页面的额外功能都将发送关于模态用途的混合信号。

另一个重要的注意事项:由于模态在关闭之前将显示所有其他页面内容，因此用户完成模态所需的所有信息必须在模态窗口本身中提供。用户不需要回看父内容来处理模态——任何需要这种切换的任务都更适合非模态显示。

3.写出清晰的说明和按钮文字。

为帮助用户快速调整到模态显示并理解它为什么在那里，使所有文本都像您一样简短且清晰。所有模态应包括标题文本，并指出所需的模式或采取行动的意图。写你的按钮文字和其他行动提示也很简洁和直观。

4.给用户一个出路。

每个好的模态窗口都允许至少一个动作，即关闭它的选项。按照惯例，当用户按下escape键，或点击模态窗口左上角或右下角的“X”符号或“Close”文本后，窗口就会消失。

您还可以选择在用户单击模式外时关闭窗口，并考虑在模式内放置一个“取消”按钮作为“继续”按钮的替代。

5.适当地调整您的模态窗口的大小。

模态应该出现在父窗口的顶部。如果它太大，用户可能会认为它是一个全新的页面，而太小，用户可能会误以为它是一个广告。

一个良好的准则是将模态窗口限制为最多50％的浏览器窗口宽度，并且高度大致相同，尽管确切的尺寸会根据您在模态中的位置而变化。

6.用渐变引入和关闭模态。

包括一个过渡效果，以减轻从父窗口到子窗口的切换。背景内容的短暂淡出和模态窗口的淡入几乎在任何情况下都能很好地工作——一个更重要的过渡(例如幻灯片)或没有过渡可能会让一些人感到不和谐。

回到我们的布满星星的示例，请注意视频模态如何快速但顺利消失，而背景内容暗淡：

图片来源

7.限制移动设备上的模态。

我描述的所有设计功能都适用于桌面屏幕，但移动设备是一个不同的故事。减少的屏幕尺寸使得窗口内的窗口难以看起来更难，而不会出现太大或太小。

如果你可以在常规站点上放置一个模态，你可以考虑添加一个非模态元素，或者将模态内容完全放在一个新页面上。如果你更喜欢手机网站上的情态动词，请测试它们的响应性、可读性和易用性。

8.为可访问性设计你的模态。

我已经提到了一些网页可及性这个列表中的指针——这里有一些常见的做法，让你的情态动词对每个人都可用:

• 模态中的每一个可点击的动作都应该可以使用键盘。escape键应该关闭窗口，而tab键和enter键可以用来选择选项。
• 只要模态在视图中，键盘就不能访问模态之外的所有其他元素。
• 模态窗口应该在视觉上与背景页形成对比。
• 进入和离开模态的过渡应该是平滑和不浮华的。
• 任何图像、视频或其他媒体项目都应包括描述性替代文本．
• 所有文本和媒体都可以通过屏幕读者和其他辅助技术来解释。

如何在CSS中实现模块

要在站点中添加基本的模态窗口，一个选项是单独使用CSS和HTML。我们在本指南中提到的大多数设计因素都可以进行调整一些CSS专有技术．W3Schools.提供了一个基本但有用的代码模板来开始使用CSS方法，或者您也可以使用来自免费前端或Bootstrap材料设计．

无论您决定如何实现您的模态，请记住只在必要的情况下使用它们。偶尔要求用户关注是可以的，只要这最终能够满足他们的最终目标，并提供足够的价值去证明短暂的干扰是合理的。对于每一个模式，理解其在游客旅途中的目的，并坚持我们的设计和功能的最佳实践。

编者按:本文最初发表于2020年9月，为全面起见已进行更新。