摘要：404页面不应只是一个你的网站导航出错时的补救措施。这篇文章告诉了我们，为什么在一个404页面上付出努力，能在网站出错给用户带来不便时，提高用户再次访问网站的机会，以及如何追踪这些导致404的错误以减少用户看到它的次数。
很多人都将这样一句话视为座右铭：“人生重要的不是终点，而是过程”。在遇到路障之前，这些人说的是事实。
错误的转向或者模糊的方向会在旅途中浪费很多人数小时的时间。当你在执行任务时，花费在寻找正确方向上的这几个小时可能会毁掉整个任务。
这些错误并不总是会导致灾难性后果。有种更理想的情况可能会发生：你拐错弯了，但在附近的加油站停下后，你找到了通向终点的更精确的方向，然后重新出发了。你还从在加油站收银台后工作的善良的老太太那里，得到了一个免费的冰淇淋甜筒，因为她看到你迷路了，想给你鼓鼓劲儿。
网站的访问者常常会转身离开你的网站，这不总是他们的问题。他们可能输入了错误的URL（通常是这样）或者点击了一个失效的链接（我们的问题）。不管什么理由，你现在让那些原本想访问你的网站，但现在不能正常访问的人陷入了困境。你可以引导他们回到你想让这些人继续访问的地方，或者你也可以将他们留在失望和黑暗中不管不问。他们需要后退吗？他们是不是在错误的节点离开了？只有你可以告诉他们答案，最好的方式就是通过404页面。
你的网站的404页面可以处理上述两种关于让访客回到正确的购买流程的场景。一个暗淡无光的404页面会刺激你的访客，将他们赶到拥有更好的引导体验的竞争对手网站那边。那些平淡的404页面的特征是有着乏味的提示信息，配有极少的视觉元素。它可能包括了如下相同的衬线字体（西方字母体系中的一种）的各种变种："This page does not exist".这就相当于，你的访客来问你改往哪走，然后你只是冰冷冷的回了一句：‘你要找的不在这，祝你好运’，然后就没然后了。
不幸的是，即使世界上一些最好的品牌也使用上图的这些404页面。没有导航，没有吸引人的文字，没有一处地方展示了他们品牌信息。访客可能会感觉比没找到自己想要的东西更失望，然后离开了。
然而，有一些404页面做了比单调乏味的提示更多的事情。这些页面利用这个机会以更加个性化的方式与用户沟通，而不是提供一个光秃秃的白色404页面。优秀的404页面使用户感觉就像从一张友善面孔那里得到了一次意料之外的款待。精心制作的404页面可以带领你的访客从失落和困惑中走出来，引导他们带着更愉快的心情前往你网站中更有帮助的页面。
以亚马逊为例，在2018年的亚马逊会员日，亚马逊亲身体验到了一个像样的404页面的重要性。当然，当跳到404页面时，顾客仍然会感到沮丧，即使这个404页面有一个可爱的小狗。但是你能想象，如果404页面看起来像诊所一样、并且冷冰冰的毫无用处的话，买家会多生气吗?
（设计404页面时）无论你想着用什么样的色调、视觉效果或者文案才能最好的吸引读者，一个优秀的404页面最重要的是做好一件事情：让网站访客在没有找到他们想要的东西时，感觉这是一切可以接受的--哪怕仅仅是一小会，然后将他们引导到他们需要去的地方。
虽然各种404页面风格迥异，但那些最好的设计似乎都做好了两件事情：
01 支持公司的整体商标和信息
02 成功的通过清晰明确的导航和支持将访客重新指引到网站的其他页面。
接下来进入文章主题，向大家介绍几种实现"完美"404页面的方法：
1、确定整体色调
如果内容不是你们品牌的强项，这可能会很挣扎。但是如果你了解你们的品牌形象和品牌信息，你就可以快速确定从哪一方面传递一些出乎意料的事情。当访客看到404页面时，他们就准备好要失望了，他们没有得到自己想要的。你的404页面是一个向访客展示你们人性化的品牌营销的机会，而不是在其他地方看到的机械、冷漠、自动化的提示信息。总之，不仅仅是诸如"this page is unavailable"之类。
忽略文案色调的话，好的404页面应该像魔术师一样工作。最好的魔术师通常承认他们是魔术师（The best illusionists often acknowledge they’re magicians），他们不会假装自己不是。404页面承认这是一个错误的页面，内容和视觉图案通常反映了这一点。然后，像任何一个优秀的魔术师一样，404页面将（用户的）注意力从错误本身转移到其他地方。通常，这是由搭配有视觉元素的内容来实现的。
下面是一些404页面在过去成功使用过的主题/风格:
诙谐幽默型（CRACK A JOKE）
一个笑话（即使是老掉牙的笑话）都能很好的缓解尴尬或不便。然而，除非你的品牌是建立在粗俗的幽默之上的（具有讽刺意味的是，反人类的卡片没有一个好的404页面），否则最好是使用半开玩笑或一语双关的形式，而不是使用粗俗的笑话。这里有一个来自Modcloth（一个品牌）的例子，他们的404页面使用了一语双关的形式，但却让人保持心情轻松。
机智型（GET CLEVER）
这或许不完全有趣，但这可以在访客进入你的404页面后立刻吸引他们的注意力。它可能有点时髦、刻薄，甚至出人意料。来自暴雪娱乐的404页面在改变脚本的视觉基调和内容方面做得很好。
友好型 （BE FRIENDLY）
最好的例子是乐高商店的404页面，它带有一个友善的客服代表（虽然是乐高玩具形象）。友好感觉可能来自诱人的设计或者温馨的内容。最终，让访客感觉像是有人在微笑着跟他说：“哦，hi，实在抱歉，让我们试着去修复它”。（it’s anything that culminates in a sense of “oh hey, we’re really sorry about that. Let us try to fix it.”）
如果你公司的品牌在客户服务和客户关怀方面表现出色，或许采用这种真诚友好的语气来传递品牌信息是最合适的。如果是那样的话，请将404页面看做是你们客户服务窗口的延伸。
集成交互型 (INTEGRATE INTERACTIVITY)
人们喜欢点击一些东西，尤其是他们正在使用404页面时。如果他们跟你的网站有合作，那就更好了！404页面上的交互性最好的在线示例之一来自Kualo（一家网站运营托管商）。网站托管提供商将他的404页面游戏化为著名网游-太空入侵者的在线，随着你的级别的提升，你会获得额外的生命值。更加令人印象深的的是，Kualo真实的为有托管业务每一位达到某些分数值的用户提供折扣。
发人深思型 （BE THOUGHT-PROVOKING）
是的，你的404页面甚至可以具有教育意义！404页面可以提供一些网站上其他有用的部分的资源和链接。这是意料之外的信息植入，可能会让访客被更多的信息所吸引。美国国家公共广播电台(NPR)在这一方面做得出奇的好。媒体出口提供了具有同一主要特性的信息集合：这些信息都是与用户未搜到的内容相关的。（The media outlet provides a collection of features with one major similarity: the stories are about things which have also disappeared.）
基于实事/流行文化 （TOPICAL/POP-CULTURE BASED）
请谨慎使用这种方式，因为如果你想成为热门话题，很有可能不得不更改你的404信息。流行文化发展很快，如果你不谨慎小心，你花费大量时间制作的404页面，会在两周内变的毫不相干（这对任何目标市场是千禧一代或更年轻的一代的组织来说，都是巨大的罪过）。Spotify（流媒体音乐平台）的 404页面最近经历了一次调整，以跟上潮流。在404页面快速播放坎耶·韦斯特(Kanye West)的《808与心碎》(808 and Heartbreak)之前，上面放的是贾斯汀·比伯(Justin Bieber)的《对不起》(Sorry)歌词。
2、制作与色调相搭配的视觉元素
一旦决定了你的404页面的合适色调，视觉元素是制作过程中很重要的下一步。视觉元素通常是人们在404页面注意的第一个元素——因此，它是你页面所需色调的第一个展示。
静态视觉元素帮助强调页面的内容。添加动画通常可以与文字配合以更好的展示信息或色调（Adding in light animation can often collaborate with the text to further a message or tone）。例如，Imgur（一个免费的图片分享网站）的404页面通过让人物的眼睛跟随访问者的光标，将其插图栩栩如生地呈现出来。
视觉元素之间的交互让人们有机会去做沮丧的互联网访客们喜欢做得事情 ——点击所有的东西以试图让一些有用的事情发生。
3、确定导航选项
你知道了你的页面要使用什么样的色调，也确定呈现色调所要使用的视觉元素。你的网站访客也觉得你这个页面很好，很有趣 ——但是等一下，你的网站仍必须带领你的访客到他们寻找的地方去。清晰的导航是引导你的网站访问者朝着他们的目标前进的下一个重要步骤。一个可爱但缺房好的导航设计的404页面就像那个善良和蔼的老人给你指了一个糟糕透顶的方向。
在你的404页面给人留下良好的第一印象之后，下一步应该是让网站访问者离开这个页面，去他们想去的地方。对于他们下一步应该去哪里，页面中应该始终有明确的提示。
例如， Shutterstock（多媒体资源网站）的404页面提供了三个不同的导航选项。访问者可以返回到之前的页面，如果他们点击了错误的链接，这是很有帮助的。他们可以回到主页重新开始他们的导航，或许他们是从一个搜索引擎，发现了一个失效的链接，但他们还没有准备离开网站，希望四处看看。最后一个选项是报告问题。如果有人在你的网站上搜索了几分钟，他们知道自己在寻找什么，他们可以报告说，他们可能发现了一个问题。至少，它可以让您的web访问者参与到你的公司中，并且你的开发团队可以得到关于你的网站可访问性的反馈。
除了清晰的导航，其他基于导航的元素甚至可以更好的帮助你的访客：
- 聊天机器人/在线客服：机器人元素通常有两者接受方式。访客要不会觉得它们很烦人，要么觉的它们是有点用的。在进入页面后一秒钟内弹出的机器人通常会导致访问者完全从站点中退出，因为弹窗似乎具有侵略性。然而，你的网站可以通过简单的点击"Click to chat"选项来使用机器人。这样就会吸引迷失的访客去和机器人打交道，而不是让机器人先做出可能让人厌恶的举动。
- 搜索框： :这个元素可以为拥有大量页面和信息的网站创造奇迹。搜索栏还可以提供常见问题的答案或重定向到FAQ页面。
最后一个导航说明 - 确保这些导航策略在移动端和在桌面端一样有效。像对待其他页面一样对待404页面。为了取得成功，它应该能够很容易地为各种各样的用户导航，特别是在一个以移动端为主的世界。
尽管404页面的外观非常重要，但理想情况下，你永远不希望任何人在您的网站上找到它。了解网站上最常见的404错误可以帮助您了解如何减少这些问题。
如何使用谷歌分析工具追踪404事件
你需要追踪什么
（谷歌）所提供的代码将在谷歌分析工具中报告404事件，所以你必须在其中拥有一个使用中的的帐户才能使用用本教程。你还需要访问你的网站404模板，（这一点很重要）并且404页面必须保留键入/单击页面的URL结构。这意味着你的404事件不能仅仅重定向到你的404页面。你必须使用抛出错误的URL地址动态地为404模板提供服务。大多数web服务器服务(如Apache)允许您使用各种重写规则来完成此操作。
使用谷歌分析工具追踪404错误
有了谷歌分析工具，准确追踪404错误是直接又简单（的事情），只要确保你的主要谷歌分析跟踪脚本是到位的，然后将下满的代码添加到你的404错误页面/模板中:
<script>
// Create Tracker - Send to GA
ga('create', 'UA-11111111-11');
ga('send', {
hitType: 'event',
eventCategory: '404 Response',
eventAction: window.location.href,
eventLabel: document.referrer
});
</script>
你需要将id换成你的谷歌分析账户id。然后，脚本通过向谷歌分析工具中发送一个event来工作。事件类别是404 Response，eventAction使用JavaScript传递引发错误的URL，eventLabel使用JavaScript传递用户所在的上一个URL。通过所有这些数据，你可以看到什么URL导致了404错误，用户从哪里访问的这些URL。
使用谷歌标签管理器追踪404错误
越来越多的网站管理者决定转而使用谷歌标签管理器。该工具使它们能够通过单个容器嵌入整个脚本。如果您有许多来自多个提供者的跟踪脚本，这个会尤其有用。要通过标签管理器追踪404错误，首先要创建一个名为Page Title Variable的变量。这个变量类型是JavaScript变量，变量名是document.title:
本质上讲，我们在创建一个检查页面给定标题的变量。这就是我们检查是否在404页面的方法。
然后，创建一个名为404 Page Title Trigger的追踪器。（追踪器）类型是Page View,当Page Title Variable包含“404 -Page Not Found”或在浏览器中显示的404页面标题时触发。
最后，你需要创建一个名为404 Event Tag的标签。标签类型是Universal Analytics,包含了下面部分：
变量、触发器和标记都可以将相关数据直接传递给谷歌分析工具。
404事件报告
无论你使用哪种追踪方法（通过标签管理器还是直接使用事件信标），你的报告在谷歌分析工具中都应该是相同的。在Behavior选项下，你会看到一个名为Events的选项。在这里你会看到所有被记录的404事件。Event Action和Event Label维度将提供抛出404错误的URL及其引用源的相关数据。
这些就绪后，你现在可以定期监控你的额404错误，并采取必要的措施使出现频率减少到最少。在这一过程中，你优化你的指向资源，提供最好的用户体验，在正确的道路上保持转化和参与度（keeping conversions and engagement on the right path.）
如何处理你的谷歌分析结果
既然你已知道了如何监控这些404错误，那么开发者做些什么呢？跟踪404错误的关键要点是寻找导致这些错误的模式。这些数据应该帮助你明确用户意图，引导你了解用户的想法。理想情况下，你会看到将引起的404页面的问题的趋势，你可以应用这个知识相应的调整你的网站。
如果你的网站访问者在搜索网页时遇到了困难，抓住机会创造一些内容来填补这个漏洞。通过这种方式，人们可以得到以前从你的站点没有看到的结果。
404事件可以通过微调网站的设计来避免。确保你页面上的导航是清晰的，将用户引导到逻辑终点。问题修复甚至跟将页面上的描述换成为用户绘制一张更清晰的图片那样简单。
总结
色调、图像和导航——这三个元素可以把任何404页面从一个鬼城变成一个让你的网站访问者感到愉快的意外站点。虽然你不希望他们永远呆在那里，但在送他们走之前，你当然要确保他们和你在一起是愉快的。通过定期监控404错误，您还可以减轻一些不便之处、标记不佳的标志和经常使用户出错的漏洞。主动处理404错误，最终会改善网站访问者的旅程和目的地。
关于本文
作者：@Shelby Rogers
原文：https://www.smashingmagazine.com/2018/11/the-101-course-on-crafting-404-pages/
