此技能可确保界面是使用 Shopify 的 Polaris 设计系统构建的，从而保证 Shopify 商家具有原生、可访问且专业的外观和感觉。 ## 核心原则 1. **以商户为中心**：设计注重效率和清晰度。商家使用这些工具来经营他们的业务。 2. **原生感觉**：该应用程序应该感觉像是 Shopify 管理员的自然扩展。除非绝对必要，否则不要引入外来设计模式（例如 Material Design 阴影、独特的 bootstappy 按钮）。 3. **辅助功能**：Polaris 在构建时就考虑到了辅助功能。通过使用语义组件（例如“Button”、“Link”、“TextField”）而不是自定义“div”实现来维护这一点。 4. **可预测性**：遵循标准 Shopify 模式。保存按钮位于上下文保存栏中。页面操作位于右上角。主要内容居中。 ## 技术实现 ### 依赖关系 * `@shopify/北极星` * `@shopify/北极星图标` * `@shopify/app-bridge-react` （用于导航、标题栏、toast、保存栏） ### 基本组件 * **AppProvider** ：所有 Polaris 应用程序必须包装在 `` 中。 * **Page** ：路线的顶级容器。始终设置“title”和“primaryAction”（如果适用）。 * **布局** ：使用 `Layout` 和 `Layout.Section` 来构建内容。 * `Layout.AnnotatedSection`：用于设置页面（左侧为标题/描述，右侧为卡片）。 * `Layout.Section`：标准完整（默认）、1/2 (`variant="oneHalf"`) 或 1/3 (`variant="oneThird"`) 宽度列。 * **卡片**：内容片段的主要容器。将相关信息分组到卡片中。 * 使用“BlockStack”（垂直）或“InlineStack”（水平）进行卡内的内部布局。 * **不要**使用`Card.Section`，因为它在较新的版本中已被弃用；将“BlockStack”与“gap”结合使用。 ### 数据显示 * **IndexTable** ：用于具有批量操作和过滤的对象列表（产品、订单）。对于复杂的表情况，它取代了旧的“ResourceList”。 * **LegacyCard** \+ **ResourceList** ：对于不需要表标题的简单列表仍然有效。 * **DataTable** ：用于简单的非交互式数据网格（例如分析数据）。 * **文本** ：使用 `` 而不是 `

`。严格的排版控制是关键。 ### 表单设计 * 使用 `FormLayout` 自动处理表单字段的间距和对齐。 * 使用`TextField`、`Select`、`Checkbox`、`RadioButton`。 * Validation ：将 `error` 属性（字符串或布尔值）传递到表单字段以显示内联验证消息。 * ContextualSaveBar ：对于编辑现有数据的表单，使用 App Bridge `useSaveBar` 或 `` 组件显示用于保存/放弃更改的专用顶栏。 ## 设计令牌和 CSS * 避免自定义 CSS ：95% 的样式应由 Polaris 道具处理（`gap`、`padding`、`align`、`justify`）。 * 设计令牌：如果您必须使用自定义 CSS，请使用 Polaris CSS 自定义属性（令牌）。 * 背景：`var(--p-color-bg-surface)` * 文本：`var(--p-color-text-default)` * 间距：`var(--p-space-400)` (16px) * 边框：`var(--p-border-radius-200)` ## 代码风格示例从 '@shopify/polaris' 导入 { 页面、布局、卡片、BlockStack、文本、按钮、InlineStack、徽章 }；导出默认函数 Dashboard() { 返回（ <页面标题=“仪表板” PrimaryAction={{content: '创建活动', onAction: () => {}}} secondaryActions={[{content: '查看日志', onAction: () => {}}]} > <布局> <布局.部分> <卡片> 最近活动 <徽章音=“成功”>活动一切都很顺利。 <卡片> 快速助手阅读文档）； } ## 要避免的反模式 * 请勿手动使用阴影或边框。卡可以处理这个问题。 * 不要使用 `style={{ margin: 10 }}`。使用``或``。 * 不要在表单底部创建“保存”按钮。使用视口顶部的“ContextualSaveBar”。 * 不要使用通用加载旋转器。使用 `` 或 `` 来加载状态。

Shopify 北极星设计

包含技能