his/MD/specs/UI_DESIGN_IRON_RULES.md

HealthLink-HIS UI 设计铁律

文档类型: 设计规范 适用范围: 全项目前端UI设计与交互 版本: v1.0 编制日期: 2026-06-06 最后更新: 2026-06-06

---

一、总则

设计文档必须写清楚：前端页面UI布局、交互效果、前后端调用流程。 没有明确UI设计的模块，禁止直接编码。

设计文档必备要素

每个新模块/页面的设计文档必须包含：

#	要素	说明
1	页面线框图/布局描述	每个区域放什么组件、尺寸比例、栅格布局
2	交互效果清单	每个按钮/操作触发什么效果（弹窗、抽屉、跳转、动画）
3	前后端调用流程	每个用户操作 → 对应API → 参数 → 返回数据 → 前端渲染
4	状态流转图	数据状态变化 → UI如何响应
5	异常/边界处理	空数据、加载中、错误状态的UI表现
6	响应式断点	不同屏幕尺寸下的布局适配方案

---

二、十大UI设计铁律法则

以下法则源自认知心理学、人机交互学、HCI经典理论。 医疗HIS系统因涉及生命安全，全部铁律等级提升为P0。

法则1: 希克定律 (Hick's Law) — 选择越少越好

决策时间 = a + b × log₂(选项数量)

维度	规则	HIS场景
菜单层级	一级菜单 ≤ 7项，二级菜单 ≤ 9项	医生工作站左侧导航
表单字段	单页表单 ≤ 12个字段，超出用分步表单	患者登记、医嘱录入
按钮组	主要操作按钮 ≤ 3个/区域	处方页面：保存/提交/打印
弹窗选项	弹窗内选项 ≤ 5个	确认对话框不超过3个按钮

违反案例: 某页面一次展示20个筛选条件 → 医生找不到关键字段 正确做法: 默认显示5个常用条件，"更多筛选"展开高级选项

法则2: 费茨定律 (Fitts's Law) — 目标要大要近

移动时间 = a + b × log₂(距离/尺寸 + 1)

维度	规则	HIS场景
可点击区域	最小 44×44px（移动端 48×48px）	移动护理PDA场景
主要操作	放在用户视线自然落点（右下/顶部）	保存按钮固定在表单右下
危险操作	与安全操作保持物理距离 ≥ 100px	删除按钮远离保存按钮
快捷入口	高频操作提供快捷键/快捷入口	F2=保存, F3=打印

违反案例: "确认发药"和"取消发药"按钮紧挨着 → 误点 正确做法: 确认按钮绿色大按钮，取消按钮灰色小按钮，间距 ≥ 80px

法则3: 米勒定律 (Miller's Law) — 记忆负荷 ≤ 7±2

短时记忆容量：7 ± 2 个信息块

维度	规则	HIS场景
信息分组	每组 ≤ 7个条目	检验报告分组显示
导航层级	总层级 ≤ 4层	菜单→子菜单→功能→详情
表格列数	默认显示 ≤ 8列，其余可配置	处方列表核心列8个
标签页	Tab标签 ≤ 6个，超出用下拉	患者详情Tab

违反案例: 患者信息页一次展示30个字段 → 医生记不住哪个要改 正确做法: 按"基本信息/病史/过敏/诊断"分组，每组 ≤ 7个字段

法则4: 雅各布定律 (Jakob's Law) — 用户要的是熟悉感

用户把时间花在别的系统上，期望你的系统有一样的操作方式

维度	规则	HIS场景
布局模式	遵循医疗软件行业惯例	左导航+顶部栏+内容区
表格操作	行末操作按钮（编辑/删除/查看）	与主流HIS系统一致
搜索模式	顶部搜索栏+筛选条件+表格	通用管理后台模式
CRUD流程	列表→新增弹窗→编辑弹窗→详情抽屉	标准若依模式

违反案例: 新模块把"新增"放在表格底部 → 用户习惯在顶部找 正确做法: "新增"按钮统一在表格上方左侧

法则5: 格式塔原则 (Gestalt Principles) — 分组要明确

子原则	规则	HIS场景
接近性	相关元素间距 < 不相关元素间距	表单label与input间距8px，字段组间距24px
相似性	同类操作用相同颜色/形状	所有"保存"用蓝色，所有"删除"用红色
连续性	视觉引导线引导阅读流	表单从上到下、从左到右
封闭性	卡片/分组用边框或背景色区分	患者信息分区用卡片包裹
图底关系	内容层 > 背景层，弹窗要有遮罩	Dialog背景半透明遮罩

违反案例: 表单字段间距不一致 → 视觉混乱 正确做法: 统一间距系统：8/12/16/24/32px

法则6: 多赫蒂阈值 (Doherty Threshold) — 响应要快

系统响应 < 400ms 时，用户生产力提升4倍

维度	规则	HIS场景
接口响应	核心接口 ≤ 200ms，普通 ≤ 500ms	挂号、查询必须 ≤ 200ms
加载反馈	等待 > 200ms 显示loading	el-table加载用v-loading
操作反馈	点击后 ≤ 100ms 有视觉响应	按钮点击立即变灰防重复提交
列表分页	默认20条/页，禁止一次加载全部	处方列表分页
骨架屏	首屏加载用Skeleton占位	患者列表页骨架屏

违反案例: 查询接口3秒无响应 → 用户反复点击 正确做法: 200ms内显示loading，超时5s提示"查询超时"

法则7: 尼尔森十大可用性原则 (Nielsen's 10 Heuristics)

#	原则	HIS应用规则
1	系统状态可见	每个操作后显示结果：保存成功✓、提交成功✓、审批中⏳
2	贴近真实世界	使用医疗术语（挂号、处方、医嘱），不用技术术语（CRUD、API）
3	用户控制与自由	每个操作可撤销：提交可撤回、删除有确认、编辑可取消
4	一致性和标准	全系统统一：按钮颜色、弹窗样式、表格样式、表单校验
5	防错优先	危险操作二次确认；必填字段标红*；格式校验实时提示
6	识别而非记忆	下拉选择 > 手动输入；最近使用列表；搜索联想
7	灵活高效	快捷键；批量操作；常用模板；收藏功能
8	简洁美观	去掉无关信息；留白适度；视觉层次清晰
9	容错帮助	错误信息说人话："身份证号格式错误"而非"Invalid input"
10	帮助文档	复杂功能提供操作引导；Help Tooltip

违反案例: 删除后无提示 → 用户不确定是否成功 正确做法: 删除后 ElMessage.success('删除成功') 并刷新列表

法则8: 泰斯勒定律 (Tesler's Law) — 复杂性守恒

每个系统都有不可消除的复杂性，必须 somewhere 被处理

维度	规则	HIS场景
简单前端复杂后端	用户操作尽量简单，复杂逻辑放后端	医保结算：用户点"结算"，后端算所有费用
智能默认值	80%场景用默认值，减少用户输入	科室默认当前科室，药品默认常用规格
渐进式披露	先展示核心信息，高级选项折叠	医嘱默认常用，"更多选项"展开完整
自动化	能自动填充的不手动输入	选择患者自动填充病历号、性别、年龄

违反案例: 开医嘱要手动输入药品剂量、频次、途径 → 复杂 正确做法: 提供"常用医嘱模板"，一键套用，仅需微调

法则9: 峰终定律 (Peak-End Rule) — 关键时刻要做好

用户记住的是体验的峰值和结束时刻

维度	规则	HIS场景
操作峰值	关键操作给正向反馈	挂号成功→大✓动画+患者信息卡
结束体验	流程结束给明确结果	收费完成→打印凭条+成功提示
错误峰值	错误也要优雅处理	校验失败→精确定位错误字段+红色高亮
批量操作	批量完成后给统计	"成功导入58条，失败2条"

违反案例: 批量导入完成后无提示 → 用户不知道是否成功 正确做法: 弹出结果面板："✓ 成功58条 / ✗ 失败2条（点击查看）"

法则10: 冯·雷斯托夫效应 (Von Restorff Effect) — 隔离记忆

在相似事物中，与众不同的那个更容易被记住

维度	规则	HIS场景
紧急标记	危急值用红色醒目样式	危急值报告→红色闪烁标签
当前选中	选中项明显高亮	菜单选中项蓝色背景+左侧条
重要操作	主要按钮用强调色	"提交处方"蓝色实心，"取消"灰色描边
通知徽标	未读消息用Badge	右上角铃铛红点+数字

违反案例: 危急值和普通信息用同一颜色 → 医生忽略 正确做法: 危急值红色脉冲动画 + 声音提醒

---

三、HIS医疗系统专项UI规范

3.1 色彩体系

用途	颜色	HEX	说明
主色	医疗蓝	#1890ff	品牌色、主要按钮
成功	安全绿	#52c41a	操作成功、正常状态
警告	警示橙	#faad14	注意、待处理
危险	危急红	#ff4d4f	危急值、删除、错误
信息	信息灰	#909399	辅助信息、次要文本
背景	浅灰	#f5f7fa	页面背景
卡片	白色	#ffffff	卡片/弹窗背景

状态色标准:

待诊 → #909399(灰)   已诊 → #1890ff(蓝)   
已收费 → #52c41a(绿)  已发药 → #722ed1(紫)
危急 → #ff4d4f(红脉冲) 已完成 → #b7eb8f(浅绿)

3.2 间距系统 (8px基准)

Token	值	用途
xs	4px	图标与文字间距
sm	8px	表单项内间距、紧凑行距
md	12px	表单项之间间距
lg	16px	卡片内边距、区块间距
xl	24px	区域分隔
xxl	32px	页面级边距

3.3 字体规范

场景	字号	字重	说明
页面标题	20px	600	h1
区块标题	16px	600	h2
正文	14px	400	默认
辅助文字	12px	400	说明、提示
数据突出	24px	700	统计数字、金额
危急值	16px	700	红色加粗

3.4 表格设计规范

规则	说明
列数	默认 ≤ 8列，超出用横向滚动或配置列
行高	48px（紧凑40px，宽松56px）
操作列	固定右侧，宽度 ≥ 160px
排序	默认按时间倒序，支持点击列头排序
分页	20条/页，可切换10/20/50/100
空状态	无数据时显示空状态插画+文字"暂无数据"
加载	v-loading指令，骨架屏或旋转图标
斑马纹	奇偶行交替背景色 #fafafa

3.5 表单设计规范

规则	说明
布局	简单表单用inline，复杂用labelWidth=120px
必填标记	红色 * 号在label前
校验时机	blur时校验（非实时），提交时全量校验
错误提示	字段下方红色文字，与字段左对齐
按钮位置	表单底部右侧，主按钮在右
禁用态	禁用字段灰底+灰字+禁止光标
加载态	提交按钮loading态，防重复提交

3.6 弹窗/抽屉规范

类型	适用场景	规则
Dialog	简单表单（≤6字段）	宽度400-600px，标题+内容+底部按钮
Drawer	复杂表单/详情查看	宽度60%，右侧滑入，含关闭按钮
Modal	确认操作	标题+内容+确认/取消，危险操作红色确认
Fullscreen	大表单/复杂编辑	全屏，顶栏标题+关闭，底部操作栏

3.7 交互反馈规范

操作	反馈方式	示例
保存成功	ElMessage.success	"保存成功"
保存失败	ElMessage.error	"保存失败：XXX原因"
删除确认	ElMessageBox.confirm	"确定要删除该记录吗？"
表单校验	字段下方红色文字	"请输入患者姓名"
加载中	v-loading	旋转图标覆盖表格
空数据	空状态组件	插画+"暂无挂号记录"
网络错误	ElMessage.error	"网络异常，请重试"
无权限	ElMessage.warning	"您没有该操作权限"

3.8 医疗HIS特殊交互

场景	交互要求
危急值	红色脉冲动画 + 弹窗强制确认 + 声音提醒 + 操作记录
医嘱审核	双人审核弹窗，审核人签章，不可撤销提示
处方开具	药品搜索联想 + 剂量自动计算 + 相互作用预警弹窗
费用结算	费用明细折叠/展开 + 医保/自费分类 + 打印预览
患者搜索	模糊搜索+拼音首字母+身份证号+病历号 多维度
电子签名	手写板签名+密码验证 双重认证
打印功能	套打对齐微调 + 批量打印 + 预览
权限控制	按钮级权限 v-hasPermi + 数据权限过滤

---

四、设计文档模板

每个新模块必须按此模板编写设计文档

# 模块名 设计文档

## 1. 页面列表
| 页面 | 路由 | 类型 | 说明 |
|------|------|------|------|
| 列表页 | /module/list | 管理页 | ... |
| 新增弹窗 | - | Dialog | ... |

## 2. 页面布局设计
### 2.1 列表页

┌─────────────────────────────────┐ │ 搜索区 [关键词] [筛选] [搜索] │ ├─────────────────────────────────┤ │ 操作区 [+新增] [导出] [批量删除] │ ├─────────────────────────────────┤ │ 数据表格 (el-table) │ │ 列1 | 列2 | 列3 | ... | 操作 │ ├─────────────────────────────────┤ │ 分页 [1] [2] [3] ... │ └─────────────────────────────────┘

## 3. 交互效果清单
| 操作 | 触发方式 | 效果 | 反馈 |
|------|---------|------|------|
| 点击"新增" | 按钮click | 打开Dialog | - |
| 点击"保存" | 按钮click | 提交API→关闭Dialog→刷新列表 | success消息 |
| 点击"删除" | 按钮click | 二次确认弹窗→调用API→刷新 | success消息 |
| 表单校验 | blur/submit | 字段下方提示 | error文字 |

## 4. 前后端调用流程
### 4.1 查询列表

用户操作: 页面加载/点击搜索 → 前端: GET /api/v1/module/list?pageNum=1&pageSize=20&keyword=xxx → 后端: Controller.list() → AppService.query() → Service.page() → 返回: {code:200, data:{rows:[...], total:100}} → 前端: el-table渲染 rows，pagination渲染 total

### 4.2 新增记录

用户操作: 点击"新增"→填写表单→点击"保存" → 前端: POST /api/v1/module {field1, field2, ...} → 后端: Controller.add() → AppService.create() → Service.save() → 返回: {code:200, msg:"操作成功"} → 前端: ElMessage.success → 关闭Dialog → getList()

## 5. 状态流转
| 状态 | 值 | 下一状态 | 触发条件 |
|------|-----|---------|---------|
| 草稿 | 0 | 已提交 | 用户点击提交 |
| 已提交 | 1 | 已审核 | 审核人点击审核 |

## 6. 异常处理
| 场景 | UI表现 |
|------|--------|
| 网络断开 | ElMessage.error("网络异常") |
| 数据为空 | 空状态插画+"暂无数据" |
| 权限不足 | 按钮隐藏/v-if控制 |
| 加载中 | v-loading覆盖 |

---

五、违反检查清单

代码审查时对照此清单逐项检查

□ 页面布局是否遵循左导航+顶部栏+内容区？
□ 每页功能按钮是否 ≤ 3个主要操作？
□ 表单字段是否 ≤ 12个？超出是否分步/折叠？
□ 可点击区域是否 ≥ 44px？
□ 危险操作是否与安全操作保持距离？
□ 加载等待是否显示loading？
□ 操作成功/失败是否有明确反馈？
□ 删除操作是否有二次确认？
□ 表格是否分页？是否默认20条？
□ 空数据是否有空状态提示？
□ 色彩是否符合色彩体系？
□ 间距是否使用8px基准系统？
□ 字体是否符合字体规范？
□ 弹窗类型选择是否合理？
□ 表单校验是否blur触发？
□ 医疗特殊交互（危急值/医嘱等）是否按规范实现？
□ 设计文档是否包含：UI布局+交互清单+调用流程？

---

六、参考文献

来源	内容
Hick (1952)	Hick's Law — 选择反应时间
Fitts (1954)	Fitts's Law — 运动时间与目标尺寸
Miller (1956)	Miller's Law — 7±2信息块
Jakob Nielsen	10 Usability Heuristics
Gestalt Psychology	接近性/相似性/连续性/封闭性/图底
Doherty & Thadhani (1982)	400ms响应阈值
Larry Tesler	复杂性守恒定律
Kahneman	峰终定律
Hedwig von Restorff	隔离效应
ISO 9241-210	以人为中心的交互系统设计
GB/T 33758-2017	人机交互系统人机界面设计原则
WS/T 500-2017	电子病历共享文档规范

---

⚠️ 本文件是UI设计铁律的唯一信源。所有前端模块设计文档必须遵守本规范。