文档 v1.0 desktop/visual-language.md

视觉语言设计

尺寸、色彩、排版、图标、层级与主题自适应的单一事实来源。本站的配色与圆角就取自这份文档的色彩 token 与几何 token。

桌面视觉的单一事实来源:尺寸、色彩、排版、图标、层级与主题自适应机制。所有数值为最终规格,实现不得自行调整;改数值先改本文档。

  • 文档版本: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

主题自适应

跟随壁纸自动切换深/浅玻璃档,机制固定如下:

  1. 采样:壁纸变更时(视频壁纸则每 2s)下采样至 64×64,取 Rec.709 亮度;用中位数而非平均,避免夜景单点光源、天空局部亮斑造成误判。
  2. 判定:中位数亮度 L > 0.55 → 浅色档;L < 0.45 → 深色档;0.45–0.55 为滞回区间,维持当前档位,防止壁纸亮度在阈值附近时来回抖动。
  3. 过渡:全部色彩 token 在 float 域逐帧插值 600ms(缓动见 interaction.md 的 duration.slow),切换连续无闪屏、无档位跳变。
  4. 用户覆盖:设置中可选 自动(默认)/ 锁定深色 / 锁定浅色;锁定时跳过采样。

强调色提取: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)