sumaart

web site / mobile & h5 / brand design
less is more, art is freedom…

设计观点

Back

网站弹窗的设计技巧

Share

Time:

2018-06-22 10:45:14

Author:

limo

网站是一个企业可以让受众了解其品牌的地方,它做什么、它的企业口碑。他们能从那里得到什么,这本身就是很多信息。在为客户设计网站时,你最不想做的就是做得太过火。网络不是一个多余的地方,它的用户通常没有耐心去筛选塞满信息的页面和页面,只是为了获取相关的信息。


这就是为什么极简主义作为一种设计趋势将持续下去,它可以让网页设计师传达很多关于一个品牌和它的信息,而不必在页面上详细说明。它给品牌一个更干净、更保守的形象,同时也为游客开辟了一条转变的道路。


但是仅仅因为你的设计思想简单和极简主义,并不意味着你不能与访问者分享更多的信息。你只需要找到不那么麻烦和打扰的方法。


几年前,弹出窗口作为一种方式被引入。它在网站中保存相关的信息,而不必侵入设计良好的页面。不过,谷歌自那以来一直在打击它认为会破坏用户体验的弹出窗口的使用,这让一些设计师和开发人员对他们现在应该做什么感到困惑。


那么,这是什么意思呢?弹出窗口是否不再是推广特价商品、分享增值内容、订阅新关注者、或恢复几近亏损的销售的可行方式?在本文中,我将介绍网站弹出窗口的当前状态,并给出一些使用它们时要遵循的最佳实践。


网站弹出窗口的当前状态

首先,让我们讨论一下弹出窗口现在是什么样子,它们是如何使用的,以及为什么您甚至希望将它们包括在您的web设计计划中。


类型的弹出窗口

模态是用户在web上遇到的最常见的类型



它可以直接在网页上打开,滑动到页面上,或者从入口点就在那里。虽然这些通常可以在页面的死中心找到,但一些网站现在把它们放在页面的底部,甚至把它们贴在角落里。


通常在进入一个网站时,会出现一个覆盖整个屏幕的间隙或弹出窗口。



通知条可以永久地粘在网站的顶部或底部



使用弹出窗口的5个很好的理由

你可能会认为,由于谷歌在手机弹出窗口(我很快就会讲到……)上的强烈反对,最好完全远离弹出窗口。然而,我将给你5个很好的理由,为什么你设计的大多数网站都应该包含它们:


1、他们引人注目

没有人有耐心去阅读,这就是为什么在弹出窗口中发送引人注目的微信息是如此的伟大。


2、他们把目光投向最重要的东西

弹出窗口给在线访问者带来额外的价值——他们知道这一点。所以,当弹出窗口出现时,他们会立即被吸引到这个提供或增值的机会。


3、他们是通用的

弹出窗口不再将访问者移出浏览器窗口,或者用他们没有意识到的广告阻塞他们的桌面。你现在有很多不同的类型可以使用,它们可以在不同的网站体验点被触发:


在入口

经过一定的滚动点

触发一个动作

在退出之前


4、他们保持现场清洁

正如我之前提到的,极简主义对于使网站美观是很重要的。但如果你有一个特别的信息,你真的想要在访客面前,而不想占用宝贵的有限的房地产,你可以用弹出窗口来传递。


5、他们提高转化率

Sumo研究了用户的弹出窗口和与之相关的转化率。他们发现,弹出窗口有可能以平均3%的速度转换。然而,设计好的弹出窗口有可能使9%的访问者转换成浏览器。


你也可以使用它们来增加网站的参与度。让他们填写一份调查,在社交媒体上分享一些东西,或者在登录页面上观看一段视频。


但是手机弹出窗口有什么问题呢?

谷歌并不讨厌手机弹出窗口。它只是想让web开发人员更聪明地使用它们,因为弹出式窗口通常会对用户造成破坏,尽管在较小的移动屏幕上肯定会更严重。


因此,谷歌已经开始对使用这三种弹出窗口的移动网站进行处罚:



总之,远离:

在移动用户访问的第一页弹出窗口

隐藏了大部分网页的弹出窗口

插页式广告


明白了吗?现在,让我们谈谈当你使用网站弹出窗口时应该做什么。


使用网站弹出窗口的18个最佳实践:

1.不要把弹出窗口仅仅用于有一个时尚的设计元素。如果你用毫无意义的破坏浪费访问者的时间,你将失去他们的信任。

2.设计弹出窗口,让它看起来和网站的其他部分一样好。



3.确保他们的反应

4.保持抄写简短,切中要点

5.不要使用被动的积极的“是/否”,除非这是你的品牌的个性。如果你包括两个CTAs,那就用积极的方式鼓励他们采取行动。

6.如果你想收集联系方式,只需要问一件事:他们的电子邮件地址。

7.确保弹出框的内容与它所显示的页面相关



8.如果可以,避免在第一页显示弹出窗口。给游客一个先适应的机会。不过,对于记录来说,这是谷歌允许的一个条目弹出式(因为隐私非常重要)




9.遵循谷歌的移动规则:没有插入,没有超大的模式,第一页没有弹出窗口

10.不要觉得桌面和手机弹出窗口需要完全相同。为每个设备类型设计弹出窗口

11.总是要包含一个简单的方法来退出弹出窗口:要么在弹出窗口外点击,要么在右上角放置一个“X”按钮

12.当你的弹出窗口出现在现场体验的正确时刻(比如在访客即将离开之前)



13.设置频率规则,这样访问者就不会在每一页或每一次访问中看到弹出窗口

14.在正确的位置放置弹出窗口

15.如果您想要入侵(并且认为访问者会接受它),请将它们放在屏幕的中心



16.如果你想分享一个特别的提议,使用一个粘性的酒吧



17.如果你想在他们在网站上移动的时候给他们一些思考的东西,把弹出框放到一边



18.使用受众细分和目标来创建定制的弹出消息



最后

如果你有一些非常有价值的东西要和访问者分享,或者你知道你有一个方法可以吸引他们回到你的网站,给网站弹出窗口一次机会。不要害怕A/B测试它们,就像你在网站上测试其他元素一样。这里有很多东西可以玩,包括设计、复制、放置、CTA、触发器等等。