外贸

利用趣味404页面提高用户体验度

料神Sam发布于 2015-03-22阅读 52936 次评论 46

利用趣味 404 页面提高用户体验度-料网 - 外贸老鸟之路
HTTP 返回 404 或 Not Found 错误信息是一种 HTTP 状态码,代表客户端在浏览网页时,服务器无法正常提供信息,或是服务器无法回应且不知原因。

搜索引擎蜘蛛在请求某个 URL 时得到“404”状态回应时,即知道该 URL 已经失效,便不再索引该网页,并向数据中心反馈将该 URL 表示的网页从索引数据库中删除。

最常见的反应是用户输入了某个 URL 链接地址之后,网页提示“无法找到页面”。我想很多人都见过早期版本的 IE 浏览器返回“无法找到网页”这种情况,页面太丑而且不够友好。

利用趣味 404 页面提高用户体验度-料网 - 外贸老鸟之路

有些时候是用户自己输入的 URL 有错误,也有时是网站把之前的页面调整或删除,原先的链接地址失效页面不存在。

那么我们设计 404 页面有两大好处:
1)引导用户不要关闭网页,增加用户停留时间,增强用户体验。
2)防止网站出现死链接对蜘蛛爬取不利。

404 页面如何设计是可以根据我们的需要来确定的。
比如:意外进入 404 错误页面后提示页面失效,5 秒后返回首页;放一条公益广告;又或是把一些推荐文章和专题,图片等能放的全塞进去。。

自定义你的 404 错误页面是增强用户体验的非常有效的措施,一个趣味的图片,友好地提示出错并且给出链接返回首页或者主要频道,这也是非常常见的自定义的 404 错误页面采用的方式,可以降低网站的跳出率。

而实际上,我们也可以给 404 错误页面加上一些有趣的小游戏,最大限度降低出错页面带给浏览用户的突兀感。

昨晚做了一个内含多款小游戏的 404 错误页面,方便 Sam 和大家闲事玩玩。

暂时放置了三款小游戏:拳皇 KOF97,困住猫咪,俄罗斯方块。
注:用移动端的浏览器访问 404 页面(如手机 UC 浏览器),游戏可能无法加载会显示空白。

截图如下

利用趣味 404 页面提高用户体验度-料网 - 外贸老鸟之路
利用趣味 404 页面提高用户体验度-料网 - 外贸老鸟之路利用趣味 404 页面提高用户体验度-料网 - 外贸老鸟之路利用趣味 404 页面提高用户体验度-料网 - 外贸老鸟之路

如果你工作累了,也不想听音乐,那么不妨来玩玩料网的 404 页面暗藏的众多小游戏吧。

访问方式

触发 404 错误页面
访问格式:https://www.liaosam.com/x  (X=任意长度的任意字符或数字)

即:只要输入一个不存在的页面地址,就会出现这个 404 页面。
如:https://www.liaosam.com/10086

 

本站所有文章除注明“转载”的文章之外,均为原创。未经本站允许,请勿随意转载或用作任何商业用途,否则依法追究侵权者法律责任的权利。

分享到: 微信 新浪微博 QQ Qzone
料神Sam
识不足则多虑,威不足则多怒,信不足则多言。
SiteGround外贸建站主机优惠券

46条评论

发表我的评论

取消评论

邮箱白名单说明:最近料网自动提醒邮件经常会被一些邮件服务商拦截。为了您顺利并及时地收取留言被回复的提醒邮件,请在您邮箱中把料网 liaosam.com 加入白名单域名。

我不是机器人
设为私密评论
添加表情

Hi,您需要填写昵称和邮箱!

您的邮箱地址不会公开,仅仅用于收取回复。建议填写QQ邮箱,不宜填写工作邮箱。
  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址 (没有就留空)
  • 问题验证:今年年份是?
呃,评论有点多哦.. 请稍等
  1. Windows10Chrome · Windows 7

    第一次发现这么好玩的事好像是两三年前 1688 上那个有点掉节操的 not found 图 :mrgreen:

    10年前 (2015-05-27)
    广东
    回复
  2. 猫妖Chrome · Windows 7

    上班时间,打开这个网页玩游戏,真的好么。。。

    10年前 (2015-05-21)
    江苏
    回复
  3. 卡西JaneChrome · Windows 7

    刚注册了头像,试一下

    10年前 (2015-05-12)
    美国
    回复
  4. 卡西JaneChrome · Windows 7

    美丽的嫂夫人镇楼,哈哈哈哈

    10年前 (2015-05-12)
    山西
    回复
    • MRLIChrome · Windows 7

      @卡西Jane 我说怎么这么多技能呢

      10年前 (2015-07-09)
      浙江
      回复
      • 卡西JaneChrome · Windows 7

        @MRLI 料神夫人没有注册料网的账号吧好像。。

        10年前 (2015-07-09)
        吉林
        回复
  5. inhealFirefox · Windows 7

    我们公司刚做了自己的官网,但是外包给别人做的。这个 404 的错误页面自己菜鸟能设置么

    10年前 (2015-05-07)
    浙江
    回复
    • 料神Sam 外贸综合症患者.搜狗浏览器 · Windows 7
      @inheal 菜鸟估计设置有点难度,找网页制作的人吧。
      10年前 (2015-05-12)
      安徽
      回复
  6. AlbertChrome · Windows XP

    404 正好是最近我在发愁的问题,Google analysis 显示我的网站出现了几十个 not found 的页面,请料神分享或推荐下 404 设置的方法和攻略,万分感激!

    10年前 (2015-04-23)
    山东
    回复
    • 料神Sam 外贸综合症患者.搜狗浏览器 · Windows 7
      @Albert 百度很多教程啊,怎样给网站添加 404 页面等等。
      10年前 (2015-05-12)
      安徽
      回复
      • AlbertChrome · Windows XP

        @料神Sam 嗯,五一期间已着手学习现在在改进中。。。话说料神名字旁边加的英雄技能很闪亮啊,建议再加个全屏,哈哈

        10年前 (2015-05-13)
        山东
        回复
  7. 买木耳Firefox · Windows 7

    漂亮的 404 的确能留住用户很多秒

    10年前 (2015-04-20)
    山西
    回复
  8. 泊虾网站开发Chrome · Windows 7

    思路很受启发,我们一般制作 404 的时候,都只是简单地做个图示说明,很少想到利用这个页面来展现点东西。

    10年前 (2015-04-20)
    上海
    回复
  9. frankChrome · Windows XP

    哈哈。感觉还蛮好玩的哦~

    10年前 (2015-04-14)
    广东
    回复
  10. DerekChrome · Windows 7

    料网的每篇文章都配了一副精美的图片,和文章主题比较协调。但是不同文章的图片风格差异较大,就不那么协调了。

    10年前 (2015-03-31)
    广东
    回复
    • 料神Sam 外贸综合症患者.搜狗浏览器 · Windows 7
      @Derek 呵呵,谢谢建议。可能我口味比较宽泛,所以觉得还算 OK。还好没有放一些日系少女漫画图片做文章配图。 :mrgreen: :mrgreen:
      10年前 (2015-04-15)
      安徽
      回复
  11. AmberFirefox · Windows XP

    封面人物是料嫂吗? :oops:

    10年前 (2015-03-30)
    陕西
    回复
  12. 料神门下走狗Chrome · Windows XP

    不能再牛了。。。。。

    10年前 (2015-03-28)
    浙江
    回复
  13. 陆陆Mozilla · Windows 10

    料神太牛了,另外你是怎么做到你评论了我这边也能收到邮件提醒的呢?我用了 mail to commenter 的插件好像没啥反应?

    10年前 (2015-03-26)
    江苏
    回复
    • 料神Sam 外贸综合症患者.UC浏览器 · iPhone
      @陆陆 在你的主题文件找到 functions.php,用 notepad++打开,在里面加上一个邮件通知的函数(可以去网上找一下 WordPress 大前端 D8 主题,然后在主题 functions.php 里找到 function comment_mail_notify()这个函数,如果没有这个函数就去 yusi123.com 在欲思的主题 yusi 里找。复制放到你的主题 functions.php 里面),然后后台插件搜索一个国人写的 WP SMTP 插件,设置好,即可实现有评论自动邮件通知。
      10年前 (2015-03-27)
      北京
      回复
      • 陆陆Mozilla · Windows 10

        @料神Sam 我把这个有邮件通知函数打进去了,可是好像还是不太好使,是要使用@规则么? smtp 倒是可以正常使用。
        另外料神你没有注册企业邮箱么?那个 126 提醒邮件不知道为什么被 outlook 的邮箱默认成黑名单了。

        10年前 (2015-03-29)
        江苏
        回复
        • 料神Sam 外贸综合症患者.搜狗浏览器 · Windows 7
          @陆陆 我企业邮箱仅仅工作用。料网要设置一个专门发提醒邮件的邮箱,我就用 126 我感觉比较合适的。可能你在料网第一次评论的时候填写的邮箱是工作邮箱?我一般在 wordpress 类博客上评论都是留 QQ 邮箱。填工作邮箱有时候被回复了有点被打扰。。
          10年前 (2015-03-29)
          安徽
          回复
      • 陆陆Mozilla · Windows 10

        @料神Sam 料神打扰了,我用了欲思提供的代码改了改好像可以用了,麻烦你了。

        10年前 (2015-03-29)
        江苏
        回复
        • 料神Sam 外贸综合症患者.搜狗浏览器 · Windows 7
          @陆陆 嗯,欲思主题是 D8 的深度修改版,加了不少函数。我记得邮件通知函数好像是 D8 本身带的,不过 yusi 肯定是有的。
          10年前 (2015-03-29)
          安徽
          回复
  14. MicaChrome · Windows XP

    玩了好几把,终于没让小猫跑出去

    10年前 (2015-03-25)
    江苏
    回复
    • 料神Sam 外贸综合症患者.搜狗浏览器 · Windows 7
      @Mica 圈子可以围大一点 :)
      10年前 (2015-03-25)
      安徽
      回复
      • MicaChrome · Windows XP

        @料神Sam 嗯嗯,学习了。有空继续试试,谢谢。

        10年前 (2015-03-25)
        江苏
        回复
  15. mycdr猎豹安全浏览器 · Windows 7

    童年时候的记忆啊。。

    10年前 (2015-03-25)
    浙江
    回复
  16. JUDYHUChrome · Windows 7

    好玩吧,不自觉地玩了一把,料神真的是有料~~

    10年前 (2015-03-25)
    广东
    回复
  17. meranda猎豹安全浏览器 · Windows 7

    封面人物好美丽,beautiful lady

    10年前 (2015-03-25)
    河北
    回复
  18. JimmyliangQQ浏览器 · Windows 7

    思路这是杠杠滴,大神的销售真是无处不在啊,佩服!

    10年前 (2015-03-24)
    浙江
    回复
  19. kenny搜狗浏览器 · Windows 7

    好有趣 我们的面向客户的官网这么设置是不是也挺有趣的?

    10年前 (2015-03-23)
    广东
    回复
    • 料神Sam 外贸综合症患者.搜狗浏览器 · Windows 7
      @kenny 应该降低出现 404 页面的可能。企业网站我觉得可以加一点 call to action 类似于 Request a E-Catalogue / Check the Latest Prmotion / 20% Price Off 之类的东西,毕竟你的目的是营销。
      10年前 (2015-03-23)
      安徽
      回复
  20. paleChrome · Windows 7

    这个好,学习学习,小小玩一把拳皇,爽

    10年前 (2015-03-22)
    美国
    回复
    • 料神Sam 外贸综合症患者.搜狗浏览器 · Windows 7
      @pale 呵呵,我 KOF97 和俄罗斯方块玩了一晚上。怀旧了一把~
      10年前 (2015-03-22)
      安徽
      回复