如何打造善意优雅的404页面?

   没人会想到网站访客会在错误页面上停留,但实际上这种情况确实存在。特别是在404错误页面上,访客会经常逗留。所以,你可以将404错误页面设计的更加吸引用户,而不应让用户迫不及待离开。

  什么样的404错误页面算好?自然要让人印象深刻,不能看见就烦。同时,其设计过程也可以充满乐趣。那么,你应该怎么做才能为自己的网站设计出优秀的404页面呢?下面是一些小建议和技巧,以及一些不错的范例。

  什么是404错误页面?


  当网站访客进入到不存在的页面时,就会显示404错误页面。其原因有可能是页面被移除、服务器或网络连接失败、用户点击了坏链接或输入了错误的URL。

  通常来说,404错误页面会显示下列信息之一:

  404 Not Found

  HTTP 404 Not Found

  404 Error

  The page cannot be found

  The requested URL was not found on this server

  在对404页面进行整体设计时,有两个选择:普通的404页面或自定义404页面。普通的页面只是简单的甩出上面的信息,不涉及设计内容。而自定义页面则需要你进行设计并提供选项。

  一个优秀的404错误页面应当在用户不慎进入时告诉他们应当如何进行接下来的操作。其中应当提供有用的信息来帮助访客不离开你的网站并进而找到自己所需要的信息。(如果页面本身设计精美就更好了。)

  基本必备信息


  为了保证充分有效,404错误页面从本质上说应当简单一些。它应当说明用户遇到了错误(显而易见),以及可以采取哪些办法离开此页面。

  而大堆的技术术语是不应当出现在404页面上的。(否则岂不会吓跑用户。)实际上,连“404错误”这个大标题都不应该出现在页面上,因为很多用户完全不知道这玩意是什么意思。你应当做的是展示更有意义的信息,例如“没有找到页面”。

  另外还有一些重要信息是404页面所必不可少的。总而言之,设计的关键是让用户在页面出错时继续点击浏览,而不是关闭页面。

  1. 显眼的标题或文字向用户说明出现当前页面的原因。看到自己打开的网页和预期的不是一回事是很恼人的。一定要让用户知道他们打开的页面不正确,但所登陆的网站是没问题的。

  2. 搜索。在404错误页面上提供与网站其他部分相同(且位置一致)的搜索功能。这样一来用户就能自己查找要访问的页面。

  3. 通往主页和网站地图的链接。这个设计要素中可以包含与网站其他部分搭配的标题或脚注。

  4. 其他简化信息。建议删去复杂的导航功能。如果用户进入到错误页面,你只需为其提供简单几个能够导向正确位置的选项。如果选项过多,反而会让用户更加头疼或者困惑。

  5. 加入显眼的操作提示。告诉用户下一步如何操作。

  让404页面具有用途


  在考虑404页面时,设计流程中的一个重要部分就是用途。加入能够让页面既好看又有用的功能。

  对于自定义404页面中应当包含哪些信息,Google的网站管理员工具中提供了一系列很有用的建议。这些建议包括:

  明确告知用户其所寻找的页面无法找到。语言应当友善、诱人。

  404错误页面应当与网站其他部分的外观和感觉相互匹配。

  考虑在其中添加通往热门文章或帖子的链接。

  为用户提供报告坏链接的渠道。

  让网络服务器在收到对丢失页面的请求时返回实际的404 HTTP状态代码,以免其显示在搜索结果中。

  使用Enhance 404工具在自定义404页面中嵌入搜索框。

  使用Change of Address工具将网站的动作告知Google。

  除了上述之外,还有一条给设计师们的提示:发挥创意。404页面,只要技术允许,不一定是很无聊无趣的。

  推荐一组逸趣横生的404网站,可以借鉴 :)《来吧!让你的404页面更有爱》

  设计具有目的性的404页面


  在考虑404错误页面的设计时,首先应思考其与网站其他部分直接的联系。你网站整体设计的氛围和基调是什么?404页面如何才能与其搭配。

  优秀的错误页面应当能够与其所处的网站无缝衔接。如果你的网站采用了明快幽默的基调,则404页面也应当如此。另外,在颜色和图形使用上也应当与网站一致。但在设计过程中,一定要小心谨慎,不要把进入错误页面的责任归咎到用户头上。(这种情况发生的频率绝对超出你的想象。)

  错误页面的设计应当是整体设计方案中的一个组成部分。

  保持设计的一致性。使用与网站其他页面相同的颜色、字体和图形风格。

  保留品牌标识。使用相同的logo、标题和脚注处理方式能够帮助用户识别你的网站。

  保持视觉上的简约。在错误页面上,少就是多。

  不要让用户滚动鼠标。设计应该以一屏为限。

  不要使用太多噱头。虽然与整体网站和品牌保持相同的基调和感觉是个好主意,但是过多的内容反而会让用户忘记自己本来要找的东西。

  表示歉意。用户进入错误页面时你道个歉绝对没问题。

  如果你的网站需要登陆,可以添加登陆功能。(错误是否因为用户需要登陆而造成?)

  发挥创意,或者表现趣味。不要忘记先对页面进行测试。保证所有用户都能理解你的设计。

  如果你使用了“404错误”这句话,则应当再加一行文字告诉用户其意思是什么,或者他们下一步应当如何操作。

  12个优秀范例

  碰到一个优秀的404错误页面时的感觉是很特殊的。它能够减缓错误链接所带来的恼怒。下面的12个页面一定能让你流连忘返。

  Deviant Art

  科学上网。


  Gig Masters


  iFolderLinks


  Lego


  LimpFish


  Magnt


  Mattel


  NPR


  Steve Lambert


  Titleist


  Tobi


  最后

  把一个因为错误而形成的页面设计的有趣而有创意很难,但不是不可能。设计出好的404页面需要你结合简约、实用,同时也少不了设计天分。

  对于404错误页面的设计,我还有什么遗漏吗?你是否曾经打造出过优秀的404页面?请给我们留言^^

时间: 2024-11-01 06:43:52

如何打造善意优雅的404页面?的相关文章

利用html5和css3打造一款创意404页面

 实现的代码 html代码:   代码如下: <svg class="me404" viewbox="0 0 1000 480"> <path id="cloud" class="st0" d="M658.4,345.2c-10.9,0-19.7-8.8-19.7-19.7c0-10.9,8.8-19.7,19.7-19.7h50.1c9.9-1.5,17.5-10,17.5-20.3 c0-11.

50个实用设计思路帮你设计创意404页面

  做网站是系统工程.首页的内容要层次分明,导航要结构清晰,子页面要排版均衡,相对而言自由度稍高一点的,应该是404页面 了.虽然404 本身就是一个告知用户内容访问出错的错误代码,但是富有创意的设计师会充分利用机会,展现网站的独特气质;重视用户体验的设计师,则会充分考虑此刻用户的心情,竭尽全力引导用户去对的页面. 所以,404页面 可以做的很简单,但也可以创意十足.今天的酷站 推荐,就推荐50个创意爆棚的404 页面,每个页面配以相应的技巧说明,希望能给你帮助. 01. 有趣的设计 这是一个有

不容错过的优秀404页面设计指南

  平生不见404,阅尽全网也惘然.对,如果你从未打开过404页面,就可以说你几乎未曾真正用过互联网. 404页面的出现的原因很简单:当你输入链接,浏览器向服务器提出请求,但是服务器无法解析你提供的URL的时候,服务器就会返回给你一个"404为找到"的页面,换句话就是"服务器是正常的,只是没找到你要的页面". 的确,404页面的出现就是这么简单.它诞生于互联网和浏览器刚刚兴起的时代,但是经过近20年的演化之后,它早已进化出基于互联网的亚文化--404页面并不简单.

Nginx中404页面的配置及AJAX请求返回404页面的方法_nginx

404页面基础配置404错误是WWW网站访问容易出现的错误.最常见的出错提示:404 NOT FOUND.404错误页的设置对网站SEO有很大的影响,而设置不当,比如直接转跳主页等,会被搜索引擎降权拔毛.404页面的目的应该是告诉用户:你所请求的页面是不存在的,同时引导用户浏览网站其他页面而不是关掉窗口离去.搜索引擎通过HTTP状态码来识别网页的状态.当搜索引擎获得了一个错误链接时,网站应该返回404状态码,告诉搜索引擎放弃对该链接的索引.而如果返回200或302状态码,搜索引擎就会为该链接建立

404页面的由来

最近这两天,新的 404 页面已经由腾讯 QQ 空间上线了,如果用户点错链接或请求的链接不存在的时候,系统就会自动转到这个新的 404 页面. 404 页面的由来 看到这些,或许可能还会在想, 404 页面是什么?为什么叫做 404 页面?说到这就不得不说一下由来了,"听说在第三次科技革命之前,互联网就是一个大型的中央数据库的形态,就在404房间里面设置这个数据库.在那个时候所有的请求都是有人工手动完成的,如果请求者所需要的文件没有在数据库中没有找到,或者因为请求者写错了文件编号而没有被找到,用

教你如何在IIS环境下自己设置404页面

IIS默认的错误页是很不友好的,很多人看到默认的错误页时都会说:网站打不开了!白白损失了这部分流量.而如果错误页直接跳转到首页又对搜索引擎很不友好,搞不好首页还会被封掉.所以根据情况,有两个方法解决这个问题: 修改默认错误页的方法很简单:在IIS中右键单击要管理的网站,在自定义错误中设置404为相应的错误信息页. IIS默认的错误页是很不友好的,很多人看到默认的错误页时都会说:网站打不开了!白白损失了这部分流量.而如果错误页直接跳转到首页又对搜索引擎很不友好,搞不好首页还会被封掉.所以根据情况,

使用Google Analytics跟踪404页面

404页面是当访问者输入了错误的地址或者访问了被删除的页面时,服务器返回的错误页面(404 HTTP 状态代码).这个页面除了告诉访问者页面不存在以外,不提供任何有价值的信息.访问者可能就此离开网站. 了解404页面的信息非常有用,可以发现访问者要查找的内容和推介来源,有助于网站补充新的内容并修复有问题的链接.如何使用Google Analytics来追踪并显示404页面的情况?Google Analytics的官方博客介绍了一个简单的方法,使用Google Analytics可以跟踪网站的40

使用Google网站管理员工具自定义404页面

网站的访问者访问一个不存在的网址时,会出现404错误页面,表明在服务器找不到指定的页面.在碰到404页面时,访问者可能会尝试手动纠正这个错误的网址,或者点击返回按钮,或者直接离开网站. 为了将404页面变得更加有用,Google曾经在网站管理员工具里添加了"增强型404页面"工具,当时该工具的语言是英文的,现在,这个工具终于有了中文版,这里我就详细介绍一下做为中文网站管理员如何添加这个自定义的404错误页面. 首先打开Google网站管理员工具,点"工具"-&quo

网页教学网收集整理网上最有趣的404页面

文章描述:极富创意的404页面. 每当人们打错了网址,熟悉的404页面就会映入眼帘.多数网站的404页面很让人扫兴,一味的跳转回网站的主页.但有一些聪明的公司把404页面也设计的其乐融融.本文收集了国外一些网上最有趣的404页面.几年前Tristan Walker就在问答网站Quora上开始收集有趣的404页面.加上一些Mashable上的贡献,我们汇集了一些最具有创意的404页面. 哎呦!TechCrunch科技博客把404页面做成了掉裤子的囧人. 在有的404页面上还能玩吃豆人呢. 这款40