我们已向我们的 Built for Shopify 要求页面。这些更新提高了我们现有设计指南的清晰度，使理解满足 Built for Shopify 状态所需的标准变得更加容易。
- 遵循用户体验最佳实践 您的应用界面应展现出充分利用常见用户体验最佳实践的诚意，并达到高质量的设计标准。
从 2025 年 1 月开始，应用需满足此要求才有资格获得 Built for Shopify 状态。
- 使用标签进行二级导航 当导航菜单不足时，请谨慎使用标签进行二级导航。点击标签仅应更改其下方的内容，而非上方内容。标签绝不应换行显示。在标签之间切换时，不应导致标签位置改变或移动。
从 2025 年 1 月开始，应用需满足此要求才有资格获得 Built for Shopify 状态。
此要求将取代以下导航要求：
不要将选项卡用作应用的主要导航，因为选项卡在 Shopify 管理后台中用作索引表的过滤器。请改用 App Bridge ui-nav-menu Web 组件或 NavMenu React 组件。
- 对于索引页面，请使用全宽布局 对于资源索引 页面，请使用全宽页面。这在商家处理包含多列的数据列表时非常有用。
此要求将取代以下布局选项要求：
当商家处理具有多列的数据列表时，请使用全宽页面。
当您不处理数据列表时，不要在单栏布局中使用全宽页面。这会使应用在较大屏幕上显得格格不入。应用应感觉与 Shopify 管理后台集成在一起。
通过使用Polaris 模式保持您的应用与 Shopify 管理后台一致，适用于索引页面和资源详情页面等常见布局。
- 对于可视化编辑器，请使用两栏布局 对于可视化编辑器，请使用两栏布局。这允许商家实时预览其编辑结果。
此要求将取代以下布局选项要求：
复杂的编辑器应在默认宽度页面中使用两列主/次布局。这为商家提供了流畅的编辑体验。
不要为您的应用首页和其他不需要界面不同部分之间父子关系的页面使用两列主/次布局。
如果您的应用页面表现为仪表板，请使用两列等宽布局。对于内容密度较高的情况，请使用三列布局。
不要在全宽页面中使用两列布局，因为这会使应用在较大屏幕上的内容更难解析。
- 对于设置页面，请使用应用设置布局 对于设置页面，请使用应用设置 布局，以便向商家清晰展示您应用的配置选项上下文。
此要求将取代以下布局选项要求：
不要对不可编辑的内容使用带注释的布局。请改用单栏布局。
- 将内容放置在卡片式容器中 将您应用的大部分内容置于容器（如卡片）中。这能创建视觉结构和节奏，帮助商家快速查找信息。复杂组件、标题或图像不一定必须放在容器中。
此要求将取代以下布局容器要求：
让应用的大部分内容位于容器中，例如卡片。这会创建视觉结构和节奏，帮助商家快速找到信息。
在大多数情况下，将应用的内容放置在类似卡片的容器中。复杂组件或图像不一定需要放在容器中。
对大部分文本使用黑色或灰色 以易读且中性的颜色（如黑色或深灰色）呈现应用中的大部分文本。
**使用绿色表示成功的结果或状态** 绿色（--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)）仅应用于传达暗示操作不可行、被阻止或导致错误的消息。请勿使用红色来吸引商家或引起不必要的注意。
以下要求将被移除：
颜色角色 不要违背 Polaris 设计系统定义的颜色角色。在上面的示例中，深粉色的确认操作可能会被误解为红色，而红色在 Shopify 管理后台中用于破坏性操作和关键错误。
三列布局 在使用三列布局的界面（如仪表板和分析页面）时，请在全宽页面中设置三列布局。 请勿并排使用三列布局来显示不相关的内容，因为这可能会让商家感到困惑。请改用单列布局。