衡水网站开发：网上模态Windows的设计趋势

模态窗口是显示在屏幕上而不是打开新选项卡/窗口的弹出窗口。它们通常会使背景变暗以引起对弹出窗口的注意。

大多数运行模态窗口的网站都会添加某种类型的号召性用语，无论是按钮还是表单等。但它也可以是关于浏览器功能的简单消息，例如禁用的JavaScript或广告块扩展程序。

窗口中的所有内容都优先于页面，因此这些模态旨在引起注意。它们可能令人烦恼并且彻底令人愤怒，但数字并不是谎言：它们起作用。

衡水网站开发让我们深入研究模态窗口的当前趋势，看看它们是如何工作的以及为什么要使用它们。

深色背景和可点击区域

模态窗口遵循类似的设计策略，并且它们不是很复杂。

他们大多都使用页面上的黑暗背景来关注模态内容。这不应该是漆黑的背景，因为这会让人感到恐惧。

相反，用户应该看到背景后面的页面触摸，但它应该具有降低的不透明度。这可能是90％或50％，具体取决于您要隐藏页面的数量。

此外，用户应该能够单击背景以隐藏模态。

这不是通用的，但我讨厌设计师删除或忽略此功能。是的，通常有一个X按钮或关闭按钮，但是将鼠标移动到该按钮需要花费更多精力。

应该可以只需单击背景并立即隐藏消息。

某些模态使用精美的动画显示在屏幕上。这通常是首选，因为它降低了随机弹出窗口的粗糙度。

将模态窗口滑动，淡入或弹回视图使其更容易触摸眼睛。但是也不要拖出动画！

大多数用户会忽略模态，因此他们不想观看完整的3秒动画。快速进入模态并让用户读取或关闭窗口。

设计因站点而异，但大多数都使用带有深色文本的白色模态背景。这是设计可以与任何网站融合的高对比度消息的最简单方法。

总的来说，这些是一些基本趋势，所以它们并不是绝对的。但是当你浏览互联网时要保持睁大眼睛，因为你可能会惊讶地发现有多少种不同的风格。

显示技术

有些想要为某些访问者显示模态窗口的营销人员使用了一些流行趋势。

绝大多数模态弹出窗口在页面加载后几秒钟发生。大多数访问者甚至没有时间阅读该网站以了解其内容。这似乎是做模态的最糟糕的方式，除非它们是cookie或adblock设置之类的信息。

其他显示样式通常更好，因为它们面向用户行为。以下是三种最常用的技术：

• 当用户的鼠标离开页面时，将出现退出模式

• 定时模态在X秒/分钟后运行

• 当用户向下滚动一定量时，会出现位置模态

每种情况都不同，应根据受众使用。

如果你运行一个像Smashing Magazine这样冗长内容的博客，那么你可以做一个基于滚动的弹出窗口。像WPBeginner这样的其他博客实际上做了退出模式策略，并且每日电子邮件注册量大幅增加。

无可否认，这些东西有效。这只是你如何愿意运行模态以及最终目标是什么的问题。

Popover营销信息

模态主要用于营销，因此副本应该以思想和情感为主。最近的模态窗口已经转向他们的按钮的内疚旅行方法。

而不是只有按钮说“是”和“不”，而是让你感到害怕或因为关闭窗户而感到愧疚。

看起来这只会让人生气，但确实会增加转换率。查看此Conversion XL帖子以查看一些示例。

除了典型的是/否注册模式，您还可以在adblock消息的营销中找到内疚之旅。它们出现在一些现在想要禁止adblock用户的大型网站上。

Business Insider是一个为每个adblock用户显示弹出模式的示例。它不允许您在不禁用adblock或支付网站订阅费用的情况下关闭模式。

任何模态窗口的目标都应该是说服才能采取行动。这可能与注册表单有关，也可能与禁用adblock相关，或者基本上是您希望用户执行的任何操作。

最好的成功来自优秀的副本和简短但甜蜜的信息。

纯CSS与JS

完全重新发明轮子永远不是一个好主意所以模态窗口插件基本上是常态。但是你选择哪一个可能是一个非常复杂的过程。

JavaScript插件提供最多的样式和控件。我更喜欢这些因为几乎每个用户都启用了JavaScript，所以他们是一个非常安全的选择。然而，纯CSS可以更兼容，因此有两个方面。

这是我首选的JS模态窗口插件（全部免费）。

leanModal

leanModal是一个简单的jQuery插件，超级易于定制。它有一个非常小的库，所以几乎所有东西都是完美的。但是它不支持嵌入式内容或幻灯片，因此对于动态内容来说并不是很好。

如果你只需要一个电子邮件注册或广告拦截消息，那么这个插件就没有错。

Remodal

该Remodal插件更进了一步，包括定制CSS3动画。设计风格非常简单，也很容易定制。它实际上是最容易开箱即用的插件之一。

它运行在jQuery / Zepto上，因此您可以选择依赖项。

SimpleModal

如果您正在寻找独特而精心设计的SimpleModal。这是另一个免费的插件，但它有一个糖果涂层与一些辉煌的主题。

我不喜欢背景不会变暗，但你可以调整代码来定制它。我喜欢的是你可以运行的各种内容。SimpleModal可以处理嵌入式内容，iframe，Ajax请求以及您需要的任何内容。

所有这些都是很棒的选择，很多都有vanilla JS + jQuery选项。

我从这个列表中最喜欢的是由Hans Christian Reinl创建的CSS Modal。它免费托管在GitHub上，它具有所有典型的模态窗口功能。

它会使背景变暗，让您设置窗口样式并关闭按钮，如果用户点击/点击窗口框外的任何位置，它也会关闭。

这对我来说是最重要的功能，因为我讨厌当模态窗口迫使你点击X关闭时。大多数用户只需点击屏幕上的其他位置即可关闭模态。使用纯CSS几乎是不可能的，这就是为什么CSS Modal是一个很棒的纯CSS解决方案。

现在开始建设！

无论你使用JS模态还是纯CSS模式，效果应该非常相似。用户以不同的方式对模态作出反应，因此请确保您的模态文本真正吸引注意力而不会过度使用。

如果您不确定自己的内容，可以随时进行A / B测试以比较不同的副本或图像。对于具有注册/登录表单或与界面绑定的任何内容而非仅仅是营销消息的模态也是如此。

通过遵循本指南中的趋势并坚持开源项目，您可以轻松地构建令人难以置信的模态，永不过时。

衡水网站开发