桌面视觉的单一事实来源:尺寸、色彩、排版、图标、层级与主题自适应机制。所有数值为最终规格,实现不得自行调整;改数值先改本文档。
- 文档版本:1.0
- 定稿日期:2026-09-05
几何与间距 token
| token | 值 | 用途 |
|---|---|---|
| margin.screen.top | 8px | 顶部状态条距屏幕上缘 |
| margin.screen.side | 16px | 顶部状态条距左右边缘 |
| margin.screen.bottom | 8px | Dock 距屏幕下缘 |
| topbar.height | 36px | 顶部状态条高度 |
| dock.height | 56px | Dock 主体高度 |
| dock.icon | 44px | Dock 图标格 |
| dock.icon-gap | 8px | 图标间距 |
| dock.zoom-radius | 80px | 指针邻近放大作用半径 |
| radius.window | 12px | 窗口圆角 |
| radius.island | 18px | 顶部状态条圆角 |
| radius.dock | 28px | Dock 圆角(近胶囊) |
| radius.menu | 10px | 菜单、通知卡片圆角 |
| titlebar.height | 40px | 窗口标题栏高度 |
| dot.diameter | 12px | 窗口控制圆点直径 |
| dot.spacing | 8px | 圆点间距 |
色彩 token
色彩定义在合成器的 float 线性域(0–1,每通道),8bit 十六进制仅为文档阅读近似值。全程 10bit 输出,任何环节无调色板。
深色玻璃档(dark):
| token | 值 | 用途 |
|---|---|---|
| glass.surface | rgba(0.045, 0.050, 0.070, 0.55) ≈ #0B0D12 | 玻璃底色 |
| text.primary | rgb(0.949, 0.957, 0.973) ≈ #F2F4F8 | 主文字 |
| text.secondary | rgb(0.659, 0.686, 0.741) ≈ #A8AFBD | 次级文字 |
| text.disabled | text.primary @ 0.45 | 禁用文字 |
| stroke.outer | #FFFFFF @ 0.14,1px | 外描边 |
| highlight.edge | #FFFFFF @ 0.22,顶部 1.5px 渐隐 | 上缘高光内描边 |
| shadow.ambient | rgba(0, 0, 0, 0.45),y+16px blur 40px | 环境投影 |
| shadow.key | rgba(0, 0, 0, 0.28),y+4px blur 12px | 近距锐影 |
| scrim | rgba(0, 0, 0, 0.32) | 启动器背景压暗 |
| accent.fallback | rgb(0.541, 0.706, 1.000) ≈ #8AB4FF | 强调色回退 |
浅色玻璃档(light):
| token | 值 | 用途 |
|---|---|---|
| glass.surface | rgba(0.957, 0.965, 0.980, 0.60) ≈ #F4F6FA | 玻璃底色 |
| text.primary | rgb(0.090, 0.102, 0.125) ≈ #171A20 | 主文字 |
| text.secondary | rgb(0.298, 0.325, 0.380) ≈ #4C5361 | 次级文字 |
| text.disabled | text.primary @ 0.45 | 禁用文字 |
| stroke.outer | #000000 @ 0.08,1px | 外描边 |
| highlight.edge | #FFFFFF @ 0.65,顶部 1.5px 渐隐 | 上缘高光内描边 |
| shadow.ambient | rgba(0.078, 0.094, 0.133, 0.18),y+12px blur 32px | 环境投影 |
| shadow.key | rgba(0.078, 0.094, 0.133, 0.12),y+3px blur 8px | 近距锐影 |
| scrim | rgba(0.950, 0.960, 0.980, 0.40) | 启动器背景压暗 |
| accent.fallback | rgb(0.227, 0.431, 0.647) ≈ #3A6EA5 | 强调色回退 |
强调色 accent:从壁纸主色提取,提取规则见下节;深浅两档共用同一提取结果,可读性校验失败时回退 accent.fallback。
主题自适应
跟随壁纸自动切换深/浅玻璃档,机制固定如下:
- 采样:壁纸变更时(视频壁纸则每 2s)下采样至 64×64,取 Rec.709 亮度;用中位数而非平均,避免夜景单点光源、天空局部亮斑造成误判。
- 判定:中位数亮度 L > 0.55 → 浅色档;L < 0.45 → 深色档;0.45–0.55 为滞回区间,维持当前档位,防止壁纸亮度在阈值附近时来回抖动。
- 过渡:全部色彩 token 在 float 域逐帧插值 600ms(缓动见 interaction.md 的 duration.slow),切换连续无闪屏、无档位跳变。
- 用户覆盖:设置中可选 自动(默认)/ 锁定深色 / 锁定浅色;锁定时跳过采样。
强调色提取:64×64 采样图直方图按出现频次加权取主色 → 饱和度钳制 S ≤ 0.60 → 亮度钳制 L 0.45–0.70 → 与 text.primary 校验对比度 ≥ 4.5:1,不满足则用 accent.fallback。深浅两档共用同一提取结果。
排版
| 项 | 规格 |
|---|---|
| 中文字体 | Noto Sans CJK SC(思源黑体,OFL 许可,随系统分发) |
| 拉丁/数字 | Inter(OFL 许可) |
| 等宽 | JetBrains Mono(OFL 许可,终端、代码场景) |
| caption | 12px / 行高 16px |
| body | 14px / 行高 21px |
| title | 16px / 行高 24px(窗口标题栏、卡片标题,字重 medium 500) |
| headline | 20px / 行高 28px |
| display | 28px / 行高 36px(启动器分页标题、通知中心日期) |
字重档位:regular 400、medium 500、semibold 600,不做更细的字重档。
图标
- 系统图标:24px 网格线性风格,2px 描边,圆头圆角,随
text.primary着色。 - 应用图标:Dock 内 44px,玻璃质感底座 + 内容层两层结构,内容层由应用自带。
- 运行指示:图标下方 4px 圆点;该应用有聚焦窗口时展开为 8px 长条。
显示缩放(HiDPI)
- 缩放档位:100% / 125% / 150% / 200%,每输出独立设置。
- 本文档全部像素值以 100% 缩放为基准,其余档位按比例放大,圆角与间距取整到物理像素。
- Qt6 应用按逻辑像素渲染,经输出 scale factor 换算缓冲尺寸;不感知缩放的应用由 Soke Display Server 声明输出 scale 供其自选。
- 截图与录屏按物理像素捕获。
色彩管理与 HDR
- 桌面默认色彩空间 sRGB(等效 gamma 2.2),以 10bpc 扫描输出。
- HDR 内容(HDR 视频壁纸、HDR 窗口)携带 PQ 曲线与 HDR 静态元数据,合成在 float 线性域完成 tone mapping 后输出。
- 8bit 应用面上采样至 16F 合成缓冲,再映射到 10bit 输出;全程禁止在 8bit 缓冲上做材质运算(防色带)。
z 序层级
| 层 | 内容 |
|---|---|
| 0 | 壁纸 |
| 1 | 应用窗口 |
| 2 | 顶部状态条、Dock |
| 3 | 弹出菜单、下拉面板、快捷中心 |
| 4 | 通知卡片 |
| 5 | 启动器网格(含 scrim) |
| 6 | 锁屏与系统级对话框(Soke Display Manager) |