15个404网页出错创意设计 —— 设计资源 06
做网站是系统工程。首页的内容要层次分明，导航要结构清晰，子页面要排版均衡，相对而言自由度稍高一点的，应该是404页面了。虽然404本身就是一个告知用户内容访问出错的错误代码，但是富有创意的设计师会充分利用机会，展现网站的独特气质；重视用户体验的设计师，则会充分考虑此刻用户的心情，竭尽全力引导用户去对的页面。
所以，404页面可以做的很简单，但也可以创意十足。今天小编就推荐15个创意爆棚的404页面，每个页面配以相应的技巧说明，希望能给你帮助。
来源：优设
编译：陈子木
01. 有趣的设计
这是一个有趣的404页面，用陨石坑来表现404代码，身处太空暗示你来错了地方。如果你访问这个设计所处的Behance页面，会发现更多有趣的地方。
02. 图形化
图标可以发挥各种各样的作用，指示作用，装饰，甚至作为纹理都可以。这个案例中，设计师用小图标来搭建问号，告知用户他们所寻找的内容并不在此。
03. 使用动效
这是一个好玩儿又可爱的404页面，从文案到动画都非常之有趣，如果你正好也很无聊的话，可以盯着这个动画玩一整天……
04. 简约设计
这个404页面超级简单，但是非常有效。简约清爽的设计，放大镜和404的组合足够说明问题。
05. 情感化设计
情感化的设计总能让人印象深刻。这个页面的设计能让人情绪有所触动，伤感的动漫角色拿着404的小旗子，扁平插画风令人赏心悦目。最下方绿色按钮可以带你会首页继续寻找你需要的内容，关键是，文案还很贴心。
06. 插画说明
插画在网页中的运用非常广泛，功能也多种多样。这个网页中的插画，不仅灵活地传达出页面跳转错误的情况，而且为你作出了正确的引导。
07. 不要想复杂了
想打造独特的404页面，并不需要非得找到某种独一无二的创意和彻底的创新，有时候掌握流行趋势就够你脱颖而出了。在这个404页面中，设计师使用了网络流行的涂鸦插画角色，此刻的文案也非常应景，整个页面的气质非常有趣。很独特，不是吗？
08. 直接说明
其实到了这一步，用户通常都知道他们遭遇404页面了，你并不需要回避这个话题，照直说就好了。在这个案例中，404旁边，一个手臂断裂的机器人以无比形象的方式，告诉你出错了。
09. 风格化
如果你想用更形象的方式来展现，你并不需要真的花费巨量的时间来精雕细琢。用诙谐而风格化的方式来展现就好了。在这个404页面中，扁平化的图形和色彩非常协调的结合在一起，创造出漂亮的场景。场景简单，羊叼着插头所传达的信息也非常清晰。
10. 重叠效果
使用重叠的形状、字母、色彩来创造有趣的404页面效果。这个404页面的设计也很简单，黑白模式，无衬线字体，图形和字体重叠，大小对比强化404的概念，简单而不单调。
11. 使用相关的图像
有时候在页面中使用毫无关联的图片是很有意思的，而使用有关联的图片，则显得更加有用。这个案例中，设计师加入了红灯警示，也是在暗示用户：你们来错了地方。
12. 有限度地使用色彩
挑选那些能够和谐搭配的色彩，即使要变幻色彩也是基于其中的一种或者几种来进行调整，并坚持如此。创建一套主题，这样可以简化一系列的设计过程。这个404网站也正是这样来设定它的色调。
13. 拥抱纹理
在扁平化成为标准的今天，恰当地使用纹理还是能很大程度降低工作难度的。这个404页面依然使用着扁平风的用色，但是适当地加入一些纹理之后，整体看起来更协调更有质感了。
14. 提供选择
当访客进入404页面之后，他需要做什么？是访问首页还是回到上一步？你提供的选择越多，就越有可能带领他们走到他们真正想要的地方。你要做的是让访客留在你的网站。这个页面就是，当用户来到这里的时候，网站设计师为他们留下了足够的选择，让用户尽量留在自己的网站。
15. 标新立异
我想，标新立异打破常规是许多设计师都会想到的问题。而这个404页面，也正是从字体、色彩到样式都充分进行了调整，进行了极具创造性的设计，打破了常规的视觉设计。
由优设推出的“50个实用设计思路帮你设计创意404页面”，我们将之整理成三篇为大家推荐，尽请期待下一期。
转载请在文章开头和结尾显眼处标注：作者、出处和链接。不按规范转载侵权必究。
未经授权严禁转载，授权事宜请联系作者本人，侵权必究。
本文禁止转载，侵权必究。
授权事宜请至数英微信公众号(ID: digitaling) 后台授权，侵权必究。
![[下载] H5手机移动项目，4月份截屏下载 ——设计师资源 05](https://file.digitaling.com/eImg/cover/20150606/20150606161519_36816.jpg)
![[下载] H5手机移动项目，3月份截屏下载 ——设计师资源 04](https://file.digitaling.com/eImg/cover/20150603/20150603222245_65981.jpg)
参与评论
参与评论
推荐评论
全部评论（1条）