本文档定义了 DeepMDT 产品的整体设计语言与视觉风格,确保产品在不同模块与迭代过程中保持高度的一致性、可用性与专业性。规范采用 Ant Design Mastergo 的设计原则。
1. 设计原则
- 清晰直观 (Clarity): 界面元素、信息层级和交互流程必须清晰易懂,让用户能够毫不费力地理解和操作。避免使用模糊不清的图标或文案。
- 高效专业 (Efficiency & Professionalism): 设计应服务于临床医生的工作流,通过优化的布局、组件和交互,帮助用户快速完成任务。视觉风格应体现医疗产品的严谨与可信赖感。
- 一致统一 (Consistency): 所有的颜色、字体、间距、组件样式和交互反馈在整个应用中必须保持一致。
- 反馈及时 (Feedback): 用户的任何操作都应得到及时、明确的系统反馈(如加载状态、成功提示、错误警告),建立用户对系统的信任感。
2. 色彩规范
色彩体系用于传达信息、品牌以及界面状态。
- 主色 (Primary Color):
#024717 (品牌绿): 用于关键操作按钮、导航选中状态、重要链接和高亮提示。代表专业、严谨与生命力。
- 功能色 (Functional Colors):
- 成功 (Success):
#036325 - 用于操作成功的提示,也是主按钮的悬浮色。
- 警告 (Warning):
#FAAD14 - 用于需要用户注意的提示。
- 危险/错误 (Error):
#D93026 - 用于操作失败、错误字段高亮等场景。
- 中性色 (Neutral Colors):
- 标题/正文:
#1A1A1A - 用于主要文字内容。
- 次要文字:
#666666 - 用于辅助性、次要级别的信息。
- 禁用状态:
#A3A3A3 - 用于不可用元素的文字或图标。
- 边框/分割线:
#DDDDDD - 用于卡片、输入框的边框和内容分割线。
- 背景色:
#F7F8FA - 用于页面或卡片的背景。
3. 字体规范
- 字体家族:
- 中文:
PingFang SC (macOS), Microsoft YaHei (Windows)
- 英文/数字:
Helvetica Neue, Helvetica, Arial, sans-serif
- 字号体系:
- 主标题 (H1): 24px - 用于页面大标题。
- 次标题 (H2): 20px - 用于模块标题。
- 小标题 (H3): 16px - 用于卡片或分组标题。
- 正文 (Body): 14px - 用于大多数文本内容。
- 辅助文字 (Caption): 12px - 用于次要信息、注释等。
- 行高: 统一为
1.5,确保文本的可读性。
4. 布局与间距
- 布局: 页面内容区域采用栅格系统进行布局,以保证对齐和秩序感。
- 基础间距单位:
8px。
- 小型间距 (XS): 4px (紧凑元素间)
- 常规间距 (S): 8px (图标与文字、标签内部)
- 中等间距 (M): 16px (组件之间、卡片内边距)
- 大型间距 (L): 24px (模块之间)
- 超大型间距 (XL): 32px (页面主内容区边距)
5. 图标规范
- 风格: 采用线性、简洁的图标风格,保持一致的线条粗细 (通常为 1.5px)。