错误消息

错误消息可能很可怕。使错误对商家可见，易于理解，并且有帮助。

错误消息应该:

• 告诉商人发生了什么。如果有解决办法，就解释清楚。如果可能的话，提供一个带有按钮的一键修复。如果有没有解决方案，给出故障排除指导。
• 放置在靠近问题根源的地方。
• 使用适当的颜色和语气．
• 使用平实的语言．
• 要具体。例如，使用precise数字和日期．
• 是短暂的。

好的设计可以通过首先防止错误消息来减少对错误消息的需求。

---

错误消息类型

在选择消息类型时，请考虑错误的范围。是整个应用程序、整个当前屏幕，还是屏幕上的某个特定元素出了问题?

如果错误的原因是可见的，并且错误刚刚发生，请立即显示错误消息，并尽可能接近问题的根源。

文本字段验证错误

使用时:

• 错误应用于文本字段，商家在输入时可以提供反馈

设置警告

使用时:

• 表单输入是有效的，但是您想要警告商家他们可能没有预料到的结果

页面级横幅:关键或警告

使用时:

• 错误应用于整个页面
• 错误在页面的下方，商家看到这个信息是很重要的
• 需要总结页面上的多个验证错误
• 错误被延迟了，当商家返回页面时通知他们这个问题是可以的

卡片或图案中的横幅:警告或警告

使用时:

• 错误适用于页面中的单个卡片、卡片中的单个部分或模态
• 您需要将商家引导到具有多个部分的页面，并且希望直观地调用错误部分

例外列表:严重或警告

使用时:

• 放置在组件内部或旁边的消息可以帮助商家对日常任务做出更好的决策

家庭通知:紧急或警告

注意:Home通知很少用于错误。总是尝试在接近问题根源的地方显示错误。

使用时:

• 必须立即完成高优先级任务才能继续使用Shopify或避免赔钱
• 功能没有专门的详细信息页面

管理不可用

使用时:

• 服务器错误导致整个页面无法显示，就像400或500系列服务器错误一样
• 帐户权限阻止某人访问Shopify

---

错误的颜色

红色是最可怕的错误颜色。只有在商家需要立即处理的重要信息时才使用红色，以避免对他们的业务造成损害。例如，如果商家不立即采取行动，他们可能会损失金钱，或者他们的商店可能会被暂停。

黄色错误消息仍然需要注意，但更适合作为日常工作流程一部分的消息。

红色(关键)

使用关键信息:

• 把注意力放在紧急任务上。如果不立即处理，商家的业务将受到明显影响，比如账户被暂停或资金损失。

关键消息类型的示例:

• 更新付款方式的到期日期
• 取消帐号
• 审查欺诈订单
• 修复一个阻止付款被处理的问题

使用红色的一个例外是表单验证错误，因为这是商家习惯在Shopify之外看到的标准约定。

黄色(警告)

使用警告消息:

• 帮助商家解决问题，使他们能够完成一个共同的工作流程或继续下一步
• 通知商家即将到期或待处理的请求，如果不尽快处理，可能会导致未来的问题

警告消息类型的示例:

• 在继续下一步之前，请先修复问题。
• 在公共工作流的某个点修复问题。
• 有一个待处理的请求。
• 马上就要到期了。
• 更改设置可能会产生意想不到的后果。看到设置警告．

---

反模式

避免在错误消息中使用toast

虽然错误吐司仍然可用，但我们不鼓励使用它。祝酒信息太短，无法充分解释出了什么问题以及如何解决问题。因为toast组件出现在屏幕底部并在3秒后消失，所以很容易被忽略。为非商家造成的错误保留toast，比如连接问题。总是尝试使用横幅通知商家关于持续错误。

---

表单验证

文本字段验证

使用时:

• 文本字段有格式要求。使用这种模式来增强确认提交的表格．

不要用when:

• 这需要超过一秒验证输入并显示消息。如果在验证消息出现之前有延迟，商家可能会转移注意力而错过错误。要么找到提高验证速度的方法，要么依赖于提交表格后的验证．
• 该字段为空。商家可能会在填写之前浏览表单，而空白字段上的错误可能会导致混乱和沮丧。

组件

• 文本字段

内容

• 用两到三个词来解释什么是错的，或者需要什么来解决问题。
• 避免使用“invalid”这个词来定义错误。适当的时候，用“not valid”代替。
• 由于消息直接位于文本字段的下方，因此副本只需要解释错误发生的原因。消息还可以说明下一步要做什么，或者提供一键修复。

使用

商家完成输入后，立即进行初始验证检查。

只有当键盘焦点远离字段并且字段中至少有一个字符时，才能认为商家完成了输入。这有助于避免在商家真正完成输入之前将字段标记为无效。

如果验证检查失败，则在字段下方显示错误消息。

一旦字段出现错误，则在每次击键后进行完整的验证检查。

一旦输入有效，立即删除错误信息，这样商家就可以立即告知他们解决了问题。

如果验证过程少于一秒，但不是即时的，则在字段上显示一个微调项以指示验证进度。

---

提交验证

当商家按下表单的提交按钮时，就会触发提交验证。提交按钮通常是[保存]，但也可以是另一个行动号召。

使用时:

• 并不是所有的字段都可以在商家输入时进行验证。当使用表单保存数据时，请始终在提交时进行验证，并在键入时验证文本字段。例如，如果商家从未与一个必需的文本字段交互，那么在他们按下提交按钮之前，就不会将其标记为无效。这同样适用于文本字段以外的表单控件，如单选按钮和选择。

不要用when:

• 表单没有特定的验证要求，或者表单没有保存数据。例如，一个没有返回结果的搜索表单应该显示一个空状态，而不是一个验证错误。

组件

• 横幅

以及下列一项或多项:

• (文本框)
• (选择)
• (选择列表)
• (复选框)
• (单选按钮)

内容

横幅标题

• 使用冒号来介绍列表。
• 使标题具有指导性。不要仅仅指出有{x}个错误。

横幅正文

• 使用列表组件逐项列出错误
• OB欧宝娱乐APP用无效字段的标签开始每个列表项，并描述修复它所需的操作

个别字段错误消息:

• 请参阅内容指南输入时验证

而不是指出有{x}个错误，更描述性。说明为了保存或继续，需要更改{x}个字段。对于要点说明，看看你是否能把它们写得更有可操作性，例如，“添加折扣代码”，而不是“折扣不能是空白的”。”

使用

总是指出提交进度。如果字段无效，请不要在验证期间代表商家清除或更改它们。

如果表单提交有一个错误:

• 将滚动条位置移动到无效的字段
• 聚焦领域
• 在字段下方显示错误信息

如果表单提交有多个错误:

• 将滚动位置移动到屏幕顶部
• 使用横幅显示所有错误的摘要
• 在每个无效字段下面显示错误消息，以便商家可以滚动并进行更正

---

设置警告

使用:

• 帮助商家防止潜在的错误
• 当表单输入是有效的，但您想要警告商家他们可能不期望的结果时

不要使用:

• 对于实际误差状态

提示:探索防止警告信息显示的方法。寻找机会添加帮助文本或其他上下文信息，以显示或突出采取或不采取行动的潜在风险或后果。

组件

• 横幅没有标题

内容

• 由于警告消息与触发警告的操作密切相关，因此它应该很短
• 解释刚刚采取的行动的风险或后果
• 这些信息不一定要以可操作的语言开始，比如“换货币”。OB欧宝娱乐APP这里有一些选择
  • OB欧宝娱乐APP以“这个”开头并解释其后果，例如，“这将影响库存价格”。
  • OB欧宝娱乐APP从注意动作开始，然后解释结果，“改变{x}将影响{y}”。
• 如果可用，链接到一个资源，商家可以了解更多

---

横幅

页面级的横幅

使用时:

• 错误应用于整个屏幕
• 错误在页面的下方，让他们看到消息是很重要的
• 提交了包含无效字段的表单
• 例如，如果错误被延迟，则采取了一个操作，并且错误不会立即出现在上下文中

不要用when:

• 可以将横幅放置在上下文中，因为错误的来源在视图中，触发动作的事件刚刚发生

有关多个错误指南，请参见提交验证

页面级横幅错误应该解释:

• 错误发生的地方
• 发生了什么事
• 为什么会这样?
• 下一步该怎么做?

组件

• 横幅

内容

标题:

• 清楚地说明问题
• 不要使用标点符号

正文内容应:

• 解释如何解决这个问题。
• 使用可操作的语言，比如“做x”，不要使用允许的语言，比如“你可以做x”。要简洁:不要超过两句话。
• 使用时间。

行动呼吁应该:

• 行动主导(动词+名词形式)
• 目标是一键修复。如果错误可以通过单个按钮或菜单修复，则在错误消息中直接提供该操作。
• 为更复杂的问题打开专用的错误纠正视图，例如审查有风险的订单或编辑未经验证的客户地址。
• 提供指向文档的链接，以获取可能有价值但不能放在简短错误消息中的信息。

卡片和情态动词中的横幅

使用时:

• 商家参与任务流程，您希望警告他们手头任务的潜在问题，或者通知他们出了问题
• 将商家引导到包含多个部分的页面，并且您希望以可见的方式调用带有错误的部分

不要用when:

• 错误应用于整个屏幕。
• 错误信息在页面的下方，让商家看到这条信息至关重要。
• 如果错误被延迟。例如，执行了一个操作，但错误没有立即出现在上下文中。在这些情况下，使用页面级的横幅

组件

• 横幅

变体

• 没有标题

内容

• 你所传达的信息越有情境性，你需要说的就越少，所以直接解释发生了什么以及如何解决
• 只说一句话
• 上下文横幅没有标题
• 尝试添加下一步，无论是在按钮还是链接中
• 当有不止一个动作号召时使用

例外列表

使用时:

• 列表中的项目处于值得注意的状态，您希望商家了解这些状态，如状态或与其所连接的信息直接相关的信息(如高风险订单)

例子:

• 高风险订单

不要用when:

• 问题的根源是整个卡片或页面

组件

• 例外列表

变体

• 状态:紧急或警告

内容

内容应该:

• 突出显示鼓励单击列表项的异常状态
• 将内容与警告或错误图标配对
• 总是以出错的地方为开头
• 描述是必需的
• 标题是可选的
• 链接是可选的，但不常见，因为列表项是可操作的
• 是简洁

---

家通知

家庭通知主要用于防止商家损失资金，或者帮助他们在不立即按照错误信息指示采取行动的情况下继续使用Shopify。

用途:

• 必须立即完成的高优先级任务，以继续使用Shopify或避免赔钱。
• 重要的任务，我们不希望商家导航到Shopify的另一个地方找到它，或者在完成另一个任务时偶然发现它。
• 没有专用详细信息页的功能的错误。例如，在Shopify Capital有详细信息页面之前，相关的状态信息暂时出现在Home中。

不要用for:

• 提示或建议
• 积极的反馈
• 确认消息
• 新功能公告
• 除Shopify Capital以外的状态信息
• 可以在上下文中显示的消息
• 应该在上下文中显示的错误消息
• 与任务相关的错误，例如保存页面的问题

警告家居通知

警告家庭通知是先发制人的。他们让商家知道，如果在几天或更长时间内不采取行动，他们的财务状况将受到影响，或者可以采取行动更快地赚钱。

• 融资请求待定
• 警告即将过期
• 待定状态，就像Shopify Capital的申请状态一样

紧急家庭通知

重要的家庭通知通知商家以下问题:

• 影响他们的财务状况
• 如果不立即采取行动，会对他们的财务造成影响吗
• 妨碍其业务或账户的正常运作

关键的家庭通知可用于以下消息类型:

• 试用到期
• 域名过期
• 信用卡过期
• 帐户被暂停
• Shopify支付暂停支付
• 付款处理问题
• 付款授权在当天到期

---

管理员不可用错误

有时由于网络问题、浏览器限制、连接问题或服务器问题而无法显示管理。400和500系列错误属于这一类。在这些情况下，一定要解释出了什么问题，并为商家提供故障排除步骤，比如刷新页面。

使用时:

• 无法显示页面或整个管理

不要用when:

• 错误可以放在上下文中，接近问题的根源

不要在错误消息中使用内部语言，避免使用问题格式。

组件:

• 空的状态

内容

标题:

• 标题应该解释出了什么问题
• 身体应该帮助商家排除问题
• 行动呼吁应该提供最可能的解决方案，比如重新加载页面，或者转到上一页或Shopify Home

---

没有解决方案的错误

当Shopify出现服务问题或由第三方引起时，我们并不总是有解决方案提供给商家。在这些情况下，一定要解释出了什么问题，这样他们就可以尝试排除故障。如果可用，向他们提供故障排除步骤，例如刷新页面或稍后返回。

使用时:

• 商家被拒绝访问页面或整个管理员请参阅管理不可用错误
• 第三方问题导致商家的工作流程中断

不要用when:

• 实际上，我们可以为商家提供任何解决方案

---

声音和语气

这些内容指南是基于常见的复制错误。避免听起来过于抱歉、过于专业或夸张。将Shopify排除在对话之外，除非Shopify是错误的原因。不要通过告诉商家不要担心或在消极的情况下添加幽默来淡化错误。

避免使用“请”这个词，以免在整个管理过程中被过度使用。不要轻视严重的问题。

不要在错误消息中使用可怕的技术性词汇。

错误消息不是夸大其词或注入个性的地方。

不要使用Shopify内部的术语。只包括商家需要的信息。

把Shopify排除在讨论之外。关注商家高效完成任务所需的信息。