← 返回项目
新华保险肿瘤风险评估 · 产品文档 · 07

原型说明与交互说明

按页面逐一说明功能、元素、交互逻辑、状态与异常处理,重点覆盖问卷条件分支、报告审核状态流转、风险结果分支跳转与 IM 聊天状态管理。
更新日期 2026-04-10 负责人 产品经理 受众 研发 / 测试 / 设计
1

封面页

入口
9:41● ● ●
新华保险
肿瘤风险评估
专业筛查 · 在线咨询 · 就医协助
进入服务
封面页线框

页面功能描述

应用首屏,通过蓝青色渐变背景与医疗科技元素传递专业可信赖的品牌印象,展示产品名称与核心服务概述,引导用户点击进入主服务。

页面元素清单

元素类型说明
品牌标识文字/Logo「新华保险」品牌名,位于顶部
主标题文字「肿瘤风险评估」
副标题文字核心服务概述:专业筛查 / 在线咨询 / 就医协助
进入服务按钮按钮主操作入口,跳转服务选择页
背景视觉图形蓝青色渐变 + 医疗科技装饰元素

交互逻辑说明

  1. 进入服务按钮:点击跳转至服务选择页,带渐隐过渡动画。
  2. 首次进入:若未授权,触发用户授权弹窗(手机号 / 身份信息授权)。

状态说明

状态表现
加载背景与按钮资源加载中,按钮置灰不可点
正常资源加载完成,按钮高亮可点
异常资源加载失败,展示骨架屏 + 重试入口

异常处理

  1. 授权拒绝:提示「需授权方可使用服务」,提供重新授权按钮。
  2. 网络异常:进入服务时接口失败,Toast 提示并停留在封面页。
2

服务选择页

入口
9:41● ● ●
选择服务
线上咨询
与专业医生在线沟通
线下就医协助
专属健康管家 1v1
个人健康档案
咨询记录与随访计划
肿瘤风险评估入口
服务选择线框

页面功能描述

主服务导航中枢,以三张卡片入口展示线上咨询、线下就医协助、个人健康档案三项服务,同时承载肿瘤风险评估问卷的入口。用户根据需求选择对应服务。

页面元素清单

元素类型说明
页面标题文字「选择服务」
线上咨询卡片卡片图标 + 标题 + 简介,点击进入医生列表
线下就医协助卡片卡片点击展示企微二维码
个人健康档案卡片卡片点击进入健康档案页
风险评估入口卡片/按钮进入问卷流程

交互逻辑说明

  1. 卡片点击:各卡片点击跳转对应服务页面,带左滑入动画。
  2. 风险评估前置判断:点击评估入口时,若已有进行中问卷则提示「继续填写 or 重新开始」。

状态说明

状态表现
加载卡片骨架屏占位
空服务未开通时卡片置灰,提示「敬请期待」

异常处理

  1. 服务配置接口失败:展示默认三卡片,Toast「部分服务暂不可用」。
3

问卷 - 基本信息

问卷
9:41● ● ●
基本信息1/4
姓名
出生日期
年龄(自动)身高
籍贯
身份证号
联系电话
地址
工作单位
下一步
基本信息线框

页面功能描述

采集用户 10 项基本信息,作为风险评估的基础数据。年龄由出生日期自动计算,无需手动填写。

页面元素清单

字段类型必填校验规则
姓名文本是2-20 字符,不含特殊符号
出生日期日期选择是早于今天,晚于 1900-01-01
年龄只读-由出生日期自动计算
身高数字是范围 80-250 cm
体重数字是范围 20-300 kg
籍贯省市级联是下拉选择
身份证号文本是18 位,校验位合法
联系电话数字是11 位手机号格式
地址文本是不少于 5 字符
工作单位文本是不少于 2 字符

交互逻辑说明

  1. 年龄联动:选择出生日期后自动回填年龄,年龄字段只读。
  2. 下一步校验:点击下一步时逐项校验,未通过的字段红框高亮并展示错误提示,阻断跳转。
  3. 数据暂存:每次离开页面自动暂存,返回时可恢复已填内容。

状态说明

状态表现
未填写输入框占位符提示
校验失败字段红框 + 行内错误文案
校验通过下一步按钮高亮可点

异常处理

  1. 身份证与出生日期不一致:提示「身份证与出生日期不符,请核对」,不阻断但需确认。
4

问卷 - 生活方式

问卷
9:41● ● ●
生活方式2/4
吸烟状态
从不偶尔经常
饮酒习惯
否是
酒类(多选): 白酒 啤酒
饮用量饮酒年限
职业暴露史
无有
下一步
生活方式线框

页面功能描述

分步采集生活方式信息:吸烟状态、饮酒习惯(含酒类多选、饮用量、时长)、职业暴露史。饮酒相关字段仅在用户选择饮酒时展开。

页面元素清单

字段类型必填说明
吸烟状态单选是从不 / 偶尔 / 经常
饮酒习惯单选是否 / 是
酒类多选条件白酒 / 啤酒 / 红酒 / 其他,饮酒=是时展开
饮用量数字条件饮酒=是时展开
饮酒年限数字条件饮酒=是时展开
职业暴露史单选是无 / 有

交互逻辑说明

  1. 条件展开:饮酒习惯选择「是」时,酒类多选、饮用量、饮酒年限三组字段平滑展开;选择「否」时折叠并清空已填值。
  2. 分步呈现:吸烟→饮酒→职业暴露依次出现,完成上一步后下一步字段淡入,避免一次性信息过载。
  3. 下一步校验:展开的字段变为必填,未填则阻断并提示。

重点:问卷条件分支逻辑

  • 饮酒=否 → 隐藏酒类 / 饮用量 / 饮酒年限,提交时这三个字段不参与校验与上报。
  • 饮酒=是 → 三字段必填;酒类至少选择一项;饮用量与年限为正整数。
  • 职业暴露史=有 → 追加暴露类型与年限补充字段(视规则引擎配置)。

状态说明

状态表现
折叠条件字段隐藏
展开条件字段淡入显示
校验失败展开字段缺失时红框提示

异常处理

  1. 切换饮酒状态导致字段清空时,二次确认避免误操作丢数据。
5

问卷 - HPV 检测

问卷
9:41● ● ●
HPV 检测3/4
是否做过 HPV 检测
选项A已有结果无结果选项D选项E
上传报告弹窗
+ 拍照/相册
取消上传
下一步
HPV 检测线框

页面功能描述

采集 HPV 检测情况,提供 5 个单选项。当用户选择「已有结果」时弹出上传弹窗支持上传报告;选择「无结果」时弹窗引导去购买检测试剂。

页面元素清单

元素类型说明
HPV 检测单选单选(5项)已有结果 / 无结果 / 其他选项
上传报告弹窗弹窗已有结果触发:拍照/相册上传 + 取消/上传按钮
购买引导弹窗弹窗无结果触发:去购买检测试剂 + 稍后再说
下一步按钮按钮校验通过后跳转预览页

交互逻辑说明

  1. 已有结果 → 上传弹窗:支持调用相机/相册,上传后展示缩略图,支持删除重传。
  2. 无结果 → 购买弹窗:点击「去购买」跳转外部购买页(或试剂商城),「稍后再说」关闭弹窗并标记为未提供结果。
  3. 必填校验:必须选择一项;选已有结果但未上传报告时阻断下一步。

重点:HPV 分支与审核联动

  • 选择已有结果并上传报告 → 报告进入审核队列,影响最终器官风险评定。
  • 选择无结果且未购买 → 风险评估按无 HPV 数据计算,结果页标注「HPV 数据缺失」。
  • 上传图片需做大小(<10MB)与格式(jpg/png)校验,OCR 失败不阻断提交但标记需人工复核。

状态说明

状态表现
上传中弹窗内进度条 + 百分比
上传成功缩略图展示 + 删除按钮
上传失败红色提示 + 重试按钮

异常处理

  1. 图片过大:前端压缩后再上传;格式不支持:提示「请上传 jpg/png 图片」。
6

问卷预览

问卷
9:41● ● ●
问卷预览4/4
姓名: 张三
出生日期: 1985-03
吸烟: 从不 / 饮酒: 是
HPV: 已有结果(已上传)
返回修改提交
问卷预览线框

页面功能描述

以只读形式回显用户已填写的全部答案,供用户最终确认。支持返回修改或确认提交。

页面元素清单

元素类型说明
答案回显区列表分组展示基本信息 / 生活方式 / HPV
返回修改按钮按钮回到对应步骤
提交按钮按钮提交问卷至审核

交互逻辑说明

  1. 返回修改:点击可定位到具体步骤(支持点击单项跳转该字段所在页)。
  2. 提交:二次确认弹窗「确认提交?提交后不可修改」,确认后调用提交接口。

状态说明

状态表现
提交中按钮 loading,不可重复点击
提交成功跳转审核中等待页
提交失败Toast 提示,按钮恢复可点

异常处理

  1. 提交失败保留页面数据,提示「网络异常,请重试」,不丢失已填内容。
7

审核中(等待页)

审核
9:41● ● ●
⏳
报告审核中
预计 24 小时内完成,结果将通过消息通知您
查看审核状态
审核中线框

页面功能描述

问卷提交成功后进入审核队列的等待页,告知用户审核进度,提供查看审核状态的入口。

页面元素清单

元素类型说明
等待动画动效循环加载动画 + 审核中文案
预计说明文字预计时长与通知方式
查看审核状态按钮按钮轮询审核状态

交互逻辑说明

  1. 状态轮询:页面每 30 秒轮询一次审核状态接口;审核完成自动跳转对应结果页。
  2. 查看审核状态:手动触发即时查询,返回当前状态。

状态说明

状态表现
审核中等待动画持续
成功自动跳转审核成功页
失败自动跳转审核失败页

异常处理

  1. 轮询接口持续失败:提示「状态查询异常」,保留手动刷新按钮。
8

审核成功

审核
9:41● ● ●
✅
审核通过
您的评估报告已生成
查看评估结果
审核成功线框

页面功能描述

审核通过后的中间态页面,引导用户查看最终的肿瘤风险评估结果。

页面元素清单

元素类型说明
成功标识图标绿色对勾
结果文案文字审核通过 + 报告已生成
查看评估结果按钮按钮跳转评估结果页

交互逻辑说明

  1. 查看评估结果:跳转评估结果页,加载仪表盘与器官风险数据。

状态说明

状态表现
成功绿色主题,按钮高亮
加载中结果数据加载中 loading

异常处理

  1. 结果数据加载失败:提供重试,不影响审核状态。
9

审核失败

审核
9:41● ● ●
⚠️
审核失败
原因:报告图片不清晰
修改上传结果
联系客服
审核失败线框

页面功能描述

审核未通过页面,告知失败原因,引导用户修改上传结果重新提交,或联系客服。

页面元素清单

元素类型说明
失败标识图标红色警告
失败原因文字报告不清晰 / 信息不符 / 关键字段缺失
修改上传结果按钮按钮回到上传步骤
联系客服按钮按钮次要操作

交互逻辑说明

  1. 修改上传结果:回到 HPV 上传步骤,保留其余问卷数据,仅重新上传报告。
  2. 重新提交:重新上传后自动重新进入审核中状态。

状态说明

状态表现
失败红色主题 + 原因说明
重新审核跳回审核中等待页

异常处理

  1. 多次失败(≥3 次):建议联系客服人工介入,展示客服入口。
10

评估结果

结果
9:41● ● ●
评估结果
总体风险:高
肺癌风险 高
肝癌风险 中
胃癌风险 低
进入肿瘤专项健康管理服务
评估结果线框

页面功能描述

展示肿瘤风险评估结果。半圆仪表盘呈现总体风险等级(高/中/低),下方分解各器官风险(肺癌/肝癌/胃癌/结直肠癌等),底部 CTA 按钮根据等级引导不同后续动作。

页面元素清单

元素类型说明
半圆仪表盘图形绿→黄→红渐变,指针指向总体等级
总体风险等级文字高 / 中 / 低
器官风险列表列表各器官独立等级标签
CTA 按钮按钮按等级动态变化

交互逻辑说明

  1. 仪表盘动画:进入页面时指针从低风险区滚动到实际等级位置。
  2. 器官项点击:点击某器官可展开该器官的风险因素说明与建议。

重点:风险评估结果分支跳转

  • 高风险:CTA 显示「进入肿瘤专项健康管理服务」,点击跳转专项服务页(专项筛查 + 一对一随访)。
  • 中风险:CTA 显示「建议咨询医生」,点击跳转线上咨询医生列表。
  • 低风险:CTA 显示「查看常规随访计划」,点击写入健康档案随访时间线。
  • 三种结果均将数据沉淀至个人健康档案。

状态说明

状态表现
高风险仪表盘红色区 + 专项服务 CTA
中风险仪表盘橙色区 + 咨询 CTA
低风险仪表盘绿色区 + 随访 CTA

异常处理

  1. HPV 数据缺失:结果页标注「HPV 数据缺失,建议补充检测以提升准确度」。
11

线上咨询(医生列表)

服务
9:41● ● ●
在线医生
头像
李医生 主任医师
肿瘤科 · 三甲医院
头像
王医生 副主任医师
内科 · 三甲医院
头像
赵医生 主治医师
外科 · 三甲医院
医生列表线框

页面功能描述

展示可咨询的医生列表,每项含头像、姓名、职称、科室、医院等关键信息,点击进入医生详情。

页面元素清单

元素类型说明
医生卡片列表项头像 + 姓名 + 职称 + 科室 + 医院
筛选/搜索控件按科室、职称筛选

交互逻辑说明

  1. 卡片点击:跳转医生详情页。
  2. 下拉刷新 / 上拉加载:分页加载医生列表。

状态说明

状态表现
空「暂无可咨询医生」插画
加载骨架屏
错误「加载失败」+ 重试

异常处理

  1. 医生不在线:详情页咨询按钮置灰,提示「医生暂不接诊」。
12

医生详情与咨询聊天

服务
9:41● ● ●
头像
李医生 主任医师
肿瘤科 · 三甲医院
擅长:肺部肿瘤早期筛查
简介:从医 20 年,擅长...
发起咨询
— 咨询聊天 —
您好,请描述您的情况
我体检发现肺结节
输入消息...
医生详情 + 聊天线框

页面功能描述

医生详情页展示头像、姓名、职称、科室、医院、擅长、简介等信息,用户确认后发起咨询进入 IM 聊天页。聊天页采用气泡式交互,患者气泡靠右、医生气泡靠左。

页面元素清单

元素类型说明
医生信息头区头像 + 姓名 + 职称 + 科室 + 医院
擅长文字医生擅长领域
简介文字医生简介
发起咨询按钮按钮创建会话进入聊天
消息气泡列表患者右 / 医生左,支持图文
输入框控件进行中可用,已结束隐藏

交互逻辑说明

  1. 发起咨询:创建会话,状态置为「进行中」,跳转聊天页。
  2. 发送消息:支持文字与图片,发送后气泡靠右展示,等待医生回复。
  3. 结束会话:医生或用户主动结束,或超时自动结束。

重点:IM 聊天状态管理

  • 进行中:输入框可用,可发消息,支持撤回(2 分钟内)、图片预览。
  • 已结束:输入框隐藏,消息只读,顶部展示「咨询已结束」横幅,历史记录可查看。
  • 状态同步:通过长连接 / 轮询实时同步双方状态变化,断网重连后补拉消息。
  • 会话记录自动归档至健康档案「线上咨询记录」卡片。

状态说明

状态表现
进行中输入框可用,在线状态指示
已结束输入框隐藏,只读模式
发送中气泡旁 loading 圈
发送失败气泡旁红色感叹号,点击重发

异常处理

  1. 断网:消息进入待发送队列,恢复后自动重发。
  2. 医生长时间未回复:超时规则自动结束并提示用户。
13

线下就医协助

服务
9:41● ● ●
添加专属健康管家
扫描下方二维码,添加企微好友享受一对一服务
保存二维码
复制微信号
线下就医线框

页面功能描述

展示企业微信二维码,引导用户添加专属健康管家,建立一对一服务关系,提供线下就医协助。

页面元素清单

元素类型说明
引导文案文字说明服务内容
企微二维码图片长按识别或保存
保存二维码按钮按钮保存到相册
复制微信号按钮按钮复制微信号便于搜索添加

交互逻辑说明

  1. 二维码长按:支持识别图中二维码或保存到相册。
  2. 添加确认:用户添加后回填确认,标记服务关系已建立。

状态说明

状态表现
未添加展示二维码与引导
已添加展示「已添加,专属管家将联系您」

异常处理

  1. 二维码加载失败:提供刷新与复制微信号兜底方案。
14

个人健康档案

服务
9:41● ● ●
健康档案
线上咨询记录 (2)查看
随访计划
肺结节 CT 复查 · 2026-05
结肠镜检查 · 2026-12
年度体检 · 2027-03
健康档案线框

页面功能描述

汇聚用户的线上咨询记录与随访计划。咨询记录以卡片展示并提供查看入口;随访计划以时间线呈现(肺结节 CT 复查、结肠镜检查等),帮助用户持续管理健康。

页面元素清单

元素类型说明
咨询记录卡片卡片展示咨询次数 + 查看按钮
随访计划时间线时间线纵向时间轴,含已完成 / 待办节点
节点详情文字检查项目 + 计划时间

交互逻辑说明

  1. 查看咨询记录:展开历史会话列表,点击进入对应只读会话。
  2. 随访节点点击:查看检查详情与提醒设置。
  3. 提醒推送:临近计划时间自动推送消息提醒。

状态说明

状态表现
空「暂无咨询记录 / 随访计划」引导插画
已完成节点绿色对勾标记
待办节点蓝色圆点标记

异常处理

  1. 数据加载失败:分区块重试,咨询记录与随访计划独立加载互不影响。