404抱歉!您访问的页面出错了

404抱歉!您访问的页面出错了

时间:2019-1-12 分享到:

404报错界面,是用来提醒网站访问者服务器未找到网页或请求的页面。通常,作为一个令人失望的搜索结果,被产品经理及网页开发者认为是导致网站用户流失的主要元凶。事实上,一款美观、优质、富有创意的报错页面设计,不仅能够有效引导访问者浏览其它页面,还能够极大地缓解用户的负面情绪,提升用户体验。

404抱歉!您访问的页面出错了

404页面

404网络报错从何而来?

当浏览网页出现“404”时,我们知道这表示该网页出现了访问错误,但是关于其历史来源却充满了神秘色彩。对此,互联网创造者之一的Robert cailliau解释道:“当为新系统编写代码时,不能浪费太多资源检测错误网址访问的要求,于是为了避免错误地址访问,程序员便指定了错误类别的适用范围,而404则意味着该网页不存在。”

智库中国网站404报错届面

除了404以外,还有其他类型的编码,例如,200代表服务器已成功处理了请求的网页,又或是表示请求的网页已永久移到新位置的301,以及代表服务器遇到错误无法完成请求的500……

数字代码500报错界面

如今,网页和软件页面的设计中,越来越多的UI设计师认识到文案的重要性。极富个性和人情味的文字让用户在失望之后感受到“我不是一个人”,还有网站后台的支持,“解释”和“引导”大大缓解了用户的负面情绪,并鼓励用户探索更多内容。传统的报错界面通常由以下文字呈现,但是稍显“冷漠”,那么看看UI设计师们是如何创意的吧。

The requested URL was not found on this server.

404 File or Directory Not Found.

HTTP 404 Not Found/404 Page Not Found

404 Error/Error 404/HTTP 404.

The page cannot be found.

设计师:Mario Sestak

Mario Sestak设计的报错页面

人脑有专门识别人脸的区域,因此人像照片最引人注目。Mario Sestak的这件作品具有强烈的视觉冲击,图片和内容完美呼应,使得解释文字更有说服力,减少了用户的不满情绪。同时,人脸上的线条也引导人们的视线到右下角的相关链接。添加高质量的图片、恰当的配色等特殊元素,对于增加视觉效果有很好的作用。

设计师: Anton Borzenkov

Hermitage Friends Club网站报错界面

插入油画的界面给人眼前一亮的感觉,虽然我们出了“bug”,但是我们依旧高雅而有趣。画面中人物托腮的动作也十分符合“未找到页面”的心情。整体界面色调柔和,属于暖色调,不会给人强烈的视觉冲击。同时,为了给用户提供更加愉悦流畅的体验,设计师还在报错信息下方添加了搜索框,想要什么尽管搜吧,我都给你找到。

设计师: Andrea Hock

Tiffany&Co.网站报错界面

除了通过相关联想和添加优质图片,页面设计也可简单结合网站或软件的自身特点,以原始风格为背景,视觉上具有连贯性不会显得突兀。同时,报错界面也成为一个产品展示的平台,使用户即使遇到打开错误的情况也可以继续浏览网站,减少网页跳出率。

设计师: Hossein Mahmoodi

gribble.com网站报错界面

特色的电影海报和科幻大片即视感的画面具有强烈的视觉冲击,即使没有搜到想要的结果,但是具有话题性的画面和被设计到画面场景之中的“404”,也能够起到激发用户联想的作用,极大地增加了网站趣味性。选择一个恰当的主题进行报错展示,对于增加网站趣味性和吸引力十分有效。

设计师: Deanna Lam

Deanna Lam设计的网站报错界面

为报错页面添加舒适的生活类或风景类照片也不失为一个不错的选择。清新怡人的照片能够缓解用户的焦虑情绪,弱化的“404”和被更加生动、有趣的文字所取代的警告语,都让人觉得这不像报错界面,更像是一张海报。

设计师: Alana Brajdic

Alana Brajdic设计的网站报错界面

报错页面也可以简洁直观、有意义,同时提供更多网站其他页面的链接,方便用户根据需要点击跳转,为用户提供更佳的体验。简单清晰的页面使得跳转选项更容易辨识。当功能和外观不能同时兼顾时,简单直观且包含更多功能选项的页面也可以很成功。

设计师: Nayab Fatima

Nayab Fatima设计的软件报错界面

两只眨着眼睛的猫头鹰灵动可爱,配上应景的文字,给人以宁静舒适之感。观者第一眼望去,绝对看不出这是一个报错界面,反而想跟着文字的指示,静悄悄地跳出页面。插画风格和部分留白极具梦幻色彩,仿佛进入了设计师的童话世界一般。

设计师: Shremal Patel

Shremal Patel设计的网站报错界面

设计师使用各种形状、颜色、阴影以及文字,讲述了一个“进入外太空”的故事,跟着设计师的思路,或许你也能沉浸在人物设定当中。柔和的色块拼接和可爱的卡通人物,给人以愉悦的视觉体验。没有“惊悚”的404警告,有的只是需要你带回地球的宇航员伙伴,还等什么,快带他回家吧。

看完这些有趣的报错页面的设计,你是不是也跃跃欲试了呢?下面给大家推荐几款有趣好用的原型工具,时刻记录下自己页面设计的灵感吧。

Mockplus

学习曲线:低

Mockplus是一款简洁高效的原型软件,基础版本终身免费。它为用户提供丰富的组建和图标资源,通过拖拽即可实现界面设计。支持一键导入项目页面和模板,还有自定义组件库、数据填充、sketch导入。Mockplus还有团队协作功能,团队成员之间可以查看、编辑、项目评论,是小组合作时必备的工具。

Mockplus操作界面

Prototyping on Paper

学习曲线:低

POP同时适用于安卓和iOS平台,只需在纸上简单地描绘出创意或想法,拍下几张草图照片,并将照片按顺序放置,利用链接点描摹出各张图片之间的逻辑关系,就可以轻松创建出一个动态模型,点击播放即可演示整个模型。对于初学者随时记录灵感和追求手绘风格的设计师来说简直再合适不过。

POP应用操作界面

Fluid UI

学习曲线:中

Fluid UI最大的优势就是资源库非常丰富,内置超过2000款的线框图和手机UI控件,并且经常更新。如果这些图片还不能满足需求,还可以上传自己的图片。对于对图片质量要求不那么高的初学者来说,还可以选择低保真的线框图来加快开发。无平台限制,采用拖拽的操作方式,节省时间和费用。

Fluid UI应用操作界面

Axure

学习曲线:高

Axure RP是美国Axure Software Solution公司旗舰产品,是一个专业且快速的原型工具,它的使用对象通常为对需求规格、功能界面要求比较高的专业人士,用于线框图、流程图等的快速创建。对于初学者来说使用起来性价比不是很高,但如果你的专业水平很高,这就真的是一款优质的工具。

Axure操作界面

404报错界面作为网站、软件不可或缺的重要页面之一,对于设计师和产品经理来说,不应该被视作设计痛点,反而应该被好好利用,使其成为为用户提供更好导引、娱乐并留住用户的关键平台。

版权所有:http://www.foxizhanzhang.com 转载请注明出处