aria/feresaria

0 Fork 0

Files

T

aria 9908dde9f8 feat(settings): refine density, group detailed options and add edge maximize gestures

2026-10-28 04:49:27 +09:00

13 KiB

Raw Blame History

Ferese Graphite 视觉方案

文档版本：1.1
整理日期：2026-10-28
视觉基线：1e34ec4；本版补充内容密度、详细页分组与窗口交互规则。
适用范围：Ferese 设置、Shell 共享控件、锁屏与原生 Rime 候选界面的主题协同。

1. 视觉目标

以中性表面、细边界和清晰排版建立界面层次，让配置内容和操作状态成为视觉重点。

中性底色：使用石墨灰与纸白两种外观，通过相邻表面的明度差区分区域。
少量强调色：将颜色集中在选中、键盘焦点、开关与状态提示上。
统一节奏：统一页边距、分组间距、图标尺寸和导航行高。
文字分层：用字号、字重和次级文字颜色区分标题、说明与辅助信息。
克制装饰：降低光晕、玻璃染色和阴影的存在感，保留必要的层次提示。
状态清晰：分别表达悬停、按下、选中、键盘焦点和禁用状态。
紧凑但舒展：减少重复说明、强制换行和无用途的空白；将空间留给设置行、卡片之间的适度间距。

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 导航垂直居中

导航需要同时满足两层对齐：

图标、文字与指示条在内容行内部垂直居中。
整个内容行在 36 px 按钮及悬停区域内垂直居中。

原生自定义按钮会从上内边距放置子内容，因此仅设置行内居中，会使整行仍处于按钮上方。实现中增加填满按钮高度的居中容器，确保普通、悬停、选中和焦点状态使用同一条中心线。

7.2 Rime 候选界面

候选横向排列，使用 MiSans 字体。
编号、中英文候选字按实际字形边界进行垂直居中。
背景、边界与选中态通过共享主题保持一致。
保留数字键选字以及数字行 -、= / + 翻页的既有行为。

8. 动效原则

保留现有动画与“减少动画”配置。动效服务于状态变化与空间关系，悬停和按下反馈保持简洁。

参考视频没有提供可验证的交互时长或缓动参数，因此本轮视觉方案没有新增动画时长或缓动曲线。窗口操作按 6.2 节执行。

9. 配置示例

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/。这些本机验收资料不随仓库分发。

13 KiB Raw Blame History Unescape Escape