简历 / 联系

Pisell / Design Documentation

把设计决策
沉淀成可以长期复用的文档资产

我主导整理 Design System 白皮书、设计规范和组件设计文档,把分散在设计稿、评审和研发沟通中的判断,整理成团队可以查找、执行和维护的共同语言。

核心资产
白皮书 · 设计规范 · 组件文档
组件文档沉淀
100+ 篇,持续维护
协作对象
Design · Product · Engineering
Design System 白皮书、设计规范和组件文档组成的文档资产体系
Portfolio reconstructionWhitepaper · Standards · Component Specs

00 / Project brief

不是把页面写成说明书,而是把设计判断变成团队资产

组件库解决“有什么”,文档体系继续回答“为什么这样做、什么时候使用、出现边界情况怎么办、以后由谁维护”。这部分工作帮助团队减少重复讨论,也让设计稿、代码和产品规则之间有清楚的对应关系。

01

统一原则

用白皮书说明体系目标、适用范围、分层逻辑与治理方式。

02

统一判断

用设计规范管理视觉、交互、响应式和可访问性等跨组件规则。

03

统一交付

用组件文档连接 Figma Properties、研发 Props、边界状态与验收标准。

01 / Core deliverables

三套文档,各自解决不同层级的问题

页面不再堆放全部文件,只展示能够证明体系化能力的关键内容。完整内容通过独立阅读页展开。

02 / Design System whitepaper

设计白皮书:说明这套系统为什么存在、如何演进

打开白皮书阅读页 ↗
设计系统架构与治理生命周期白皮书跨页
重点展示 / 体系架构与治理闭环Foundation → Components → Patterns → Products
01

愿景与边界

明确哪些产品、设备和业务模式进入体系,以及底层规则和业务方案之间的边界。

02

架构与分层

Foundation、Atom、Pro、Plus、Pattern 依赖方向清楚,业务能力不反向污染基础层。

03

治理与角色

定义提出、评审、设计、研发、验收、发布和维护的参与者与责任。

04

版本与迁移

记录变更类型、兼容范围、迁移说明、废弃周期和旧方案替换路径。

03 / Design & interaction standards

设计规范:统一所有组件都要遵守的判断

打开设计规范阅读页 ↗
视觉基础、组件状态与多设备规则设计规范跨页
重点展示 / 基础规则与多设备适配Visual foundations · Interaction · Devices
FOUNDATION

视觉基础

色彩 Token、排版层级、8pt 间距、圆角、阴影、图标和信息密度。

INTERACTION

交互与反馈

Hover、Focus、Loading、Error、Disabled、危险操作与撤销恢复。

RESPONSIVE

响应式与多端

Web、POS、Pad、Kiosk 的断点、触控面积、操作顺序和信息密度。

ACCESSIBILITY

可访问性

键盘路径、焦点可见性、语义标签、对比度与状态辅助说明。

04 / Component specifications

100+ 组件文档,只展示三个有代表性的样例

组件文档覆盖基础组件、可配置 Pro 组件和业务 Plus 组件。这里选择空间布局、业务规则和身份认证三个案例,进一步的结构、配置项和验收条目放在独立阅读页。

100+Component specifications
Floor Map Layout 组件文档
PRO · LAYOUT

Floor Map Layout

重点展示资源对象、状态映射、缩放平移、自定义形状和配置边界。

打开样例 PDF ↗
Promotion Selector 组件文档
PRO · BUSINESS

Promotion Selector

重点展示资格、互斥、价格联动、冲突处理和确认逻辑。

打开样例 PDF ↗
PIN Code Sign In 组件文档
PLUS · ACCESS

PIN / Code Sign In

重点展示员工切换、输入状态、错误锁定、权限和恢复路径。

打开样例 PDF ↗
01Purpose适用与不适用场景
02Anatomy结构、Slot 与依赖
03State matrix主状态与边界状态
04ConfigurationProperties 与 Props
05Interaction触发、反馈和恢复
06Acceptance无障碍与验收标准
进入组件文档阅读页:查看真实目录、配置项与验收条目 ↗

05 / Standards baseline

外部规范用于校准底线,项目规则仍由真实业务决定

我把跨平台规范当作检查基线:先确认布局、状态、键盘、触控和可访问性的通用要求,再结合 Pisell 的高密度后台、POS、Pad 与 Kiosk 场景形成自己的规则。下面保留实际使用的官方入口和落地位置。

06 / Documentation practice

文档不是最后补写,而是设计过程的一部分

我会在组件建立、业务接入、研发实现和版本升级时同步维护文档。白皮书和设计规范负责稳定原则,组件文档负责记录具体契约,变更记录负责把新旧方案连接起来。

01提出问题

记录业务场景、重复判断和现有方案缺口。

02形成规则

补齐对象、状态、边界、配置和交互路径。

03设计与实现

同步 Figma Properties、前端 Props 和验收样例。

04发布与维护

记录版本、影响范围、迁移方式和后续反馈。