前言

介绍了如何撰写有效的错误提示，以帮助用户而不是让他们感到沮丧。今日前端早读课文章由 @Amy Hupe 分享，@飘飘编译。

译文从这开始～～

在今天的用户体验设计中，最常被忽视的部分之一就是我们对错误的处理。我们忙于设计产品中的理想流程，却常常忘记在出现问题时给予同样的关注和用心。

我们的数字产品中充斥着死胡同般的页面、只有开发者才能看懂的无意义错误代码，还有令人抓狂的 “幽默提示”，这些只会让用户感到困惑和受挫。即使我们偶尔用心撰写了一些有帮助的错误提示，往往也没有好好记录或标准化，导致难以在整个产品中统一复用。

【早说】@Ethan Evans：三大简历错误

以下是如何创建有助于用户迅速恢复并继续使用您的产品和服务的错误消息的方法。

考虑用户可能遇到的各种错误

撰写优质错误提示的第一步，是要梳理用户体验中可能出现的各种错误类型，比如：

• 表单填写错误，如数据缺失或填写不正确
• 用户提交的数据未通过校验
• 错误页面，例如 404 或 500
• 没有结果的搜索查询
• 网络连接中断

彻底梳理你设计中的所有潜在失败点，可以有效避免让意料之外的错误提示直接出现在用户面前。

用人的语气来写作

值得庆幸的是，现在我们已经很少再看到那些完全让人摸不着头脑的错误提示了。五到十年前，随便上个网站就可能遇到 “Error: Exception Processing Code: 038638638638” 这类信息。

不过，说到错误提示，不知为何，我们还是容易写得像个机器人。“发生错误” 这样的表述，对用户来说完全没有帮助，就像说了句 “出事了” 然后撒手不管。

正确的做法是，想象自己正坐在用户身边，温和地引导他们解决问题。把你写的内容大声读出来，看看是否听起来像你在真实对话中会说的话。

Monzo 就是一个很好的例子。当用户在 Monzo 网站上想查看贷款选项（而这个功能只能在手机 App 中使用）时，他们只会简单地告诉用户：“你需要用手机来完成这一步”。

Monzo 网站上写着 “你需要用手机来完成这一步”。下面补充说明：“打开手机相机扫描二维码，或直接在手机上点击下方按钮。” 按钮上写着 “查看我们的贷款”，右边还配有一个二维码。

他们不仅给出了具体说明，还提供了二维码，方便用户快速进入。

Monzo 的这种做法如此以行动为导向，甚至让人几乎意识不到自己遇到了错误。

避免过度 “卖萌”

虽然错误信息最好写得通俗易懂，但也不能太过随意。

在 404 页面上说 “嗯，这看起来不太对劲”“哎呀！” 或者展示一个悲伤机器人的可爱插图，这在用户已经感到沮丧的情况下，会很快激怒他们。

最近一家在线零售商因为我电子邮件地址中少了一个点而称我是个 “傻瓜”，我立刻放弃了购物车，去别处买我的 T 恤了。出了问题的时候，我不需要你来当我的搞笑阿姨 —— 我需要你帮我解决。

错误发生时，就是用户体验中出现摩擦的时刻。虽然有时无法避免，但尊重用户意味着要把清晰和同理心放在第一位 —— 这可不是 “展现个性” 的好时机。

尤其当用户正处于焦虑或需要完成重要任务的时候，卖萌式的提示只会让人觉得被敷衍。想象一下，你正赶着去面试，却在购票 App 上看到一条 “哎呀出错啦！” 的提示。

问问自己：

• 这条消息对于心情不好的人来说还管用吗？
• 这样的语言会不会让问题看起来被轻描淡写了？
• 我们是在帮用户摆脱困境，还是单纯在展示幽默？

如果拿不准，最好还是收敛一些。

使用主动语态

使用主动语态是提升用户体验文案最有效的方法之一，尤其在撰写错误提示时，效果尤为明显。

主动语态能清晰地告诉用户 “谁做了什么”，而被动语态则让责任归属变得模糊。

来看一个例子：

无法处理您的提交请求。

是谁无法处理？出了什么问题？我该怎么办？

正确的表达应该是：

我们无法处理您的申请，因为您上传的文件格式不受支持。请将文件保存为 JPEG 格式后重新上传并尝试。

使用主动语态能够明确责任，让指示更具体、更清晰，也让用户更容易继续前进。

给出明确的后续行动

错误一般可以分为两类：

• 用户可以自行解决的错误，比如表单填写错误或 WiFi 连接丢失
• 用户无法自行解决的错误，比如系统故障

无论是哪种情况，都应该提供下一步指引，帮助用户继续完成任务。

对于用户可以修复的错误，我们需要清楚地告诉他们需要做什么。

对于用户无法修复的错误，也同样需要指明他们接下来该怎么办。比如遇到 500 错误（服务器内部错误），除了简单说明 “服务出现了问题”，我们还可以：

• 提供具体行动建议：“请稍后再试”
• 提供其他联系方式：“如果您现在需要帮助，可以拨打我们的电话 [电话号码]。”
• 告知提交的数据处理情况：“我们已保存您的回答，并将在 30 天内为您保留”

我很喜欢 Wellcome Trust 的一个例子，当用户在他们的网站上搜索无结果时，会给出一系列建议供用户参考。

Wellcome.org 的无搜索结果页面会出现一个小提示框，建议用户检查拼写错误、尝试更少或更通用的关键词，或者搜索具体的主题、奖项或工作领域。

使用统一的模式

统一的错误提示模式可以帮助用户更快地浏览、理解和采取行动。同时，它也让我们的工作变得更轻松，不需要每次都从零开始编写错误信息。

【第3479期】UI 设计中的错误信息准则

对于已知且常见的错误，比如 404 页面或无搜索结果页，我们可以将错误提示文案作为设计规范的一部分记录下来。

对于根据用户输入内容不同而变化的错误信息，我们可以提供撰写提示信息的固定模式。

举个例子：

• 如果某个字段为空，使用：“请输入 [缺失的信息]”
• 如果输入内容超长，使用：“[用户输入内容] 必须在 [字符限制] 以内”

GOV.UK Design System 在这方面做得尤其好，它既提供了：

• 针对已知字段（如电子邮件地址）的具体错误信息
• 也提供了适用于通用组件（如文本输入框）的错误提示撰写模式

在 GOV.UK Design System 中，有针对文本输入组件的错误提示范例和撰写指导。

技术落地：在前端项目中如何统一管理错误提示

在实际前端开发中，优质的错误提示不仅需要文案得体，还需要技术上易于统一和维护。可以从以下方面入手：

• 组件化错误提示：将常见错误信息封装为可复用组件，如 ErrorMessage.vue。
• 统一状态管理：利用全局状态管理工具（Redux、Vuex、Pinia）集中处理错误，提高一致性。
• 接口错误拦截处理：在 Axios 实例中集中管理错误提示，根据 HTTP 状态码返回对应的友好文案。

通过以上方法，可以保证错误提示在整个项目中标准统一，便于后期维护和迭代。

国际化支持：让错误提示适应多语言环境

如果项目面向国际市场，错误提示的国际化（i18n）也不能忽略：

• 提取文案到语言包，避免硬编码
• 避免文化依赖的幽默或隐喻，使内容适合不同文化背景
• 使用动态占位符，保证不同语言下语序正确自然

提前考虑国际化，可以极大提升产品的扩展性和专业性。

可访问性：让错误提示对所有用户友好

为了照顾使用辅助技术的用户，错误提示的无障碍设计也很重要：

• 使用 ARIA 属性（如 role="alert"）确保屏幕阅读器能即时播报错误
• 错误提示靠近输入框，并使用 aria-describedby 关联字段和提示信息
• 保持语言清晰简洁，减少用户理解负担

在细节上做到包容所有用户，才能真正让产品达到更高质量的用户体验标准。

总结

错误提示依然是用户体验中容易被忽视的一环，但恰恰也是赢得或失去用户信任的重要时刻。

如果我们能用细心、清晰和富有同理心的方式来处理错误，不仅能帮助用户顺利继续完成任务，也向他们传达了：我们重视他们的时间、目标和整体体验。

最终，当我们在用户遇到问题时给予真正的支持，就为整体更好的用户体验打下了坚实的基础。

? 每天只需花五分钟即可阅读到的技术资讯，加入【早阅】共学，可联系 vx：zhgb_f2er

5 分钟新知：了解外面世界的一种方式。

?可直接通过阅读原文了解详细内容。

关于本文
译者：@飘飘
作者：@Amy Hupe
原文：https://piccalil.li/blog/how-to-write-error-messages-that-actually-help-users-rather-than-frustrate-them/

优网科技秉承"专业团队、品质服务" 的经营理念，诚信务实的服务了近万家客户，成为众多世界500强、集团和上市公司的长期合作伙伴！

优网科技成立于2001年，擅长网站建设、网站与各类业务系统深度整合，致力于提供完善的企业互联网解决方案。优网科技提供PC端网站建设（品牌展示型、官方门户型、营销商务型、电子商务型、信息门户型、DIY体验、720全景展厅及3D虚拟仿真）、移动端应用（手机站、APP开发）、微信定制开发（微信官网、微信商城、企业微信）、微信小程序定制开发等一系列互联网应用服务。