aria/feresaria

0 Fork 0

Files

T

aria d7e122711a docs: summarize Graphite visual specification in Chinese

2026-10-28 04:14:36 +09:00

9.7 KiB

Raw Blame History

Ferese Graphite 视觉方案

文档版本：1.0
整理日期：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。

角色	逻辑字号	字重 / 用法
页面标题	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 导航垂直居中

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

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

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

7.2 Rime 候选界面

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

8. 动效原则

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

参考视频没有提供可验证的交互时长或缓动参数，因此本轮视觉方案没有新增动画时长、缓动曲线或输入手势。

9. 配置示例

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

9.7 KiB Raw Blame History Unescape Escape