关于“404 错误”的起源

互联网上一直流传着一个传说

在欧洲核研究组织的 404 号房间内

存放着互联网第一台服务器

万维网的发明者 Berners-Lee 就在这里办公

如果你要访问网页

必须向这个房间提交申请

如果找不到这个网页就会提示你

「404 not found 」

今天就推荐20个创意爆棚的404页面

每个页面配以相应的技巧说明

希望能给老铁

一些设计和文案上的启发

01. 有趣的设计

这是一个有趣的404页面

用陨石坑来表现404代码

身处太空暗示你来错了地方

如果你访问这个设计

所处的Behance页面

会发现更多有趣的地方

02. 图形化

图标可以发挥各种各样的作用

指示作用，装饰

甚至作为纹理都可以

这个案例中

设计师用小图标来搭建问号

告知用户他们所寻找的内容并不在此

03. 使用动效

这是一个好玩儿又可爱的404页面

从文案到动画都非常之有趣

如果你正好也很无聊的话

可以盯着这个动画玩一整天……

04. 简约设计

这个404页面超级简单

但是非常有效

简约清爽的设计

放大镜和404的组合足够说明问题

05. 情感化设计

情感化的设计总能让人印象深刻

这个页面的设计能让人情绪有所触动

伤感的动漫角色拿着404的小旗子

扁平插画风令人赏心悦目

最下方绿色按钮

可以带你回首页

继续寻找你需要的内容

关键文案还很贴心

06. 插画说明

插画在网页中的运用非常广泛

功能也多种多样

这个网页中的插画

不仅灵活地传达出

页面跳转错误的情况

而且为你作出了正确的引导

07. 不要想复杂了

想打造独特的404页面

并不需要非得找到

某种独一无二的创意和彻底的创新

有时候掌握流行趋势

就够你脱颖而出了

在这个404页面中

设计师使用了网络流行的涂鸦插画角色

此刻的文案也非常应景

整个页面的气质非常有趣

也很独特

08.  重叠效果

使用重叠的形状、字母

及色彩来创造有趣的404页面效果

这个404页面的设计也很简单

黑白模式

无衬线字体、图形

和字体重叠

大小对比强化404的概念

简单而不单调

09. 使用相关的图像

有时候在页面中

使用毫无关联的图片是很有意思的

而使用有关联的图

则显得更加有用

这个案例中

设计师加入了红灯警示

也是在暗示用户

你们来错了地方

10. 有限度地使用色彩

挑选那些能够和谐搭配的色彩

即使要变幻色彩

也是基于其中的一种或者几种来进行调整

并坚持如此

创建一套主题

这样可以简化一系列的设计过程

这个404网站也正是这样来设定它的色调

11. 使用负空间

学会让页面呼吸

可以让你的页面更大气

这个404页面使用了蓝绿色和白色

并且通过适当的留白

使得整个页面足够简单大气

12. 双关

404本质上是告诉用户

他要的东西没有找到

那么我们要怎么样展现这个事实？

有的时候

用一些内容和视觉上的“双关”

来展现这一点

而这个404页面就是这样处理的

通过荒岛这个意象来向用户传递

“你走错了”这个概念

13. 大胆表现

如果你有更加有趣的方式

来展现404的代码

不妨尽量让两者之间产生关联

然后再表现

这个案例当中

设计师使用了“氧气含量不够”

来同404代码之间产生关联

有趣诙谐

意境也接近

14. 充分利用影像

漂亮的照片总是特别吸引人

用镜头下的照片来呈现设计

总有着不同凡响的魅力

在这个案例中

美味的食物

在镜头下表现出无与伦比的魅力

在404这样一个愉快的局面下

用漂亮的图片注入不同凡响的活力

15. 表现动态

表现动态并不意味着

让页面上的东西真的动起来

让元素看起来仿佛动起来

就能创造不俗的效果

在这个404页面中

404三个数字虽然是静止的

但是呈现出动态的感觉

16. 结合流行文化

在404页面中

使用标志化的流行元素或者偶像

也能对相当一部分用户

产生足够好的效用

在这个案例中

设计师将Lionel Richie 的一张老照片

用作404页面的背景

搭配一首老歌的歌词

应景也极具喜感

17. 象征手法

使用象征性的手法

来借助一些视觉元素

来传达404的概念也是不错的选择

在这个404页面中

用断掉的铅笔来隐喻断掉链接

就是很典型的象征手法

18. 控制好间隔

插画和图像以及其他的视觉元素

并不需要填满整个页面

控制好间隔能让整个页面看起来更自然

在案例中

设计师将插画作为核心来表现404

其他的网页元素

并没有拥挤地围绕着插画

给人感觉很不错

19. 不要害怕拥挤

这一条和上一条并不冲突

如果是高度相关的内容

能够紧密的联系并放置在一起

就不要隔开了

让相关的内容靠近

适当留白

也是不错的设计方式

实际上

这个案例也正是这么做的

20. 剪切缺口

通过剪切的方式

让单纯的文本具备更多的含义

和形制其实是一个非常有趣

且有意义的表现形式

在这个案例中

404中间的0的空洞用问号来表现

实际效果看起来非常不错

如果你要为迷路的用户提供许多选项

那么你需要为信息划分不同的层级

以防过多的信息令用户感到压迫

这个404页面在解决这个问题上做的非常不错

顶尖营销案例

专注互联网商业新趋势，直击广告营销最前沿。