Skip to content

一个组件的诞生

azhe edited this page Feb 23, 2023 · 4 revisions

b99b431c-d01a-47a7-b481-fa919c8b9b18

https://whimsical.com/component-flow-QBMNNCjmj819HCZcnH1c95

收集需求、评估

  • PMC 同学从 issue、论坛或业务使用群中收集新组件需求,PMC 周例会上提出讨论,协商一致确定新组件满足“通用性”与“必要性”的要求。
  • 向设计师同学同步新组件设计需求,需要提供必要的组件功能说明、业务使用样例截图或业界其他组件库中类似组件的链接等
  • 设计师同学排期安排产出交互稿,确定后续负责设计稿的设计同学
  • 在主仓库 roadmap 里新增组件类型,状态标记为“待启动”

准备阶段

  • 在 TDesign 周报、内部论坛、issue、内外部群等渠道持续招募各角色贡献者:UI 开发同学、API 制定者、各技术栈开发同学(角色只用于明确开发职责,可以都是同一位同学,招募时可以询问是否愿意承担相应的职责)
  • UI 开发、API 制定及某个技术栈开发角色招募到位后,就可以拉企业微信群介绍组件相关情况,包括但不限于:宣讲各参与人职责、交互稿地址、相关开发、设计指引文档等。API 制定者需要根据现有设计稿及业界类似组件实现,制定一份 API 初稿,并约相关组件参与者进行线上会议评审
  • 线上评审会
    • 必需参与的角色:技术栈 PMC 负责同学、交互设计师、视觉设计师、UI 开发同学、API 制定者、各技术栈开发同学
    • 讨论内容:API 设置是否满足业务场景需求,是否留有扩展空间(组件易用性与灵活性 trade-off);API 描述等是否框架无关,能够在多个技术栈中实现;交互稿是否满足需求,是否提供了所有场景的 demo
    • 会后需要明确交互稿调整后定稿时间
  • 交互设计师撰写该组件的设计指南(例:https://tdesign.tencent.com/vue-next/components/button?tab=design)
  • 视觉设计师根据调整后的交互稿,产出设计稿及时在群中同步
  • 负责组件进展的 PMC 同学录入 API 管理平台:https://github.com/Tdesignoteam/tdesign-api

开发阶段

验收阶段

  • CR 问题修复后,邀请交互、视觉设计师同学参与走查验收,对照 PR 上预览官网地址走查组件 demo 实现情况
  • 视觉设计师需要设计该组件的一个缩略图,以在 组件概览 页展示
  • PMC 同学上传缩略图到 TDesign 公共 COS 服务,生成图片链接给组件开发同学,在 common overview 文档中新增组件预览入口,并更新该分类下组件数量
  • PR 合入 develop,准备发布
  • PMC 同学收集各位参与同学 GitHub 账号,更新到贡献者维护系统中

发布