404页面 - UCD大社区

Hello! 404

番茄果果 — 2010-09-03 09:58:12

1. 什么是404

404是一个 http 错误代码，即请求的网页不存在。代码404的第一个“4”代表客户端的错误，如错误的网页位址；后两的数字码则代表着特定的错误讯息。就是当用户输入了错误的链接时，返回的页面。这样的目的是告诉浏览者其所请求的页面不存在或链接错误，同时引导用户使用网站其他页面而不是关闭窗口离开。

Google简洁的页面与的品牌精神是一致的，包涵基本的出错提示和问题描述

2. 为什么需要404页面

搜索引擎蜘蛛在请求某个URL时得到“404”状态回应时，即知道该URL已经失效，便不再索引该网页，并向数据中心反馈将该URL表示的网页从索引数据库中删除，当然，删除过程有可能需要很长时间；而当搜索引擎得到“200”状态码时，则会认为该URL是有效的，便会去索引，并会将其收录到索引数据库。所以，自定义404错误页面不仅是增强用户体验的好做法，而且对搜索引擎也是相当重要的。

3. 良好的404页面应该遵循的理念

①提供简明的问题描述，用轻松的话语消除访客的挫败感，使得访客转到某个地方而不是后退。

②提供合理的解决方案，辅助访客完成访问目标。

③提供个性化的友好界面，提升访问体验。

用幽默的语言和亲切的贴纸画面打消用户的挫败感

http://dict.qq.com/404.html

4. NO! 拒绝乏味

一个拥有良好设计的404错误页面可以帮你避免失去用户的信任，潜在地建立你的用户关系并能留住你的用户，使其在浏览你的网站的时间更长。下面给大家带来一些创意的404界面设计参考，希望你能喜欢它们并能从中获取灵感：

方法① ：整体一致性

404页面同样需要保留本站的基础元素，让它看起来还是你的网站，让用户迷茫的时候能够回想起自己为何身在此处；

方法②： 让用户跟你走

给用户有用的链接，避免过于简单和技术，用丰富设计把用户拉回来，报告错误原因或提供联系方式，减少挫败感，减少那些痛苦的、毫无帮助的信息。增加建议让用户跟着你走, 利用转向将用户导入指定的页面；

方法③： 用轻松的手绘涂鸦风格

用轻松的手绘，表达放松的心情，404错误并不可怕，请原谅我们美丽的错误；

方法④： 精致的细节刻画

精致的设计往往可惜吸引用户驻足观看，仔细观察，生怕漏掉细节，当用户被精致打动的时候，对你的网站就会平添更多的怜爱之情；

方法⑤： 楚楚可人的道歉

用情感打动用户，挽留它们的关闭和离开；

方法⑥： 拟物化的场景烘托

用实际物体为元素设计的404页面，可以更好的和本站的主题契合，实物有不可比拟的真实感，是一种很好的表现手段；

方法⑦： 幽默的手段和趣味情节

老奶奶找不到自己的宠物了！Oh~~原来坐在了屁股底下……

多么可爱的错误啊，看到这一切，您还会为404的小错误生气么？放松一下，给错误带上幽默的情节，原来错误也可以很美……

版权所有 © 2008 - 2010
您看到的文章来自腾讯CDC博客 http://cdc.tencent.com ，原文链接为 http://cdc.tencent.com/?p=2907 ，转载时请注明出处。

相关话题：404页面源地址：http://cdc.tencent.com/?p=2907

100个最搞笑最创意的404错误页

令狐伯爵 — 2009-03-29 06:19:00

原文作者：Francesco Mugnai
原文链接：The 100 most funny and unusual 404 error pages
译者：令狐伯爵

我的一个最大的收集。
我喜欢任何形式的创意，一个良好的错误网页设计也不例外。
在这里，有我最喜欢的100个错误网页设计列表

如果您喜欢这个文章，请 Stumble this，或者将其添加到 delicious。

最新资料：你有一个自定义错误页？分享它！

相关话题：404页面源地址：http://www.yeeyan.com/articles/view/25766/35295

404页面优化体验

langmuir — 2008-11-28 12:29:53

名词解释：404页面是当客户端使用HTTP浏览网页时，服务器需要针对不同的“要求”提供不同的“回应”，譬如浏览器发出HTML文件（网页）的要求，并带有数字回应码和MIME的讯息。代码404的第一个“4”代表客户端的错误，如错误的网页位址；后两的数字码则代表着特定的错误讯息。HTTP的三字符代码跟早期通讯协定FTP和NNTP的代码相当类似。

从HTTP的层面来看，404讯息码之后通常会有一个可读的讯息“Not Found”，许多网络服务器的默认页面也都有“404”代码跟“Not Found”的词汇。

404错误讯息通常是在目标页面被更动或移除之后显现的页面。（引自wikipedia）

为什么需要个性化的404页面

首先看一个关于404的公开投票调查。

问题：

当你遇到一个404页面你会怎样做？

A.点击后退按钮同时忘记404页面
B.尝试回到主页并重新定位丢失的页面
C.写信给网站管理员
D.非常沮丧

如果你不在意访客的抱怨，你会发现许多访客在遇到404页面时不会努力寻找丢失的页面而离开站点。然而你可以简单地通过个性化定制404错误页面将这些访客留在你的站点。

如何实现一个良好的404页面

改变服务器默认错误页面就可以达到效果。下面是一些可以使得访客轻松实现正常访问的建议。

遵循的理念：

提供简明的问题描述，消除访客的挫败感。

提供合理的解决方案，辅助访客完成访问目标。

提供个性化的友好界面，提升访问体验。

实现方式（按照从简单到复杂的顺序排列）：

使得访客转到某个地方而不是后退。

页面包含该站点重要部分的链接，如主页或站点地图。不要仅仅告诉他们检查拼写。使用文本的链接替代图片，因为有许多访客不会想到点击这个图片。
例子：我们的站点有一个主页的返回链接。这是实现友好反馈的最低限度。

此外，我们还会考虑，在有效的帮助信息不足的情况下，如何通过访客的反馈弥补错误。
需要包括一个指向网站管理员的email链接，或者一个用于提交丢失链接的表格。
相对于发送email，访客更喜欢使用提交表格。

加入一个搜索框用于搜索站点。
例：MSN在所有页面的底部都有一个搜索框，同时也链向站点的重要部分。

在站点中列出接近于访客期望页面的链接，用于推测访客正在寻找的页面。

你不需要采纳上述所有的建议，但是这些建议一致服务于使得访客更愿意停留在你的站点的目的。
合理的404错误页面至此即可以完成了，这将给访客提供许多有价值的信息。

使用重定向

如果你经常检查访客统计，可能会看到某一个页面一直在显示404页面（如：因拼写错误而链接到站点不存在的页面），你可以创建一个重定向页面反馈给访客一个正确的页面。这个方法适用于访客多次访问并返回错误的页面。

重定向与404页面的可以整合使用，你可以使用类似下述内容的说明信息：
对不起，该页面未找到。几秒钟后，该页面会被重定向到主页。

给访客5秒钟时间阅读该信息，之后跳转。

不论你怎么做，小心使用重定向。最糟糕的情况是你重定向到一个不存在或不相关的页面。

使用的方式很简单，下面是一个例子。

content后面的数字是秒数，你可以设定重定向执行前的等待时间。

个性化404页面示例

http://www.galiacho.es/404
http://www.palmflying.com/404
http://www.martinkorner.co.uk/404df
http://www.porcupine.gr/404
http://bluevertigo.com.ar/404
http://lumino.us/404
http://www.pen-and-paper.de/404.php

相关话题：404页面源地址：http://www.mdong.org/?p=308

几坨很搞笑的 404 页面

煎蛋 — 2008-12-07 11:16:12

跟我们以前发过的 404 贴不同的是，下面是些主要是用了很 BT 的图片在 /404 页面。via

我最喜欢这个南方公园版：“TMD！页面怎么不见了？”

还有猫咪版：“服务器当当当鸟，管理员维护中...”

其它的自己看 :P

相关话题：404页面源地址：http://jandan.net/2008/12/05/creative-404-pages.html

设计一个好用的错误页面

dreamcog — 2008-12-04 23:06:11

下面从一个非常简单的例子来说明如何设计一个好用的错误页面。
例子是豆瓣网站的错误页面，首先我们看现在的豆瓣的错误页面，如下图所示，整个页面比较复杂，信息很多，包括了

1.    “标题”说明错误信息。
2.    具体的错误信息。
3.    可能造成的原因。
4.    你可以怎么做？
5.    详细的错误信息

首先我们来回答下面三个问题：

1.谁会看到这个错误页面？

绝大多数情况是普通用户看到。工程师调试的时候可能看到。

2.什么情况下看到这个错误页面？

可能出现错误页面的原因有：
1.链接失效，内容被删除或转移
2.链接根本不存在，404错误
3.程序造成的bug

3.我们想让看到的人做些什么？

1.告诉用户出现错误
2.可能需要用户的反馈。
3.给一个有用的链接

因此我们基于以上的分析，我们考虑得到以下的一些结论：

1. 首先这个错误页面要是简洁明了的说明错误的。可以包括一个小的图片，为什么要包括图片呢？因为视觉上的图形会给用户一个非常直观的印象，恩，这里出错了。但是图片又不能太大，因为图片加载需要时间，如果出现图片还在加载的时候，就失去了给用户第一视觉的冲击。比较优秀的这个方面的例子，我们参考了：

1. last.fm

2. 淘宝网

2. 其次，提示语言要简单，也可以比较人性化。但是详细信息可以不出现，因为要用到这个详细信息的用户太少，而且会造成整个页面的复杂，和视觉噪音。
3. 我们同时也希望得到一些用户的反馈，这时我们可以考虑是否让用户发送错误信息给我们。但是因为如果是简单的放置错误信息，给出帮助中心的link。会造成用户的操作很复杂，同时我们前面说过，详细信息使用的人太少，因此，为5%的使用人数来造成95%的人的迷惑，这个是非常不值得的事情。这里我们参考了cooper.com的页面设计，虽然他们是给出可以点击的email链接。但是我们进行了改进，做成一个可以点击的按钮，用户点击，错误信息会直接发送到后台。

1. cooper.com

4. 最后，我们希望告诉用户还可以去哪里？给他们一些可能有用访问的链接。在这里我们参考了很多的设计。比较正面的有：

1.    digg.com

2.    cooper.com

3.    last.fm给出的链接太多。所以我们认为是一个不好的设计。

4.    taobao.com给出的link也太多，虽然进行了分级的设置，但是我还是觉得过于复杂。不利于用户的选择。
因为用户在选择的时候，你给用户一个链接，用户可能点击，但是如果你给它10个link。用户可能就放弃了点击的欲望，因为用户不知道如何选择。需要阅读，思考。到点击。这个我们认为是一个非常不好的设计。

最后，我们去掉了很多没有用的，可以简化的错误页面。例如，评论转成日记，活动转成小组等。这些完全可以直接程序跳转而不用经过错误页面，确切的说这些也不能算作错误。
其次，我们去掉了如果需要登陆才能访问的时候的错误页面，而跳转到登陆页面，给出红色的提示字符。

需要说明的是，这个页面的css是写死在页面内部的，因为错误的情况可能造成css也加载不全。所以写死在页面内部是一个最保险的情况。

因此，我们最后的成型的设计包含了3类页面：

1.已知错误页面，包括被删除，页面不存在等等。

2.程序bug的错误页面。用户可以选择去提交这个错误，但是操作非常方便。

3.未登录或者权限不够的错误页面，直接跳转到login，给出红色的字提示。

以上仅为自己的一些思考。不对地方请指正。