mvc弹出窗口网页窗口_在网页设计中使用弹出窗口(模式)的最佳方法

mvc弹出窗口网页窗口

在本教程中,我们将介绍Web设计中的弹出窗口(模式)。 在设计中使用弹出窗口需要承担一定的责任。 如果粗心地做,添加弹出窗口可能会破坏用户体验。 但是,如果实施得当,它们可能是一个非常有用的工具。

让我们看一下弹出窗口的一些典型示例,研究为什么用户和设计人员可能会如此不喜欢它们,为什么某些用户选择安装弹出窗口阻止程序,以及使它们正常工作的一些最佳实践。

Web设计弹出窗口的最佳做法

请查看下面的视频,或者根据需要查看下面的转录版本。

什么是弹出式窗口?

弹出式窗口(或模式窗口)是一个小的UI元素,它将出现在网站的前台,通常是作为提示用户执行某操作的提示而触发的:

这是一个模态窗口; 您需要在其边界之外单击,或点击关闭按钮以将其关闭。 我们还将此类弹出窗口称为“非页内广告”,因为它们出现在预期内容之间的阶段。

这是一个弹出窗口的示例,一旦用户滚动到页面上的某个位置,该弹出窗口就会从右侧滑入:

首次访问InVision网站时,您会看到一个固定的弹出窗口,该弹出窗口可让您了解Cookie的使用(当今大多数网站上都会出现这种情况)。

显示临时信息(例如促销或通知)的页眉或页脚也可以视为弹出式窗口。

为什么弹出式窗口如此受欢迎?

作为用户,不喜欢弹出窗口的主要原因是它们具有破坏性。 当他们试图完成一项任务时,他们会打断用户的注意力,注意力,注意力。 想象您正在忙于阅读某些东西,然后突然在屏幕中间弹出一个窗口,要求您的注意。 当相关弹出窗口与用户正在做的事情或阅读的内容完全不相关时(例如,定向不良的广告),情况将变得更加糟糕。

并非所有人都讨厌弹出窗口。 实际上,营销人员喜欢他们。 弹出窗口为营销团队提供了专门的位置,可将用户的注意力集中在非常具体的事物上。 研究表明,弹出式窗口处理得当,可以增加转化次数,因此,它们作为营销工具的作用不可低估。

移动弹出窗口

Google认识到弹出式窗口执行不当可能带来的负面影响,因此如今对移动平台上的插页式广告进行处罚。 出现在首页上的弹出窗口或遮盖页面大部分内容的弹出窗口均被视为具有侵入性,并会受到处罚。

只要负责任地使用,弹出窗口就不会受到惩罚。 Cookie通知,年龄验证和不消耗大量屏幕空间的广告都将被视为公平游戏。

使用弹出窗口的3个令人信服的理由

因此,现在我们已经确定弹出窗口是有用的,并且以负责任的方式使用它们是可以接受的,让我们看看您可能想在自己的网站中使用弹出窗口的三个主要原因。

1.他们正在引起注意

微软进行的一项研究显示,当今人们的注意力集中度大约为8秒(甚至金鱼得分都比这好。)。 因此,仅需几秒钟就能吸引用户的注意力是非常宝贵的。 在那几秒钟内,我们可以向用户显示他们可能会错过的内容。

2.弹出式窗口可能会使您的网站混乱

通过将某些类型的内容放置在弹出窗口中,您可以确保您的实际内容可以不受干扰地显示。

3.它们是完全可定制的

弹出窗口可以采用您希望的任何形式。 可以根据其外观和功能对其进行自定义。 它们是用网络的构建块构建的。 HTML和CSS,因此您无所不能。 因为您将使用JavaScript确定何时显示弹出窗口,所以您在其中也有很多自由。 您可能会选择在页面加载时显示弹出窗口,或者当用户滚动到某个元素时,或者甚至当用户将光标移到浏览器窗口之外时也显示弹出窗口(这称为“退出意图”)。

使用弹出窗口的最佳做法

考虑到所有这些事情,让我们看一些最佳实践。

1.保持一致

弹出窗口应遵循与您的网站相同的样式。 如果不是这样,最终结果将特别令人不快,并可能引起用户的不信任感。

2.使他们React灵敏

如今,大多数互联网用户都在移动设备上这样做。 确保弹出式窗口在移动设备上和在桌面上一样敏感地显示; 首先,如果您不这样做,Google会打您的手腕,但更重要的是,我们实际上正在努力改善用户体验。

3.使您的副本简短明了

不要使用太多文字-没人想在弹出窗口中阅读小说。

4.不要收集比必要更多的信息

如果您要收集潜在客户,则在大多数情况下,电子邮件地址绰绰有余。 不要使事情过于复杂,因为没人喜欢填写长格式。

5.不要重复自己

不要多次向同一用户显示相同的弹出窗口。 如果用户第一次不小心点击了一次弹出窗口,则可能会两次显示一次弹出窗口,但一定不要再次显示它。

6.在相关的弹出窗口中显示

在内容或上下文与用户正在执行(或尝试执行的操作)相关的位置显示弹出窗口。

结论

还有更多最佳做法可供考虑,但我在此处列出了前六名。 随时在评论中添加您自己的。 享受实现弹出窗口的乐趣,并记住要负责任地使用它们!

翻译自: https://webdesign.tutsplus.com/tutorials/the-best-way-to-use-pop-ups-modals-in-your-web-design--cms-33070

mvc弹出窗口网页窗口

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值