268 lines
13 KiB
Markdown
268 lines
13 KiB
Markdown
# Ferese Graphite 视觉方案
|
||
|
||
- 文档版本：1.1
|
||
- 整理日期：2026-10-28
|
||
- 视觉基线：`1e34ec4`；本版补充内容密度、详细页分组与窗口交互规则。
|
||
- 适用范围：Ferese 设置、Shell 共享控件、锁屏与原生 Rime 候选界面的主题协同。
|
||
|
||
## 1. 视觉目标
|
||
|
||
以中性表面、细边界和清晰排版建立界面层次，让配置内容和操作状态成为视觉重点。
|
||
|
||
1. **中性底色**：使用石墨灰与纸白两种外观，通过相邻表面的明度差区分区域。
|
||
2. **少量强调色**：将颜色集中在选中、键盘焦点、开关与状态提示上。
|
||
3. **统一节奏**：统一页边距、分组间距、图标尺寸和导航行高。
|
||
4. **文字分层**：用字号、字重和次级文字颜色区分标题、说明与辅助信息。
|
||
5. **克制装饰**：降低光晕、玻璃染色和阴影的存在感，保留必要的层次提示。
|
||
6. **状态清晰**：分别表达悬停、按下、选中、键盘焦点和禁用状态。
|
||
7. **紧凑但舒展**：减少重复说明、强制换行和无用途的空白；将空间留给设置行、卡片之间的适度间距。
|
||
|
||
## 2. 参考视频分析
|
||
|
||
参考文件：`ir9g5tra15711hQD.mp4`，时长约 9.78 秒，2168 × 2160，60 fps。
|
||
|
||
视频展示的是界面重设计过程。可提取其配色、布局和排版原则；剪辑中的变化速度不能用于确定真实交互的延迟、缓动曲线或动画时长。
|
||
|
||
| 视频阶段 | 可观察的变化 | 在 Ferese 中的落地 |
|
||
| --- | --- | --- |
|
||
| 0–3 秒 | 调整导航、卡片与标题间距，统一对齐关系 | 建立主要间距尺度，统一导航行高和页面边距 |
|
||
| 3–5 秒 | 紫色光晕和高饱和背景逐渐收敛为中性表面 | 新增 Graphite 深浅主题，降低染色与阴影强度 |
|
||
| 5–7 秒 | 换用细线图标、缩小品牌标识、简化选中态 | 使用小型轮廓图标、中性选中底色与细指示条 |
|
||
| 7–9.78 秒 | 通过排版与内容形成层级，颜色集中在有意义的信息上 | 保留 MiSans，统一标题字重、说明文字和状态色使用方式 |
|
||
|
||
## 3. 主题与配色
|
||
|
||
主题族 ID 为 `graphite`。深色预设 ID 为 `graphite`，浅色预设 ID 为 `graphite-light`；通常选择主题族后，通过外观模式切换深浅。
|
||
|
||
### 3.1 基础色板
|
||
|
||
下表是预设源值。实际绘制颜色经过共享主题解析与对比度校正，组件应消费解析后的主题令牌，避免各自复制一份色值。
|
||
|
||
| 角色 | 深色 | 浅色 |
|
||
| --- | --- | --- |
|
||
| 基础表面 / 侧栏 | `#101113` | `#F7F8FA` |
|
||
| 抬升表面 | `#1B1D21` | `#FFFFFF` |
|
||
| 应用背景 | `#141518` | `#F1F3F5` |
|
||
| 主要文字 | `#E7E9ED` | `#23262C` |
|
||
| 次级文字 | `#9A9FA9` | `#626A76` |
|
||
| 强调色 | `#8EABD8` | `#3F6DAA` |
|
||
| 边界基色，含透明度 | `#FFFFFF16` | `#00000018` |
|
||
|
||
边界与控件底色会结合当前背景和文字颜色派生。普通分区采用细边界与轻微明度差；高对比度模式加强边界与文字校正。
|
||
|
||
### 3.2 材质参数
|
||
|
||
| 参数 | 深色 | 浅色 |
|
||
| --- | ---: | ---: |
|
||
| 材质不透明度 | 0.96 | 0.98 |
|
||
| 模糊半径 | 8 | 4 |
|
||
| 染色强度 | 0.06 | 0.02 |
|
||
| 阴影不透明度 | 0.12 | 0.08 |
|
||
|
||
这些数值由主题和组件共同解释。设置应用的正文表面保持清楚稳定；Shell 等支持材质的组件使用对应材质令牌。
|
||
|
||
导航选中背景采用中性色。用户明确选择的渐变主题，继续通过现有主题机制作用于相关控件和窗口焦点。
|
||
|
||
## 4. 字体与图标
|
||
|
||
### 4.1 字体层级
|
||
|
||
界面使用 **MiSans**；Rime 候选优先使用 **MiSans / MiSans TC**。
|
||
|
||
| 角色 | 逻辑字号 | 字重 / 用法 |
|
||
| --- | ---: | --- |
|
||
| 页面标题 | 16 px | Medium，比分组标题大 2 px |
|
||
| 分组标题，含侧栏和详细页 | 14 px | Bold |
|
||
| 总览卡片标题 | 14 px | Regular |
|
||
| 侧栏导航、普通字段名称 | 13 px | Regular |
|
||
| 字段辅助说明、卡片说明 | 12 px | Regular、次级色 |
|
||
| 保存状态与辅助提示 | 11–12 px | Regular、次级色 |
|
||
|
||
字段名称与短说明在同一段内自然排版，仅在可用宽度不足时换行；说明使用次级色区分，不另起固定的一行。页面标题下不重复展示泛化副标题。卡片高度跟随实际内容，适应中英文；细则与控件文字均使用标准字重。
|
||
|
||
### 4.2 图标
|
||
|
||
- 品牌标识：24 px。
|
||
- 页面与导航轮廓图标：19 px。
|
||
- 小型操作图标、卡片箭头：16 px。
|
||
- 普通图标使用主要或次级文字色，选中导航图标使用强调色。
|
||
- 图标与同行文字垂直居中；卡片箭头固定在行的末端。
|
||
|
||
## 5. 间距与形状
|
||
|
||
本文的 px 均指逻辑像素，截图中的物理像素会随显示缩放变化。
|
||
|
||
以 **4 px** 为主要间距基准；文本行间距、细边界和字形光学校正允许采用更细的数值。
|
||
|
||
| 项目 | 规格 |
|
||
| --- | --- |
|
||
| 页面上 / 下边距 | 16 / 12 px |
|
||
| 页面左右边距 | 20 px |
|
||
| 总览及详细页分组间距 | 20 px |
|
||
| 分组标题与设置容器间距 | 10 px |
|
||
| 同组卡片间距 | 16 px |
|
||
| 卡片内部边距 | 16 px |
|
||
| 卡片图标与文字间距 | 12 px |
|
||
| 卡片标题与说明间距 | 4 px |
|
||
| 设置行内边距 | 上下 12 px、左右 14 px |
|
||
| 设置行标签与控件间距 | 12 px |
|
||
| 同组设置行间距 | 4 px |
|
||
| 侧栏宽度 | 208 px |
|
||
| 折叠侧栏抽屉宽度 | 244 px |
|
||
| 侧栏内边距 | 上下 24 px、左右 12 px |
|
||
| 导航按钮高度 | 36 px |
|
||
| 导航按钮左右内边距 | 8 px |
|
||
| 导航行内元素间距 | 8 px |
|
||
| 选中指示条 | 2 × 14 px |
|
||
| 普通输入框圆角上限 | 7 px |
|
||
| 按钮圆角上限 | 9 px |
|
||
| 分区容器圆角上限 | 10 px |
|
||
| 常规边界 | 1 px |
|
||
| 键盘焦点轮廓 | 2 px |
|
||
|
||
圆角上限受现有主题圆角设置约束，方角等用户偏好继续生效。
|
||
|
||
## 6. 设置总览与自适应布局
|
||
|
||
Appearance 作为全部设置的入口，内容按实际功能分组：
|
||
|
||
| 分组 | 入口 |
|
||
| --- | --- |
|
||
| 快速访问 | 常规、全部配置 |
|
||
| 桌面 | 主题、壁纸、面板与 Shell、托盘图标 |
|
||
| 交互 | 窗口、键盘与鼠标、辅助功能 |
|
||
| 系统 | 显示器、连接、通知、锁屏、登录启动项 |
|
||
|
||
总览使用等宽卡片，文字区域占用弹性空间，箭头在卡片末端对齐。
|
||
|
||
- 总览**可用内容宽度 ≥ 680 逻辑像素**：双列。
|
||
- 总览**可用内容宽度 < 680 逻辑像素**：单列。
|
||
- **窗口宽度 < 960 逻辑像素**：侧栏收起，通过按钮打开导航抽屉。
|
||
- 页面内容框最大宽度为 1280 px，包含左右各 20 px 的留白；更宽窗口居中显示内容框。
|
||
- 卡片高度由内容决定，说明换行后保持完整显示。
|
||
- 超出视口的内容通过滚动访问，保存状态与撤销、重新加载操作位于页脚。
|
||
|
||
卡片列数依据正文可用宽度计算，侧栏折叠依据窗口宽度计算，二者使用独立阈值。
|
||
|
||
### 6.1 详细页分组
|
||
|
||
设置进入详细页后，继续按功能组织，分组标题采用 14 px 粗体，设置名称与细则采用标准字重。分组随实际字段出现，避免空组。
|
||
|
||
| 详细页 | 主要分组 |
|
||
| --- | --- |
|
||
| 常规 | 界面 |
|
||
| 窗口 | 工作区与布局、间距与圆角、焦点与窗口效果 |
|
||
| 键盘与鼠标 | 键盘布局、按键重复、鼠标、触控板 |
|
||
| 主题 | 配色与强调色、表面与透明度、字体与排版；自动外观按需展开 |
|
||
| 辅助功能 | 视觉辅助、动画 |
|
||
| 通知 | 通知行为、通知时长 |
|
||
| 锁屏 | 时钟与日期、锁屏背景、显示器电源，按支持的配置出现 |
|
||
| 托盘图标 | 应用托盘、应用图标、面板状态图标 |
|
||
| 快捷键 | 快捷键指南、自定义快捷键 |
|
||
|
||
显示器、连接和面板编辑器延续各自已有的功能分区；登录启动项按应用组织。窗口效果预览放入对应分组，高度收至 84 px，避免独占页首的大块空间。
|
||
|
||
### 6.2 留白与窗口操作
|
||
|
||
- 双击页面顶部、底部、左右边缘及超宽窗口外侧的留白，切换最大化与还原；标题区域和侧栏未被控件占用的区域同样支持。
|
||
- 在上述区域移动指针超过拖动阈值后开始拖窗，单击不立即拖动。
|
||
- 设置内容与控件遵循自身交互，双击字段标签不会触发最大化。
|
||
- 窄窗口导航抽屉通过点击右侧空白或按 Esc 关闭；移除独立的“关闭导航”按钮。
|
||
|
||
## 7. 组件状态与对齐
|
||
|
||
| 状态 | 视觉表达 |
|
||
| --- | --- |
|
||
| 普通 | 中性表面、细边界、正常文字对比度 |
|
||
| 悬停 | 轻微改变底色明度，保持几何位置稳定 |
|
||
| 按下 | 比悬停更明确的明度或色彩反馈 |
|
||
| 选中 | 中性选中底色，配合小面积强调色；导航显示左侧指示条 |
|
||
| 键盘焦点 | 明确的 2 px 焦点轮廓，与选中态分别表达 |
|
||
| 禁用 | 使用次级文字与图标颜色，保持状态可辨认 |
|
||
| 高对比度 | 加强边界，并校正文字颜色以保持可读性 |
|
||
|
||
### 7.1 导航垂直居中
|
||
|
||
导航需要同时满足两层对齐：
|
||
|
||
1. 图标、文字与指示条在内容行内部垂直居中。
|
||
2. **整个内容行在 36 px 按钮及悬停区域内垂直居中。**
|
||
|
||
原生自定义按钮会从上内边距放置子内容，因此仅设置行内居中，会使整行仍处于按钮上方。实现中增加填满按钮高度的居中容器，确保普通、悬停、选中和焦点状态使用同一条中心线。
|
||
|
||
### 7.2 Rime 候选界面
|
||
|
||
- 候选横向排列，使用 MiSans 字体。
|
||
- 编号、中英文候选字按实际字形边界进行垂直居中。
|
||
- 背景、边界与选中态通过共享主题保持一致。
|
||
- 保留数字键选字以及数字行 `-`、`=` / `+` 翻页的既有行为。
|
||
|
||
## 8. 动效原则
|
||
|
||
保留现有动画与“减少动画”配置。动效服务于状态变化与空间关系，悬停和按下反馈保持简洁。
|
||
|
||
参考视频没有提供可验证的交互时长或缓动参数，因此本轮视觉方案没有新增动画时长或缓动曲线。窗口操作按 6.2 节执行。
|
||
|
||
## 9. 配置示例
|
||
|
||
```kdl
|
||
theme {
|
||
family "graphite"
|
||
mode "dark"
|
||
typography {
|
||
font-family "MiSans"
|
||
}
|
||
}
|
||
```
|
||
|
||
将 `mode` 改为 `"light"` 可使用同一主题族的浅色外观。现有其他主题仍可从“外观与设置 → 主题”切换。
|
||
|
||
## 10. 验收与实现索引
|
||
|
||
### 验收要点
|
||
|
||
- 深浅外观均能区分背景、分区、文字和操作状态。
|
||
- 鼠标悬停与按下不会导致文字或图标跳动。
|
||
- 选中态与键盘焦点分别清楚可辨。
|
||
- 导航文字、图标和指示条相对完整按钮区域居中。
|
||
- 窄窗口单列、宽窗口双列，所有设置入口均可到达。
|
||
- 中文与英文换行后，卡片内容完整且互不重叠。
|
||
- 页面标题比分组标题大 2 px；分组为粗体，设置名称和细则为标准字体。
|
||
- 详细页按功能分组，短说明自然流动，不保留重复副标题和大型装饰留白。
|
||
- 双击边缘留白能最大化和还原，设置控件不会误触发；导航抽屉保留外侧点击和 Esc 关闭。
|
||
- 原生 Rime 候选保留横向排列、选字、翻页与主题跟随。
|
||
|
||
### 已完成的验证
|
||
|
||
本版密度与交互修订：
|
||
|
||
| 验证项 | 结果 |
|
||
| --- | --- |
|
||
| 设置测试 | 117 项通过，9 项可选检查默认跳过 |
|
||
| 滚动渲染专项 | 额外运行 1 项通过，覆盖 WGPU / tiny-skia 与两种主题配置 |
|
||
| 配置测试 | 46 项单元测试及 11 项集成测试通过 |
|
||
| 布局检查 | 覆盖 480–1800 px 窗口宽度 |
|
||
| 原生预览 | 已检查深浅外观及 631 px 窄窗口 |
|
||
| 导航居中 | 全部 15 项；包含“交互”分组和实际悬停检查 |
|
||
| Rime | 原生输入、候选、翻页、主题变化与进程恢复通过 |
|
||
| 边缘双击 | 原生预览内 1272 px 最大化与 631 px 还原双向切换通过，配置内容不变 |
|
||
| 导航抽屉 | 已移除关闭按钮，外侧点击和 Esc 关闭均检查通过 |
|
||
|
||
共享主题 32 项、Shell 247 项的验证记录来自前版基线 `1e34ec4`。本版未改动这两部分的实现。
|
||
|
||
### 实现位置
|
||
|
||
| 内容 | 文件 |
|
||
| --- | --- |
|
||
| 主题色与材质预设 | `crates/ferese-config/src/presets.rs` |
|
||
| 主题族注册 | `crates/ferese-config/src/families.rs` |
|
||
| 共享按钮、导航、输入框状态 | `crates/ferese-theme/src/controls.rs` |
|
||
| 页面结构与导航居中 | `shell/ferese-settings/src/pages.rs` |
|
||
| 详细页字段分组 | `shell/ferese-settings/src/schema.rs` |
|
||
| 行内说明与标题字重 | `shell/ferese-settings/src/form_controls.rs` |
|
||
| 总览卡片与双列布局 | `shell/ferese-settings/src/all_options.rs` |
|
||
| 分区表面与图标 | `shell/ferese-settings/src/visuals.rs` |
|
||
| 布局及对齐回归检查 | `shell/ferese-settings/src/scroll_tests.rs` |
|
||
|
||
前版参考帧及导航居中记录保存在 `.artifacts/visual-reference-20261028/`；本版详细页、导航抽屉与窗口双击记录保存在 `.artifacts/settings-density-20261028/`。这些本机验收资料不随仓库分发。
|