最佳实践

本章整理了腾讯设计的使用建议，帮助个人设计师和团队建立高效的设计工作流。

文件组织建议

命名规范

统一的命名规范让团队协作更顺畅：

[版本/状态] - [业务线/模块] - [页面/功能]

示例：
v2.3 - 商城 - 商品详情页
Draft - 登录流程 - 新版方案
Final - 首页 - 2024Q3

文件层级结构

团队
└── 项目（按业务线或产品模块划分）
    ├── 设计稿（主文档，对应真实交付页面）
    ├── 设计系统（组件库、色板、字体规范）
    └── 探索（草稿、概念方案，无需严格命名）

---

组件库搭建

原子设计原则

按照「原子 → 分子 → 有机体」的层级搭建组件：

1. 原子：颜色、字体、间距等基础样式
2. 分子：按钮、输入框、标签等基础组件
3. 有机体：导航栏、卡片、弹窗等复合组件

组件命名规范

[类型]/[名称]/[状态/变体]

示例：
Button/Primary/Default
Button/Primary/Hover
Button/Primary/Disabled
Input/Text/Default
Input/Text/Error

发布共享样式

将常用颜色和文字样式发布为「共享样式」，团队成员可直接引用：

1. 右键颜色填充 → 「创建颜色样式」
2. 选中文字图层 → 右侧面板「+」创建文字样式
3. 在其他文件中「导入样式」即可复用

---

团队协作工作流

推荐工作流

1. 产品定稿需求文档
      ↓
2. 设计师在「探索」文件夹创建草稿方案
      ↓
3. 使用「分享评论」邀请产品/开发评审
      ↓
4. 根据评论修改，版本历史记录每个重要节点
      ↓
5. 定稿后移至正式项目，标记为「Final」
      ↓
6. 开发使用「查看模式」查看标注，或通过 MCP 自动获取设计数据

评论使用规范

• 评论内容应明确：指明问题 + 期望改动
• 及时回复并标记「已解决」保持评论整洁
• 使用 @成员 确保相关人员收到通知

---

与开发团队交接

使用查看模式

邀请开发工程师以「查看者」身份访问设计文件，开发可：

• 查看所有图层的精确参数（尺寸、颜色、间距）
• 一键复制 CSS 代码片段
• 下载切图资源

使用 Design MCP

对于使用 AI 编程工具的开发团队，推荐使用 Ardot MCP：

• AI Agent 直接读取设计稿数据
• 自动生成对应的前端代码
• 减少人工测量和沟通成本

---

性能建议

大文件优化

• 单个文件建议不超过 500 个图层，超出时拆分为多个文件
• 使用「组件实例」而非复制图层，减少文件体积
• 图片资源导出时选择合适分辨率，避免过高分辨率浪费空间

多页面管理

• 相关联的页面放在同一文件（如一个完整用户流程）
• 独立的业务模块放在不同文件，通过项目组织
• 定期归档不再活跃的文件，保持工作台整洁