本次在 feature/interaction-polish 分支上的改动主要是:统一动效时长/缓动、按钮/卡片的点击(active)反馈、焦点与 hover 的过渡。很多效果很细微(约 120ms),需要知道在哪些界面、做什么操作才能注意到。
效果:按下瞬间按钮会轻微缩小(scale 0.97)。
在哪里:
- 左侧边栏顶部:设置、新建笔记、展开/收起等圆形图标按钮
- 顶部 Ribbon:编辑区上方的各种工具图标(加粗、列表等)
- 右侧面板:AI/设置等区域的图标按钮
- 编辑器内:部分圆形图标按钮
怎么触发:用鼠标按住(按下不松开)任意一个上述图标按钮,会看到按钮在按下时略微缩小,松开后恢复。
效果:聚焦时边框和焦点环平滑出现(约 120ms)。
在哪里:
- 左侧边栏:顶部搜索/筛选输入框
- 右侧面板:各种设置里的输入框(如 AI 提示词、WebDAV 地址等)
怎么触发:点击任意一个上述输入框,使其获得焦点,观察边框/焦点环是否平滑出现(而不是瞬间跳变)。
效果:鼠标悬停时卡片微微上浮 + 阴影加深;按下时落回。
在哪里:仅首次使用或清空数据后的欢迎页(Onboarding WelcomeScreen)中间那块大卡片。
怎么触发:
- 若当前是欢迎页:鼠标悬停卡片 → 上浮;按下卡片 → 落回。
- 若已经用过应用:需要清空本地数据或新装才能再次看到欢迎页,或到代码里
WelcomeScreen临时强制显示。
效果:悬停时按钮微微上浮;按下时轻微缩放。
在哪里:编辑器顶部工具栏,在「保存」状态文字左侧,有三个模式切换的按钮(编辑 / 阅读 / 实时预览)。
怎么触发:
- 悬停任一模式按钮 → 轻微上浮
- 点击 → 有轻微按下缩放感(约 0.98)
效果:db 的图标按钮、主按钮、切换按钮在点击瞬间有 scale(0.97 或 0.98);菜单项 hover 有过渡。
在哪里:
- 打开 Database(数据库)功能
- 表格视图:列头菜单、单元格内小图标、底部/工具栏的「添加视图」等
- 看板视图:列表切换、卡片上的操作按钮等
- 创建/设置数据库 的弹窗里的切换按钮
怎么触发:在 Database 里用鼠标按下(可短暂按住)任意「小图标按钮」「主操作按钮」或「视图切换按钮」,观察按下瞬间的轻微缩小。
效果:链接颜色/背景在 hover 时平滑变化(约 120ms),而不是瞬间跳变。
在哪里:
- 阅读视图 或 实时预览 中渲染出的 [[维基链接]](class:
wikilink) - 正文里的普通链接(class:
editor-link/prose a)
怎么触发:打开一篇包含 [[某笔记]] 或 [文字](url) 的笔记,切换到阅读或实时预览,鼠标悬停链接,观察颜色/下划线是否平滑变化。
效果:悬停滚动条滑块时,滑块颜色平滑变深(约 120ms)。
在哪里:任意有滚动条的区域(侧边栏、编辑区、设置面板等)。
怎么触发:鼠标移到滚动条滑块上并悬停,观察滑块颜色是否平滑变深。
可能原因:
- 系统开启了「减少动效」(
prefers-reduced-motion: reduce):我们已对该偏好做了兼容,会把这些过渡压到约 1ms 并取消 active 的缩放,所以几乎看不到。 - 效果时长只有约 120ms:需要稍微留意「按下瞬间」或「焦点/悬停刚发生」的那一帧。
- 当前界面没有用到对应 class:例如没打开 Database、没在欢迎页、侧栏收起了等。
建议优先体验这几处,最容易建立「有动效」的体感:
- 侧边栏或 Ribbon 的图标按钮:按住不放看缩小
- 编辑器顶部「编辑/阅读/实时预览」:悬停上浮、点击缩放
- 任意输入框:点击聚焦看焦点环过渡
- 有维基链接的笔记:阅读视图里悬停链接看颜色过渡