50个实用设计思路帮你设计创意404页面

【 tulaoshi.com - 平面设计 】

做网站是系统工程。首页的内容要层次分明，导航要结构清晰，子页面要排版均衡，相对而言自由度稍高一点的，应该是404页面了。虽然404本身就是一个告知用户内容访问出错的错误代码，但是富有创意的设计师会充分利用机会，展现网站的独特气质;重视用户体验的设计师，则会充分考虑此刻用户的心情，竭尽全力引导用户去对的页面。

所以，404页面可以做的很简单，但也可以创意十足。今天的酷站推荐，就推荐50个创意爆棚的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页面，也正是从字体、色彩到样式都充分进行了调整，进行了极具创造性的设计，打破了常规的视觉设计。

16. 使用负空间

学会让页面呼吸，可以让你的页面更大气。这个404页面使用了蓝绿色和白色，并且通过适当的留白使得整个页面足够简单大气。

17. 双关

404本质上是告诉用户，他要的东西没有找到，那么我们要怎么样展现这个事实?有的时候，用一些内容和视觉上的双关来展现这一点。而这个404页面就是这样处理的，通过荒岛这个意象来向用户传递你走错了这个概念。

18. 大胆表现

如果你有更加有趣的方式来展现404的代码，不妨尽量让两者之间产生关联，然后再表现。这个案例当中，设计师使用了氧气含量不够来同404代码之间产生关联，有趣诙谐，意境也接近。

19. 拓展维度

合理地运用视觉设计，能让二维的页面给人以三维的冲击感。这个页面的设计就是这样做的，刀的角度和页面配色使得整个页面看起来像是三维的一样。

20. 贯穿始终的设计

如果你喜欢什么什么风格，就一定要坚持使用。喜欢棱角分明的造型，就不要过多融入圆润的元素。这个404页面就是非常典型，圆润的风格融入刀每一个细节当中，贯穿始终。

21. 保持精致

如果你喜欢精致细腻的设计，那么请坚持使用这样的样式和风格。如果你一直保持精致的设计，那么整个设计会让人感觉非常高端。这个404页面的设计，从配色到风格都高度的一直，精致华丽，富有质感，延续性也很强。

22. 充分利用品牌

你的品牌有什么特色?有什么视觉特征?它能否融入刀404页面当中?当然可以，这个404页面就是，作为一个花卉公司，在404页面中使用花卉元素又有何不可呢?

23. 指示明确

如果你不想为用户提供过多的选择，那么可以用一两个明确的指示，来引导他们。这个网页的设计在保持清爽的同时，也指示明确。可爱的小飞机在地图上飞跃，告诉用户该按哪个按钮。

24. 使用不同的介质

你的404页面不一定非得是单纯的数字，它也可以融入到其他的介质中去。这个案例中，设计师让404的提示以刺绣图案的形式展现，并且镶嵌在画框中，古怪，但是很有趣。

25. 思维不要局限于电脑

其实和上一点很相似，为什么一定要用更加数字化的方式来展现么?刺绣可以，黏土人也可以。

26. 不局限于文本

文本并不是网页传递信息的唯一途径，你应该发掘更多更有创意的表现形式。这个404页面采用的是太空的主题，404中间的0用星系来呈现，应景又帅气，你看，不用文本一样不错。

27. 建立情感纽带

如果你能和访客构建起情感纽带，那么这个页面一定能起到非常不错的效果。情绪的感染，能让访客同你的品牌联系到一起。在这个案例中，文案和图片的搭配非常巧妙，图片和文字给人以一种在路上的感觉，它不仅能被人轻松理解，而且很多人会有这样的冲动，自然能让许多用户与之产生共鸣。

28. 充分利用影像

漂亮的照片总是特别吸引人。用镜头下的照片来呈现设计总有着不同凡响的魅力。在这个案例中，美味的食物在镜头下表现出无与伦比的魅力，在404这样一个愉快的局面下，用漂亮的图片注入不同凡响的活力。

29. 表现动态

表现动态并不意味着让页面上的东西真的动起来，让元素看起来仿佛动起来，就能创造不俗的效果。在这个404页面中，404三个数字虽然是静止的，但是呈现出动态的感觉。

30. 结合流行文化

在404页面中使用标志化的流行元素或者偶像，也能对相当一部分用户产生足够好的效用。在这个案例中，设计师将Lionel Richie 的一张老照片用作404页面的背景，搭配一首老歌的歌词，应景也极具喜感。

31. 象征手法

使用象征性的手法，来借助一些视觉元素来传达404的概念也是不错的选择。在这个404页面中，用断掉的铅笔来隐喻断掉链接就是很典型的象征手法。

32. 使用对比

不想让页面显得特别单调?用对比手法吧。对比能让信息层级清晰起来。在这个404页面中，设计师使用了色彩对比，深蓝色的背景使得按钮显得更加富有活力。

33. 使用图标

图标能够传递出不少的信息，使用图标不仅能消除文字的单调性，还能使得页面的可读性和丰富度更高。这个404页面中，指南针图标不仅与404的意义暗合。由于网站所属的品牌形象是鲸鱼，蓝绿色背景和指南针也与品牌形象暗暗呼应。

34. 使用主题

使用主题能够让整个设计贯穿始终。这个404页面中，Logo的颜色很显然是取自主题，从插画到底部工具栏都统一使用了绿色，主题带来的统一美感就体现在这里。

35. 创造关联性

如果一张图片能让用户产生与品牌相关的联想，那么它就是成功的。在案例中，食物被吃完的空碟子和404页面所代表的找不到你要的东西的概念很接近，这种来自图片的关联与暗示，非常有效。

36. 控制好间隔

插画和图像以及其他的视觉元素并不需要填满整个页面，控制好间隔能让整个页面看起来更自然。在案例中，设计师将插画作为核心来表现404，其他的网页元素并没有拥挤地围绕着插画，给人感觉很不错。

37. 不要害怕拥挤

这一条和上一条并不冲突。如果是高度相关的内容，能够紧密的联系并放置在一起，就不要隔开了，让相关的内容靠近，适当留白，也是不错的设计方式。实际上，这个案例也正是这么做的。

38. 剪切缺口

通过剪切的方式，让单纯的文本具备更多的含义和形制其实是一个非常有趣且有意义的表现形式。在这个案例中，404中间的0的空洞用问号来表现，实际效果看起来非常不错。

39. 简化概念

并不是所有人都清楚404的具体概念，你可以使用文字拼写来说明，也可以使用简单的图片来表现。在这个案例中，背景图片中拿着望远镜的人就非常明晰地说明了这一概念。

40. 展示场景

你还可以为404页面创建一个场景，制造一个故事，为什么不呢?这个案例的场景就非常可爱，沉没的船隐匿在水面之下，鱼群环绕，远山、深水和深绿的海床，这个沉静漂亮的场景还不足以让抓狂的用户安静下来么?

41. 大胆尝试

不要害怕拿你的404页面做尝试。打破边界和限制，发挥你的想象力，跟着感觉和灵感走试试。这个404页面似乎正在完善中，许多实验性的元素被放置进来，有待完成，但是它真的很不错呢。

42. 明亮的色彩

用明亮的色彩来照亮误入者的沮丧吧。橘黄色的页面砸死不知不觉之间影响着用户的情绪，你真得还感到那么沮丧么?

43. 打破自身的限制

虽然你的页面是为桌面设计的，但是谁规定了它一定要显示在桌面屏幕中呢?为什么不能是一台相机呢?

44. 放到格子里

将数字放到格子里，那么它会是什么样子呢?它可以以什么样的形式来呈现呢?于是，设计师让404变成了一个时钟上显示的时间，好玩儿又达成目标，何乐而不为呢。

45. 创意加持

自由地发挥想象力吧，你可以创造截然不同的404页面!正如同这个页面一样，设计师将铅笔、蜜蜂、发条的意象溶于一体，色彩活泼，意象好玩儿，这不就是创意么?

46. 接地气

不要过于高冷，适当的接地气一点，用更平和可爱的方式来展现也不错呢。在这个404页面中，设计师并没有一味地追随高大上，有趣好玩的人物形象令整个404页面令人忍俊不禁。

47. 先锋一点

先锋和前卫往往被关联在一起。展现个性，用独特而先锋的展现形式来创造属于自己的时尚。滑板本就是比较先锋的玩物，设计师结合红色滤光片使得和照片结合到一起，看起来非常有范儿。

48. 打破极限

找到大家能接受的极限，将边界推动到更遥远的边际，特立独行不也是一种个性么?好吧，这个案例确实特立独行得口味有点过重了漂亮，粗俗，好玩儿，并且令人过目不忘

49. 使用图案纹理

其实你可以用任何东西来构造独特的纹理，然后平铺在背景上，营造独一无二的设计。这个案例中，设计师就是这么玩儿的，看起来倒是蛮时尚的。

50. 信息层级

如果你要为迷路的用户提供许多选项，那么你需要为信息划分不同的层级，以防过多的信息令用户感到压迫。这个404页面在解决这个问题上做的非常不错。