feat(settings): refine density, group detailed options and add edge maximize gestures
This commit is contained in:
aria committed
1 parent
d7e122711a
commit
9908dde9f8
11 files changed
+588
-195
No files matched your search
@@ -1,8 +1,8 @@
|
||||
# Ferese Graphite 视觉方案
|
||||
|
||||
- 文档版本：1.0
|
||||
- 文档版本：1.1
|
||||
- 整理日期：2026-10-28
|
||||
- 实现基线：`1e34ec4`
|
||||
- 视觉基线：`1e34ec4`；本版补充内容密度、详细页分组与窗口交互规则。
|
||||
- 适用范围：Ferese 设置、Shell 共享控件、锁屏与原生 Rime 候选界面的主题协同。
|
||||
|
||||
## 1. 视觉目标
|
||||
@@ -15,6 +15,7 @@
|
||||
4. **文字分层**：用字号、字重和次级文字颜色区分标题、说明与辅助信息。
|
||||
5. **克制装饰**：降低光晕、玻璃染色和阴影的存在感，保留必要的层次提示。
|
||||
6. **状态清晰**：分别表达悬停、按下、选中、键盘焦点和禁用状态。
|
||||
7. **紧凑但舒展**：减少重复说明、强制换行和无用途的空白；将空间留给设置行、卡片之间的适度间距。
|
||||
|
||||
## 2. 参考视频分析
|
||||
|
||||
@@ -70,14 +71,14 @@
|
||||
|
||||
| 角色 | 逻辑字号 | 字重 / 用法 |
|
||||
| --- | ---: | --- |
|
||||
| 页面标题 | 24 px | Medium |
|
||||
| 总览卡片标题 | 14 px | Medium |
|
||||
| 页面标题 | 16 px | Medium，比分组标题大 2 px |
|
||||
| 分组标题，含侧栏和详细页 | 14 px | Bold |
|
||||
| 总览卡片标题 | 14 px | Regular |
|
||||
| 侧栏导航、普通字段名称 | 13 px | Regular |
|
||||
| 总览分组标题 | 12 px | Semibold、次级色 |
|
||||
| 页面说明、卡片说明 | 12 px | Regular、次级色 |
|
||||
| 侧栏分组、字段辅助说明、保存状态 | 11 px | Regular、次级色 |
|
||||
| 字段辅助说明、卡片说明 | 12 px | Regular、次级色 |
|
||||
| 保存状态与辅助提示 | 11–12 px | Regular、次级色 |
|
||||
|
||||
卡片高度跟随文字换行，适应中文和英文。标题、说明与操作控件各自保留清楚的空间。
|
||||
字段名称与短说明在同一段内自然排版，仅在可用宽度不足时换行；说明使用次级色区分，不另起固定的一行。页面标题下不重复展示泛化副标题。卡片高度跟随实际内容，适应中英文；细则与控件文字均使用标准字重。
|
||||
|
||||
### 4.2 图标
|
||||
|
||||
@@ -95,12 +96,17 @@
|
||||
|
||||
| 项目 | 规格 |
|
||||
| --- | --- |
|
||||
| 页面上边距、左右边距 | 24 px |
|
||||
| 总览分组间距 | 24 px |
|
||||
| 同组卡片间距 | 12 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 |
|
||||
@@ -132,12 +138,37 @@ Appearance 作为全部设置的入口，内容按实际功能分组：
|
||||
- 总览**可用内容宽度 ≥ 680 逻辑像素**：双列。
|
||||
- 总览**可用内容宽度 < 680 逻辑像素**：单列。
|
||||
- **窗口宽度 < 960 逻辑像素**：侧栏收起，通过按钮打开导航抽屉。
|
||||
- 常规页面内容框最大宽度为 1040 px；面板编辑页为 1120 px。
|
||||
- 页面内容框最大宽度为 1280 px，包含左右各 20 px 的留白；更宽窗口居中显示内容框。
|
||||
- 卡片高度由内容决定，说明换行后保持完整显示。
|
||||
- 超出视口的内容通过滚动访问，保存状态与撤销、重新加载操作位于页脚。
|
||||
|
||||
卡片列数依据正文可用宽度计算，侧栏折叠依据窗口宽度计算，二者使用独立阈值。
|
||||
|
||||
### 6.1 详细页分组
|
||||
|
||||
设置进入详细页后，继续按功能组织，分组标题采用 14 px 粗体，设置名称与细则采用标准字重。分组随实际字段出现，避免空组。
|
||||
|
||||
| 详细页 | 主要分组 |
|
||||
| --- | --- |
|
||||
| 常规 | 界面 |
|
||||
| 窗口 | 工作区与布局、间距与圆角、焦点与窗口效果 |
|
||||
| 键盘与鼠标 | 键盘布局、按键重复、鼠标、触控板 |
|
||||
| 主题 | 配色与强调色、表面与透明度、字体与排版；自动外观按需展开 |
|
||||
| 辅助功能 | 视觉辅助、动画 |
|
||||
| 通知 | 通知行为、通知时长 |
|
||||
| 锁屏 | 时钟与日期、锁屏背景、显示器电源，按支持的配置出现 |
|
||||
| 托盘图标 | 应用托盘、应用图标、面板状态图标 |
|
||||
| 快捷键 | 快捷键指南、自定义快捷键 |
|
||||
|
||||
显示器、连接和面板编辑器延续各自已有的功能分区；登录启动项按应用组织。窗口效果预览放入对应分组，高度收至 84 px，避免独占页首的大块空间。
|
||||
|
||||
### 6.2 留白与窗口操作
|
||||
|
||||
- 双击页面顶部、底部、左右边缘及超宽窗口外侧的留白，切换最大化与还原；标题区域和侧栏未被控件占用的区域同样支持。
|
||||
- 在上述区域移动指针超过拖动阈值后开始拖窗，单击不立即拖动。
|
||||
- 设置内容与控件遵循自身交互，双击字段标签不会触发最大化。
|
||||
- 窄窗口导航抽屉通过点击右侧空白或按 Esc 关闭；移除独立的“关闭导航”按钮。
|
||||
|
||||
## 7. 组件状态与对齐
|
||||
|
||||
| 状态 | 视觉表达 |
|
||||
@@ -170,7 +201,7 @@ Appearance 作为全部设置的入口，内容按实际功能分组：
|
||||
|
||||
保留现有动画与“减少动画”配置。动效服务于状态变化与空间关系，悬停和按下反馈保持简洁。
|
||||
|
||||
参考视频没有提供可验证的交互时长或缓动参数，因此本轮视觉方案没有新增动画时长、缓动曲线或输入手势。
|
||||
参考视频没有提供可验证的交互时长或缓动参数，因此本轮视觉方案没有新增动画时长或缓动曲线。窗口操作按 6.2 节执行。
|
||||
|
||||
## 9. 配置示例
|
||||
|
||||
@@ -196,24 +227,28 @@ theme {
|
||||
- 导航文字、图标和指示条相对完整按钮区域居中。
|
||||
- 窄窗口单列、宽窗口双列，所有设置入口均可到达。
|
||||
- 中文与英文换行后，卡片内容完整且互不重叠。
|
||||
- 页面标题比分组标题大 2 px；分组为粗体，设置名称和细则为标准字体。
|
||||
- 详细页按功能分组，短说明自然流动，不保留重复副标题和大型装饰留白。
|
||||
- 双击边缘留白能最大化和还原，设置控件不会误触发；导航抽屉保留外侧点击和 Esc 关闭。
|
||||
- 原生 Rime 候选保留横向排列、选字、翻页与主题跟随。
|
||||
|
||||
### 已完成的验证
|
||||
|
||||
基于实现基线 `1e34ec4`：
|
||||
本版密度与交互修订：
|
||||
|
||||
| 验证项 | 结果 |
|
||||
| --- | --- |
|
||||
| 设置测试 | 115 项通过 |
|
||||
| 共享主题与控件测试 | 32 项通过 |
|
||||
| Shell 测试 | 247 项通过 |
|
||||
| 配置测试 | 46 项通过 |
|
||||
| 设置测试 | 117 项通过，9 项可选检查默认跳过 |
|
||||
| 滚动渲染专项 | 额外运行 1 项通过，覆盖 WGPU / tiny-skia 与两种主题配置 |
|
||||
| 配置测试 | 46 项单元测试及 11 项集成测试通过 |
|
||||
| 布局检查 | 覆盖 480–1800 px 窗口宽度 |
|
||||
| 原生预览 | 已检查深浅外观及 631 px 窄窗口 |
|
||||
| 导航居中 | 全部 15 项；包含“交互”分组和实际悬停检查 |
|
||||
| Rime | 原生输入、候选、翻页、主题变化与进程恢复通过 |
|
||||
| 边缘双击 | 原生预览内 1272 px 最大化与 631 px 还原双向切换通过，配置内容不变 |
|
||||
| 导航抽屉 | 已移除关闭按钮，外侧点击和 Esc 关闭均检查通过 |
|
||||
|
||||
可选性能分析测试未计入上述通过项。
|
||||
共享主题 32 项、Shell 247 项的验证记录来自前版基线 `1e34ec4`。本版未改动这两部分的实现。
|
||||
|
||||
### 实现位置
|
||||
|
||||
@@ -223,8 +258,10 @@ theme {
|
||||
| 主题族注册 | `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/visual-reference-20261028/`；本版详细页、导航抽屉与窗口双击记录保存在 `.artifacts/settings-density-20261028/`。这些本机验收资料不随仓库分发。
|
||||
Reference in new issue
Block a user