00 / Project brief
不是把页面写成说明书,而是把设计判断变成团队资产
组件库解决“有什么”,文档体系继续回答“为什么这样做、什么时候使用、出现边界情况怎么办、以后由谁维护”。这部分工作帮助团队减少重复讨论,也让设计稿、代码和产品规则之间有清楚的对应关系。
统一原则
用白皮书说明体系目标、适用范围、分层逻辑与治理方式。
统一判断
用设计规范管理视觉、交互、响应式和可访问性等跨组件规则。
统一交付
用组件文档连接 Figma Properties、研发 Props、边界状态与验收标准。
01 / Core deliverables
三套文档,各自解决不同层级的问题
页面不再堆放全部文件,只展示能够证明体系化能力的关键内容。完整内容通过独立阅读页展开。
02 / Design System whitepaper
设计白皮书:说明这套系统为什么存在、如何演进
愿景与边界
明确哪些产品、设备和业务模式进入体系,以及底层规则和业务方案之间的边界。
架构与分层
Foundation、Atom、Pro、Plus、Pattern 依赖方向清楚,业务能力不反向污染基础层。
治理与角色
定义提出、评审、设计、研发、验收、发布和维护的参与者与责任。
版本与迁移
记录变更类型、兼容范围、迁移说明、废弃周期和旧方案替换路径。
03 / Design & interaction standards
设计规范:统一所有组件都要遵守的判断
视觉基础
色彩 Token、排版层级、8pt 间距、圆角、阴影、图标和信息密度。
交互与反馈
Hover、Focus、Loading、Error、Disabled、危险操作与撤销恢复。
响应式与多端
Web、POS、Pad、Kiosk 的断点、触控面积、操作顺序和信息密度。
可访问性
键盘路径、焦点可见性、语义标签、对比度与状态辅助说明。
04 / Component specifications
100+ 组件文档,只展示三个有代表性的样例
组件文档覆盖基础组件、可配置 Pro 组件和业务 Plus 组件。这里选择空间布局、业务规则和身份认证三个案例,进一步的结构、配置项和验收条目放在独立阅读页。
05 / Standards baseline
外部规范用于校准底线,项目规则仍由真实业务决定
我把跨平台规范当作检查基线:先确认布局、状态、键盘、触控和可访问性的通用要求,再结合 Pisell 的高密度后台、POS、Pad 与 Kiosk 场景形成自己的规则。下面保留实际使用的官方入口和落地位置。
用于移动端、Pad 与 Kiosk 的可读性、触控面积、安全区域和多模态提示检查。
MATERIAL 3组件状态与一致反馈用于补齐 Enabled、Hover、Focus、Pressed、Dragged、Disabled 等状态,以及多重状态指示。
ANT DESIGN企业级产品的抽象与复用用于校准 B 端组件分类、通用模式、主题配置与前端实现之间的组织关系。
WCAG 2.2可感知、可操作、可理解、健壮用于对比度、颜色使用、键盘、焦点可见、目标尺寸、错误识别和重排验收。
WAI-ARIA APG复杂 Web 组件的语义与键盘模式用于 Dialog、Tabs、Toolbar、Grid 等组件的焦点管理、角色、状态和属性说明。
06 / Documentation practice
文档不是最后补写,而是设计过程的一部分
我会在组件建立、业务接入、研发实现和版本升级时同步维护文档。白皮书和设计规范负责稳定原则,组件文档负责记录具体契约,变更记录负责把新旧方案连接起来。
记录业务场景、重复判断和现有方案缺口。
补齐对象、状态、边界、配置和交互路径。
同步 Figma Properties、前端 Props 和验收样例。
记录版本、影响范围、迁移方式和后续反馈。
