医疗产品视觉元素生成器

视觉设计总览

定位：面向老年人的健康管理平台，视觉基调“专业可信、亲和易懂、安心不紧张”。
核心策略：高可读性（大字高对比）、低认知负担（少层级、清晰引导）、高可操作性（大触达、强反馈）、风险可感知（状态色+形状+文字三重提示）。
关键元素：

• 宁静医疗蓝为主色，搭配柔和中性色与温和绿，建立专业且不压迫的氛围
• 图标简洁写实、标签常显，避免隐喻和易误解符号
• 单列/卡片式布局，信息层级清晰，核心任务优先（用药、体征、预约）
• 适老化交互：48px+点击热区、18–20sp正文字号、强对比度与清晰焦点态

色彩方案

• 主色调（Primary）

  • 颜色：医疗蓝 #2F80C9（深色变体 #1F5C8E；浅色背景 #E6F2FB）
  • 理由：蓝色在医疗场景中传达专业、可靠与平静，适合长期阅读与数据呈现
  • 使用：顶部导航、主按钮、选中态、信息提示、链接

• 辅助色（Secondary/Neutrals）

  • 关怀绿 #2E9E6F（浅 #E6F6F0）：用于健康/达标状态、积极反馈
  • 中性灰阶：
    • 背景 #FAFBFD；卡片 #FFFFFF；分隔/描边 #E4E7EC
    • 主要文字 #243243；次要文字 #4B5563；禁用 #9CA3AF
  • 比例建议：中性背景与留白 50–60%；主色元素 15–20%；辅助绿 10–15%；其他功能色合计 10–15%

• 功能色（状态/互动）

  • 信息 Info：#2F80C9（文字/图标）；浅底 #E6F2FB
  • 成功 Success：#2E9E6F；浅底 #E6F6F0
  • 警示 Warning：#B7791F；浅底 #FFF7E6
  • 危急 Danger：#B72C2C；浅底 #FDEEEE
  • 禁用/占位：#9CA3AF
  • 互动态规范：
    • Hover：在原色基础上加深10%
    • Pressed：加深20%
    • Focus：可见描边 2px #0B5DA8，内阴影提升对比
  • 无障碍对比：主文与背景对比≥7:1；关键按钮与背景≥4.5:1；状态色配套文字对比≥4.5:1

图标系统

• 通用规范

  • 风格：线性+少量实心填充，圆角2px，笔画2px
  • 最小尺寸：列表/按钮24px；底部导航32px；重要操作40px
  • 一律配文字标签（12–14sp），避免仅凭图形传意
  • 禁用示例：红十字标志（专用受保护）、模糊的解剖图或易引发误解的拟物符号

• 功能图标（示例与语义）

  • 首页：home-线框房屋
  • 体征：vitals-心电波形/心形内含波形（避免纯心形装饰）
  • 用药：pill-药片+药瓶组合
  • 预约：calendar-日历+时钟
  • 报告：report-文档+勾
  • 健康课堂：book-打开书本
  • 消息/随访：message-对话气泡
  • 设置：gear-齿轮
  • 紧急求助：sos-实心圆按钮内“SOS”（避免使用红十字）
  • 家属/医生协作：people-两人轮廓

• 状态图标（颜色+形状双编码）

  • 成功：圆形内勾（绿）
  • 警示：三角叹号（琥珀）
  • 危急：实心圆内“！”或方形内“×”（红）
  • 信息：圆形“i”（蓝）
  • 同步中：旋转箭头；离线：云/无线断开
  • 注意均附文字：如“已完成/需尽快/紧急/查看说明/离线”

• 导航图标

  • 底部导航（移动端5项内）：首页 / 体征 / 用药 / 预约 / 我的
  • 面包屑（桌面端）：清晰路径，避免深层级

布局规范

• 界面结构

  • 移动端：单列卡片式；关键任务置顶：今日任务（用药/预约）> 体征概览 > 消息 > 健康课堂
  • 平板/桌面：左侧固定导航，右侧内容区；12列网格（80/24间距），卡片宽度≥320px
  • 网格与间距：8pt体系；卡片内边距16–20px；区块间距24–32px

• 信息层次

  • 层级顺序：标题（20–24sp，粗体）> 关键数据（18–22sp）> 正文（18–20sp）> 说明（16–18sp，次要色）
  • 体征卡片：当前值（大字）+ 简短结论（如“稳定”）+ 趋势小图（粗线条、对比高）+ 范围带（淡色区间）
  • 状态呈现：颜色+形状+文案三一致；例如“血压偏高（警示）请休息后复测”

• 交互区域

  • 点击目标≥48×48px；按钮高度≥44px；列表行高≥56px
  • 主按钮：实心主色；次按钮：描边/浅底；危险操作：红色描边+二次确认
  • 表单：单列、分步引导；输入字号≥18sp；错误就地提示（红色+说明文字+聚焦引导）
  • 日期/时间：优先24小时制；大字号滚轮/分段选择；避免复杂日历操作
  • 图表：线宽2–3px；标注关键点；可切表格视图；支持放大查看
  • 可达性：键盘/遥控焦点可见；语音辅助入口明显；字号放大至200%不破版
  • 紧急求助：固定在底部导航中央或悬浮角标（红色但需二次确认+长按），防误触

应用建议

• 设计落地

  • 建立Design Token体系（颜色、字号、半径、阴影、间距、状态）与组件库（卡片、任务条、用药条、体征卡、状态条、步骤条）
  • 字体建议：中文无衬线（如苹方/思源黑体），默认18–20sp；行高1.5–1.7；段落最长行宽约28–34字
  • 文案风格：短句、具体可执行；避免医学术语堆砌，必要时附“了解更多”

• 关键场景规范

  • 今日任务：卡片以“用药提醒”为首；按钮“已服用”主色实心；错过提醒显示“补记”次按钮
  • 体征录入：一步一项，默认选常用设备；支持语音录入和拍照识别（需人工确认）
  • 异常引导：警示卡（琥珀）给出简单步骤；危急卡（红）提供“联系家属/医生/急救”三选项
  • 预约：卡片展示日期+科室+地点+导航；提供放大二维码与打印友好版
  • 家属协作：清晰区分本人与家属账号颜色边框；操作日志可回溯

• 无障碍与适老化

  • 对比度与触达符合WCAG 2.2 AA（文本≥4.5:1，建议主要信息≥7:1）
  • 提供“长辈模式”：更大字号、更高对比、动效减弱、语音播报开关
  • 色盲友好：状态不只靠颜色，配合形状与文字；红绿不互为唯一对立

• 合规与伦理

  • 避免使用受保护的医疗标志（如红十字）；使用通用“SOS”或蓝/绿医疗十字变体
  • 敏感数据默认遮挡，显式查看；重要操作二次确认
  • 与医疗团队确认体征阈值文案与建议，避免产生医疗误导

• 测试与迭代

  • 进行老年用户可用性测试：任务完成率、误触率、阅读时长
  • 设备适配：中低端机型性能与弱网策略（简化动效、缓存与离线提示）
  • 监测数据可读性：在实际环境（强光/弱光）下验证对比度与字号可读

该方案在保证专业可信的前提下，通过高可读性与低认知负担的视觉策略，提升老年用户在健康管理平台中的使用效率与安全感。

视觉设计总览

以“温馨舒适、专业可信”为核心理念，为儿童康复辅助设备构建柔和、安心的视觉系统。整体采用柔和的冷暖配色、圆角与亲和的几何形态，配合直观、语义明确的图标与层次分明的布局。交互过程强调“可预期、低负担、易理解”，在儿童主视角与家长/治疗师视角之间建立清晰的区隔，确保安全与操作便利。

色彩方案

• 主色调：
  • 柔和青绿（#56C0B9）：传达干净、可信与平静感，适用于主按钮、页头、关键进度组件。青绿在医疗场景中具备专业感，同时对儿童较为友好。
• 辅助色：
  • 温暖蜜桃（#F6A77A）：用于次级按钮、鼓励性提示、奖励组件，增加亲切与动力。
  • 细腻雾紫（#B7A6E9）：用于背景分区、标签或次要信息，提供温柔的视觉平衡。
  • 中性灰阶：背景与文字
    • 背景浅灰（#F5F7FA）
    • 次级文本灰（#8A95A6）
    • 线框/禁用灰（#C9D1D9）
  • 品牌深色（#1F3A56）：标题与高对比文字，保障可读性。
• 色彩比例：
  • 60%中性背景灰 + 25%主色青绿 + 10%辅助暖色（蜜桃/雾紫） + 5%品牌深色与功能色点缀。
• 功能色（仅用于状态或反馈，避免大面积使用以免造成紧张）：
  • 成功/完成：绿色（#34C759）
  • 信息/引导：蓝色（#3A7BD5）
  • 警告/注意：琥珀（#FFA929）
  • 错误/危险：红色（#E53935）
  • 交互链接：蓝（#1E88E5）
  • 禁用/不可用：灰（#C9D1D9）
• 交互状态（按钮为例）：
  • 默认：主色（#56C0B9）+ 白字
  • 悬停/聚焦：主色加深（#48ACA6）
  • 按压：主色再加深（#3E9792）
  • 禁用：填充#C9D1D9 + 文本#FFFFFF（对比仍需≥4.5:1）

图标系统

• 统一规范：
  • 风格：圆角线性图标，2px描边，角半径4px，避免尖锐形状；必要时提供填充版用于主操作。
  • 网格：24px/48px双规格，保证点击区域≥48px。
  • 语义标准：使用通用语义，不使用可能引发误解的医疗符号（如红十字）；以“勾/感叹号/锁/电池”等标准符号表达状态。
• 功能图标（示例）：
  • 训练计划：日历 + 勾
  • 动作训练：简化小人运动姿态（避免复杂解剖细节）
  • 强度调节：刻度盘/滑杆
  • 设备连接：蓝牙标识 + 波形（安全连接可叠加小锁）
  • 家长/治疗师模式：盾牌 + 心形/人物
  • 远程指导：摄像机 + 对话气泡（避免使用听诊器直指诊疗）
  • 奖励/奖励贴纸：奖章/星星
• 状态图标：
  • 电量：电池（空/半/满）
  • 连接：信号波/蓝牙（已连接/断开）
  • 安全锁定：锁/解锁
  • 正常/完成：勾圈绿
  • 注意：三角叹号琥珀（符合一般警示习惯）
  • 错误：叉圈红（避免红十字）
  • 进行中：旋转/沙漏
• 导航图标：
  • 首页：小屋
  • 训练：脚印/简化哑铃（更偏儿童的脚印更柔和）
  • 进度：柱状/进度环
  • 提醒：铃铛
  • 设置：齿轮
  • 帮助：问号圈

布局规范

• 界面结构：
  • 顶部状态栏：设备连接、电量、安全锁状态；采用中性灰背景，图标+标签明确呈现。
  • 主功能区（卡片式）：单任务优先，突出“一键开始训练”“当前步骤”与“下一步预览”；使用主色强调当前任务卡片。
  • 底部导航：5项以内，图标+文字标签，适合儿童与家长的共同使用。
  • 家长/治疗师切换：右上角清晰模式切换（盾牌图标），进入后提供更全面设置（强度、时长、历史数据）。
• 信息层次：
  • 标题（H1）：22–24pt，深色#1F3A56
  • 小标题（H2）：18–20pt，主色或深色
  • 正文：16pt，#1F3A56 或 #8A95A6（次级）
  • 说明/提示：13–14pt，搭配辅助色背景条提升可读性
  • 字体推荐：思源黑体/思源柔黑或 Noto Sans SC（简洁、清晰、适合儿童阅读）
• 交互区域：
  • 触控最小尺寸≥48×48px；儿童主操作建议≥56×56px
  • 关键操作距离屏幕边缘≥16px安全区，采用8pt间距系统
  • 训练流程采用“分步卡片 + 进度环”结构，每步配图（简化形态）+一句话指令 + 演示动画（低速、柔和）
  • 反馈设计：操作后300–600ms内给予视觉与轻微动效反馈（缩放/淡入），避免强闪烁
  • 不依赖颜色的识别：所有状态均辅以图标与文本标签，颜色仅为辅助
• 专项页面（示例）：
  • 训练首页：顶部状态栏 + 今日训练卡（主色）+ 奖励进度（星星轨迹）+ 下一次训练时间（日历条）
  • 训练进行：居中大进度环（主色）+ 当前动作卡（图示+要点）+ 大按钮（开始/暂停）+ 底部“感觉不适”快速反馈（铃铛/帮助）
  • 家长设置：卡片列出强度、时长、提醒、连接；每项提供滑杆/步进器，警告/错误信息以辅助色条突出

应用建议

• 可用性与安全：
  • 对比度遵循WCAG 2.2 AA（正文与背景≥4.5:1，图标与背景≥3:1）
  • 避免使用红十字等易引医误的符号；错误状态用叉圈，警示用黄三角
  • 训练指引采用简单语言与图示，必要时提供语音提示；支持本地化与简体中文优先
  • 提供“立即求助”显著入口（帮助/铃铛），点击后给出联系渠道或远程指导入口
• 插画与动效：
  • 形象采用柔和几何与自然元素（云、叶、星），避免写实医疗场景与锐利器械形态
  • 动效节奏缓和（150–250ms），过渡不闪烁；奖励时使用轻微粒子/星光，避免强刺激
• 设计系统落地：
  • 建立设计令牌（颜色、字号、圆角、阴影、间距）：
    • 圆角：按钮8–12px、卡片12–16px
    • 阴影：微弱扩散（透明黑 10–15%），仅用于浮层与重点卡片
  • 图标库维护24px/48px双规格，线性与填充双态一致命名（如 icon/lock/line, icon/lock/filled）
  • 组件级规范：主按钮、次按钮、卡片、进度环、滑杆、步进器、警示条、标签、导航
• 专业与合规：
  • 人机工程与可用性：遵循IEC 62366-1（医疗产品可用性工程）
  • 标签与符号参考：ISO 15223-1（医疗器械符号）、避免未经验证符号
  • 设备标识与安全信息参考：IEC 60601-1（电气安全）相关标签呈现清晰、可读
  • 隐私与儿童保护：遵守当地未成年人信息保护法规；家长模式必须有身份验证与权限控制
• 测试与优化：
  • 与儿童及家长进行可用性测试（任务完成率、错误率、主观舒适度）
  • 进行色盲模拟测试（Deuteranopia/Protanopia/Tritanopia），确保非色彩依赖
  • 低光与强光环境下的可读性校验，必要时提供“高对比模式”

此方案在保持医疗专业与安全的前提下，以温柔的色彩与亲和的形态降低儿童焦虑，以清晰的语义与层次强化家长/治疗师的操作信心，适用于康复辅助设备的界面、配套移动端应用与印刷指导材料的统一视觉设计。