Skip to content

theme.md

Latest commit

 

History

History
174 lines (120 loc) · 9.09 KB

theme.md

File metadata and controls

174 lines (120 loc) · 9.09 KB
Raw

熵减视觉设计理念：精密仪器，安静陪伴

本文档阐述熵减（Entropydecrease）的色彩与风格理念——为什么这样设计、不那样设计、这些设计背后的一致性逻辑。 理念基线：product-design-philosophy.md（产品理念）· pain-points-v4.md（理论与指标）。 分工：本文档管「Why 与方向」；组件/交互/细节规格见 ui-ux-system.md（管「How 与参数」）。二者冲突时以本文档为准。 状态：活跃（2026-08-24 建立）

一、设计哲学

1.1 一句话主张

Apple 式的精准 × 熵减式的理解。 骨架是精密、克制、系统化的美学；灵魂是三件 Apple 不会做的事—— 思维显形、语义排印、相变资产。

Apple 美学提供「高级感」的物理底座（排印精度、灰阶、留白、材质），但它有一个天花板：Apple 的界面展示内容，从不展示「处理」——转完的进度条不透露任何智能运作，它对用户是「哑」的。熵减占领的是 Apple 留下的位置：高智感——界面不炫技，但每当它在理解内容时，你都看得见；每当你在阅读内容时，它已经被理解过、被排版过。

1.2 三条基础原则（回扣产品理念）

原则 视觉含义 回扣
内容优先，界面退后 学习素材是唯一主角；控件半透明退后、低密度 学习链完整性
安静克制 95% 界面静止、无装饰、无微交互噪音；动效只服务「理解/记忆」时刻 克制是竞争策略 · 反 DAU
系统无缝 毛玻璃材质让窗口成为桌面系统的一部分，应用不喧宾夺主 本地优先（应用是工具，不是舞台）

1.3 三条「超越 Apple」的灵魂思考

思考一：思维显形（过程可见，而非结果可见） 软件展示「等待」用 spinner；高智的产品让用户看到系统在理解什么。ASR 转写时字词沿波形逐词点亮、OCR 检测框逐个落定、复习调度在 24 小时弧线上标出刻度——处理态从「等待」变为「见证」。细则见 ui-ux-system.md §三。

思考二：语义排印（内容自己说话） Apple 排版是「一致的」；熵减排版是「有洞察的」：术语词重一档、数值等宽、低置信影调淡出、来源脚注下沉——同一段内容，系统按其被理解的语义自动呈现。排印承载语义，而非配色标签。细则见 ui-ux-system.md §四。

思考三：相变资产（知识的凝固度可见） 产品里的知识是一种物态：视频流=液态（模糊、流动）→ 会话产物=半凝固（影调渐显）→ 笔记=固体（纸面、硬边）→ 闪卡/组=晶体（同构网格、锐利）。圆角、边框、灰阶、透明度的联合渐变让「这个内容沉淀到哪一步了」成为可感知的事实。这是「活沉淀」理念的视觉本体。细则见 ui-ux-system.md §二。

二、色彩系统

2.1 语义双色（跨主题恒定，品牌辨识度所在）

Token 浅色 深色 语义
--ed-primary #3B5BDB #5C7CFA 熵减靛蓝——行动 / 聚焦 / 进行中
--ed-memory #C77B2E #E8A04C 琥珀记忆——记忆 / 复习 / 沉淀 / 证据

状态色（仅反馈语义，不做品牌表达）：成功 #2F9E44、错误 #E03131、警告保持琥珀族（避免纯黄）。

用色纪律：

  • 靛蓝是「动作色」——按钮、焦点环、进行中标记
  • 琥珀是「记忆色」——复习项、沉淀标注、证据回链、周报叙事
  • 同一界面中，靛蓝与琥珀不得大面积并置（防止失焦）；大范围只允许其一 + 中性灰阶
  • 品牌表达一色足矣：时刻只允许一种 accent 语言（靛蓝 8% 色调 hover/选中态除外）

2.2 浅色主题（纸面，微暖）

Token hex 用途
--ed-bg-canvas #F7F7F5 画布（微暖，非纯白——耐久纸面）
--ed-bg-surface #FFFFFF 卡片/面板
--ed-bg-sunken #EFEFED 凹陷/输入框
--ed-text-primary #1A1A1A 主文本
--ed-text-secondary #5C5C5A 次级文本
--ed-text-tertiary #949490 说明/时戳
--ed-border #E3E3E1 分隔线

2.3 深色主题（室温暗房感，去戏剧化）

Token hex 用途
--ed-bg-canvas #101013 画布
--ed-bg-surface #1C1C20 卡片
--ed-bg-sunken #25252A 凹陷
--ed-text-primary #F2F2F0 主文本
--ed-text-secondary #A0A09E 次级文本
--ed-text-tertiary #6A6A68 说明
--ed-border #2C2C30 分隔线

灰阶整体带约 2% 暖（呼应「纸面/耐久」，不动 Apple 的精确感）。

2.4 置信度 = 影调（微语法）

低置信内容以更浅灰阶 / 更低透明度呈现（--ed-text-tertiary 或 opacity 60–80%），高置信用 --ed-text-primary。禁止使用彩色虚线/底色标注低置信（替换模板遗留的 .ed-low-confidence 黄色虚线）。置信度是「显影程度」，不是「警告」。

三、排版系统

3.1 字体族

  • 中文/UI：PingFang SC → 回退链 "SF Pro SC", "PingFang SC", "Microsoft YaHei UI", "Segoe UI Variable", "Inter", sans-serif
  • 数据/时戳/数值：SF Mono → 回退 "JetBrains Mono", ui-monospace, monospace，font-variant-numeric: tabular-nums
  • 不用衬线标题（纯 Apple 立场；辨识度由 accent 双色 + 三条灵魂承担）

3.2 字阶（4pt 网格）

角色 字号/行高 字重 字距
大标题（页面） 28/34 600 -0.4pt
标题（卡片/段） 17/24 600 -0.2pt
正文 15/22 400 0
次要/说明 13/18 400 0
时戳/数据 12/16 500（等宽） +0.1pt
徽标/标签 11/14 500 +0.4pt

3.3 排印原则

  • 层级靠字号 + 灰阶，不堆边框
  • 中文正文限宽 34–44 字/行（约 640–820px），英文 60–72 字符
  • 禁止中文两端对齐拉伸；数值列表一律 tabular-nums

四、形状与材质

  • 圆角：卡片 12px · 控件 8px · 浮窗 16px · 状态标签胶囊（999px）
  • 阴影（浅色）：0 1px 2px rgba(0,0,0,.06), 0 3px 8px rgba(0,0,0,.05)——双层柔和，无硬边框
  • 深色主题：阴影不可见，改用 1px 提亮描边 rgba(255,255,255,.06)
  • 毛玻璃：仅侧栏/浮窗 backdrop-blur(20px) + 半透明（浅 92% / 深 85%）；正文阅读区不毛玻璃（稳定性优先于装饰）
  • 栅格：8px 间距网格；主栏限宽 720–900px

五、三时钟的视觉分层

层 视觉处理 原则
每日视图（天） 标准密度、小控件、无叙事元素 小、安静、机械、办完即走
周报/月报（周/月） 大留白、时间轴叙事、琥珀点缀 回答「你变了吗」，不罗列统计
事件视图（事件） 唯一允许「氛围」的层：全屏 accent 柔光渐晕 + 单卡片 + 记忆浮现 只在事件发生时现身

导航层裁决：容器管线出现在每日视图/会话面；feed 产物只出现在组与结算面——防止心智污染。

六、动效系统

  • 时长/曲线：微交互 120–160ms；卡片/面板 200–250ms；曲线 cubic-bezier(0.2, 0, 0, 1)（Apple spring 近似）；位移 ≤8px
  • 签名动效「记忆浮现」：复习揭晓 / 结算报告 / 显影报告 / 回归之门——内容 blur(8px)+opacity 0 → blur(0)+opacity 1，400–600ms；prefers-reduced-motion 降级为 150ms 单帧淡入
  • hover 只做背景色调（accent 8%），不做缩放/位移
  • 骨架屏：仅内容骨架，无 logo 动画

七、图标与空状态

  • 线性图标，1.5–1.75px stroke、24px 网格（Lucide 系自绘，含自定义语义图标：提取/显影/复习/组）
  • 图标本身单色；语义通过颜色（靛蓝=行动、琥珀=记忆）表达，不增加图形复杂度
  • 空状态：无人物插画；抽象几何 + 靛蓝→琥珀柔渐变小图形；文案是「邀请行动」而非「抱歉暂无」

八、可及性（质量底线）

  • 正文对比 ≥ 4.5:1，大字 ≥ 3:1（色板已按此校验）
  • prefers-reduced-motion：全部动效降级为淡入/无
  • 键盘焦点环：2px --ed-primary + 2px offset；全部操作键盘可达
  • 尺寸用 rem 单位，支持 200% 缩放不破版
  • 中文禁用两端对齐；状态不只依赖颜色（影调 + 图标 + 文本三通道传达）

九、Tokens 与主题机制

  • CSS 变量 --ed-* 前缀，语义命名（--ed-primary / --ed-memory / --ed-text-primary…）；颜色值只出现在 token 定义处
  • 主题切换：[data-theme="dark"] 显式切换 + prefers-color-scheme 自动跟随（系统偏好优先）
  • 完整 token 表与组件规格见 ui-ux-system.md

本文档与 ui-ux-system.md 同步维护（2026-08-24 建立）。视觉理念变更须与产品理念文档同步裁决。