您现在的位置: 万盛学电脑网 >> 程序编程 >> 网页制作 >> 交互设计 >> 正文

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

作者:佚名    责任编辑:admin    更新时间:2022-06-22

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

  平生不见404,阅尽全网也惘然。对,如果你从未打开过404页面,就可以说你几乎未曾真正用过互联网。

  404页面的出现的原因很简单:当你输入链接,浏览器向服务器提出请求,但是服务器无法解析你提供的URL的时候,服务器就会返回给你一个“404为找到”的页面,换句话就是“服务器是正常的,只是没找到你要的页面”。

  的确,404页面的出现就是这么简单。它诞生于互联网和浏览器刚刚兴起的时代,但是经过近20年的演化之后,它早已进化出基于互联网的亚文化——404页面并不简单。

  所以,要创造出一个完美的404错误页面,有一些规则可供遵循。

  设计

  首先,404页面的设计不应该转移用户的注意力,令用户偏移最初的目的。的确,绝大多数用户认为404页面非常恼人。所以,404页面应该在网站设计之初就要考虑到,并令它能够帮助用户找到他们需要的东西,并且在此过程中避免用户跳转到其他的网站。

  作为一个次要目标,404页面的设计也可以提供一个建立并强化品牌的机会。如果404页面设计得足够积极,那么它可以令用户留下持久的印象。一般而言,用户遭遇404页面一般是因为“打开的方式不对”造成的,它是一种负面体验,但是如果404页面能够帮助用户达成目标(其实这形同危机公关),那么用户可能会改变对你网站的看法。

  为了避免用户对404页面产生逆反情绪,网页的用色和图片都应该控制好比例和视觉效果。优秀的网页设计,才能强化品牌。

  社交媒体

  在404页面上提供社交媒体链接是个好想法,一方面可以帮助误入歧途的用户解决问题,另一方面也可以通过社交媒体吸引更多用户。将网站的Facebook、Twitter、Google+、Tumblr、微博、微信链接附加在404页面上,可以让用户在无法解决问题的情况下通过社交媒体进行互动,寻求解决方案。通常,在官方无法即刻给出解决方案的是,其他的用户或者粉丝也可能会给予用户一定的帮助。

  重要链接

  每个网站都会有一些用户经常访问的页面,这些核心的页面会引领用户寻求其他的重要信息。值得一提的是,在404页面展现网站的整个网站地图是不合适的,因为用户可能会迷失于其间,本身用户就没找到他们想要的东西,再继续从几十个链接中找他们想要的东西的话,这个体验可想而知有多糟糕。所以,在这个时候,最好设定至多6~7个重要的链接。通常情况下,它们应该包含以下几个链接:

  返回首页

  最近的帖子

  搜索框

  关于我们

  联系我们

  当然,网站的搜索功能可以固化在页面上,而以内容为主的网站或者博客类型的网站可以将近期热门帖子添加到网站上,起到引流的作用。

  提供在线联系方式

  作为一种沟通用户的方式,在404页面提供一个内嵌表格让用户留言是一种颇具诚意的解决方案。用户可以通过表格留下联系方式,碰到的问题,或者试图寻找的信息和内容等。

  如果网站本身是偏向销售向的,那么在线客服也是不错的解决方法,直接与客服进行在线沟通能够挽留住更多的订单,不是么?与客服进行直接沟通可以找到他们想要的东西。

  当然,不论是在线表格提交系统还是在线客服系统都请保持简约直接的形式,不要让用户迷失在复杂交互和链接中。

  幽默与多媒体

  当用户进入404页面的时候,可以在页面上嵌入自动播放的音频或者视频,为用户介绍网站或者引导用户。在视频或者动画中注入适当的幽默和卖萌,可以缓解误入此处用户的抵触情绪。

  把控好展示的度,可能会为用户带来惊喜、愉悦的情绪,如果能引导用户解决问题就更好了。

  接下来,我会通过下面我所搜集的案例来向你展示,大家都是如何设计优秀的404页面的。其中很多页面颇为有趣,有些还有待提升,但是它们都在某些方面做的颇为突出,值得学习。

  craigslist

  Craigslist 的404页面设计的颇为简约有趣,并且提供了首页链接来引导用户。

超实用!不容错过的优秀404页面设计指南

  Niki Brown

  这个404页面除了提供了一些重要的链接之外,还提供了几个秘密链接,当用户点开之后,会发现一些颇为不错的音乐。这种方式会增加网站的黏度。

超实用!不容错过的优秀404页面设计指南

  cubeecraft

  作为一个纸模类的网站,它的404页面突出了网站的特征:它不仅选取了一个与错误有关的人物角色,还提供了图片下载链接——纸模用户可以将其打印出来,做成这个角色的纸模,独具匠心。

超实用!不容错过的优秀404页面设计指南

  Project-euh

  这是一个非常独特的404页面,当你进入这个404页面的时候,系统会有机器音提醒你进入了一个404页面,而页面内提供的图片其实是一个动画的链接,它会引领你进入一个个好玩的随机页面。

  Technorati

  这是一个简单的报错页面,它还提供了订阅和最近的文章,这些内容可能会吸引一部分用户。

超实用!不容错过的优秀404页面设计指南

  Acme

  这是一个独特的404页面,不过毫无疑问它还可以补充更多的内容。

超实用!不容错过的优秀404页面设计指南

  Expansion Broadcast

  如果你没有找到你要的信息,可以通过这个页面上的表格提交反馈信息。同时页面中的Facebook和Twitter链接也可以帮助用户了解更多信息。

超实用!不容错过的优秀404页面设计指南

  Attrition

  这个404页面设计简单,信息也很直观。

超实用!不容错过的优秀404页面设计指南

  Orange Coat

  使用流程图来引导用户找到信息的404页面还是非常令人耳目一新的。

超实用!不容错过的优秀404页面设计指南

  Disney

  迪士尼的404页面汇总了常见的问题和解答,添加了下载链接等一些有用的信息。

超实用!不容错过的优秀404页面设计指南

  Design Zillas

  优秀的404页面长啥样?这就是个典型,视觉设计大气,社交媒体链接完整,联系方式清晰。

http://www.designzillas.com/404

  Twingly

  通过“忍者”这种人物角色来传递信息,看起来不错。

超实用!不容错过的优秀404页面设计指南

  webo group

  这也是一个简约的404页面。

超实用!不容错过的优秀404页面设计指南

  Griffin Technology

  这个404页面也使用了讨喜的插画,添加了联系方式和支持团队的联系方式。

超实用!不容错过的优秀404页面设计指南

  nosh

  这是一个独特的404页面,用视频来吸引用户留在网站。作为一个有客户端的网站,Nosh 将网站的Android和iOS客户端链接也添加到页面上。Nosh甚至不忘在404页面上留下注册网站的入口。

超实用!不容错过的优秀404页面设计指南