唐维娟

Vol.35:【译】什么是优秀的 404 错误页面

你好,欢迎阅读我的周刊第 35 期。在这里,我将分享近期我读到的、看到的有趣或有用的东西,也分享我的一些灵感和想法。


What Makes a Great 404 Error Page? | Design Shack

本周分享一篇关于设计 404 页面的文章,翻译如下(这是 2014 年的文章,文中提到的许多 404 页面已经更新了设计,点击图片可以跳转到新设计):

没有人愿意认为网站访问者在错误页面上花费时间,但这种情况发生了。404 错误页面是经常发生这种情况的地方。把它设计成能与用户对话的方式,而不是让他们离开你的网站。

更令人难忘和不那么令人沮丧的 404 错误页面是最成功的,甚至是最有趣的设计。那么,您可以做些什么来为您的网站创建最佳的 404 页面呢?这里有一些提示、技巧和优秀示例库。

什么是 404 错误页面?

35-ds-404

网站访问者在尝试访问不存在的页面时会进入 404 错误页面。这可能是因为页面已被删除,服务器或互联网连接已关闭,用户点击了断开的链接或输入了错误的网址。

通常,404 错误页面会出现以下信息之一:

  • 404 未找到
  • HTTP 404 未找到
  • 404 错误
  • 找不到该页面
  • 在此服务器上找不到请求的 URL

当涉及到 404 页面的整体设计时,有两种选择:通用 404 页面或自定义 404 页面。通用页面只是显示上面的信息,而不考虑设计。自定义页面是您为其设计和创建选项的页面。您必须有权访问主机服务器才能执行此操作。

好的自定义 404 错误页面告诉用户,如果他们以某种方式被误导,应该怎么做。页面应包含可用的信息,以帮助访问者留在你的网站上,并找到他们正在寻找的信息。(希望他们也能有一个漂亮的设计)。

基本必备信息

35-mailchimp-404

为了达到最有效的效果,404 错误页面本质上应该很简单。它应该告诉用户有一个错误(很明显),以及他们有哪些选项可以从这个页面继续前进。

一个404页面不应该有一堆技术术语。(你不想吓唬用户吧?)实际上,你甚至不应该使用“404错误”这个标题,因为你的许多用户不知道这意味着什么。坚持使用更有意义的东西,如“找不到该页面”。

还有一些其他的信息必须在 404 页面上有。记住,重点是让访问者在发现页面错误时继续点击,而不是离开。

  • 一个强有力的标题或文字,向用户解释他们为什么在这里。当您登陆一个不是您想要的网页时,会感到很不爽。确保用户知道他们不在正确的页面上,但他们在正确的网站上。
  • 搜索。确保 404 错误页面具有与网站其余部分相同的搜索功能(并且在相同的位置)。这样,用户可以查找他们打算访问的页面。
  • 链接到您的主页和网站地图。这很可能作为一个设计元素发生,其中包含与网站其余部分匹配的页眉或页脚。
  • 其他信息尽量少。考虑除去复杂的导航。如果用户错误地访问了某个页面,请只为该用户提供一些能成功的选项。这里有太多的选项可能会使用户进一步感到沮丧或困惑。
  • 明显的号召性用语。告诉用户下一步该怎么做。

使 404 页面可用

35-heinz-404

在考虑 404 页面时,设计过程的一部分应该是可用性。包括使页面对迷失的用户既具有视觉吸引力又具有功能性的功能。

Google 在其网站站长工具的自定义 404 页面上提供了很好的信息建议。这些提示包括

  • 明确告诉访问者找不到他们要查找的页面。使用友好和诱人的语言。
  • 确保您的 404 网页使用与网站其他部分相同的外观。
  • 考虑添加指向最受欢迎的文章或帖子的链接。
  • 考虑为用户提供一种报告断开链接的方法。
  • 确保您的 Web 服务器在请求缺失的网页时返回实际的 404 HTTP 状态代码,以便它不会显示在搜索结果中。
  • 使用“增强 404”小组件在自定义 404 页面上嵌入搜索框。
  • 使用地址更改工具告知 Google 您网站的迁移情况。

除了这个提示列表之外,还有一点是设计师的:要有创意。如果 404 页面在技术上是合理,它就不一定是无聊的。

有目的地设计 404 页面

35-duoh-404

当您考虑 404 错误页面的设计时,首先要考虑它与网站其余部分的关系。您的整体设计的情绪或基调是什么?这个页面如何匹配这种感觉?

优秀的错误页面与他们所在的网站无缝融合。如果您的网站具有轻松幽默的基调,那么 404 页面也应该如此。颜色和图像也应具有一致的设计。但在设计中要注意不要责怪用户登陆错误的页面。(这种情况发生的频率比您想象的要高。)

考虑错误页面的设计,就像考虑整个设计方案中的任何其他页面一样。

  • 保持设计一致性。使用与网站其他页面相同的颜色、排版和图像风格。
  • 保持品牌效应。使用相同的 logo、页眉和页脚将有助于用户识别您的网站。
  • 在视觉上保持简单。当涉及到错误页面时,少即是多。
  • 不要让用户滚动。这是一个单屏设计。
  • 避免太多的噱头。虽然保持您的网站和品牌的基调和感觉是个好主意,但太多的“额外内容”可能会让用户忘记他们要找的是什么。
  • 道歉,并有同理心。对用户登陆错误的地方表示歉意是可以的。
  • 如果您的网站需要登录,请为其添加位置。(发生错误是因为用户需要登录吗?)
  • 要有创意。还是搞笑。但请先测试页面。确保随机用户“得到它”。
  • 如果您使用“404 错误”,请添加第二行文本,告诉用户这意味着什么或他们接下来需要做什么。

12 个优秀的例子

没有什么比点击一个很棒的 404 错误页面更好的了。它减轻了链接损坏或断开的挫败感。这里有十几页肯定会让你想偶然发现错误。

Deviant Art

Deviant Art 404页

Gig Masters

Gig Masters 404 page

iFolderLinks 404页

Lego

Lego 404页

LimpFish

LimpFish 404 page

Magnt

Magnt 404 page

Mattel

Mattel 404 page

ModCloth

ModCloth 404 page

NPR

NPR 404 page

Steve Lambert

Steve Lambert 404 page

Titleist

Titleist 404页

Tobi

Tobi 404页

结论

设计一个因错误而产生的页面可能很难被认为是有趣的,或者是展示一些创造力的地方,但它确实如此。设计一个有效的 404 页面是简单性、可用性和设计天赋的结合。


延伸阅读

8 Ways to Design Clever Error Messages


订阅: 本站所有内容首发于 tangweijuan.com,同步更新于微信公众号"Afterwork Time",欢迎扫描下方二维码订阅。

公众号 Afterwork Time