简历 / 联系

Pisell Design System / Component specifications

组件设计
文档

每个组件不只交付一组界面,而是交付一份可执行契约:为什么存在、如何组成、有哪些状态和配置、边界如何处理、设计和研发怎样一起验收。

Coverage
基础 · Pro · Plus
Contract
Figma Properties · Props
Validation
States · A11y · QA
组件文档、设计规范和配置契约组成的文档体系
Component contract & evidencePortfolio edition · 2026

00 / Specification anatomy

一页组件文档,必须能回答设计、产品和研发的关键问题

统一模板让不同复杂度的组件都能被快速查找和评审。简单组件可以缩短篇幅,但结构、状态、配置和验收不能靠口头补充。

  • 01Metadata名称、编号、分层、版本、Owner、依赖与适用终端。
  • 02Purpose解决什么问题、适用与不适用场景、替代方案和业务价值。
  • 03Anatomy区域、Slot、必选与可选模块、内容层级和嵌套限制。
  • 04State matrix默认、悬停、焦点、选中、禁用、加载、错误、空状态与组合状态。
  • 05Configuration样式、能力、数据、权限、默认行为,以及 Figma Properties 与前端 Props 对应。
  • 06Interaction进入、操作、提交、取消、冲突、异常和恢复路径。
  • 07Accessibility语义、可读名称、键盘路径、焦点、对比度、触控面积与动态反馈。
  • 08Acceptance边界样例、响应式检查、测试步骤、版本变更和迁移说明。

01 / State & configuration

把隐性分支变成看得见、测得到的状态矩阵

属性不是为了“做更多变体”,而是把真实业务差异放进明确边界。每个属性都说明默认值、可组合范围、权限、输入输出和异常处理。

属性组文档必须记录验收方式
AppearanceSize、Density、Hierarchy、Theme、Icon 与内容长度Light / Dark、多语言、长文本与高密度场景
CapabilitySelection、Sort、Filter、Drag、Zoom、Batch action可用、无权限、禁用、冲突和撤销路径
Data对象字段、空值、加载、分页、刷新和实时更新正常、空、部分失败、超时、离线与恢复
StateDefault、Hover、Focus、Selected、Error、Disabled、Loading鼠标、键盘、触控、屏幕阅读器和组合状态

02 / Pro component

Floor Map Layout:空间、状态和操作都进入配置契约

Floor Map Layout 组件文档缩略图
Configuration excerpt

核心配置与边界

  • Layout mode:固定布局、自由布局和只读查看。
  • Resource shape:矩形、圆形、自定义尺寸与旋转。
  • Status mapping:可用、预留、使用中、等待、即将释放和不可用。
  • Interaction:单选、多选、框选、缩放、平移与键盘移动。
  • Edge cases:重叠资源、视口外对象、空地图、只读权限和实时状态更新。
  • Acceptance:颜色外的第二状态线索、缩放后可读性、焦点顺序和触控命中区。

03 / Business component

Promotion Selector:优惠不是列表选择,而是一套规则引擎

Promotion Selector 组件文档缩略图
Rule excerpt

资格、互斥与金额联动

  • Eligibility:订单范围、客户身份、渠道、时间和最低金额。
  • Priority:自动最优、手动选择、门店规则与客户权益的优先级。
  • Conflict:互斥优惠、叠加上限、已使用权益和旧方案替换。
  • Feedback:即时显示节省金额、不可用原因、冲突影响和替换结果。
  • Recovery:取消、撤销、支付失败返回和订单变更后的重新计算。
  • Acceptance:金额前后一致、跨端语义一致、失败后订单上下文保留。

04 / Access component

PIN / Code Sign In:把高频切换和安全恢复压缩成短路径

PIN Code Sign In 组件文档缩略图
Interaction excerpt

身份、错误与权限

  • Entry:员工选择、搜索、最近使用和直接输入员工号。
  • Input:数字键盘、硬件键盘、删除、清空、提交和输入长度。
  • Error:错误次数、锁定提示、剩余时间和管理员恢复。
  • Permission:角色权限、门店范围、班次状态和敏感操作二次确认。
  • Privacy:PIN 不明文展示,错误提示不暴露账户是否存在。
  • Acceptance:完整键盘路径、焦点可见、提交防重复和离线恢复。

05 / Acceptance checklist

组件进入产品前,需要逐条通过这些检查

  • 01语义名称、角色、对象和状态与产品模型一致,没有为了页面方便制造同义词。
  • 02配置默认值、组合边界、权限、输入输出和设计代码映射都有记录。
  • 03交互鼠标、键盘、触控和外接设备的进入、操作、取消与恢复路径完整。
  • 04异常空、慢、失败、离线、并发更新、无权限和部分成功都保留上下文。
  • 05响应式Web、POS、Pad、Kiosk 和 Mobile 调整密度与布局,但不改变核心语义。
  • 06可访问性颜色、对比度、焦点、键盘、可读名称、目标尺寸和动态更新可验证。
  • 07发布版本、影响范围、Story、测试样例、Changelog 与迁移说明同时更新。

06 / Official baseline

组件文档的结构,最终要能对接真实的平台与无障碍要求