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

LiaoSam2015-03-22外贸38372 次访问46 评论

cover10-1
HTTP 返回404 或 Not Found 错误信息是一种HTTP状态码,代表客户端在浏览网页时,服务器无法正常提供信息,或是服务器无法回应且不知原因。

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

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

ie-404

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

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

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

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

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

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

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

截图如下

404-page
404-game1404-game2404-game3

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

访问方式

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

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

 

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

分享到微信朋友圈

LiaoSam
LiaoSam
识不足则多虑,威不足则多怒,信不足则多言。

46条评论

发表我的评论

取消评论

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

已读说明
设为私密评论
添加表情

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

您的邮箱地址不会公开,仅仅用于收取回复。建议填写QQ邮箱,不宜填写工作邮箱。
  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址 (没有就留空)
呃,评论有点多呢... 料网小秘书为您玩命加载中...
  1. #29

    我举报,拳皇97无法加载!!! :cry:

    3年前 (2017-01-15)回复
    • LiaoSam
      Liaosam,外贸综合症患者。
      @lmx 那个游戏 SWF 文件不支持 https 源,我也没办法了。本来还想试试把源文件 swf 下载下来,结果不行。下载 NEO 模拟器SWF 到本地不支持识别游戏。
      3年前 (2017-01-16)回复
  2. #28
    Kevin.Sun

    KOF 还是用摇杆玩的爽,键盘别扭。。

    3年前 (2016-11-06)回复
  3. #27
    Kevin.Sun

    玩了两把,挺爽!

    3年前 (2016-11-06)回复
  4. #26

    个人类网站(例如博客)可以这样做,提高用户的体验度嘛

    但可否想过,如果企业站这样做???
    客户甚至会觉得你公司是否被黑户入侵
    所以我觉得企业站的404错误页面只需要一个公司LOGO简单一两句话就可以
    避免带来不必要的麻烦

    4年前 (2016-02-01)回复
    • LiaoSam
      Liaosam,外贸综合症患者。
      @外贸白武士ExportWK.com 好多评论没注意,抱歉!都9个月前了。。
      这篇文章不特别针对企业网站,企业网站确实没有必要追求趣味。
      3年前 (2016-11-06)回复
  5. #25
    火火

    这个真的很棒,以前就一直觉得404的页面太丑了,如果是这样的话,估计大家都不想走了,哈哈

    4年前 (2015-10-13)回复
  6. #24
    Miya

    看了好多料神的文章,觉得很受用,不过在查客户数据时还是会有些打不开网页,试了船长,不过好像现在没有免费的,╮(╯▽╰)╭,话说玩了5、6把都没堵住小猫咪

    4年前 (2015-08-13)回复
  7. #23

    我用Wix建站不能自定义404页面…

    4年前 (2015-06-29)回复
  8. #22

    我的头像没了,之前有成功过的啊…

    4年前 (2015-06-06)回复
  9. #21

    三把才搞定小猫咪,不能光想着堵,得给个套他钻…

    4年前 (2015-06-06)回复
  10. #20
    Windows10

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

    4年前 (2015-05-27)回复
  11. #19

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

    4年前 (2015-05-21)回复
  12. #18
    卡西Jane

    刚注册了头像,试一下

    4年前 (2015-05-12)回复
  13. #17
    卡西Jane

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

    4年前 (2015-05-12)回复
    • MRLI

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

      4年前 (2015-07-09)回复
      • 卡西Jane

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

        4年前 (2015-07-09)回复
  14. #16
    inheal

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

    5年前 (2015-05-07)回复
    • LiaoSam
      料神Sam,外贸综合症患者。
      @inheal 菜鸟估计设置有点难度,找网页制作的人吧。
      4年前 (2015-05-12)回复
  15. #15
    Albert

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

    5年前 (2015-04-23)回复
    • LiaoSam
      料神Sam,外贸综合症患者。
      @Albert 百度很多教程啊,怎样给网站添加404页面等等。
      4年前 (2015-05-12)回复
      • Albert

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

        4年前 (2015-05-13)回复
  16. #14

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

    5年前 (2015-04-20)回复
  17. #13

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

    5年前 (2015-04-20)回复
  18. #12

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

    5年前 (2015-04-14)回复
  19. #11
    Derek

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

    5年前 (2015-03-31)回复
    • LiaoSam
      料神Sam,外贸综合症患者。
      @Derek 呵呵,谢谢建议。可能我口味比较宽泛,所以觉得还算OK。还好没有放一些日系少女漫画图片做文章配图。 :mrgreen: :mrgreen:
      5年前 (2015-04-15)回复
  20. #10
    Amber

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

    5年前 (2015-03-30)回复
  21. #9

    不能再牛了。。。。。

    5年前 (2015-03-28)回复
  22. #8

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

    5年前 (2015-03-26)回复
    • LiaoSam
      料神Sam,外贸综合症患者。
      @陆陆 在你的主题文件找到functions.php,用notepad++打开,在里面加上一个邮件通知的函数(可以去网上找一下Wordpress大前端D8主题,然后在主题functions.php里找到 function comment_mail_notify()这个函数,如果没有这个函数就去yusi123.com在欲思的主题yusi里找。复制放到你的主题functions.php里面),然后后台插件搜索一个国人写的WP SMTP插件,设置好,即可实现有评论自动邮件通知。
      5年前 (2015-03-27)回复
      • @料神Sam 我把这个有邮件通知函数打进去了,可是好像还是不太好使,是要使用@规则么? smtp倒是可以正常使用。
        另外料神你没有注册企业邮箱么?那个126提醒邮件不知道为什么被outlook的邮箱默认成黑名单了。

        5年前 (2015-03-29)回复
        • LiaoSam
          料神Sam,外贸综合症患者。
          @陆陆 我企业邮箱仅仅工作用。料网要设置一个专门发提醒邮件的邮箱,我就用126我感觉比较合适的。可能你在料网第一次评论的时候填写的邮箱是工作邮箱?我一般在wordpress类博客上评论都是留QQ邮箱。填工作邮箱有时候被回复了有点被打扰。。
          5年前 (2015-03-29)回复
      • @料神Sam 料神打扰了,我用了欲思提供的代码改了改好像可以用了,麻烦你了。

        5年前 (2015-03-29)回复
        • LiaoSam
          料神Sam,外贸综合症患者。
          @陆陆 嗯,欲思主题是D8的深度修改版,加了不少函数。我记得邮件通知函数好像是D8本身带的,不过yusi肯定是有的。
          5年前 (2015-03-29)回复
  23. #7
    Mica

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

    5年前 (2015-03-25)回复
    • LiaoSam
      料神Sam,外贸综合症患者。
      @Mica 圈子可以围大一点 :)
      5年前 (2015-03-25)回复
      • Mica

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

        5年前 (2015-03-25)回复
  24. #6

    童年时候的记忆啊。。

    5年前 (2015-03-25)回复
  25. #5
    JUDYHU

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

    5年前 (2015-03-25)回复
  26. #4
    meranda

    封面人物好美丽,beautiful lady

    5年前 (2015-03-25)回复
  27. #3
    Jimmyliang

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

    5年前 (2015-03-24)回复
  28. #2
    kenny

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

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

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

    5年前 (2015-03-22)回复
    • LiaoSam
      料神Sam,外贸综合症患者。
      @pale 呵呵,我KOF97和俄罗斯方块玩了一晚上。怀旧了一把~
      5年前 (2015-03-22)回复