恭喜你成为UI中国推荐设计师 (详情)
//百度统计 20220402 uicn

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
如何设计一个好的404页面?
0.0°
2019-06-28 自译外文 教程 原作者: Katerina Samoilis 举报 1686 2 3 0

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

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

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

了解技巧之前,我们先来回顾下Jacob Nielsen的十大可用性设计原则,他提到:


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

践行着这个原则,我们可以使用以下这些设计技巧。


避免使用行话


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

Image title

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


负起责任, 是“我”的错


对于一个UX设计师来说,法则第一条:别让用户觉得是他们的错,或者是他们搞砸了什么事情。很多情况下不会是他们的问题,但即使是他们的错,我们也可以打打马虎眼。主动去承认错误,向他们道歉:“很抱歉,我们找不到该页面。”

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

Image title

Natwest 在“道歉”上就做得很好,而且提供了有效建议


简洁、温柔、具体


在404页面解释问题发生的原因时,文案应该满足“能够跳读”的标准,即应该保持简短和直击重点。

正如我将在稍后介绍的那样,404页面是添加一些趣味元素的好机会,但首先,我们需要说明出错的原因。此外,如果你知道错误发生的根本原因(比如找不到页面,或者由于页面长时间打开而导致会话过期),清楚地告诉用户。

Image title

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


考虑产品语调

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

Image title

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


增添一些指导信息

如果错误原因非常明晰,通常有一些方法可以解决这个问题。你可以添加一个“返回”的按钮,或者一些链接,让他们跳回安全页面;也可以是一系列指导,教给用户自己解决问题,比如刷新页面、清空缓存,或者少在键盘前面边吃饼干边掉饼干屑……

Image title

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


锦上添花的愉悦感

这一部分才是有意思的。现在你添加了与用户相关的消息,明确说明了问题,还提供了指导,是时候做一些锦上添花的事儿了:有趣的视觉元素,带点幽默感的文案,让


用户笑出声来是最好了。

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

Image title


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


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


此文由墨刀编译自 Katerina Samoilis 的 How to create great error pages.


更新:2019-06-28

收藏

2人已收藏

墨刀_MockingBot

在线产品设计写作一体化平台

  • 494

    作品

  • 1449

    粉丝

  • 3

    关注

  • 产品经理和设计师谈恋爱,看得我比“老坛酸菜”还酸!
  • Figma”断供“后:墨刀能为中国企业做什么?
  • 产品经理干久了,有哪些后遗症?
  • 超实用的后台原型,产品大佬的摸鱼技巧都在这里!

    猜你喜欢

      2019-06-28 自译外文 教程 原作者: Katerina Samoilis 举报 1686 2 3 0

      如何设计一个好的404页面?

      0.0°

      你确定要举报如何设计一个好的404页面?

      如果查出恶意举报,十天内禁止提交任何举报申请。

      0/200

      上传证据: 超过10M的附件请使用网盘地址

      点击上传附件

      对谁可见:

      全部设计师
      • 全部设计师
      • 推荐设计师和认证设计师

      您确认要推荐?

      该作品发布时间:2019年06月23日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      3
      2
      0

      账号或密码错误,请重新输入

      账号或密码错误,请重新输入

      登录

      手机号

      发送验证码 120s 验证码错误

      登录
      第三方账号登录