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

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

404报错页面，作为提醒网站访问者服务器未找到请求资源或文件的页面，时常被UI/UX设计师，产品经理以及网页/软件开发者视作（包括枯燥的登录页面，加载页面以及引导页面在内）导致网站/软件用户流失或跳出的重要元凶。然而，但这并不意味着404页面在任何情况下，对于他们来说都是不能提及的噩梦。
事实上，一款美观、优质、富有创意、甚至炫酷的报错页面设计，不仅能够有效的引导访问者快速的浏览网页或软件的其它页面，还能够极大的减缓用户的负面情绪，留住用户的同时，减少跳出率，提升用户体验。
然而，对于设计师或产品经理来说，如何才能设计出有趣，美观而又富有创意的404报错页面呢？让我们阅读这篇文章，跟着小编的脚步一步欣赏和学习14款最新且最具创意的报错设计。

首先，404报错页面常用哪些报错提示？

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

• 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

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

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

以下是小编搜集的最新且极具具创意的报错页面设计，希望他们能对你有所帮助：

1. Lost in the woods

A.设计师：Tajana Barac
B.亮点: 色彩对比，色彩渐变，阴影以及形状的完美应用
经典蓝白颜色的对比以及渐变，形状和阴影的完美结合，给人以宁静祥和之感，从而有效的减缓了突然报错给用户带来的负面情绪。更何况其配色和插画风的应用也是相当吸睛，很自然的分散用户注意力，减少了用户的不快体验。
C.学习点
结合各种设计趋势，优化报错页面设计
就最近几年的UI/UX 设计潮流而言，色彩对比，渐变，形状以及阴影层级之类设计元素的混用，总是能帮助设计师碰撞出让人眼前一亮的优秀作品。因此，在设计报错页面时，也可融入一些当前流行设计元素和趋势，打造出独具特色的页面设计。（点击查看更多最新移动端软件设计潮流）

2.Wanted

A.设计师：From limpfish.com
B.亮点: 独特的展示形式
不同于一般报错页面直接枯燥罗列和展示错误提示，该页面设计师采用了类似逃犯通缉令的独特外观和形式，更加直观地展示了页面报错原由，十分新颖有趣。而且，其有意做旧和破损的设计，也使整个页面更加真实，吸睛。
C.学习点
为你的报错页面也设计一种特制的展示形式
如若时间充足，你也可以设计一个系列，使用不同的形式展示404 报错提示，并将它们添加到你的设计日志中，方便日后查看，使用或获取灵感（当然直接选择一款优质好用的原型工具，将其制作成可视原型进行存储，也会是不错的选择）。

3.Shinobi

A.设计师：From cssninjas.com
B.亮点: 渐进式展开的设计方式
除了提供简单明了的报错介绍，设计师还是采用了一种渐进式展开的设计方式，给一部分解释文字嵌入链接，拓展网页功能，消除用户的迷惑和不满情绪。
C.学习点
采用渐进式展开的设计方式，提升404报错页面的用户体验度
在你的页面设计中，也可以采用渐进式展开的设计方式，添加链接、按钮、侧边栏菜单或隐藏的菜单栏
等等，扩展页面的功能。

4.Error Page Switex

A.设计师：Ash Rahal
B.亮点: 层叠，感情元素和趣图的运用
该页面通过文字图片和阴影的层叠创造出一种空间感，以吸引访问者注意。而且，为缓解用户对于突然报错产生的抗拒情绪，设计师专门在页面中添加了俏皮的解释文字和趣图之类情感元素，以获取用户谅解和共鸣。这一点是非常值得效仿的。
C.学习点
设计中添加情感元素，实现与用户的情感交流
所以，在你的页面设计中，也可以添加一些考虑到用户感受的俏皮文字，表情图标
，趣图或流畅的交互设计, 甚至是能够缓解用户烦躁情绪的配色等等，都能够让你的设计更加人性化，实现与用户的情感交流，从而留住他们。

5.Alana 404 Page

A.设计师: Alana Brajdic
B.亮点: 简约风和更多页面选择的结合
就如设计师留言所表达的那样，报错页面需要简洁直观，有意义。同时提供更多网站/应用的其它页面链接，方便用户根据需要点击跳转，一遍为用户提供更佳的体验。而且，其整个页面透着的简约风，也与近几年日益简化的用户体验设计潮流相符合的。
C.学习点
采用具有更多功能选择和更佳用户体验的简约设计
页面设计无需复杂多变。当功能和外观不能兼顾时，简单直观，且包含更多功能链接/选择的页面，也可以很成功。

6.UI 404 Page

A.设计师: Mario Sestak
B.亮点: 强烈地视觉冲击，图片和内容的完美呼应
设计中添加了极具视觉效果的黑色背景图片，搭配白色的报错提示，突出页面文案的同时，也起到让点进用户眼前一亮的作用。而且，图片对文字的完美呼应，也使解说文本更具说服力，减少用户产生不满情绪的可能。加之，通过侧边栏显示的帮助和其它站点相关链接，对于提升用户体验，也是极其有效的。
C.学习点
添加视觉元素增加页面吸引力
在实际的页面设计中，很多元素是可以帮助增加视觉效果，例如高质量的图片，恰到好处的配色，极富创意的主题等等。
使用侧边栏，拓展网站功能，提升用户体验

7.404 Page

A.设计师: Hossein Mahmoodi
B.亮点: 特色的电影海报展示形式和科幻大片的主题的选用
该设计最突出的特点就是采用了一种类似电影海报的展示形式，并选用了科幻大片的主题，将404的报错标志——即“404”字样，融入到科幻“海报”内容之中，引起网站访问者联想不断的同时，极大的增加了其页面趣味性。
C.学习点
选择一个适合的主题进行展示
选择一个恰当的主题进行报错展示，对于增加网站趣味性和吸引力也是非常有用的。 例如，在页面设计中，添加电影，动漫，节日，特色民族文化，甚至是某些人群或地方特色主题元素等等，都是非常值得尝试的。

8.404 Page Not Found

A.设计师: Nayab Fatima
B.亮点: 灵动动画和插画风的应用
页面最具特色的设计，是添加了两只一闪一闪眨着眼睛的猫头鹰，灵动可爱。而且配合上应景的文字解说，给人以宁静舒适之感。此外，其插画风格和部分留白的应用，也使整个设计更加美观，极具梦幻色彩，仿佛落入设计师编织的童话世界里一般。对于缓解访问者的不满情绪也是极佳的。
C.学习点
利用动画或交互优化页面设计
插画风格的应用也能极大地提升页面外观和趣味性

9.Daily UI – 404 Page

A.设计师: Carlos Pariente
B.亮点: 搞笑风趣以及影视人物动画的应用
看到这个页面时，忍不住笑出了声？好。无论其功能设计是否符合常规的设计原则，至少在用户体验和吸引访问者目光方面的作用是极佳的，不是吗？再加之其配合文字而添加的影视人物动画，对于熟悉这些影视人物的人们来说，又有了更深层次的共鸣。这些就是这个页面设计的精妙之处。
C.学习点
设计中添加幽默元素
设计中添加一些众所周知的元素，当然，不仅仅是电影方面

10.Daily UI Challenge – 404 Page

A.设计师: Andrea Hock
B.亮点: 结合网站或软件特点进行设计
除了通过适当的相关联想和优质图片的添加， 页面设计也可简单的结合网站，app或售卖产品的特点，进行设计。比如，该报错页面，就结合了珠宝网站的特色，将404报错网站作为另一个展示各类珠宝的平台，让用户即使遇到报错的情况，亦能继续他们的预览，减少网页跳出率。
C.学习点
结合网站或产品特色添加适当内容，丰富页面

11.Daily UI-8 404 Error Page

A.设计师: Deanna Lam
B.亮点: 舒适的风景设计
就如该页面设计一样，在介绍页面中添加能够让用户情绪更加舒缓的生活类或风景类背景图片也是不错的设计概念。
C.学习点
为报错页面添加舒适的生活类或风景类图片

12.404 page of the Hermitage Friends

A.设计师: Anton Borzenkov
B.亮点: 有趣的油画风格以及周到的搜索框设计
整个页面采用了古典的油画风格，极具特色。而且，为给用户提供更加愉悦流畅的体验，设计师还紧接着报错信息，添加了搜索框，以方便用户能够根据需要跳转到想看的页面，尽可能的降低了用户的不快。
C.学习点
选择和使用油画或中式水墨风增加页面的独特性和吸引力

13.David 404 Page

A.设计师: David Kovalev
B.亮点: 3D技术的应用
页面设计者采用了最新的3D技术呈现404报错提示，有趣直观，高端大气。
C.学习点
利用最新最前沿的技术来提升你的报错设计
现今，有很多先进的技术是可以运用到设计中。例如以上提及的3D技术，音频以及视频的添加和应用等等，在提升页面功能和用户体验，美化页面外观方面都发挥着重要作用。

14.Shremal 404 Page

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

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

关键字：原型设计, 产品运营, 交互体验, 交互

版权声明

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处。如若内容有涉嫌抄袭侵权/违法违规/事实不符，请点击 举报 进行投诉反馈！