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

料神Sam2015-03-22外贸44838 次访问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

 

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

分享到: 微信 新浪微博 QQ Qzone
料神Sam
料神Sam
识不足则多虑,威不足则多怒,信不足则多言。

46条评论

发表我的评论

取消评论

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

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

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

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

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

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

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

    玩了两把,挺爽!

    6年前 (2016-11-06)回复
  4. 个人类网站(例如博客)可以这样做,提高用户的体验度嘛 但可否想过,如果企业站这样做??? 客户甚至会觉得你公司是否被黑户入侵 所以我觉得企业站的 404 错误页面只需要一个公司 LOGO 简单一两句话就可以 避免带来不必要的麻烦

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

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

    7年前 (2015-10-13)回复
  6. Miya

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

    7年前 (2015-08-13)回复
  7. 我用 Wix 建站不能自定义 404 页面…

    8年前 (2015-06-29)回复
  8. 我的头像没了,之前有成功过的啊…

    8年前 (2015-06-06)回复
  9. 三把才搞定小猫咪,不能光想着堵,得给个套他钻…

    8年前 (2015-06-06)回复
  10. Windows10

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

    8年前 (2015-05-27)回复
  11. 上班时间,打开这个网页玩游戏,真的好么。。。

    8年前 (2015-05-21)回复
  12. 卡西Jane

    刚注册了头像,试一下

    8年前 (2015-05-12)回复
  13. 卡西Jane

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

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

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

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

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

        7年前 (2015-07-09)回复
  14. inheal

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

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

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

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

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

        8年前 (2015-05-13)回复
  16. 漂亮的 404 的确能留住用户很多秒

    8年前 (2015-04-20)回复
  17. 思路很受启发,我们一般制作 404 的时候,都只是简单地做个图示说明,很少想到利用这个页面来展现点东西。

    8年前 (2015-04-20)回复
  18. 哈哈。感觉还蛮好玩的哦~

    8年前 (2015-04-14)回复
  19. Derek

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

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

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

    8年前 (2015-03-30)回复
  21. 不能再牛了。。。。。

    8年前 (2015-03-28)回复
  22. 料神太牛了,另外你是怎么做到你评论了我这边也能收到邮件提醒的呢?我用了 mail to commenter 的插件好像没啥反应?

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

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

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

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

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

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

        8年前 (2015-03-25)回复
  24. 童年时候的记忆啊。。

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

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

    8年前 (2015-03-25)回复
  26. meranda

    封面人物好美丽,beautiful lady

    8年前 (2015-03-25)回复
  27. Jimmyliang

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

    8年前 (2015-03-24)回复
  28. kenny

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

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

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

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