2018年不可错过的创意404报错设计

事实上，一款美观，优质，富有创意，甚至炫酷的报错页面设计，不仅能够有效的引导访问者快速的浏览网页或软件的其它页面，还能够极大的减缓用户的负面情绪，留住用户的同时，减少跳出率，提升用户体验。

现今，web/app页面的设计中，越来越多的设计师认识到文案的重要性。选择通过添加精心设计和挑选的文字，创建更加清楚明了，且极富个性和人情味的页面设计。因此，考虑到这一点，在开始逐一介绍404报错页面设计之前，我们也需要了解报错页面的一些404页面常用报错提示，以避免出现言不达意的情况，同时也可以为后来设计和挑选更符合网页/软件特色的文案提奠定基础。以下是一些常用的报错提示：

*404 File or Directory Not Found

*404 Error/Error 404/HTTP 404

当然，UI/UX设计师有时也会根据站点/手机应用的特点，特别设计一些带有“404”标志的报错提示，以增强网站可读性和趣味性。

14款最新创意404报错页面欣赏和学习

A.设计师：Tajana Barac

经典蓝白颜色的对比以及渐变，形状和阴影的完美结合，给人以宁静祥和之感，从而有效的减缓了突然报错给用户带来的负面情绪。更何况其配色和插画风的应用也是相当吸睛，很自然的分散用户注意力，减少了用户的不快体验。

*结合各种设计趋势，优化报错页面设计

A.设计师：From limpfish.com

不同于一般报错页面直接枯燥罗列和展示错误提示，该页面设计师采用了类似逃犯通缉令的独特外观和形式，更加直观地展示了页面报错原由，十分新颖有趣。而且，其有意做旧和破损的设计，也使整个页面更加真实，吸睛。

*为你的报错页面也设计一种特制的展示形式

A.设计师：From cssninjas.com

除了提供简单明了的报错介绍，设计师还是采用了一种渐进式展开的设计方式，给一部分解释文字嵌入链接，拓展网页功能，消除用户的迷惑和不满情绪。

*采用渐进式展开的设计方式，提升404报错页面的用户体验度

A.设计师：Ash Rahal

该页面通过文字图片和阴影的层叠创造出一种空间感，以吸引访问者注意。而且，为缓解用户对于突然报错产生的抗拒情绪，设计师专门在页面中添加了俏皮的解释文字和趣图之类情感元素，以获取用户谅解和共鸣。这一点是非常值得效仿的。

*设计中添加情感元素，实现与用户的情感交流

A.设计师: Alana Brajdic

就如设计师留言所表达的那样，报错页面需要简洁直观，有意义。同时提供更多网站/应用的其它页面链接，方便用户根据需要点击跳转，一遍为用户提供更佳的体验。而且，其整个页面透着的简约风，也与近几年日益简化的用户体验设计潮流相符合的。

*采用具有更多功能选择和更佳用户体验的简约设计

A.设计师: Mario Sestak

设计中添加了极具视觉效果的黑色背景图片，搭配白色的报错提示，突出页面文案的同时，也起到让点进用户眼前一亮的作用。而且，图片对文字的完美呼应，也使解说文本更具说服力，减少用户产生不满情绪的可能。加之，通过侧边栏显示的帮助和其它站点相关链接，对于提升用户体验，也是极其有效的。

*添加视觉元素增加页面吸引力

*使用侧边栏，拓展网站功能，提升用户体验

7.404 Page

B.亮点: 特色的电影海报展示形式和科幻大片的主题的选用

C.学习点

选择一个恰当的主题进行报错展示，对于增加网站趣味性和吸引力也是非常有用的。 例如，在页面设计中，添加电影，动漫，节日，特色民族文化，甚至是某些人群或地方特色主题元素等等，都是非常值得尝试的。

8.404 Page Not Found

B.亮点: 灵动动画和插画风的应用

C.学习点

*插画风格的应用也能极大地提升页面外观和趣味性

9.Daily UI - 404 Page

B.亮点: 搞笑风趣以及影视人物动画的应用

C.学习点

*设计中添加一些众所周知的元素，当然，不仅仅是电影方面

10.Daily UI Challenge - 404 Page

B.亮点: 结合网站或软件特点进行设计

C.学习点

A.设计师: Deanna Lam

就如该页面设计一样，在介绍页面中添加能够让用户情绪更加舒缓的生活类或风景类背景图片也是不错的设计概念。

*为报错页面添加舒适的生活类或风景类图片

12.404 page of the Hermitage Friends

B.亮点: 有趣的油画风格以及周到的搜索框设计

C.学习点

A.设计师: David Kovalev

页面设计者采用了最新的3D技术呈现404报错提示，有趣直观，高端大气。

*利用最新最前沿的技术来提升你的报错设计

A.设计师: Shremal Patel

设计师使用各种形状，颜色，阴影以及文字，集中讲述着一个故事：“你搜索的页面已经不在地球上了”或者“你搜索的页面已经将你带到了地球以外的星球”。这种通过恰当联想，利用页面讲述一个故事的设计理念也是相当有趣的。

*利用合理想象，讲述有趣的故事

总的来说，希望你能从这些最新的404页面设计作品中获得灵感， 并吸取到一些有用的东西。

Mockplus助你轻松“留住”和迭代稍纵即逝的404页面设计灵感

Mockplus具体提供了哪些强大功能帮助你快速转化和提升404报错页面设计呢？马上跟着小编详细了解一下：

1.快速便捷的添加和导入静态/动态图片

*利用“图片”组件直接添加报错页面图片

当你希望批量导入图片美化报错页面时，也可打开”我的组件库” 功能区，批量导入和添加需要的图片资料。

*轻松导入Sketch文档

*利用“Gif”添加动态图片，增强页面趣味性

*利用其“图片轮播”动态展示和切换页面图片

简而言之，Mockplus能够轻松地满足你对于404报错页面图片添加方面的各种需求。

2.利用“标签”和“多行文本”添加有趣且富有感情的页面文案

情感元素，尤其是一些俏皮的表情图标，能够非常有效的提升报错页面的情感体验，实现与用户的情感对话。而Mockplus为你提供了包括各类表情图标在内的超过3000个方方面面的矢量图标，方便你根据需要，自由地选择和添加。

4.简单快速添加各式交互

希望原型工具能够提供云端存储服务，以便简单上传发布之后， 即可在任何地点和时间下载，实现即时编辑，修改和分享？Mockplus完全能够满足你这方面的需求。而且，Mockplus还提供了多达8种项目预览和分享方式，方便用户轻松根据不同，甚至是实时变化的404页面设计需求，自如地选择合适的预览和分享方式。

所以，404报错页面，作为网站/应用不可或缺的重要页面之一，对于设计师和产品经理来说，不应该被视作是设计痛点，相反，应该被好好利用，使其成为为用户提供更好的页面/软件引导，娱乐并留住用户的重要平台， 从而打造出更有特色，更具趣味性以及创造性的网站/软件。总之，希望以上介绍的14款最新创意404报错页面设计和简单快捷的原型工具（Mockplus), 能够对你的页面设计有所帮助。

转载 http://www.uedna.com/post/726450/