Skip to content

Commit 3601c9f

Browse files
AparenciaAparencia
committed
docs(product): 知识体系设计理念与 UI/UX 系统文档登记
1 parent 5de14a4 commit 3601c9f

3 files changed

Lines changed: 391 additions & 2 deletions

File tree

‎docs/product/README.md‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -15,8 +15,11 @@
1515
| [prd.md](./prd.md) | 怎么细化？产品需求文档（课堂助手为核心，MoSCoW + 场景 + 验收） | 草稿 |
1616
| [requirements-pool.md](./requirements-pool.md) | 怎么跟踪？需求 → 优先级 → 版本 → 实现 → 验收 | 维护中 |
1717
| [classroom-assistant-guide.md](./classroom-assistant-guide.md) | 怎么用？课堂助手使用说明（v0.7.2：信息面板/合集联动/说话人分离/断句自适应） | v0.7.2 维护中 |
18-
| [product-design-philosophy.md](./product-design-philosophy.md) | 为什么这样设计？产品设计理念：学习科学的工程化（顶层设计哲学与一致性逻辑） | 活跃 |
18+
| [product-design-philosophy.md](./product-design-philosophy.md) | 为什么这样设计？产品设计理念：学习科学的工程化（顶层设计哲学与一致性逻辑，基线：pain-points-v4 统一卷） | 活跃 |
1919
| [note-design-philosophy.md](./note-design-philosophy.md) | 笔记是什么？笔记设计理念：活沉淀（Living Sediment，v0.10.0 定位依据） | 活跃 |
20+
| [knowledge-system-design-philosophy.md](./knowledge-system-design-philosophy.md) | 知识体系是什么？知识体系设计理念：决策操作系统（围绕问题组织学习、以使用为检验，ADR-024 依据） | 活跃 |
21+
| [theme.md](./theme.md) | 视觉基调？色彩与风格理念：Apple 式精准 × 熵减式理解（思维显形/语义排印/相变资产） | 活跃 |
22+
| [ui-ux-system.md](./ui-ux-system.md) | 组件/交互细则？UI/UX 系统：相变资产与三机制的系统级实现（组件规格/动效/tokens） | 活跃 |
2023
| brand-story.md | 怎么说？品牌故事（名称裁决后建立） | 待建 |
2124

2225
## 产品方向（2026-08 确立）
@@ -38,7 +41,6 @@
3841
## 暂不建立（按新项目视角裁剪）
3942

4043
- `positioning.md`：AI 时代生存定位，暂未裁决，后续补
41-
- `theme.md` / `ui-ux-system.md`：UI/UX 阶段再建立
4244
- beta 系列 / 支付 / 收入方案：运营期再建立
4345
- `migration-spec.md`：重构完成后再沉淀
4446

‎docs/product/theme.md‎

Lines changed: 174 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,174 @@
1+
# 熵减视觉设计理念：精密仪器，安静陪伴
2+
3+
> 本文档阐述熵减（Entropydecrease）的色彩与风格理念——为什么这样设计、不那样设计、这些设计背后的一致性逻辑。
4+
> **理念基线**：[product-design-philosophy.md](./product-design-philosophy.md)（产品理念）· [pain-points-v4.md](./pain-points-v4.md)（理论与指标）。
5+
> **分工**：本文档管「Why 与方向」；组件/交互/细节规格见 [ui-ux-system.md](./ui-ux-system.md)（管「How 与参数」）。二者冲突时以本文档为准。
6+
> 状态：活跃（2026-08-24 建立）
7+
8+
---
9+
10+
## 一、设计哲学
11+
12+
### 1.1 一句话主张
13+
14+
> **Apple 式的精准 × 熵减式的理解。**
15+
> 骨架是精密、克制、系统化的美学；灵魂是三件 Apple 不会做的事——
16+
> 思维显形、语义排印、相变资产。
17+
18+
Apple 美学提供「高级感」的物理底座（排印精度、灰阶、留白、材质），但它有一个天花板：**Apple 的界面展示内容，从不展示「处理」**——转完的进度条不透露任何智能运作，它对用户是「哑」的。熵减占领的是 Apple 留下的位置：**高智感**——界面不炫技，但每当它在理解内容时，你都看得见；每当你在阅读内容时，它已经被理解过、被排版过。
19+
20+
### 1.2 三条基础原则（回扣产品理念）
21+
22+
| 原则 | 视觉含义 | 回扣 |
23+
|------|---------|------|
24+
| 内容优先，界面退后 | 学习素材是唯一主角；控件半透明退后、低密度 | 学习链完整性 |
25+
| 安静克制 | 95% 界面静止、无装饰、无微交互噪音；动效只服务「理解/记忆」时刻 | 克制是竞争策略 · 反 DAU |
26+
| 系统无缝 | 毛玻璃材质让窗口成为桌面系统的一部分，应用不喧宾夺主 | 本地优先（应用是工具，不是舞台） |
27+
28+
### 1.3 三条「超越 Apple」的灵魂思考
29+
30+
**思考一：思维显形（过程可见，而非结果可见）**
31+
软件展示「等待」用 spinner；高智的产品让用户看到系统在**理解什么**。ASR 转写时字词沿波形逐词点亮、OCR 检测框逐个落定、复习调度在 24 小时弧线上标出刻度——处理态从「等待」变为「见证」。细则见 ui-ux-system.md §三。
32+
33+
**思考二：语义排印（内容自己说话）**
34+
Apple 排版是「一致的」；熵减排版是「有洞察的」：术语词重一档、数值等宽、低置信影调淡出、来源脚注下沉——同一段内容，系统按其被理解的语义自动呈现。排印承载语义，而非配色标签。细则见 ui-ux-system.md §四。
35+
36+
**思考三：相变资产（知识的凝固度可见）**
37+
产品里的知识是一种物态：视频流=**液态**（模糊、流动）→ 会话产物=**半凝固**（影调渐显）→ 笔记=**固体**（纸面、硬边）→ 闪卡/组=**晶体**（同构网格、锐利）。圆角、边框、灰阶、透明度的**联合渐变**让「这个内容沉淀到哪一步了」成为可感知的事实。这是「活沉淀」理念的视觉本体。细则见 ui-ux-system.md §二。
38+
39+
---
40+
41+
## 二、色彩系统
42+
43+
### 2.1 语义双色（跨主题恒定，品牌辨识度所在）
44+
45+
| Token | 浅色 | 深色 | 语义 |
46+
|-------|------|------|------|
47+
| `--ed-primary` | `#3B5BDB` | `#5C7CFA` | 熵减靛蓝——行动 / 聚焦 / 进行中 |
48+
| `--ed-memory` | `#C77B2E` | `#E8A04C` | 琥珀记忆——记忆 / 复习 / 沉淀 / 证据 |
49+
50+
状态色（仅反馈语义，不做品牌表达）：成功 `#2F9E44`、错误 `#E03131`、警告保持琥珀族（避免纯黄）。
51+
52+
**用色纪律**：
53+
- 靛蓝是「动作色」——按钮、焦点环、进行中标记
54+
- 琥珀是「记忆色」——复习项、沉淀标注、证据回链、周报叙事
55+
- 同一界面中，靛蓝与琥珀**不得大面积并置**（防止失焦）；大范围只允许其一 + 中性灰阶
56+
- 品牌表达一色足矣：时刻只允许一种 accent 语言（靛蓝 8% 色调 hover/选中态除外）
57+
58+
### 2.2 浅色主题（纸面，微暖）
59+
60+
| Token | hex | 用途 |
61+
|-------|-----|------|
62+
| `--ed-bg-canvas` | `#F7F7F5` | 画布（微暖，非纯白——耐久纸面） |
63+
| `--ed-bg-surface` | `#FFFFFF` | 卡片/面板 |
64+
| `--ed-bg-sunken` | `#EFEFED` | 凹陷/输入框 |
65+
| `--ed-text-primary` | `#1A1A1A` | 主文本 |
66+
| `--ed-text-secondary` | `#5C5C5A` | 次级文本 |
67+
| `--ed-text-tertiary` | `#949490` | 说明/时戳 |
68+
| `--ed-border` | `#E3E3E1` | 分隔线 |
69+
70+
### 2.3 深色主题（室温暗房感，去戏剧化）
71+
72+
| Token | hex | 用途 |
73+
|-------|-----|------|
74+
| `--ed-bg-canvas` | `#101013` | 画布 |
75+
| `--ed-bg-surface` | `#1C1C20` | 卡片 |
76+
| `--ed-bg-sunken` | `#25252A` | 凹陷 |
77+
| `--ed-text-primary` | `#F2F2F0` | 主文本 |
78+
| `--ed-text-secondary` | `#A0A09E` | 次级文本 |
79+
| `--ed-text-tertiary` | `#6A6A68` | 说明 |
80+
| `--ed-border` | `#2C2C30` | 分隔线 |
81+
82+
灰阶整体带约 2% 暖（呼应「纸面/耐久」，不动 Apple 的精确感）。
83+
84+
### 2.4 置信度 = 影调（微语法）
85+
86+
低置信内容以更浅灰阶 / 更低透明度呈现（`--ed-text-tertiary` 或 opacity 60–80%），高置信用 `--ed-text-primary`。**禁止使用彩色虚线/底色标注低置信**（替换模板遗留的 `.ed-low-confidence` 黄色虚线）。置信度是「显影程度」，不是「警告」。
87+
88+
---
89+
90+
## 三、排版系统
91+
92+
### 3.1 字体族
93+
94+
- 中文/UI：**PingFang SC** → 回退链 `"SF Pro SC", "PingFang SC", "Microsoft YaHei UI", "Segoe UI Variable", "Inter", sans-serif`
95+
- 数据/时戳/数值：**SF Mono** → 回退 `"JetBrains Mono", ui-monospace, monospace`，`font-variant-numeric: tabular-nums`
96+
- 不用衬线标题（纯 Apple 立场；辨识度由 accent 双色 + 三条灵魂承担）
97+
98+
### 3.2 字阶（4pt 网格）
99+
100+
| 角色 | 字号/行高 | 字重 | 字距 |
101+
|------|----------|------|------|
102+
| 大标题（页面） | 28/34 | 600 | -0.4pt |
103+
| 标题（卡片/段） | 17/24 | 600 | -0.2pt |
104+
| 正文 | 15/22 | 400 | 0 |
105+
| 次要/说明 | 13/18 | 400 | 0 |
106+
| 时戳/数据 | 12/16 | 500（等宽） | +0.1pt |
107+
| 徽标/标签 | 11/14 | 500 | +0.4pt |
108+
109+
### 3.3 排印原则
110+
111+
- 层级靠**字号 + 灰阶**，不堆边框
112+
- 中文正文限宽 34–44 字/行（约 640–820px），英文 60–72 字符
113+
- 禁止中文两端对齐拉伸；数值列表一律 `tabular-nums`
114+
115+
---
116+
117+
## 四、形状与材质
118+
119+
- 圆角：卡片 **12px** · 控件 **8px** · 浮窗 **16px** · 状态标签胶囊（999px）
120+
- 阴影（浅色）：`0 1px 2px rgba(0,0,0,.06), 0 3px 8px rgba(0,0,0,.05)`——双层柔和，无硬边框
121+
- 深色主题：阴影不可见，改用 1px 提亮描边 `rgba(255,255,255,.06)`
122+
- 毛玻璃：仅侧栏/浮窗 `backdrop-blur(20px)` + 半透明（浅 92% / 深 85%）；**正文阅读区不毛玻璃**（稳定性优先于装饰）
123+
- 栅格：8px 间距网格；主栏限宽 720–900px
124+
125+
---
126+
127+
## 五、三时钟的视觉分层
128+
129+
| 层 | 视觉处理 | 原则 |
130+
|----|---------|------|
131+
| 每日视图（天） | 标准密度、小控件、无叙事元素 | 小、安静、机械、办完即走 |
132+
| 周报/月报（周/月） | 大留白、时间轴叙事、琥珀点缀 | 回答「你变了吗」，不罗列统计 |
133+
| 事件视图（事件） | 唯一允许「氛围」的层：全屏 accent 柔光渐晕 + 单卡片 + **记忆浮现** | 只在事件发生时现身 |
134+
135+
**导航层裁决**：容器管线出现在每日视图/会话面；feed 产物只出现在组与结算面——防止心智污染。
136+
137+
---
138+
139+
## 六、动效系统
140+
141+
- 时长/曲线：微交互 120–160ms；卡片/面板 200–250ms；曲线 `cubic-bezier(0.2, 0, 0, 1)`（Apple spring 近似）；位移 ≤8px
142+
- **签名动效「记忆浮现」**：复习揭晓 / 结算报告 / 显影报告 / 回归之门——内容 `blur(8px)+opacity 0 → blur(0)+opacity 1`，400–600ms；`prefers-reduced-motion` 降级为 150ms 单帧淡入
143+
- hover 只做背景色调（accent 8%），不做缩放/位移
144+
- 骨架屏：仅内容骨架，无 logo 动画
145+
146+
---
147+
148+
## 七、图标与空状态
149+
150+
- 线性图标，1.5–1.75px stroke、24px 网格（Lucide 系自绘，含自定义语义图标：提取/显影/复习/组）
151+
- 图标本身单色；语义通过颜色（靛蓝=行动、琥珀=记忆）表达，不增加图形复杂度
152+
- 空状态：无人物插画；抽象几何 + 靛蓝→琥珀柔渐变小图形；文案是「邀请行动」而非「抱歉暂无」
153+
154+
---
155+
156+
## 八、可及性（质量底线）
157+
158+
- 正文对比 ≥ 4.5:1，大字 ≥ 3:1（色板已按此校验）
159+
- `prefers-reduced-motion`：全部动效降级为淡入/无
160+
- 键盘焦点环：2px `--ed-primary` + 2px offset；全部操作键盘可达
161+
- 尺寸用 rem 单位，支持 200% 缩放不破版
162+
- 中文禁用两端对齐；状态不只依赖颜色（影调 + 图标 + 文本三通道传达）
163+
164+
---
165+
166+
## 九、Tokens 与主题机制
167+
168+
- CSS 变量 `--ed-*` 前缀，**语义命名**（`--ed-primary` / `--ed-memory` / `--ed-text-primary`…）；颜色值只出现在 token 定义处
169+
- 主题切换：`[data-theme="dark"]` 显式切换 + `prefers-color-scheme` 自动跟随（系统偏好优先）
170+
- 完整 token 表与组件规格见 [ui-ux-system.md](./ui-ux-system.md)
171+
172+
---
173+
174+
*本文档与 ui-ux-system.md 同步维护（2026-08-24 建立）。视觉理念变更须与产品理念文档同步裁决。*

0 commit comments

Comments
 (0)