8.4 KiB
UX 与东方视觉规范
状态：MVP 设计基线 适用范围：Android 手机优先，兼顾横屏、平板和系统无障碍设置
1. 体验定位
界面要让用户感到“安静、清楚、有分寸”。东方文化来自流程、文字、材料感和留白，不来自堆叠符号。
产品体验不是：
- 制造神秘权威的算命工具；
- 抽卡、开盲盒或“再测一次”的成瘾循环；
- 复刻古籍页面而牺牲现代触控和可读性。
产品体验是：
- 一段从起念、投币、观象到落事的缓慢反思流程；
- 原始文化材料与现代解释层次分明；
- 保留用户自主判断，随时可以退出、不保存或不调用 AI。
2. 信息架构
MVP 顶层不需要底部导航。主流程是线性的，使用单 Activity 和清晰的返回行为：
欢迎/方法说明
└── 起念
└── 投币（1/6…6/6）
└── 结果
├── 本地解释
└── AI 解释（需同意）
次级入口
├── 历史（启用后）
├── 方法说明
├── 内容来源
└── 设置与隐私
投币流程返回时保留已经确认的轮次；从结果页返回不能导致重新计算。预测性返回手势必须与系统导航兼容。
3. 场景与页面契约
3.1 欢迎与方法说明
目的：在第一次起卦前建立边界和方法。
必须说明：
- “你投币，应用记录；AI 不参与起卦。”
- “字为 2，背为 3；第一次是初爻，由下而上。”
- “结果用于整理想法，不替你做决定。”
主操作只有一个：“开始”。“查看方法”是次级文本操作，不制造必须完成的教程轮播。
3.2 起念
页面标题可使用“此刻，你在为何事迟疑？”。问题输入框有固定标签“正在纠结的事”，辅文提示尽量描述事实、选择和顾虑，不要求生日、性别等无关信息。
交互规则：
- 多行输入，支持系统输入法和字体缩放；
- 离开页面时在会话内保留草稿；
- 默认不把问题发送到网络；
- 用户可选择“不写具体内容，直接开始”，最终是否允许空值见决策记录。
3.3 投币
页面始终显示：
- 当前轮次，如“第三爻 · 3/6”；
- 三个独立的铜币录入控件；
- “字 · 2 / 背 · 3”的当前约定；
- 已确认的爻从下向上累积显示；
- 一个主按钮“确认这一爻”。
铜币控件不得仅靠拟真图片表达正反面；图形旁必须有“字/背”文本和选中语义。三个控件触控区域均不小于 48×48dp。
每次确认可以有一次轻触觉反馈和 150–250ms 的爻线出现动画。不得使用持续摇晃、金币飞散、音效倒计时或强制等待。开启“减少动态效果”时直接更新状态。
3.4 成卦与观象
信息优先级：
- 本卦卦象、编号和名称；
- 动爻位置；
- 之卦（若与本卦不同）；
- 卦辞与实际动爻文本；
- 「解」按钮。
卦象使用 Compose Canvas 或稳定的 Compose 图元绘制，不使用包含文字的位图。无障碍描述示例：“第 24 卦，复；初爻阳，其余为阴；初爻为动爻”。
原文、本地白话和 AI 解释必须有明确标签，不使用视觉相似但来源不明的段落混排。
3.5 解读与落事
「解」是结果页唯一主操作。点击后先选择或显示当前方式：
- “本地解读”：立即、离线，不发送问题；
- “AI 解读”：说明将发送问题、本卦、之卦和动爻文本，首次需要明确同意。
AI 加载超过 300ms 时显示内联进度；按钮在请求期间禁用，避免重复提交。超时后显示“保留当前结果，可重试或改用本地解读”，不能把结果页替换为空白错误页。
结尾固定使用“可以试的一小步”区域，包含时间范围和撤销方式；它是建议，不是判词。
4. 视觉系统
4.1 风格关键词
内容优先、纸张感、墨色、高留白、细线、克制朱砂、现代中文排版。
避免：龙凤、满屏祥云、旋转太极、金色发光、仿古卷轴、低对比度水墨、正文毛笔字、伪造印章和无意义繁体字。
4.2 颜色令牌
以下是起始令牌，不允许在页面中散落硬编码颜色：
| 语义 | 浅色主题 | 用途 |
|---|---|---|
background |
#F7F2E8 |
暖纸背景 |
surface |
#FFFDF7 |
正文和卡片表面 |
onBackground |
#1F1B16 |
墨色主文字 |
onSurfaceVariant |
#655E55 |
次级说明 |
primary |
#8C2F2B |
朱砂主操作、动爻强调 |
onPrimary |
#FFFFFF |
主操作文字 |
secondary |
#765D3E |
旧铜色次级强调 |
outline |
#B9AEA0 |
分隔线和输入边界 |
error |
Material 语义错误色 | 错误，不与朱砂强调混用 |
深色主题不是简单反色。建议使用近墨背景、暖白正文和降低饱和度的朱砂色，并独立验证所有对比度。最终令牌以无障碍测试结果为准。
4.3 字体与排版
- 标题、卦名、短卦辞可使用授权清晰的思源宋体/Noto Serif CJK 子集。
- 按钮、输入、长篇说明和系统信息使用系统中文无衬线或思源黑体。
- 毛笔字体只允许出现在经过审查的品牌字形中，不能用于正文和关键操作。
- 正文基准不小于 16sp，行高约 1.5–1.7；长文在平板上限制行宽。
- 所有字号通过
MaterialTheme.typography语义令牌提供，不在 Composable 中硬编码。
字体资源必须评估 APK 体积、授权和字形覆盖；不能为了视觉一致性下载不明来源字体。
4.4 形状与材质
- 使用 4/8dp 间距体系，页面以 24dp 左右的宽松留白为主。
- 卡片圆角克制，避免所有内容都成为悬浮大圆角卡片。
- 阴阳爻线、分隔线和图标使用统一粗细。
- 纸纹若使用，透明度必须极低、可移除，且不得影响滚动性能与文字对比度。
- 图标使用同一套矢量图标；Emoji 不作为结构性图标。
5. 动画与触觉
动画必须表达因果：确认一轮后，对应爻线从下向上出现；从本卦到之卦时，仅动爻发生形态过渡。
- 触控反馈在 100ms 内出现。
- 微动画通常为 150–300ms，复杂过渡不超过 400ms。
- 一屏同时动画的重点元素不超过两个。
- 动画可中断，不阻止返回和触控。
- 系统减少动态效果时关闭非必要过渡。
- 触觉只用于确认单爻、完成六爻和显式错误，不对滚动或普通切换连续震动。
6. 无障碍验收
- 所有交互目标至少 48×48dp，邻近目标间距至少 8dp。
- 正文与背景对比度至少 4.5:1；大图形和非文字元素至少 3:1。
- 动爻同时使用颜色、形状/符号和文字说明。
- 读屏顺序与视觉顺序一致；卦象有完整语义描述，装饰纸纹不进入语义树。
- 最大系统字体下无关键文字截断，主按钮仍可见或可滚动到达。
- 横屏、小屏和大屏不产生水平滚动；长文在平板上限制阅读宽度。
- 错误信息靠近问题控件，包含原因和恢复动作。
7. 文案规范
推荐语气：平实、留有余地、说明来源。
| 避免 | 推荐 |
|---|---|
| “此卦预示你一定会成功” | “这段材料提醒你留意……” |
| “现在绝不能辞职” | “在不可逆决定前，可以先验证一个较小假设” |
| “AI 大师解卦” | “AI 解读” |
| “再算一次改变运势” | “重新开始一段记录” |
| “结果加载中”用于本地计算 | 本地结果即时展示 |
解释中的经典文本、编辑撰写的本地白话、AI 生成内容必须分别标注。
8. UI 完成检查表
- 每屏只有一个主操作。
- 投币进度和计值约定始终可见。
- 卦象不是包含文字的位图。
- 动爻不只靠颜色表达。
- 本地与 AI 内容来源可辨认。
- 加载、空、离线、超时和非法响应均有恢复路径。
- 浅色、深色、最大字体、读屏、减少动态效果均验证。
- 无龙凤祥云等与功能无关的“古风贴图”。
本规范采用内容优先、纸张阅读、低动态和宽松密度的移动端设计原则，并结合 Android 原生交互要求。工程实现仍应遵循 Material 3 与 Compose 无障碍的最新官方指南。