按苹果产品哲学设计 · Clarity / Deference / Depth + WWDC 八大设计原则 + 适老化国标
架构要点:②体验层只做"收集与呈现",不做任何判断;⑤引擎层互相独立、可单独替换(舌象 API→本地模型、通用 LLM→中医垂直模型 A/B),这正是两阶段演进的架构基础。
中医小姨体质测评 H5
├─ S1 首页(开始测评 / 查看上次报告† / 免责声明)
├─ S2 第1步·图文自述(文字描述 + 舌照[选填·含拍摄指引] + 跳过)
├─ S3 第2步·体质量表(30题逐题推进 · 中途退出自动保存†)
├─ S4 第3步·基本情况(数字stepper + 生活习惯单选/多选 + 过敏史 · 女性条件卡)
├─ S5 生成中(三步进度 · 可离开,完成后模板消息†提醒)
├─ S6 报告(免费节1-3:体质雷达/舌象/辨证 → 付费节4-7:养生/药膳/行动清单 → 复测/发给小姨)
└─ S7 分享海报(摘要卡+二维码 · 保存/分享)
† = 阶段二功能,MVP 用人工替代(客服发报告/微信收藏)
| 屏 | 触发引擎 | 读写数据 | 失败降级 |
|---|---|---|---|
| S2 提交 | 引擎0 红旗初筛(关键词) | 会话暂存 | 命中红旗→S6顶部红卡,仍可出报告 |
| S4 提交 | 引擎1 CCMQ计分 + 引擎2 舌象(本地质量评估前置拦截→识别) + 引擎3 辨证 + 引擎4 药膳RAG 串行触发 | 量表答案、舌照、结构化字段 | 照片质量不合格→本地拦截重拍/跳过舌象节,报告标注"未采集" |
| S5 生成中 | 编排层状态推送 | 任务队列 | 超时60s→"稍后通知你",模板消息兜底 |
| S6 报告 | 引擎5 渲染 | 报告JSON+药膳方(页码引用) | 药膳检索空→通用健脾祛湿方+明示说明 |
| S7 海报 | 服务端合成图片 | 报告摘要 | 合成失败→截图引导 |
| 屏 | 加载 | 空态 | 错误 | 成功 |
|---|---|---|---|---|
| S1 | 骨架屏 | 首次:无"上次报告"入口 | 断网→本地缓存开始 | 进入S2 |
| S2-S4 | —(纯前端) | 自述过短→追加1道定向选择题补信息 | 照片不合格→重拍/跳过 | 进入S5 |
| S5 | 三步进度动画 | — | 引擎失败→逐项降级出报告(缺项标注) | S6 |
| S6 | 报告骨架 | 信息不足→"补充2个问题重新生成" | 支付失败→保留免费节+重试按钮 | 解锁/分享/加微 |
| 产品决策 | 对应原则 | 为什么这样是对的 |
|---|---|---|
| 每屏只有一个主任务、一个主按钮 | PurposeSimplicity | 不抢用户时间预算;50-60+用户认知负荷低,路径唯一可预测 |
| 舌照选填 + 拍摄指引 + 随时跳过 | Agency | 用户始终可控;不因一张照片卡死整个流程 |
| 红旗症状置顶红卡、AI输出让位就医提示 | Responsibility | 健康场景的AI安全底线:预判伤害优先于完成度 |
| 药膳方只出自书库+页码可回溯 | ResponsibilityCraft | AI不编方子;每处内容可验证,细节建立信任 |
| 免费给足前3节,付费节先模糊预览再解锁 | Agency | 先看到价值再决定付费,不搞突然袭击 |
| 量表一屏一题、选择即前进 | Familiarity | 像翻卡片一样答题,复用用户已知的问卷心智 |
| 正文≥18pt、主CTA 60dp、对比度≥4.5:1 | Flexibility | 适老国标硬指标;苹果"为全能力范围设计" |
| 生成中三步进度+小姨口吻文案 | Delight | 等待有反馈有温度,不是死白屏 |
| 报告"大白话+专业"双版本 | Simplicity(非极简) | 简单≠删信息;分层呈现,普通用户和专业读者各取所需 |
| 30天行动清单+复测曲线 | 成就动机 | 苹果四人类需求之 Achievement:给用户可完成的小胜利 |
原则:全 API 起步(不为跑而跑本地),按引擎分工路由多模型,切换不动架构——引擎层每格都是独立插槽,Dify 工作流里 API 节点与 HTTP 节点(指向本地服务)可互换。健康数据选国产合规厂商,不出境。
| 引擎/任务 | 阶段一(W2) | 升级路径 | 路由理由 |
|---|---|---|---|
| 引擎3 辨证 JSON | 旗舰推理 API(GLM/DeepSeek 档) | 日均可观或需私有化时 → 4090/64G Mac 跑 7B/14B INT4(API 月账单 >¥3000 为切换信号) | 全流程最难一步,输出要稳、守 JSON 格式 |
| 引擎2 舌象感知 | 多模态 API(GLM-4V 级) | W4 起切本地专科模型(Tongue157 级分类器 CPU 可跑,与 Dify 同机 Docker,FastAPI 包成 HTTP 服务;ShizhenGPT 级才需 GPU) | 窄任务专科更准(公开报告:分割 96%+、齿痕/裂纹/腻苔检测约 92% mAP);照片不出服务器 |
| 报告文案(小姨口吻) | 同旗舰或次一档 | 可换轻量档省钱 | 文风任务,非推理瓶颈 |
| 药膳匹配解释 | 轻量模型 | — | 只写"为什么适合你"的短解释,方子本体出自库内检索 |
| 多厂商主备 | 主模型 + 备用厂商配置 | — | 单厂商超时/故障自动切换,不停服;prompt 按模型分别调优,不指望一份通吃 |
舌象混合架构三模式(可叠加):
落地节奏:W2 纯 API 跑通(先有再优)→ W3 双跑拿数据 → W4 按数据决定感知层去留。三步都只改引擎2 的实现(API 节点 ↔ HTTP 节点),其余架构不动。
字体阶梯(-apple-system / PingFang SC;大字号负字距、正文零字距):
| 层级 | 规格 | 用途 |
|---|---|---|
| Large Title | 30px · 700 · -0.02em · 行高1.15 | 每屏大标题 |
| Title | 22-23px · 700 · -0.01em | 量表问题/报告节标题 |
| Headline | 18-19px · 600 | 卡内标题/按钮 |
| Body | 18px 长文正文 / 17px 列表文字 · 400 · 行高1.6 | 主要阅读文字(适老≥18pt达标) |
| Footnote | 14-15px | 辅助/来源/免责 |
色彩与触控:
| 令牌 | 值 | 对比度 |
|---|---|---|
| 墨色文字 | #1D1C19 on #FFF | ≈16:1 ✓ |
| 次要文字 | #6E675B on #FFF | ≈5.4:1 ✓ |
| 主色松绿 | #2E5D4E,白字于其上 | ≈7.5:1 ✓ |
| 红旗朱砂 | #C23A2B on #FBEFEC | ≥4.5:1 ✓ |
| 主CTA高度 | 60px(适老60dp达标) | — |
| 选项行高 | 58px(≥44dp 且尽量接近60) | — |
动效规格(实现时遵循):按压即时反馈 scale(.97)/100ms(pointer-down 即响应,不等抬手);屏切换 200ms 透明度过渡;弹簧参数默认 damping 1.0 / response 0.35,仅惯性滑动场景 damping 0.8;全部尊重 prefers-reduced-motion 与 prefers-reduced-transparency。排版适配(Flexibility):实现时字号采用可缩放单位并跟随系统"字体大小"设置(动态类型),布局随字号重排不破版;本文档原型为固定规格稿,仅定义 1x 基准值。
九种体质判定 · 舌象解读 · 辨证分析
养生方案 · 药膳餐单(出自《百病食疗》)
本测评属于中医体质辨识与养生参考,不构成医学诊断,不能替代医生面诊。详见免责声明
以上信息仅用于生成本次报告,可随时要求删除
完成后自动跳转 · 中途离开也没关系
痰湿质 · 主体质倾向:气虚质
痰湿得分 64(≥40 判为"是"),转化分与判定规则可查。
照片拍摄合格。厚腻苔+齿痕与痰湿体质的判断互相印证。
你这种情况,小姨见得多了——不是病,是脾在偷懒、湿在堆积。你说饭后必困、舌头边上还有齿痕,这就是典型的痰湿倾向。别急着买补品,痰湿体质越补越腻,先把脾胃这个"运输队"养起来。
起居:晚上11点前睡,睡前热水泡脚15分钟……运动:每天快走30分钟,微微出汗即可……情志:少思虑,多晒背……经络:足三里每日按揉3分钟,丰隆穴化痰湿……代茶饮:陈皮荷叶茶,午后一杯……
早餐食用,每周 4 次;脾虚湿困、大便黏者适宜。
周末炖一次,理气化湿……
午后一杯,代替甜饮料……
第 1 周:早餐换成山药薏米粥,记录大便形态;第 2 周:加每日快走 30 分钟;第 3 周:泡脚+足三里打卡;第 4 周:复测体质,对比雷达图变化……
本报告由 AI 基于你提供的信息生成,属体质辨识与养生参考,不构成医学诊断或处方。
30 天后欢迎复测 · 把报告发给小姨,免费帮你解读一条
海报不含你的健康细节,只显示体质类型
痰湿质
陈皮老鸭汤……
您描述的「胸痛」属于需要医生当面检查的情况。本报告的养生建议仅供参考,请优先前往正规医疗机构就诊。
验证方法:对照 HIG 三支柱(Clarity/Deference/Depth)与 WWDC 八大设计原则,逐屏走查 S1-S7,另查产品级决策(定价、解锁、红旗、隐私)。执行时间:2026-10-14。
结果:通过(发现并修复 6 处问题)。① S4 主按钮误用金色,破坏"主操作=松绿"的色彩语义一致性(Familiarity)→ 改为主绿,金色仅保留给药膳/付费强调;② 免责声明与元信息文字 #8A8477 对比度≈3.5:1,低于 4.5:1 适老硬指标,且免责属法律重要内容 → 全部加深至 #6E675B(≥4.8:1);③ 核心安全特性"红旗症状"只有文字描述没有原型呈现(Responsibility 要求可验证)→ 新增 S6b 状态变体屏:红卡置顶+隐藏付费按钮只留就医提示,并确认图标+颜色双通道传达(非仅颜色);④ S1 社交证明用 🀄 emoji 当图标,图标准确性不足(Craft)→ 改为语义精确的圆点符号;⑤ S4 缺 §1.2 承诺的"女性条件卡",原型与信息架构不一致 → 补齐并标注"仅女性用户显示";⑥ §2.0 缺"实现时字号可缩放/动态类型"适配说明(Flexibility)→ 已补。三支柱结论:Clarity(一屏一任务、证据链可回溯、18pt 正文)✓;Deference(暖纸底+白卡、内容前置、无装饰性界面元素)✓;Depth(量表逐题推进、生成三步反馈、报告分层+模糊解锁)✓。
验证方法:按压反馈/动效参数/材质(backdrop-filter)/字距行高随字号变化、prefers-reduced-motion/-transparency 适配;工信部适老四项硬指标逐屏测量;HTML 结构与自包含校验。执行时间:2026-10-14。
结果:通过(发现并修复 3 处问题,四项硬指标实测达标)。修复项:① 报告长文正文 16.5px 未达"主要文字≥18pt"国标 → 提至 18px(列表/步骤等次要文字 17px,辅助说明 15px,符合分级规范);② 生成步骤文字 16.5px → 17px;③ 交互切换分段控件点击区 36px → 44px。硬指标实测:主 CTA 60px / 选项行 58px / 表单行 56px(≥44dp 全达标,主要组件趋近 60dp);正文与元信息对比度全量复核(墨色 16:1、次要 4.8:1、主绿反白 7.5:1、红旗卡 ≥4.5:1);无仅颜色传达的信息(选中态=底色+对勾,红旗=图标+色)。流体细则复核:按压反馈 pointer-down 即触发(scale .97/100ms);屏切换仅透明度过渡、无手势锁定;底部操作条 backdrop-filter 材质 + reduced-transparency 降级;字距随字号分级(30px/-0.02em、23px/-0.01em、正文 0);prefers-reduced-motion 下进度环降速、过渡取消。交付校验:HTML 标签配对 OK、目录锚点 OK、自包含(无外链资源,内联 JS 语法校验通过)、UTF-8、15 屏(交互 7 + 分镜 8 含 S6b 变体)。