Shopify Polaris 图标系统贡献指南

Shopify Polaris 图标系统贡献指南

polaris polaris: 是Shopify开发的一套设计系统，包含了用于构建Web界面的组件和样式指南。 项目地址: https://gitcode.com/gh_mirrors/po/polaris

前言

Shopify Polaris 设计系统作为 Shopify 生态的核心设计语言，其图标系统在整个管理后台体验中扮演着重要角色。本文将深入解析如何为 Polaris 图标系统贡献新图标或修改现有图标，帮助设计师和开发者更好地参与其中。

图标系统概述

Polaris 图标系统采用统一的视觉语言，具有以下特点：

1. 简洁性：使用最少的视觉元素传达清晰含义
2. 一致性：保持相同的线宽和圆角半径
3. 可识别性：即使在较小尺寸下也能保持清晰可辨

准备工作

在开始贡献前，建议：

1. 仔细研究现有图标库，避免重复造轮子
2. 了解 Polaris 图标设计规范
3. 准备必要的设计工具（如 Figma）
4. 熟悉基本的版本控制概念

新图标设计流程

设计阶段

1. 概念构思：

   • 明确图标要表达的核心概念
   • 研究相关领域常用的视觉隐喻
   • 绘制多个草图方案

2. 数字化设计：

   • 使用 2px 的标准线宽
   • 保持 2px 的圆角半径
   • 使用 20x20px 的画布尺寸
   • 保留可编辑的矢量路径（不要合并形状）

3. 设计评审：

   • 在团队内部收集反馈
   • 必要时咨询 Polaris 设计团队

Figma 集成流程

非扁平化版本

1. 在专用 Figma 文件中创建分支
2. 将图标转换为组件
3. 遵循命名规范（如 Icon/Name 格式）
4. 提交合并请求

扁平化版本

1. 使用布尔运算合并所有路径
2. 完全扁平化处理（Cmd+E）
3. 在主图标库中创建分支
4. 转换为组件并遵循相同命名
5. 导出为 SVG 格式

代码库集成

通过问题跟踪系统

对于不熟悉 Git 流程的贡献者：

1. 使用专用问题模板
2. 提供详细上下文：
   • 使用场景描述
   • 相关设计文件链接
   • 视觉参考

直接提交 Pull Request

1. 文件准备：

   • 复制图标模板文件
   • 保持与 Figma 相同的命名
   • 仅保留 SVG 路径数据

2. 元数据配置：

   • 编辑 YAML 文件
   • 提供图标描述和分类信息

3. 构建流程：

   • 运行优化命令（pnpm optimize）
   • 创建变更记录（pnpm changeset）

4. 提交审核：

   • 创建特性分支
   • 提交 Pull Request
   • 请求 Polaris 团队成员审核

最佳实践

1. 设计原则：

   • 避免使用品牌特定元素
   • 保持中性风格
   • 考虑国际化的可理解性

2. 技术规范：

   • SVG 文件应简洁高效
   • 移除不必要的元数据
   • 确保在各种尺寸下清晰

3. 协作建议：

   • 尽早分享设计方案
   • 明确标注工作进度
   • 及时响应评审意见

常见问题

1. 命名冲突：如何解决？

   • 检查现有图标库
   • 使用更具体的描述词

2. 设计不一致：如何处理？

   • 参考设计规范文档
   • 使用标准模板文件

3. 审核周期：通常多久？

   • 常规审核每两周进行一次
   • 紧急需求可特别标注

结语

参与 Polaris 图标系统的贡献不仅能提升 Shopify 生态的一致性，也是展示设计和技术能力的绝佳机会。通过遵循本文指南，您可以高效地为系统做出有价值的贡献。记住，每个图标都应该是深思熟虑的设计决策，而不仅仅是视觉装饰。

polaris polaris: 是Shopify开发的一套设计系统，包含了用于构建Web界面的组件和样式指南。 项目地址: https://gitcode.com/gh_mirrors/po/polaris