231 lines
9.7 KiB
Markdown
231 lines
9.7 KiB
Markdown
# Ferese Graphite 视觉方案
|
||
|
||
- 文档版本：1.0
|
||
- 整理日期：2026-10-28
|
||
- 实现基线：`1e34ec4`
|
||
- 适用范围：Ferese 设置、Shell 共享控件、锁屏与原生 Rime 候选界面的主题协同。
|
||
|
||
## 1. 视觉目标
|
||
|
||
以中性表面、细边界和清晰排版建立界面层次，让配置内容和操作状态成为视觉重点。
|
||
|
||
1. **中性底色**：使用石墨灰与纸白两种外观，通过相邻表面的明度差区分区域。
|
||
2. **少量强调色**：将颜色集中在选中、键盘焦点、开关与状态提示上。
|
||
3. **统一节奏**：统一页边距、分组间距、图标尺寸和导航行高。
|
||
4. **文字分层**：用字号、字重和次级文字颜色区分标题、说明与辅助信息。
|
||
5. **克制装饰**：降低光晕、玻璃染色和阴影的存在感，保留必要的层次提示。
|
||
6. **状态清晰**：分别表达悬停、按下、选中、键盘焦点和禁用状态。
|
||
|
||
## 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**。
|
||
|
||
| 角色 | 逻辑字号 | 字重 / 用法 |
|
||
| --- | ---: | --- |
|
||
| 页面标题 | 24 px | Medium |
|
||
| 总览卡片标题 | 14 px | Medium |
|
||
| 侧栏导航、普通字段名称 | 13 px | Regular |
|
||
| 总览分组标题 | 12 px | Semibold、次级色 |
|
||
| 页面说明、卡片说明 | 12 px | Regular、次级色 |
|
||
| 侧栏分组、字段辅助说明、保存状态 | 11 px | Regular、次级色 |
|
||
|
||
卡片高度跟随文字换行，适应中文和英文。标题、说明与操作控件各自保留清楚的空间。
|
||
|
||
### 4.2 图标
|
||
|
||
- 品牌标识：24 px。
|
||
- 页面与导航轮廓图标：19 px。
|
||
- 小型操作图标、卡片箭头：16 px。
|
||
- 普通图标使用主要或次级文字色，选中导航图标使用强调色。
|
||
- 图标与同行文字垂直居中；卡片箭头固定在行的末端。
|
||
|
||
## 5. 间距与形状
|
||
|
||
本文的 px 均指逻辑像素，截图中的物理像素会随显示缩放变化。
|
||
|
||
以 **4 px** 为主要间距基准；文本行间距、细边界和字形光学校正允许采用更细的数值。
|
||
|
||
| 项目 | 规格 |
|
||
| --- | --- |
|
||
| 页面上边距、左右边距 | 24 px |
|
||
| 总览分组间距 | 24 px |
|
||
| 同组卡片间距 | 12 px |
|
||
| 卡片内部边距 | 16 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 逻辑像素**：侧栏收起，通过按钮打开导航抽屉。
|
||
- 常规页面内容框最大宽度为 1040 px；面板编辑页为 1120 px。
|
||
- 卡片高度由内容决定，说明换行后保持完整显示。
|
||
- 超出视口的内容通过滚动访问，保存状态与撤销、重新加载操作位于页脚。
|
||
|
||
卡片列数依据正文可用宽度计算，侧栏折叠依据窗口宽度计算，二者使用独立阈值。
|
||
|
||
## 7. 组件状态与对齐
|
||
|
||
| 状态 | 视觉表达 |
|
||
| --- | --- |
|
||
| 普通 | 中性表面、细边界、正常文字对比度 |
|
||
| 悬停 | 轻微改变底色明度，保持几何位置稳定 |
|
||
| 按下 | 比悬停更明确的明度或色彩反馈 |
|
||
| 选中 | 中性选中底色，配合小面积强调色；导航显示左侧指示条 |
|
||
| 键盘焦点 | 明确的 2 px 焦点轮廓，与选中态分别表达 |
|
||
| 禁用 | 使用次级文字与图标颜色，保持状态可辨认 |
|
||
| 高对比度 | 加强边界，并校正文字颜色以保持可读性 |
|
||
|
||
### 7.1 导航垂直居中
|
||
|
||
导航需要同时满足两层对齐：
|
||
|
||
1. 图标、文字与指示条在内容行内部垂直居中。
|
||
2. **整个内容行在 36 px 按钮及悬停区域内垂直居中。**
|
||
|
||
原生自定义按钮会从上内边距放置子内容，因此仅设置行内居中，会使整行仍处于按钮上方。实现中增加填满按钮高度的居中容器，确保普通、悬停、选中和焦点状态使用同一条中心线。
|
||
|
||
### 7.2 Rime 候选界面
|
||
|
||
- 候选横向排列，使用 MiSans 字体。
|
||
- 编号、中英文候选字按实际字形边界进行垂直居中。
|
||
- 背景、边界与选中态通过共享主题保持一致。
|
||
- 保留数字键选字以及数字行 `-`、`=` / `+` 翻页的既有行为。
|
||
|
||
## 8. 动效原则
|
||
|
||
保留现有动画与“减少动画”配置。动效服务于状态变化与空间关系，悬停和按下反馈保持简洁。
|
||
|
||
参考视频没有提供可验证的交互时长或缓动参数，因此本轮视觉方案没有新增动画时长、缓动曲线或输入手势。
|
||
|
||
## 9. 配置示例
|
||
|
||
```kdl
|
||
theme {
|
||
family "graphite"
|
||
mode "dark"
|
||
typography {
|
||
font-family "MiSans"
|
||
}
|
||
}
|
||
```
|
||
|
||
将 `mode` 改为 `"light"` 可使用同一主题族的浅色外观。现有其他主题仍可从“外观与设置 → 主题”切换。
|
||
|
||
## 10. 验收与实现索引
|
||
|
||
### 验收要点
|
||
|
||
- 深浅外观均能区分背景、分区、文字和操作状态。
|
||
- 鼠标悬停与按下不会导致文字或图标跳动。
|
||
- 选中态与键盘焦点分别清楚可辨。
|
||
- 导航文字、图标和指示条相对完整按钮区域居中。
|
||
- 窄窗口单列、宽窗口双列，所有设置入口均可到达。
|
||
- 中文与英文换行后，卡片内容完整且互不重叠。
|
||
- 原生 Rime 候选保留横向排列、选字、翻页与主题跟随。
|
||
|
||
### 已完成的验证
|
||
|
||
基于实现基线 `1e34ec4`：
|
||
|
||
| 验证项 | 结果 |
|
||
| --- | --- |
|
||
| 设置测试 | 115 项通过 |
|
||
| 共享主题与控件测试 | 32 项通过 |
|
||
| Shell 测试 | 247 项通过 |
|
||
| 配置测试 | 46 项通过 |
|
||
| 布局检查 | 覆盖 480–1800 px 窗口宽度 |
|
||
| 原生预览 | 已检查深浅外观及 631 px 窄窗口 |
|
||
| 导航居中 | 全部 15 项；包含“交互”分组和实际悬停检查 |
|
||
| Rime | 原生输入、候选、翻页、主题变化与进程恢复通过 |
|
||
|
||
可选性能分析测试未计入上述通过项。
|
||
|
||
### 实现位置
|
||
|
||
| 内容 | 文件 |
|
||
| --- | --- |
|
||
| 主题色与材质预设 | `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/all_options.rs` |
|
||
| 分区表面与图标 | `shell/ferese-settings/src/visuals.rs` |
|
||
| 布局及对齐回归检查 | `shell/ferese-settings/src/scroll_tests.rs` |
|
||
|
||
本机参考帧、深浅预览、导航悬停截图及验收记录保存在 `.artifacts/visual-reference-20261028/`，这些验收资料不随仓库分发。
|