404
404 错误页面应该包含哪些元素?
不同品牌, 可以适用不同的 404 错误页面元素. 基本上, 我建议包括以下 7 种内容:
错误信息
你需要让用户在第一时间知道无法找到他们正在访问的这个页面.
品牌 Logo
承认自己的错误, 即便有时候这个错误并不是你导致的. 值得注意的是, 最好在 404 错误页面的核心位置确保用户能看到你的品牌 Logo.
品牌定位
同时, 确保 404 错误页面和你的品牌定位相匹配.
一丝安慰
一丝安慰, 虽然并不算什么, 但在 404 错误页面这种情况下, 总是会受到用户青睐的. 只不过, 你不能太夸张.
链接至相关内容
在 404 错误页面上, 你可以添加 3 至 4 个可能会让用户感兴趣的链接. 无论如何也不要选择让用户直接走掉, 即便是在 404 错误页面上.
行为召唤
还记得前文说过, 要把 404 错误页面当作着陆页来设计吧. 所以, 不妨加入一些着陆页设计逻辑: 在页面添加一些 "下载","注册" 甚至 "搜索框" 等元素, 让用户在遭受 "挫折" 同时可以有更好的选择.
简而不减
谁都不愿意打开 404 错误页面, 却像点开了一部在线小说的感觉. 此外, 404 错误页面也不应该像百度搜索的结果页面. 你根本不需要那么多的文字.
7 种炫酷十足的 404 错误页面设计
许多品牌 404 错误页面的设计风格, 都是中规中矩的, 而且大多数没有一点创意. 我们肯定希望能看到哪怕有一丝不同的错误页面. 以下, 我总结了大概 7 种受用户青睐的 404 错误页面设计.
高概念, 具有视觉冲击的 404 错误页面: Huemor https://huemor.rocks/?page_id=16160
总部在纽约的网站设计公司 Huemor 的 404 错误页面, 背景是一张带有上个世纪 50 年代科幻大片的图片. 背景图上的火箭人正在全力冲向外太空.
"啊! 看起来好像已经到达了宇宙的尽头. 赶紧回来吧, 勇敢的探索者!"
Huemor
播放视频内容的 404 错误页面: Nectafy https://www.nectafy.com/404
专注内容运营的网站 Nectafy 的 404 错误页面就非常有趣. 当你进入 404 错误页面后, 这个网站会通过一段文字提示告诉你错误信息, 同时向你推荐了一个视频.
这个视频是一个原创的 MV 短片. 通过改写 U2 乐队的一首歌, 填入新的歌词, 而歌词大意基本上就是告诉你, 你现在打开了错误页面, 不要难过, 你可以通过这个 404 页面上的搜索框和其它链接跳转查找你感兴趣的内容.
这种 404 错误页面非常有创意, 而且这个想出这个创意的人把他的家人都请来演这部 MV, 自弹自唱这首原创歌曲.
Nectafy
让人思考的 404 错误页面: Medium https://medium.com/i-want-to-get-an-error
著名的在线写作阅读平台 Medium 的 404 错误页面设计非常简约, 进入这个页面就有一个硕大的黑体 "404" 字样映入眼帘. 除了这个主要信息外, 还有一个显眼的搜索框, 3 篇关于页面错误的文章链接. 这种设计也非常有想法!
Medium
设计可爱的 404 错误页面: GitHub https://github.com/404.html
软件项目托管平台 GitHub 的 404 错误页面就非常有意思, 加入了动画元素, 设计非常可爱. 同时, 当你用鼠标将箭头放置在卡通人物上方时, 还能看到一种视差效果. 此外, GitHub 的 500 错误页面也值得一看!
GitHub
交互型 404 错误页面: Canva https://www.canva.com/404
在线平面设计软件 Canva 就利用其设计方面的优势, 向用户展示了一个基于交互的 404 错误页面. 除了一句错误信息提示和一个跳转至主页的链接, 剩下的只有一副打乱的拼图. 找不到你想跳转的页面, 不妨花一点时间玩一下拼图游戏也行.
Canva
技术宅型 404 错误页面: Klaus https://klaus.dk/404/
网页开发服务商 Klaus 的 404 错误页面, 完全是 404 错误页面中的 "另类". 你在页面中基本上找不到 404 错误页面的基本元素 -- 没有品牌 Logo, 没有行为召唤按钮, 甚至都没有退出这个页面的按钮.
你好似也明白他们在传达出的信息: 基本元素规则都是留给笨蛋的.
Klaus 公司的 404 错误页面非常有趣. 整个界面风格是 Commodore
64(Commodore 公司 1982 年推出的电脑型号)的载入界面. 界面内容正在加载一个程序, 而这个程序正在搜索你想跳转的链接. 在完成搜索没有匹配结果后, 页面就列出了磁盘目录, 并找到两个文件名分别为 FOO 和 BAR 的文件. 明白了吗?
Klaus
GIF 动画的 404 错误页面: Kickpush https://kickpush.co/404/
Gif 动画再简单不过了, 你可能之前都看到过这个动画. 总部位于伦敦的产品设计工作室 Kickpush 在其 404 错误页面上也很好地结合了自己的优势.
简简单单的几个字, 让你第一时间知道了错误信息. 同时, 背景还有一个非常有名的 Gif 动画 -- 经典黑色幽默犯罪电影《低俗小说》其中的主角文森特. 维嘉 (Vincent Vega) 迷路的 Gif 动画. 老实说, 这个 Gif 动画真的非常应景.
Kickpush
404.^-^
来源: http://www.jianshu.com/p/355c8a10248d