# ByTaste 网站交互约定

## 规范预览

| ID | 触发与状态 | 行为与检查 |
| --- | --- | --- |
| WEB-INT-NAV | 点击章节导航 | 按布局、排版、色彩、组件、动效的顺序浏览；滚动到对应样本，当前章节高亮；手动滚动同步，窄屏导航保持可达 |
| WEB-INT-COPY | 点击色卡或参数复制 | 复制当前实际值；成功反馈短暂显示；失败明确提示可手动复制，不伪报成功 |
| WEB-INT-LAYOUT | 切换主次/均衡/纵向布局 | 同一组内容重新排布，保留选中状态；快速切换从当前位置衔接 |
| WEB-INT-MENU | 打开深色浮层 | 从触发点附近进入；再次点击、外侧或 Escape 关闭；关闭后返回触发按钮 |
| WEB-INT-CONTROL | 按钮、输入、开关、展开说明 | 样本响应当前动作；开关可键盘操作；展开可中断并反向；禁用状态不可触发 |
| WEB-INT-MOTION | 重播动态 | 重播进入与弹簧样本；重复点击不积累无限任务，当前动画可以被替换 |
| WEB-INT-REDUCE | 系统或手动减少动态 | 停止移动并设置最终样式；保留状态与文本反馈；系统开启减少运动时不能手动强制打开 |

默认按压 160ms、状态 220ms、进入 380ms、布局 420ms。弹簧用于少量样本复位；速度、距离与弹性保持克制。不自动循环，初次进入不延迟阅读。

预览下载按钮提供真实规范文件。输入仅展示文本与焦点，不保存业务记录。布局选项不代表网站已决定采用对应产品架构。

## 落地页交互

基线来源：ByTaste v0.4.0，BASE-SEMANTICS、BASE-STATE、BASE-MOTION、LAY-06 / LAY-08。

| ID | 行为 | 检查 |
| --- | --- | --- |
| LAND-INT-REVEAL | 正文章节首次进入视野时轻微上移与淡入 | 只用 transform / opacity；不循环，无手动重播；偏好映射演示已删除 |
| LAND-INT-HERO | 首屏文字约 600ms，光场与字形按 1000ms 进入；细指针使背景轻微平移 | 文字、链接不跟随指针；触屏不启用；减少动态时立即呈现最终状态 |
| LAND-INT-REDUCE | 系统开启减少动态时，完成当前动画值并提交最终样式，禁用背景追踪 | 进入或关闭动画中切换也不能留在中间状态 |
| LAND-INT-GUIDE | 多个获取入口打开同一使用说明；按钮、背景和 Escape 可关闭 | 焦点留在对话框内，关闭后返回触发点；滚动锁正确恢复 |
| LAND-INT-COPY | 复制首屏或页尾安装命令，以及说明中的使用提示 | 从对应代码或提示读取实际文本，成功有可见反馈，失败提供手动复制提示 |
| LAND-INT-GITHUB | 右上角 GitHub 链接打开公开 Skill 仓库 | 新标签打开 https://github.com/xmili233/bytaste-skill；原开发仓库保持私有 |
| LAND-INT-DOWNLOAD | 下载 assets/bytaste-skill.zip | 包含当前发布的 Skill v0.5.2、参考条目和许可证 |
| LAND-INT-NAV | 首屏向下箭头进入核心主张，再接续工作方式；顶部 GitHub 链接和安装说明分别承担外链与帮助 | 自由滚动，不锁滚轮；正文与规范入口保持可达 |
| LAND-INT-LANGUAGE | 地球按钮直接展开带勾的语言菜单，支持自动检测与八种明确选择 | `?lang=` 有效值优先于已保存选择，其次匹配 `navigator.languages` 的首个支持语言，再回退 en。手动选择保存在 `bytaste-language`；选“自动检测”清除覆盖，响应浏览器语言变化。手动切换清除 URL 中的语言覆盖但保留其他参数和锚点；跨标签同步保存的选择。存储不可用时当页仍可切换，并显示未保存反馈。 |

语言文案来自本地 locales.js，i18n.js 在 language-menu.js 和 landing.js 前应用。切换不重建页面与对话框，只更新对应文案、属性和文档语言；当前焦点、滚动与安装命令不变，旧语言的短暂复制反馈会清除。地球按钮始终显示：加载时禁用并标记忙碌，成功后启用；资源加载失败时保留可阅读的中文 HTML 与下载链接，入口保持可见且提示刷新重试。无 JavaScript 时保留可见的禁用入口。

语言菜单使用原生 popover 的外侧关闭能力；图标重复点击可关闭，方向键、Home/End 和字母可定位，Enter 选择，Escape 关闭并回到图标。菜单不打开 dialog、不锁页面滚动；滚动页面或调整窗口时关闭，避免与图标分离。外观沿用 Formlore 的选项列表，使用现有状态和按压 Token、opacity + scale(.97) 与 motion-ease；键盘展开或系统减少动态时直接显示最终状态。


落地页使用 landing.js 和本地 Motion 14.6.0。章节进入采用 Token 的 380ms 与 12px 上移，只播放一次。首屏动态保持原有语言。正文按内容自然高度组织，保留适度章节间距，不拦截滚轮、不强制吸附。正文在无 JavaScript 或减少运动时仍可阅读。