Shopify Admin Design设计指南

type

status

date

slug

summary

一、设计准则

专为 Shopify 打造

更好的商家体验

移动端优化，满足自适应

交互操作访问是最佳体验

二、Admin应用结构

1. 页面结构分析

应用程序的结构可与 Shopify 后台无缝协作，并为商家提供直观的体验，信息构架分别如下，序号表示的模块内容：

后面侧边栏菜单

应用导航

应用标题

页眉

菜单

应用正文

严格遵循信息流内容，可以提供出色的商家体验，如图：

模态弹窗分析

模态弹窗是Admin常用的方式，其中分为数据操作和提示等使用场景，需要注意的是全屏的模态弹窗是针对特定沉浸式任务的专用环境，信息结构主要分为：

模态标头

全屏模态弹窗可以包含一个 top bar 元素，用于呈现主要和次要操作。

应用正文

在模态弹窗主体中，您可以添加所有内容以获得全屏体验。

2.3 何时使用模态弹窗

当商家需要完成重点任务时，请使用模态弹窗，根据任务的复杂度，是否选用全屏模态弹窗，可利用完整视区可以改善用户体验，使用案例：

复杂的编辑体验，例如用于创建新闻稿内容的编辑器

沉浸式体验，例如用于裁剪和修改图像的编辑器

预览，例如向产品页面添加元素并允许商家预览更改的应用程序

2.5 推荐行为

应用程序的主要导航应显示在模态框的顶部栏中，并且主要操作不得重复

如果有未保存的更改，请在退出全屏模式之前提示商家保存。

Admin UI 扩展

使用Admin UI 扩展与 Shopify Admin更深入地集成，并创建无缝的商家工作流程。可以集成以下扩展：

Admin block

Admin 操作

Admin 链接

批量操作

3.1 可时使用admin blocks

使用admin blocks扩展在资源详细信息页面的上下文中提供应用的功能或数据。商家可以选择将您的应用块添加到页面，并将其排列在页面布局中（如：产品、订单、客户详细信息页面）。

3.2 推荐行为

内容的高度必须小于 600 像素，以避免应用程序块过高。如有必要，请实施分页以确保满足此要求。

输入字段必须始终可见。如有必要，应用块应触发应用操作，以确保满足此要求。

数据块必须具有空状态，以告知商家您的应用数据块的作用。例如，它应该告诉商家区块中将显示哪些数据。

三、布局

布局设计是在页面上排列文本、图像和形状等视觉元素的过程，应用程序具有多种可用布局，这些布局使应用正文内容适应各种屏幕大小和设备类型。为手头的任务选择合适的布局将有利于您应用的商家体验。

响应式布局

Polaris Layout 组件提供内置的响应能力。以下断点在 Shopify 后台中应用。在构建应用程序时，请考虑这些因素。

断点	最小视图大小	最大视图大小
xs	0	489px
sm	490px	767px
md	768px	1039px
lg	1040px	1399px
xl	1440px	∞

将应用设计为响应式并适应不同的屏幕大小和设备。这确保了跨各种平台的无缝用户体验。

应用主体宽度

Polaris Page 组件是一种简单的方法，可以将应用程序正文与 Shopify 后台的其余部分保持一致，并随着时间的推移简化布局的更新。下表显示了应用程序正文宽度的建议大小。

断点	默认应用正文宽度	处理方式
xs	0	灵活，始终全宽
sm	442px – 719px	灵活，始终全宽
md	480px – 751px	灵活，始终全宽
lg	752px – 950px	灵活，然后固定宽度为 `998` px
xl	950px fixed	固定宽度

布局设置

Polaris Layout 组件提供了各种布局来匹配应用程序的复杂性。

3.1 单列布局

单列布局使商家能够从上到下扫描内容，并专注于一项明显的任务，大多数情况下，应用程序的主页在默认宽度的页面中使用单列布局。但是，如果您的应用程序感觉更像一个仪表板，那么您也可以使用两列等宽或三列布局。

对于资源索引页，请使用全宽页。当商家处理包含许多列的数据列表时，这非常有用。

3.2 两列布局

两列布局允许商家一次查看更多内容。这对于可视化编辑器或内容密集的页面很有帮助。

对于可视化编辑器，请使用两列布局。这允许商家实时预览他们的编辑结果。

3.3 设置layout

通过设置layout，商户可以快速扫描和查找彼此相关的设置组。

对于设置页面，请使用应用设置布局为商家提供有关应用配置选项的清晰上下文。

间距

间距通过使界面组件保持位置正确且具有一致的视觉节奏，帮助您的应用程序保持愉快的体验。

Shopify 后台建立在 4px 间距网格上。遵循此网格是提供无缝应用程序体验的好方法。您可以使用 Polaris spacing tokens来实现此目的。

信息密度

布局中元素的密度会极大地影响应用的可读性和易用性，通过在正确的时间为正确的任务提供正确的密度，使您的应用程序高效且易于使用。

对于低密度布局，请使用较宽松的间距。对于高密度布局，请使用更紧密的间距。

不要更改单个页面中的信息密度，否则您的应用程序可能会感觉脱节。

容器

应用程序的大部分内容都存在于容器中。容器对内容进行分区，并在界面的各个部分之间创建自然的层次结构。

不要将文本段落直接放在背景上。这会降低可读性，并使商家难以扫描页面。

6.1 使用卡片

卡片可以构建应用的内容，以便商家可以轻松扫描信息。卡片充当容器，可以是静态的，也可以是交互式的。Polaris Card 组件提供了一种简单的方法来细分内容，同时仍遵守 Shopify 的应用程序设计指南。

将应用的大部分内容放在容器（如卡片）中。这创造了视觉结构和节奏，帮助商家快速找到信息。复杂的组件或图像不一定需要位于容器中。

6.2 使用表格

表格有助于汇总许多对象实例。使用 Polaris Table组件进行相对简单的摘要，使用 Index Table（当您要显示大量数据时）。

表中的操作必须使用辅助操作样式，例如文本按钮、次要图标或下拉菜单。不要在表格中使用主要样式按钮。

当一行中有许多单元格时，表格很容易在视觉上变得混乱。通过仅在该行悬停或处于焦点状态时显示操作，减少表行中的混乱。

四、视觉设计

视觉设计通过战略性地使用图像、颜色、字体和其他元素来关注应用程序美学，颜色、字体、图标、插图和许多其他视觉元素对应用程序的可用性有很大影响。出色的应用程序使用强大的视觉设计来提升商家体验。

了解我们在 Shopify 后台中使用的样式，例如颜色、排版、间距、阴影、边框等，请参阅 Polaris 样式 Tokens。

颜色

您的应用存在于 Shopify 后台中，因此您应该考虑符合 Polaris Color Roles的颜色。与文本或交互式元素一起使用时，颜色还应遵循最小对比度。

虽然颜色在设计中很有用，但请避免仅依赖颜色来提供上下文。对于错误状态、成功状态或系统警告等警报，请包含说明所发生情况的消息或图标。

以清晰易读的中性色（如黑色或深灰色）显示大部分应用程序文本。

应使用绿色（--p-color-text-success 或 rgba（1， 75， 64， 1））来表示状态为积极或操作已成功完成。不要使用绿色来吸引商家或吸引不必要的注意力。

黄色（--p-color-bg-fill-caution 或 rgba（255， 230， 0， 1））应用于表示状态处于暂停状态或未完成状态，或突出显示需要商家注意但不紧急的信息。不要对公告使用黄色。

橙色（--p-color-bg-fill-warning 或 rgba（255， 184， 0， 1））应用于表示状态为“正在进行”、“待处理”，或告知商户需要注意某些事项。橙色是 Shopify 后台中最强的非屏蔽颜色角色。不要将橙色用于“正在建设中”或“即将推出”消息。

红色（--p-color-text-critical 或 rgba（142， 11， 33， 1））只能用于传达暗示某项操作不可能、被阻止或已导致错误的消息。不要使用红色来吸引商家或吸引不必要的注意力。

背景到文本的对比度必须至少为 4.5：1 才能符合 WCAG AA 标准。使用 WebAIM Contrast Checker 等工具测试您的比率。

App图标

应用图标显示在 Shopify 后台的应用页面上的许多接触点中，例如 Shopify 应用商店中。Shopify 将您的应用程序图标作为 SVG 呈现到管理员左侧导航栏中。

应用程序图标将用于白色和浅灰色背景，因此请避免使用类似的颜色，否则可能会使您的图标难以辨认。请参阅 Polaris 样式令牌，了解 Shopify 管理员颜色值。

2.1 图标设计规范

PNG 或 JPG

正方形 1200 像素 × 1200 像素

无圆角

其他 Shopify 应用商店图标指南

设计您的图标以填充垂直或水平空间的 10/16（1200 像素图标为 750 像素）。

将图标设计为最多填充垂直或水平空间的 12/16（1200 像素图标为 900 像素）。

在图标周围留出 1/16（1200 像素图标为 75 像素）的边距，该边距没有任何视觉元素。

不要在图标中使用过多的文本。这使得在较小的尺寸下难以识别和读取。

不要通过使用不属于您的应用程序图标来误导商家。这包括 Shopify logo 的任何部分。

2.2 图标使用

图标充当视觉辅助工具，帮助商家完成任务。它们通常与文本配对，以使您的应用程序更易于使用并消除某些交互的歧义。您可以使用 Polaris icons节省时间，也可以按照 Polaris 图标指南创建自己的图标。

图标可以帮助商家更好地了解操作的结果，或帮助他们理解更多他们可能不熟悉的技术术语。

不要在列表和其他重复元素中不一致地使用图标。这会使你的应用程序看起来不完整。

字体排版

排版是字母的排列方式，使商家能够轻松舒适地阅读文本，Polaris typography tokens提供了一种简化排版的好方法。

3.1 类型层次结构

正确使用排版可以改善应用程序体验。通过在标题和文案之间创建健康的视觉层次结构，您将提高易读性和与 Shopify 后台的一致性。

排版应在标题和文本之间建立清晰的层次结构，以便商家易于阅读。只要有可能，当前页面的标题应为最大的标题大小。

通过更粗、更大或两者兼而有之，使标题在视觉上与文本的其余部分区分开来。不要使用可能被误认为是链接的下划线。

不要只使用颜色来区分标题来传达层次结构，因为某些商家可能无法感知颜色。

3.2 字体大小

我们的字体大小规范适用于 Shopify 后台中易读性所需的最小大小。

使用 13px 作为交互式元素中标题、正文文本和文本的最小大小。

12px 是较小副本（如标题和副标题）的最小大小。

插图

插图为您的应用程序赋予个性，并通过有意义的视觉隐喻帮助商家理解复杂的概念。遵循 Polaris 插图指南是使您的应用程序插图与 Shopify Admin完美契合的好方法。

在您的应用程序中保持一致的插图风格可以增强您的品牌影响力并使您的应用程序易于识别。

请勿使用低分辨率的照片或图像，因为这些照片或图像可能会传达出缺乏关心和质量差的体验。

五、内容

以深思熟虑的方式编写和设计内容可使您的应用程序可用、可访问和可读。

语音和语气

您的书面内容的语音和语气可帮助您以一致、可识别的方式与商家交谈，语音是指在所有上下文和受众中保持一致的写作方面。语气可以根据受众及其当前上下文而变化。

了解如何应用 Shopify 的语音并选择正确的语气，无论你正在构建什么应用程序，都可以参考 Polaris 关于语音和语气的指南。

产品内容

以下是为提供优质商户体验而编写商品内容的一些原则。

2.1 使用简明语言

Shopify 商家遍布世界各地，具有不同的文化水平，并且可能不以英语为第一语言。内容很容易被误译或误解，以清晰、高效的方式构建您的内容。

使用标题、项目符号和短句使您的内容更易于浏览。

使用易于理解的清晰术语。作为基准，以美国 7 年级的阅读水平为目标。您可以使用 Hemingway App 等工具检查阅读水平。

请勿使用商家可能难以理解的行话或过于技术性的语言。

不要使用大块文本，因为商家很难快速扫描和收集最重要的信息。

不要使用具有间接或讽刺含义的成语和短语，因为它们可能会被误解或误译。

2.2 保持一致

为了帮助商家理解关键概念和操作，请以一致的方式使用术语，确保一致性的一种方法是识别并消除关键概念和操作的同义词。

使用单个名词、动词或短语来描述特定的事物、动作或概念。

不要使用多个同义词来描述特定的事物、操作或概念。

2.3 鼓励采取行动

商家使用 Shopify 为他们的业务完成工作。编写有助于商家了解并采取最重要行动的内容。

对于行动号召（CTA），请以描述操作的强动词开头。使用主动语态来阐明主题和操作。

确定最重要的信息和任务的优先级。将复杂的任务分解为专注于单个操作的步骤。

2.4 指南，但不要擅自决定

以以您的商家为中心并处于控制状态的方式进行写作。为商家提供工具和知识，以做出最佳决策。

为商家提供足够的信息，以便他们自己做出正确的决定。

语法

有关拼写、标点符号和其他语法注意事项，请参阅 Polaris 语法和机制指南。

应用程序必须始终使用正确的语法，以确保为商家提供最佳体验。

在第一次引用您的应用程序或公司时，使用其正确的名称。如果您需要在同一内容部分进行其他引用，则可以使用“我们”。这有助于保持清晰，同时保持内容简洁。

六、导航

导航使商家能够在应用程序的各个部分之间移动，导航是商家从一个任务移动到另一个任务的方式。良好的导航结构使商家能够轻松无摩擦地完成任务。围绕商家需要做什么来构建您的应用导航。

导航元素显示在以下区域中：

应用导航

应用标题

页眉

信息构架

信息架构（IA）是组织各部分的做法，以便它们作为一个整体有意义。IA 向商家显示他们当前的位置，以及如何浏览应用程序的其余部分。以前发生的事情和接下来会发生什么应该很明显。

依靠应用导航和应用正文组件之间的关系来引导商家前往他们需要去的地方，使用尽可能少的类别来定义您的应用程序的功能。

商户必须能够在不使用浏览器按钮的情况下返回上一页。为此，您的应用可以在页面上提供痕迹导航或返回按钮。

请勿将商家发送到 Shopify 后台之外进行关键操作或在主要工作流期间。

使用应用程序名称指向应用程序的主页。这可在 Partner Dashboard 的 App Setup > App URL 下进行控制。

请勿在导航中复制应用首页的 URL。

应用导航

应用程序导航为商家提供了一种在应用程序页面之间移动的方法，应用导航位于 Shopify 后台的侧边栏和 Shopify 移动版的标题中。

如果您的应用具有不同的部分，请使用 App Bridge ui-nav-menu Web 组件或 NavMenu React 组件将这些部分集成到 Shopify 后台和 Shopify 移动导航中。

当 ui-nav-menu 不够用时，请谨慎使用选项卡进行辅助导航。单击选项卡应该只会更改其下方的内容，而不会更改其上方的内容。制表符绝不应换行到多行。在选项卡之间导航不应导致选项卡更改位置或移动。

使导航项简短且可扫描。使用名词而不是动词，以保持导航菜单简洁。

当您在 ui-nav-menu Web 组件或 NavMenu React 组件中使用超过 7 项时，第 7 项及以上的项目将被截断为 View more （查看更多）按钮。

不要在应用程序正文中复制应用程序导航内容，因为这会导致不必要的重复。

不要将主导航放在页眉中。这可能会误导商家。页眉是为页面内操作保留的。

应用名称

应用名称表示商家在 Shopify 后台中跨多个接触点识别您的应用的一种方式，应用名称可以比 Shopify 应用商店列表短，以便适合应用导航。

保持应用程序名称简短，不超过 20 个字符。超过 20 个字符的名称将被截断。

不要在应用程序名称中添加说明。将描述放在 Shopify 应用商店列表中。

导航图标

提交显示在应用程序导航中的导航图标。导航图标在处于非活动状态时为灰色，在处于活动状态时为绿色。

如果您在 Shopify 后台导航中使用 SVG 图标，则它必须与您应用的 App Store 图标相似。SVG 图标不是强制性的。

导航应用程序图标的边框半径为 4px。您无需提交带有圆角的图标。

应用标题

应用程序标头包含应用程序的主要结构部分。这是商家在整个应用程序体验中将与之交互的标头。

应用程序标头包含以下元素：

应用图标和名称

“固定”图标

Overflow 菜单

Overflow 菜单

溢出菜单保留用于提供有关应用程序的其他支持信息，目前，溢出菜单不可自定义，溢出菜单包括以下内容：

关于此应用程序

支持

页眉

页眉包含特定页面的标题和操作，页眉至少应包含页面的标题。您可以选择添加更多元素，例如按钮。有关示例，请参阅 ui-title-bar Web 组件或 TitleBar React 组件文档。

4.1 页面标题

页面标题应简短，并描述页面的一般用途，尝试将每个页面限制为单一用途。商家更喜欢将注意力集中在特定的任务上，分散注意力可能会损害用户体验。

4.2 主要和次要操作

ui-title-bar Web 组件或 TitleBar React 组件中的主要和辅助按钮可启动特定于页面的操作，

主按钮标签和辅助按钮标签应具有以下属性：

清晰性和可预测性：商家应该能够预测点击页面操作时会发生什么。

操作引导：按钮标签应始终以鼓励操作的强烈动词开头。为了给商家提供足够的上下文，请使用 {verb}+{noun} 格式。

为商家提供清晰且可预测的操作标签。

ui-title-bar Web 组件或 TitleBar React 组件接受一个主要操作和多个辅助操作。当存在多个辅助操作时，它们将被截断到 More actions （更多操作）下拉列表中。

七、用户体验策略

Alert

提醒会通知商户重要的系统信息，并提供有关商户操作的反馈，警报模式如下：

横幅（系统警报）

内联（任务警报）

Toast （任务警报）

任务警报

任务提醒是为了响应特定任务期间的商家操作而启动的。任务提醒为商家提供直接和即时的反馈。

以下是任务警报的示例：

表单提交成功。

上传内容时出现问题。

提供的信息不正确或与请求的格式不匹配。

系统警报

系统提醒由应用程序或系统发起，独立于商家操作。系统警报提供有关后台系统状态或已完成的脱离上下文事件的更新。

以下是系统警报的示例：

网络连接丢失。

计划升级。

应用程序订阅即将到期。

以下是可用于商家提醒的常见模式：

模式	定义	持续时间和交互	用于场景
Banner	页面级警报，通常与系统相关or 或特定于卡片、部分或模式的上下文警报	横幅会一直保留，直到商家关闭它们，并且可以包含操作按钮或链接。	Information 信息 Success 成功 Warning 警告 Error 错误
Inline	为商家提供尽可能贴近源头的反馈	内嵌提醒将持续存在，直到商家解决消息为止。	Warning 警告 Error 错误
Toast	简短的临时消息，可滑入和滑出页面并提供简洁的信息。	没有操作的 Toast 提醒可能会自动消失，或者商家可以将其关闭。	Success 成功

当您使用警报将重要信息传达给商家时，您可以从一些标准模式中进行选择。

当您想要传达不重要的一般信息或操作时，请使用带有蓝色标题的信息横幅。

横幅必须可以关闭，除非它们包含商家需要解决的关键信息才能继续前进。已关闭的横幅不应在同一用户会话中再次显示。

1.1 Success

在传达成功时，提供反馈很重要。这意味着使用在任务成功完成时通知商家的模式。

Toast 通知商家应用程序已执行或将要执行的流程。Toast 临时显示在界面底部。Toast 不需要任何商家输入消失，也不应中断商家体验。

仅对确认操作的短消息使用 toast。

将 Toast 消息设置为三个单词或更少。

Toast 仅适用于当前相关的非关键消息。

不要对错误消息使用 toast，但连接错误等持久性错误除外。有关更多信息，请参阅 Polaris Toast 最佳实践。

仅当反馈延迟、持续或具有行动号召（CTA）时，才使用成功横幅。否则，请使用 Toast。

将成功横幅设置为绿色，并包含后续步骤（如果适用）。

请勿使用横幅来显示商家已完成的操作的成功消息。对于用户发起的反馈，请改用成功 toast。

如果没有 CTA，请不要使用成功横幅。

1.2 Warning

当您向商家传达警告时，根据导致警告的原因，您有不同的选择。

警告横幅

使用警告横幅显示需要注意或商家需要采取措施的信息，将警告横幅设为黄色。看到这些横幅可能会给商家带来压力，因此请有意识地使用它们。

列表中的内联警告

在列表中指明您希望让商家了解的特定商品。为此，您可以使用 Polaris ExceptionList 组件。

使用内联警告来提请注意列表中的异常，并尽可能鼓励采取行动。

不要只使用颜色来传达警告。将警告消息与警告图标配对。这通过提供额外的标识符来提高可访问性。

1.3 Error

在传达问题和错误时，请使用可识别的模式来告知商家警报的重要性。将错误消息尽可能靠近问题。当某些内容未按预期工作时，或者当应提醒商家出现严重中断时，错误消息是必不可少的。当错误发生时，它们可能会令人沮丧甚至可怕。清晰快速地引导商家找到解决方案。

将错误横幅设为红色。始终告诉商家发生了什么并提供前进的道路。

不要使用可怕的语言、技术术语和行话

请勿使用幽默、成语或其他可能无法正确翻译的单词和短语。

关键横幅

当您传达需要立即解决以便商家完成任务的问题时，请使用关键横幅。

将关键横幅设为红色并谨慎使用。

提供故障排除步骤和获取支持的明确方法。

表单中的内联错误

在验证文本字段等表单字段时，请将错误消息直接放在受影响的字段下方，对错误消息文本使用 red，因为这是 Shopify 之外的常见惯例。

将错误消息直接放在受影响的字段下方。

请勿在商家输入时显示错误，因为这可能会导致混淆。等待键盘焦点从字段上移开，然后显示错误。

列表中的内联错误

在列表中指明您希望让商家了解的特定商品。为此，您可以使用 Polaris ExceptionList 组件。

突出显示鼓励商家点击列表项的特殊状态。以出错的地方为导向。

不要只使用颜色来传达错误。相反，请将错误消息与错误图标配对。这通过提供额外的标识符来提高可访问性。

卡片、部分或模式中的错误

如果错误适用于特定卡片、部分或模态，请将其放置在受影响元素的顶部附近。

不要将错误消息嵌套在应用程序的层次结构中太深。如果错误适用范围更广，请将其放在受影响元素的顶部。

不要使用模态来处理错误消息。仅当模态本身遇到错误时，才在 modal 中放置错误消息。

App首页

应用首页是商家看到的第一个页面，它应该为他们提供每日价值。

2.1 设计

以快速回答商家可能遇到的任何问题并传达他们可用的操作的方式设计应用程序主页。

2.2 目的

应用主页有多种形式。一个好的主页应该做到以下几点：

提供状态更新。

使商家能够响应即时需求。

提供清晰的行动号召（CTA）按钮，以便商家可以轻松查看他们可以在应用程序中执行的操作。

您的应用首页应为商家提供快速统计数据、状态更新或可立即采取行动的信息。

2.3 支持

提供一流的客户支持是让您的应用程序和服务与众不同的好方法。将您的支持 CTA 放置在一致且可发现的位置。尽可能回应商家的问题。

始终如一地放置您的支持 CTA，但也要避免商家的干扰。您可以使用 App Bridge 的 ui-nav-menu Web 组件或 NavMenu React 组件中的项目，在页脚中放置链接，或使用浮动操作按钮。

入门引导

入门是商家设置您的应用时遵循的流程。开户流程对于商家的成功至关重要。

3.1 目的

引导应该欢迎商家，并让他们渴望使用您的应用程序或功能。引导让商家感到舒适，并在他们开始使用您的应用后立即设定他们的期望。

商家在完成入门体验后，应该觉得他们知道在您的应用程序中该做什么。这会导致更高的使用保留率。

新手引导是指分享您的应用优势，并让商家快速准备好使用您的应用。

入门指南必须简短直接。提供清晰的指示并指导商家完成。

3.2 指导

引导体验可以有效地引导商家了解应用的功能，这样商家就不必自己发现它们，出色的入门体验会尽快向商家展示应用的基础知识。

引导体验还可以以一系列操作的形式出现，商家可以快速轻松地理解这些操作。

在某些情况下，复杂的载入可能需要比预期更长的时间。让商家可以选择稍后完成引导，以避免停止其工作流程。

虽然没有现成的 Polaris 模式用于设置指南，但您可以使用 Polaris 组件编写自己的模式，并在 Shopify 后台中查找示例。一个好的设置可以作为一个快速的开始，其中的离散步骤会自动标记为完成。包含进度指示器是向商家提供鼓舞人心的反馈的另一种良好做法。

仅在必要时向商家索取信息。

如果您的入门引导不是必需的，请使用 Polaris Cancel 图标将其关闭。

您的入门流程中的步骤不要超过 5 个。这可能会导致商家放弃而不使用您的应用程序。

应用品牌营销

Shopify 后台首先是商家完成工作的地方。这些指令解释了如何以不显眼的方式将营销信息整合到您的应用程序中。

4.1 品牌

品牌塑造可以使您的应用程序与其他应用程序区分开来，但过度品牌塑造会使其与 Shopify 区分开来。我们建议用轻描淡写的方式表达您的品牌。图像和插图样式是实现此目的的绝佳且无中断的方法。

通过插图和图像来表达您的应用品牌。尽量使应用的布局和常用组件（如 Cards）与 Shopify 后台保持一致。

4.2 促销

促销消息包括对应用程序、计划或订阅升级进行评级的请求，或下载其他应用程序的电话。请记住，商家正在寻找他们安装的当前应用程序来完成任务或特定工作流程。我们有具体的指令来限制营销信息的干扰。

将促销信息放入应用首页底部的可关闭容器（如卡片或图库）中。或者，创建一个专门用于促销信息的单独页面。

应用程序主页上的促销信息必须可关闭。如果关闭，则不应再次为同一用户显示该信息。

仅适用于付费或高级计划的功能必须处于视觉禁用状态。使用柔和颜色的字幕样式文本来传达该功能只有通过升级才能使用。

不要误导或向商家施压。您的应用不得包含虚假评论、虚假特别优惠或使用限时机会的倒数计时器等元素。欺骗性或操纵性的促销做法会削弱商家对您的应用和 Shopify 的信任。

不要过度推销或过度承诺。这可能会破坏与客户的信任。

不要将主要行动号召（CTA）与不相关的操作（如营销消息或支持请求）混合使用。这会掩盖主要操作。

不要在所有应用页面上展示相同的营销信息。

表单内容

大多数 Create 和 Edit 操作都需要使用表单进行数据输入。良好的表单设计很重要，因为这些可能是商家与您的应用程序之间最常见的接触点。

5.1 指导

许多应用程序具有复杂的表单，其中包含许多输入字段。这对商家来说可能会让人不知所措。使用 Polaris Form Layout组件确保您的表单使用适当的间距，按照本指南创建商家易于理解的有序表单。

当表单输入或信息根据输入值而变化时，使用渐进式披露。这可以防止商家被很长的表单淹没。

Shopify 后台使用单独的页面进行对象定义。例如，单个页面用于单个产品定义，或单个页面用于变型定义。遵循此模式有助于集中商家工作流，并使您的应用看起来更像 Shopify 后台。

对于五个以上的输入，请在一个卡中使用带有标题的节，或者使用多个带有标题的卡。

不要将大型表单放在最大高度、最大宽度的模态框内。相反，请在嵌入式应用程序中创建一个新页面，以便为商家提供处理表单输入的空间。

应使用 App Bridge 上下文保存栏 API 保存表单输入。这也适用于 max 模态框内的表单。表单的持续数据验证或自动保存与标准 Shopify 管理员保存 UX 不一致。

请参阅提醒页面，了解如何向商家显示表单错误。

订阅应用

订阅应用程序为客户提供订阅购买选项。为确保为客户提供良好的体验，订阅应用应遵循这些设计准则。本指南介绍了订阅需求的关键原则以及实现订阅用户界面的组件级准则。有关更多详细信息，请参阅 Shopify.dev 的 subscriptions 部分。

当买家从商品表中选择销售计划时，订阅价格必须清晰可见。

默认情况下，与订阅相关的 UI 必须与商店当前主题的调色板、字体、字体大小和字体粗细匹配。