| # 女性生育决策实验室 UI 设计方案,请根据以下要求进行网站的制作 ## 基本信息 - **项目名称**：育见·视界——女性生育决策实验室) - **界面比例**：1920×1080（支持响应式设计） - **主色调**：粉色（HEX：#E51E86） - **设计风格**：扁平化风格与矢量图组合 ## 页面流程 用户体验流程 ：角色选择页 → 参数设置页 → 情景选择页 → 模拟决策页 ## 页面详细设计 ### 1. 角色选择页 - **页面标题**：左上角显示"育见·视界——女性生育决策实验室" - **主要内容**： - 中央区域展示六个角色卡片（并排排列） - 每个角色代表不同的人口统计特征组合（选中后后面页面会自动填充上预设参数）： - 角色1：高教育、高收入、已婚专业人士 - 角色2：中等教育、中等收入、已婚职员 - 角色3：高教育、中等收入、单身专业人士 - 角色4：低教育、低收入、已婚工人 - 角色5：高教育、高收入、单身创业者 - 角色6：中等教育、低收入、单亲家长 - 角色7：自定义 - 每个角色卡片显示基本属性预览（年龄、职业、婚姻状况） - 每个角色使用矢量图表示，图像反映其社会经济地位 - 角色卡片悬停时有呼吸灯效果和属性详情弹出 - **操作按钮**： - 右下角设置"点击进入"按钮 - 左下角设置"随机角色"选项（自动生成随机属性组合） ### 2. 参数设置页 - **页面标题**：左上角显示"参数设置" - **页面布局**： - 左侧：装饰元素区域（与生育决策相关的图形元素） - 中央：参数设置区域（分类标签式布局） - 右侧：人物卡牌预览区（实时反映参数变化） - **参数设置区**： - 标题：参数设置 - 分类标签： 1. **基本人口统计**（蓝色标签） - 年龄（滑块控件，20-45岁，影响生物钟和生育能力） - 教育水平（下拉菜单：高中/职校/本科/硕士/博士，影响职业发展机会） - 收入水平（滑块控件，分5个等级，财务稳定性评估） - 婚姻状况（单选按钮：单身/恋爱中/已婚/离异，伴侣可用性） 2. **生育偏好**（粉紫色标签） - 生育意愿（滑块控件，1-10级，基础动机强度） - 最大期望子女数（数字选择器，0-3+，家庭规模上限） - 职业与家庭优先级（双向滑块，左侧职业-右侧家庭，资源分配偏好） 3. **环境因素**（绿色标签） - 医疗保健可及性（评级控件，1-5星，医疗资源质量） - 社会压力水平（滑块控件，低-中-高，来自家庭和社会的期望） - 伴侣支持水平（滑块控件，低-中-高，伴侣参与度） 4. **决策参数**（橙色标签） - 规划周期（月份选择器，6-60个月，时间框架） - 重新评估频率（下拉菜单：月度/季度/半年/年度，决策调整间隔） - 财务稳定阈值（滑块控件，低-中-高，经济条件触发点） - 每个参数配备： - 描述提示（悬停显示影响说明） - 默认值（基于人口平均值） - 参数重置按钮（恢复默认值） - **人物卡牌**： - 上方显示人物肖像（根据选择的参数动态变化） - 中部显示关键属性（年龄、教育、职业、婚姻状况） - 下部显示生育相关指标： - 生育意愿指数（带颜色指示） - 职业-家庭平衡倾向 - 主要影响因素标签 - 卡片边缘颜色反映生育意愿强度 - **操作按钮**： - 右下角"继续"按钮：保存设置并进入情景选择页 - 左下角"返回"按钮：返回角色选择页 - 中下方"随机参数"按钮：生成随机参数组合 ### 3. 情景选择页 - **页面标题**：左上角显示"模拟决策" - **主要内容**： - 中央区域展示三张扑克牌式卡片，每张卡片代表不同类型的生活事件 - 卡片类别与内容示例： 1. **职业转折点**（影响职业与家庭优先级） - "产后回归晋升机会"（测试职业发展与育儿平衡） - "海外工作机会"（测试地理迁移对生育决策的影响） - "创业机会"（测试职业风险与生育计划的关系） 2. **健康因素**（影响医疗保健可及性和生育能力） - "幼儿急诊与工作冲突"（测试医疗资源获取） - "生育健康问题"（测试医疗条件对决策的影响） - "家族遗传疾病风险"（测试健康风险评估） 3. **经济环境**（影响财务稳定阈值） - "房贷利率上涨冲击"（测试经济压力） - "育儿补贴政策变化"（测试政策支持） - "家庭收入波动"（测试财务不确定性） 4. **社会关系**（影响社会压力和伴侣支持） - "家庭生育期望"（测试社会压力应对） - "伴侣育儿分工变化"（测试伴侣支持水平） - "社区育儿资源"（测试社会支持网络） - **交互功能**： - 左侧卡牌库：可滑动浏览不同类别的事件卡牌 - 中央区域：已选择的事件卡牌（最多5张） - 右侧显示队列状态：如"3/5"（当前选择/最大可选） - 每张卡牌可点击查看详情，显示该事件对各项参数的影响 - 卡牌组合建议：系统根据已选角色特征推荐合适的事件组合 - **操作按钮**： - 右下角"继续"按钮：确认选择并进入决策页 - 左下角"随机事件"按钮：自动生成随机事件组合 ### 4. 模拟决策页 - **页面标题**：左上角显示"决策模拟" - **页面布局**： - 左侧：角色与情景概览区域 - 显示已选角色的关键属性（年龄、教育、收入、婚姻状况） - 显示已选情景事件的简要描述 - 显示当前生育意愿指数和影响因素 - 中央：决策选项区域 - 右侧：决策影响预览区域（选择决策后显示） - **决策选项**： - 六张卡片分别展示不同生育决策选项 - 选项示例： - "立即生育"（测试高生育意愿和紧迫感） - "一年内生育"（测试短期规划和准备） - "三年内生育"（测试中期规划和职业平衡） - "五年后再考虑"（测试长期规划和职业优先） - "冻卵/精保留选择权"（测试技术辅助生育意愿） - "选择不生育"（测试丁克倾向和原因） - 每个选项卡片包含： - 决策名称和图标 - 简短描述 - 该决策对应的生育意愿强度指示 - **决策影响预览**： - 选择决策后，右侧面板显示该决策的潜在影响： - 职业发展轨迹影响 - 经济状况变化预测 - 健康因素考量 - 社会关系变化 - 幸福感指数预测 - 影响以图表和文字说明结合展示 - **操作按钮**： - 右下角"查看详细报告"按钮：生成完整决策分析报告 - 左下角"重新选择情景"按钮：返回情景选择页 - 中下方"保存决策"按钮：保存当前决策结果 - **额外功能**： - "决策比较"选项：可同时选择两个决策进行对比分析 - "敏感性分析"：调整某个参数查看决策变化趋势 ## 视觉与交互设计 ### 背景设计 - 简洁背景中融入与生育决策相关的矢量图形元素 - 背景元素添加简单位移动画，增强视觉层次感 - 不同页面使用相同的设计语言但有细微变化，反映决策流程的进展 ### 色彩方案 - **主色调**：粉色（HEX：#E51E86）作为品牌标识色 - **辅助色系**： - 基本人口统计参数：蓝色系（#3498DB） - 生育偏好参数：粉紫色系（#9B59B6） - 环境因素参数：绿色系（#2ECC71） - 决策参数：橙色系（#E67E22） - **功能色彩**： - 高生育意愿：深粉色（#FF1493） - 中等生育意愿：淡紫色（#DA70D6） - 低生育意愿：淡蓝色（#87CEFA） - 警告/风险：红色（#E74C3C） - 积极/机会：绿色（#27AE60） ### 动效方案 1. **卡牌效果**： - 悬浮时呈现3D翻转效果（CSS transform） - 卡片选择时有轻微放大和高亮效果 - 参数调整时卡片属性平滑过渡变化 2. **装饰元素**： - 使用SVG制作流动线条（如DNA双螺旋变形） - 背景元素随参数变化微妙变化（如生育意愿增加时，背景元素变得更活跃） 3. **转场动画**： - 页面切换使用300ms的滑动过渡效果 - 决策流程前进时向右滑动，后退时向左滑动 - 参数变化时使用平滑过渡效果 4. **反馈动效**： - 参数调整时提供即时视觉反馈 - 决策选择时提供确认动画 - 数据加载时使用优雅的加载动画 ### 交互设计 1. **输入控件**： - 滑块控件：用于连续值（如年龄、收入、生育意愿） - 下拉菜单：用于分类选择（如教育水平、职业类型） - 单选/多选按钮：用于二元或多项选择（如婚姻状况） - 数字选择器：用于精确数值输入（如子女数量） 2. **信息展示**： - 悬停提示：解释各参数对决策的影响 - 实时预览：参数变化即时反映在角色卡片上 - 数据可视化：使用图表展示决策影响和参数关系 3. **辅助功能**： - 参数重置按钮：快速恢复默认设置 - 随机生成功能：自动创建随机参数组合 - 保存/加载功能：保存当前设置或加载预设方案 ### 页面设计风格选择 - 设计风格参考扁平化风格与矢量图组合 ### 响应式设计 - 确保在不同设备上保持良好的用户体验 - 关键元素在各种屏幕尺寸下保持可见性和可用性 - 移动设备上优化触摸交互和垂直滚动布局 - 桌面版提供更丰富的并排信息展示 - 平板设备提供混合体验，根据方向自动调整布局 |