素材周刊
别只盯着首页：这6个404页面，才最能看出品牌设计水平
哈喽，我是大鹏，这里是第二灵感库。
第二灵感库
本文看点
PART 01
01 14islands：先给“迷路”一个合适的比喻
PART 02
02 Makepill：把品牌符号变成错误信息
PART 03
03 Axolot Games：错误状态也要使用同一套视觉语法
真正成熟的体验，不是永远不出错，而是出错以后仍然清楚、体面、有办法继续。
大多数团队愿意花几个星期打磨首页，却只给404页面留下一行冷冰冰的“Page Not Found”。
但404页恰恰是最容易暴露设计水平的地方。
因为用户来到这里时，已经有一点困惑，甚至怀疑是不是网站出了问题。设计师要在几秒内同时完成三件事：告诉他发生了什么、缓解挫败感、给出一条明确的返回路径。
根据MDN的定义，404表示服务器找不到用户请求的资源。Google也建议，自定义404页面要清楚说明页面不存在，保持与网站一致的视觉和导航，并提供首页或其他有帮助的入口。
我从Awwwards收藏库的147个404案例里，挑出了6个目前仍能正常访问的页面。它们真正值得学的，不是“把错误页做得多酷”，而是如何在一次失败里继续表达品牌。
01
KEY INSIGHT
01 14islands：先给“迷路”一个合适的比喻
网址：https://www.14islands.com/404
14islands没有直接把巨大的“404”扔到屏幕中央，而是写了一句：
You're in deep water.
下面的引导也沿用同一个比喻：你已经触到网站的“水底”，点击链接就能游回水面。
页面以黑色为底，巨大的白色文字像被水流轻轻扰动。文案、视觉和交互都围绕同一个概念，没有谁在抢戏。
这个案例最值得学的是：错误提示不一定要解释得像系统通知，但隐喻必须帮助理解，不能只顾着耍聪明。
KEY INSIGHTS
隐喻好不好，看这两个标准
帮助理解
让文案、视觉和返回动作说同一种语言
避免猜谜
没有明确品牌意象，就直接说明页面没找到
如果你的品牌本身有明确意象，可以把“返回首页”写成同一套语言；如果没有，就老老实实说清楚“页面没找到”，不要让用户再猜一次。
02
KEY INSIGHT
02 Makepill：把品牌符号变成错误信息
网址：https://makepill.com/404
Makepill的页面中央是一枚不断旋转的黑色圆环，荧光绿色文字沿着圆环循环滚动：
Pill not found — 404
它没有额外创造一只迷路的小动物，也没有套用常见的太空人插画，而是直接从自己的品牌名称“pill”出发，把药丸、圆环和错误信息组合成一个三维装置。
这提醒我们：404页最省力的创意来源，往往不是找一张新插画，而是重新解释已有的品牌资产。
品牌有吉祥物，就让吉祥物参与“寻找”；品牌强调速度，就把错误写成一次偏航；品牌围绕探索，就把页面变成地图。这样做出来的404页才属于你，而不是换个Logo就能卖给下一家公司。
03
KEY INSIGHT
03 Axolot Games：错误状态也要使用同一套视觉语法
网址：https://www.axolotgames.com/404
Axolot Games的404页仍然保持网站鲜明的黑、白、红配色，大量几何图形、警告文字和品牌小怪物被组合成一条横向视觉带。
你第一眼就知道页面出错了，但也不会怀疑自己是不是突然跳到了另一个网站。
很多产品的首页很精致，到了空状态、加载失败和404页，却像开发临时搭出来的后台提示。问题不是错误页不够华丽，而是错误状态没有被纳入设计系统。
最简单的改善方式，是让它继续使用现有的字体层级、颜色、图标、按钮和动效节奏。哪怕没有复杂动画，只要视觉语言一致，用户的信任就不会突然断掉。
04
KEY INSIGHT
04 MetaLab：不要只给一条“回首页”的路
网址：https://www.metalab.com/404
MetaLab的404页像一张完整的品牌海报：大字号衬线标题、紫蓝色三维图形，再加一句轻松的提示：
Hmmm… this page doesn't exist.
更重要的是，它没有只放一个“Home”按钮，而是直接给出Case Studies、What We Do、About Us、Latest News和Get in Touch等入口。
用户点开一个失效链接，未必真的想回首页。他可能在找案例、服务介绍、联系方式，或者某篇已经被移动的文章。
所以404页的目标不是把所有人赶回起点，而是尽量推测他下一步可能想去哪里。
内容型网站可以提供搜索框和热门文章，作品集可以给项目与联系方式，电商则可以给分类、搜索和最近浏览。入口不用很多，但必须比“返回首页”更接近用户原来的目的。
05
KEY INSIGHT
05 Fiddle.Digital：互动只能用来缓解情绪
网址：https://fiddle.digital/404
Fiddle.Digital把404数字放进一个类似摄像机取景器的交互画面中，鼠标移动时，中心装置会产生反馈。页面仍然保留清晰的错误说明和“Back to homepage”入口。
这类设计的价值，是在用户意识到走错路以后，给他一秒钟的小惊喜。
但顺序不能反过来。
如果互动加载很久、返回按钮藏得很深，或者用户必须玩完一段动画才能离开，那么设计师只是拿用户的错误满足自己的展示欲。
判断标准很简单：关掉动画以后，用户还能不能立刻看懂发生了什么，并找到出口？如果不能，这个互动就不是加分项，而是新的障碍。
06
KEY INSIGHT
06 Henry Northington：可以游戏化，但别忘了有人只想离开
网址：https://www.henrynorthington.com/404
Henry Northington把404页做成了一个可以启动的Pong小游戏，页面会提示用户使用上下方向键操作。
游戏化的好处很明显：它把“页面不存在”的挫败感，转换成了一段意外体验，也很适合作品集展示个人的前端和交互能力。
不过它同样暴露了404设计中最容易忽略的问题：不是每个人都想玩。
移动端有没有可用操作？键盘焦点是否清楚？偏好减少动态效果的用户能否跳过？“返回首页”是不是比“开始游戏”更容易找到？
彩蛋应该是第二条路，恢复任务才是第一条路。先让用户安全离开，再奖励愿意停留的人，这才是游戏化不会冒犯人的前提。
07
KEY INSIGHT
一个合格的404页，至少检查这6件事
看完这些案例，不代表我们都要去做三维动画或小游戏。真正通用的是下面这张检查表：
01 说清楚
明确告诉用户页面没有找到，不要只展示一幅看不懂的插画。
02 能返回
至少提供一个醒目的首页或上一级入口。
03 有补救
根据网站类型提供搜索、热门内容、项目、分类或联系方式。
04 像自己
延续现有品牌的字体、颜色、按钮、图标和语气。
05 别添堵
动画不能挡住操作，同时考虑移动端、键盘与减少动态效果。
06 状态要真
页面视觉上可以很漂亮，但服务器仍应返回真正的404状态码，不能显示“页面不存在”却返回200，形成soft 404。
如果资源已经永久迁移到了明确的新地址，应该使用301重定向；如果确实没有替代内容，再返回404或410。不能为了“用户体验”，把所有错误地址一股脑重定向到首页。
08
KEY INSIGHT
6个案例，分别适合学什么？
|
|
|
|
|---|---|---|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
∞
THE END
写在最后
首页展示的是品牌最希望你看到的样子。
404页展示的，却是当事情不按计划发生时，品牌如何对待用户。
真正成熟的体验，不是永远不出错，而是出错以后仍然清楚、体面、有办法继续。
如果让你改自己产品的404页，你会先补“品牌感”，还是先补“返回路径”？
我是大鹏，这里是第二灵感库。我们下篇见。
END