杭州企业网站建设：在网上为模态窗口设计趋势

2019.08.23 杭州企业网站建设

69

模态窗口 是这些弹出窗口显示在屏幕上,而不是打开一个新标签/窗口。 他们通常为背景将注意力集中到弹出蒙上一层阴影。

大多数网站运行模态窗口添加一些类型的 行动呼吁 是否这是一个按钮或者一种形式。 但它也可以是一个简单的浏览器信息等功能禁用JavaScript或adblock扩展。

所有页面在窗口优先于这些情态动词是为了吸引注意力。 它们可以被恼人的和彻底的激怒了,但数字不会说谎: 他们的工作 。

让我们有点深入研究当前趋势的模态窗口看到它们是如何工作的,你为什么要使用它们。

黑暗背景&可点击区域

模态窗口遵循类似的设计策略和他们不是非常复杂。

他们杭州企业网站建设大多都使用页面上的一个黑暗的背景将注意力集中到模态的内容。 这不该是一个漆黑一片的背景,因为可以感受到令人生畏。

相反,用户应该看到的页面背后的背景,但它应该有一个降低不透明度。 这可能是90%或50%取决于你有多想要隐藏页面。

Modal Window

在线HTML电子邮件模板编辑器

与 明信片 你可以在线创建和编辑电子邮件模板没有任何编程技能! 包括100多个组件来帮助您创建自定义邮件模板的比以往任何时候都要快。 现在试一试 免费!

了解更多其他产品

用户也应该可以点击隐藏模式的背景。

这不是普遍的但是我讨厌当设计师删除或忽略这个功能。 是的通常有一个X按钮或关闭按钮,然而需要做出更多的努力,移动鼠标到那个按钮。

可以点击背景和隐藏的信息。

杭州企业网站建设

一些情态动词使用的动画出现在屏幕上。 这通常是首选,因为它减少了严酷的随机弹出。

模态窗口滑动,褪色,或反弹到视图使它容易对眼睛。 但是别拖出动画!

大多数用户将忽略模态,所以他们不想看一个完整的动画持续3秒。 模态快速,让用户阅读或关闭窗口。

设计不同网站网站但大多数使用白色背景模态与黑暗的文本。 这是最简单的方法设计一个高对比度的信息,可以与任何网站混合。

总体上这些都是一些基本的趋势,所以他们并不是绝对的。 但睁大眼睛你浏览互联网,因为你可能会惊讶有多少不同的风格。

显示技术

有一些常用的趋势营销者想显示某些游客的模态窗口。

绝大多数的模态弹出窗口出现页面加载后几秒钟。 大部分游客都还没来得及阅读网站的了解。 这似乎做情态动词,最糟糕的莫过于,除非他们信息的cookie或adblock设置。

其他显示风格通常工作更好,因为他们是面向用户的行为。 这里有三个最常见的技术:

  • 退出情态动词出现当用户的鼠标离开页面

  • 定时的情态动词之后运行X秒/分钟

  • 情态动词位置出现当用户向下滚动一定量

每个场景都是不同的,应该使用基于观众。

如果你运行一个冗长的博客喜欢Smashing Magazine,那你可能做一个scroll-based弹出。 其他博客像WPBeginner确实 退出模式的策略 ,看到一个巨大的增长在日常电子邮件注册。

不可否认,这些作品。 只是你愿意如何运行情态动词和最终目标是什么。

弹出窗口营销信息

情态动词是主要用于营销所以复制应该在思想和情感的猎物。 最近已经转向了模态窗口 内疚的旅行方式 的按钮。

而不是仅仅有按钮,说“是”和“不”他们甚至你让你感觉不好或有罪关闭窗口。

Elle

似乎这只会让人生气,但是它确实提高转化率。 看看 这种转换XL的帖子 看几个例子。

超越典型的是的/不注册模态也可以找到adblock负罪感在营销信息。 这些出现在一些大型网站,现在要禁止adblock用户。

Business Insider

商业内幕 就是一个例子显示一个弹出模态为每个用户观看。 它不会让你关闭模态没有禁用adblock或支付订阅网站。

任何模态窗口应该说服的目标采取行动。 这可能涉及到 注册表单 也可以是禁用adblock,或者您希望用户做的其它任何事情。

最好的成功来自于优秀的复制和短暂而甜蜜的消息。

纯CSS vs . JS

这是从来没有一个伟大的想法完全重新发明轮子所以模态窗口插件基本上是常态。 但你选择哪一个可以是一个非常复杂的过程。

JavaScript插件提供最具风格和控制。 我更喜欢这些因为几乎每个用户将启用了JavaScript,所以他们是一个很安全的赌注。 然而纯CSS可以更有双方兼容。

这里是我首选的JS模态窗口插件(免费的)。

leanModal

Lean Modal

leanModal 是一个简单的jQuery插件和超级容易定制。 它有一个很小的图书馆适合几乎所有。 但是它不支持嵌入式内容或幻灯片这不是伟大的动态内容。

如果你只需要一个电子邮件注册或一个 adblock消息 这个插件可以做错事的。

Remodal

Remodal

的 Remodal 插件更进一步包括自定义CSS3动画。 设计风格非常简单,也很容易定制。 它实际上是一个简单的插件来获得工作的盒子。

和它运行在jQuery / Zepto所以你有你选择的依赖关系。

SimpleModal

Simple Modal

如果你正在寻找独特而精心设计的检出 SimpleModal . 这是另一个免费插件,但它有一个糖果涂层和一些聪明的主题。

我不喜欢怎样的背景不一样变黑,但是你可以调整代码定制。 我做喜欢的是各种各样的内容您可以运行。 SimpleModal可以使用嵌入的内容,iframes, Ajax请求和你需要的很多东西。

这些都是很棒的选择,许多有香草JS + jQuery选择。

如果你喜欢CSS路线这里有一些不错的选择。

  • CSS模态

  • 基本模态

  • 模态纯CSS

从这个列表是我最喜欢的 这个CSS模态 由汉斯·克里斯蒂Reinl。 它的免费托管在GitHub和所有的典型模态窗口功能。

天色变暗的背景,让你风格的窗口和关闭按钮,再加上它会关闭如果用户单击/水龙头窗外框。

这是最重要的特性对我来说,因为我讨厌当模态窗口强迫你点击X关闭。 大多数用户认为情态动词关闭如果他们在屏幕上点击其他地方。 与纯CSS这几乎是不可能的,这就是为什么 CSS模态 是一个伟大的纯CSS解决方案。

现在的建筑!

杭州企业网站建设去用JS模态或纯CSS模态的影响应该非常相似。 用户对情态动词在不同的方式确保模态文本真的没有售出过多关注。

如果你不确定你的内容你可以 A / B测试运行 比较不同的副本或图像。 这也是对情态动词有注册/登录表单或任何与接口而不是一个营销信息。

遵循本指南的趋势,坚持开源项目可以轻松构建不可思议的情态动词,永远不会过时。


相关推荐
分享： 1 2 3

关键词

手机网站制作手机网站建设企业网站建设做网站价格医疗网站建设营销网站建设网站建设哪家好网站制作方案企业网站制作如何制作网站江门网站优化专业网站建设网站制作公司

热门分享

最新文章

随机推荐

最新案例

联系电话 400-6065-301
在线咨询

留言