错误消息

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

错误消息应该:

• 告诉商人发生了什么事。如果有解决办法，解释一下。如果可能的话，提供一个按钮一键修复。如果有没有解决方案，提供故障排除说明。
• 要靠近问题的源头。
• 用适当的方式传达严重性颜色而且语调．
• 使用平实的语言．
• 要具体。例如，使用precise数字和日期．
• 是短暂的。

好的设计可以通过在一开始就防止错误消息来减少对错误消息的需求。

---

错误消息类型

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

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

文本字段验证错误

使用时:

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

设置警告

使用时:

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

页面级别的横幅:关键或警告

使用时:

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

在卡片或模式的横幅:严重或警告

使用时:

• 错误适用于页面中的单个卡片、卡片中的单个部分或模态
• 您需要将商家引导到具有多个部分的页面，并且希望在视觉上显示出有错误的部分

异常列表:严重或警告

使用时:

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

主页通知:严重或警告

注意:Home通知很少用于错误。始终尝试显示靠近问题根源的错误。

使用时:

• 一个高优先级的任务必须立即完成，以继续使用Shopify或避免损失金钱
• 特性没有专门的详细信息页面

管理不可用

使用时:

• 服务器错误阻止了整个页面的显示，例如400或500系列服务器错误
• 帐户权限阻止某人访问Shopify

---

错误的颜色

红色是最可怕的错误颜色。只使用红色的关键信息，商家需要立即处理，以避免损害他们的业务。例如，如果商家不立即采取行动，他们可能会赔钱，或者他们的商店可能会停业。

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

红色(关键)

利用关键信息:

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

关键消息类型的示例:

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

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

黄色(警告)

使用警告信息:

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

警告消息类型示例:

• 在进行下一步之前修复一个问题。
• 在公共工作流中的某个点上修复一个问题。
• 有一个待处理的请求。
• 即将到期。
• 改变设置可能会产生意想不到的后果。看到设置警告．

---

反模式

避免在错误消息中使用toast

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

---

表单验证

文本字段验证

使用时:

• 文本字段有格式要求。使用此模式进行增强提交表格时的验证．

不要用when:

• 这需要超过一秒验证输入并显示消息。如果在验证消息出现之前有一个延迟，商家可能会转移他们的注意力而忽略错误。要么想办法提高验证速度，要么依赖于提交表单后的验证．
• 字段为空。商家可能会在填写表单之前先浏览一遍，空字段上的错误可能会导致困惑和沮丧。

组件

• 文本字段

内容

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

使用

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

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

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

一旦字段出现错误，在每次击键后完成验证检查。

一旦输入生效，立即删除错误消息，这样商家就可以立即告诉他们已经解决了问题。

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

---

提交时验证

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

使用时:

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

不要用when:

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

组件

• 横幅

以及以下一项或多项:

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

内容

横幅标题

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

横幅正文

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

个别字段错误消息:

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

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

使用

始终表明提交进度。如果字段无效，在验证期间不要代表商家清除或更改它们。

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

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

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

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

---

设置警告

使用:

• 帮助商家防止潜在的错误
• 当表单输入是有效的，但您希望警告商家他们可能没有预料到的结果时

不要使用:

• 对于实际的错误状态

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

组件

• 横幅没有标题

内容

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

---

横幅

页面级的横幅

使用时:

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

不要用when:

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

有关多个错误指导原则，请参见提交时验证

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

• 错误发生在哪里
• 发生了什么事
• 为什么会这样
• 下一步该怎么做

组件

• 横幅

内容

标题:

• 清楚地陈述问题
• 不要使用标点符号

正文内容应:

• 解释如何解决这个问题。
• 使用可操作的语言，比如“做某事”，不要使用允许的语言，比如“你能做某事”。
• 使用时间。

行动呼吁应:

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

卡片和情态动词中的横幅

使用时:

• 商家正在进行一个任务流，您希望就手头任务的潜在问题向他们发出警告，或者通知他们某些地方出了问题
• 将商家引导到具有多个部分的页面，并且您希望以可视方式调用有错误的部分

不要用when:

• 错误应用于整个屏幕。
• 错误在页面的最下面，让商家看到这条消息是很关键的。
• 如果错误被延迟。例如，执行了一个操作，错误不会立即出现在上下文中。在这些情况下，使用页面级的横幅

组件

• 横幅

变体

• 没有标题

内容

• 信息越与上下文相关，你需要说的就越少，所以直接解释发生了什么以及如何解决
• 只说一句话
• 上下文横幅没有标题
• 尝试添加下一步，无论是在按钮还是链接中
• 当有多个行动呼吁时使用

例外列表

使用时:

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

例子:

• 高风险订单

不要用when:

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

组件

• 例外列表

变体

• 状态:紧急或警告

内容

内容应该:

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

---

家通知

Home通知主要用于防止商家损失金钱或帮助他们继续使用Shopify，如果他们不立即按照错误消息指示采取行动。

用途:

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

不要用于:

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

警告主页通知

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

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

关键的家庭通知

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

• 目前影响他们的财务状况
• 如果不立即采取行动，会对他们的财务状况产生什么影响
• 阻止其业务或账户的正常运作

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

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

---

管理不可用错误

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

使用时:

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

不要用when:

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

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

组件:

• 空的状态

内容

标题:

• 头部应该能解释出哪里出了问题
• 身体应该帮助商家排除问题
• 行动呼吁应该提供最可能的解决方案，如重新加载页面，或转到前一页或Shopify主页

---

没有解决方案的错误

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

使用时:

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

不要用when:

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

---

声音和语调

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

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

不要在错误消息中使用可怕的专业词汇。

错误信息不是夸张或注入个性的地方。

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

把Shopify排除在对话之外。专注于商家高效完成任务所需的信息。