外观
设计系统原则
设计目标
VMax 使用 Apple 原生组件建立清晰、克制、可恢复的通信体验。视觉效果服务于内容、验证状态和错误恢复,不模仿 iMessage 私有动画或复制受保护资源。[MUST]
本文记录用户可见设计约束,不证明底层安全机制,也不冻结密码协议或格式化实现。[已验证事实]
视觉语言
| 元素 | 基线 | 约束 |
|---|---|---|
| 色彩 | 系统蓝到紫的克制渐变;成功使用系统绿 | 使用语义色并适配深浅与高对比模式;不能只靠颜色传达状态 [MUST] |
| 字体 | San Francisco / 系统字体 | 支持中文、英文和数字混排;VMax ID 与指纹可用等宽样式 [MUST] |
| 圆角 | 卡片 20–28 pt,气泡 18–24 pt,按钮使用系统容器 | 这是说明书建议值,不在所有层级叠加玻璃与大圆角 [建议] |
| 气泡 | 自己使用品牌语义色,对方使用 secondary fill | 文字与状态达到 WCAG AA;深浅模式分别验证 [MUST] |
| 图标 | SF Symbols 为主;自定义仅限品牌 Logo | 图标必须有文本标签或无障碍名称 [MUST] |
| 材质 | Liquid Glass 用于导航、工具栏、浮层和控制层 | 聊天内容区保持清晰,避免 glass-on-glass [建议] |
| 动效 | 系统滚动、轻量过渡和触感 | Reduce Motion 时移除位移、缩放强化和非必要连续动画 [MUST] |
信息层级
- 正文与主要任务:消息内容、联系人名称、输入和发送。
- 信任与实例:验证状态、密钥变化、实例异常;发生风险时提升为阻断层。
- 投递状态:正在发送、已发送、已送达、已读和失败,靠近消息但不压过正文。
- 诊断信息:协议版本、消息 ID、大小、TTL 等放入详情页,不常驻聊天界面。
验证状态、消息状态和错误都使用“图标 + 文本 + 语义颜色”的组合,不使用单独颜色或单独触感。[MUST]
组件与状态
安全警告条
- 用于身份密钥变化、实例指纹变化和不支持的协议版本。
- 标题说明发生了什么,正文说明影响,主按钮给出复核或退出路径。
- 固定在任务入口之前,不随聊天滚动消失,不允许自动恢复为安全状态。[MUST]
消息状态
- “正在发送”允许短暂使用进度图标,并有 VoiceOver 文本。
- “已发送、已送达、已读”使用稳定、低干扰的文字或图标组合。
- “失败”显示原因类别和重试动作;密钥变化失败不能与网络失败共用普通重试。[MUST]
空状态
- 标题解释当前状态,正文只提供必要原因,一个主操作引导下一步。
- 无联系人:输入完整地址或扫码。
- 无会话:从联系人开始一对一聊天。
- 无身份:创建身份、连接私有实例或恢复备份。
- 空白伪装空间:使用自然的无身份或无会话状态,不出现任何伪装或真实空间术语。[MUST]
破坏性确认
- 第一次页面解释影响与边界,第二次确认表达不可逆性。
- 删除身份与启用“假密码触发格式化”不能只用开关或滑动误触完成。[MUST]
- 不使用“安全擦除”“彻底清除”等可能暗示物理覆写的措辞;采用“本地格式化”并解释密码学擦除边界。[MUST]
文案词汇表
| 场景 | 推荐文案 | 禁止或需审计后才能使用 |
|---|---|---|
| 密钥变化 | “此联系人的安全信息已变化,请重新核对后继续。” | “对方已被攻击” |
| 网络失败 | “暂时无法发送。消息已保留,可稍后重试。” | “消息已丢失” |
| 服务器删除 | “实例报告已从投递队列删除。” | “已从服务器永久擦除” |
| 备份密码 | “此密码不会上传。忘记后无法恢复此备份。” | “我们可以帮你找回密码” |
| 格式化边界 | “将删除本机关键密钥和 VMax 可控制的数据,不会删除外部备份。” | “彻底覆写手机数据” |
| 锁屏错误 | “密码不正确” | “这不是主密码”或“假密码已触发” |
深浅模式与对比度
- 所有语义色使用动态颜色;不为浅色模式直接反转固定 RGB。[MUST]
- Increase Contrast 下边界、图标和文本仍可区分;Reduce Transparency 下用不透明系统背景替代玻璃材质。[MUST]
- 气泡、链接、失败状态和安全警告在两种模式下分别测量对比度;大号文本与普通文本按 WCAG AA 对应阈值验收。[MUST]
动效与触感
- 触感是视觉状态的补充,不是唯一反馈。
- 长按消息可使用系统触感;反应选择、发送失败和破坏性确认使用不同语义反馈。[建议]
- Reduce Motion 开启时取消大范围位移、缩放和 matched transition;保留无位移的淡入淡出或即时切换。[MUST]
- 空白空间和格式化路径的动效不得形成可被旁观者识别的特殊模式。[MUST]
验证方式
- 为所有核心页面生成深色、浅色、高对比和降低透明度快照。
- 用默认字号和最大辅助字号完成同一任务,不以截断文字或固定高度换取视觉整齐。
- 使用 VoiceOver、Switch Control 和 Voice Control 走查关键组件;详见
无障碍设计.md。 - 在 60 Hz 与 120 Hz 真机检查滚动和浮层,不用模拟器流畅度代替真机结论。