【UI/UX设计干货】404页面设计指南

做为一名UX设计师，虽然有点难启齿我梦想的案子就是去“设计一个404页面”，不过404页面的设计确实跟用户体验息息相关。咱们使用产品的过程当中，不可避免会出错，那至少会有一个界面在此时提供一些有价值的信息。

在最近我参与的一个对UI和UX再设计的项目中，咱们从新评估了404页面的信息，而且决定抛弃掉那些模糊晦涩、几乎无用的语言。

借此，我也想分享一些关于404页面设计的技巧。用户看到了好的404界面，会原谅这些错误，甚至会以为你家产品颇具魅力，让人忍俊不由。

了解技巧以前，咱们先来回顾下Jacob Nielsen的十大可用性设计原则，他提到：

帮助用户识别、诊断错误，以及解决错误：错误信息应以简单平实的语言（无代码语言）来表示，准确指出问题，并建设性地提出解决方案。

践行着这个原则，咱们可使用如下这些设计技巧。

避免使用行话

因为技术层面引起的问题，就天然很容易使用技术术语来描述。不过不少时候，当你的用户不是工程师时，他们会以为这彻底就是一堆胡言乱语。用户已经因找不到所需功能而感到沮丧，想象一下此时他们再遇到一次障碍时该有多痛苦吧。

 

 

谷歌的404在这里也有点术语话，不过旁边的机器人算是挽救了一下。

负起责任， 是“我”的错

对于一个UX设计师来讲，法则第一条：别让用户以为是他们的错，或者是他们搞砸了什么事情。不少状况下不会是他们的问题，但即便是他们的错，咱们也能够打打马虎眼。主动去认可错误，向他们道歉：“很抱歉，咱们找不到该页面。”

也能够经过使用“哎呀” “搓搓手” 这样的生活化措辞来表示你的同理心和关怀。

 

Natwest 在“道歉”上就作得很好，并且提供了有效建议

简洁、温柔、具体

在404页面解释问题发生的缘由时，文案应该知足“可以跳读”的标准，即应该保持简短和直击重点。

正如我将在稍后介绍的那样，404页面是添加一些趣味元素的好机会，但首先，咱们须要说明出错的缘由。此外，若是你知道错误发生的根本缘由（好比找不到页面，或者因为页面长时间打开而致使会话过时），清楚地告诉用户。

 

 Innocent drinks 的“404”页面，跟品牌调性也符合。

考虑产品语调

思考你的目标受众和品牌形象，来保证设计的“一致性”。好比说，语言的风格能够适应目标人群的使用习惯。若是你的品牌调性是有趣的，你的404页面语言风格也能够是好玩的。

 

Asos的404页面干净，简单，无多余的装饰，与总体品牌调性一致

增添一些指导信息

若是错误缘由很是明晰，一般有一些方法能够解决这个问题。你能够添加一个“返回”的按钮，或者一些连接，让他们跳回安全页面；也能够是一系列指导，教给用户本身解决问题，好比刷新页面、清空缓存，或者少在键盘前面边吃饼干边掉饼干屑……

 

Dropbox的404页面提供了一些有用的连接

锦上添花的愉悦感

这一部分才是有意思的。如今你添加了与用户相关的消息，明确说明了问题，还提供了指导，是时候作一些锦上添花的事儿了：有趣的视觉元素，带点幽默感的文案，让用户笑出声来是最好了。

若是大家公司有吉祥物或漫画形象，那404页面也是发挥他们存在感的地方。即便没有，一个笑话、双关语、表情包都是不错的选择。时刻记得品牌调性，404页面也是其展示平台。

 

 Airbnb 的404页面，配有可爱的动画

棘手的事情才能考验咱们解决问题的能力。若是你把一件糟糕的事情描述得“萌”一点，你的用户也会更能与你共情，甚至欣赏你。

---

此文由墨刀编译自 Katerina Samoilis 的 How to create great error pages.已联系容许转载。

刚开始在网站上看到这篇文章的英文版本写的很是好，但是因为太多术语，没有翻译的太好…今天看到墨刀公众号前两天推送了这篇文章的翻译版本，因此想在这里分享给你们哈哈~