请选择 进入手机版 | 继续访问电脑版
访问手机版

随时随地访问,扫描体验手机版

游客您好
第三方账号登陆
  • 点击联系客服

    在线时间:8:00-16:00

    反馈QQ

    1263810394

    电子邮件

    yanzheng@puhuajia.com
  • 普画网

    随时随地分享快乐

  • 扫描二维码

    关注普画网公众号

普画网 首页 插画设计 插画灵感文章

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

美术分享吕一(未知职业)-本文作者
这个人很懒,什么也没有留下。
2184 0 2020-2-9 17:08
来自: tutsplus.com 收藏 邀请
在本教程中,我们将介绍Web设计中的弹出窗口(模式)。在设计中使用弹出窗口需要承担一定的责任。如果粗心地做,添加弹出窗口可能会破坏用户体验。但是,如果实施得当,它们可能是一个非常有用的工具。

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

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

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

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

flightclub.com上的弹出示例

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

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

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

在shankman.com上弹出

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

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

InVision中的Cookie使用弹出窗口

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

微信

鲜花
本文暂无评论,快来抢沙发!

阅读排行
热门话题
手绘插画社,中国手绘插画者的网上家园,包含 素描、插画、绘画、手绘、素材、动漫资讯、动漫美图、动漫周边,动漫音乐等相关内容,欢迎投稿

扫描二维码

随时访问手机端

免责声明:本站不提供任何版权视听上传服务,所有内容均来自用户分享站点所提供的公开引用资源,作品版权归原作者所有 仅供学习欣赏使用 禁止任何形式商用 违者必究。

Powered by Discuz! X3.4© 2001-2013 Comsenz Inc. 星点互联设计 ( 京ICP备19014251号-1