第 01 课★☆☆
快速上手：做出你的第一张会动的画面
注册登录 → 新建项目 → 拖素材 → 连一根管 → 叠一个动效 → 演示 → 导出。
新建项目拖素材连管动效导出
约 5 分钟 · 视频陆续上线在 Savior 里打开
课程路线 · 4 篇 7 课从第一张画面，
从第一张画面，
到送进触摸屏。
每节 5–7 分钟，跟着做一遍就会。视频陆续上线（关注视频号 / 抖音「拯救HMI」），每课都可以直接在 Savior 里打开对应的模块边看边练。
入
入门篇先跑通一遍
核
核心篇日常最常用
第 02 课★★☆
找得到、拖得准：素材库与素材中心
中文 / 拼音搜、多维筛选、同物异风格切换、一键落画面、收藏。
素材搜索风格切换收藏
约 6 分钟 · 视频陆续上线在 Savior 里打开
第 03 课★★☆
像 CAD 一样连管：管道 · 介质 · 接口
自动连管、手绘管道、按顺序连管；多种管体风格与介质配色，跨桥交叉，管上加阀门仪表。
自动连管介质配色阀门仪表
约 6 分钟 · 视频陆续上线在 Savior 里打开
第 04 课★★☆
让画面动起来：工业动效与参数
拖动效到设备自动吸附；外观 / 运动参数；倍速与错峰；导出动画 SVG / GIF。
工业动效参数调节导出动画
约 6 分钟 · 视频陆续上线在 Savior 里打开
第 05 课★★☆
就地画图造形
钢笔画异形罐、布尔运算、工业渐变、标尺参考线；把选区做成带参数的设备。
钢笔布尔元件工坊
约 6 分钟 · 视频陆续上线在 Savior 里打开
3D
3D 篇视觉最炫
第 06 课★★★
从平面到立体：3D 工作台与场景搭建
单台设备的姿态、配色、动作；拖设备、点接口连管搭场景；出透明底图放进组态画面。
3D 设备场景连管透明底出图
约 7 分钟 · 视频陆续上线在 Savior 里打开
交
交付篇送进组态软件
第 07 课★★☆
交付给组态软件：导出 · 工程文件 · 分享
导出规格、切图（阅读顺序命名、状态套图）、威纶通元件包、云备份、演示放映扫码分享。
切图导出状态套图复制到触摸屏
约 6 分钟 · 视频陆续上线在 Savior 里打开
HMI 设计小课堂
工业界面的门道，三分钟一课。
不懂设计也没关系，这几条规矩记住，画面就能好看一大截。点卡片看全文。
报警色，只留给报警
正常警告报警停机
值班的人看屏，第一件事是找「哪里不对」。如果正常运行的设备也涂成大红大绿，真正的报警就淹没在一片颜色里。
- 正常状态用中性色（灰、蓝灰），让画面安静下来
- 警告用黄 / 橙，报警用红，而且只在异常时出现
- 颜色之外再配一个形状或文字（闪烁、图标、「故障」字样），色弱的人也分得清
- 同一种颜色在整套画面里只表达一个意思，不要这里红是报警、那里红是「停止按钮」
Savior 的设计规范里内置了正常 / 警告 / 报警 / 停机四态，AI 出画面时也按这套规矩来。
HMI 设计小课堂一屏放多少信息？
工业画面最常见的问题不是信息太少，而是所有信息一样大、一样亮。
- 先排优先级：这一页最关心的 3–5 个量，放大、放在视线起点（通常是左上和中间）
- 次要信息用小一号的字、浅一点的颜色，需要时再看
- 详细参数放到二级页面或弹窗，不要全部堆在总览上
- 同类信息对齐成组，比到处散落好找得多
按钮要有四种状态
普通按下选中禁用
触摸屏没有鼠标悬停，操作员只能靠按钮自己的样子判断「点到了没有」「现在是什么状态」。
- 普通：一眼看出这是可以点的
- 按下：手指按住时有明显变化（变深、下沉）
- 选中：当前所在的页 / 当前模式，要和其他按钮区分开
- 禁用：不能点的时候变灰，别让人反复点了没反应
导出切图时，Savior 可以把按钮的多种状态一次导齐，按阅读顺序命名，组态软件里直接对应。
HMI 设计小课堂字号别太小
2.1mg/L
字高 ≥ 2.5mm8px 小字
字高 ≥ 2.5mm8px 小字
同样是 1024×768，10.4 寸屏和 15 寸屏上一个像素的物理大小不一样。设计时要按「毫米」想，而不是只看像素。
- 以 10.4 寸 1024×768 为例：每毫米约 4.9 像素，正文字高 2.5 毫米大约是 12 像素
- 按钮的手指热区约 8 毫米（约 40 像素），按钮之间留出手指的位置
- 关键数值可以大胆放大，远处也能看清
Savior 的平面流程图会按你选的屏幕尺寸检查字号和操作空间，不合格会提示。
HMI 设计小课堂管道颜色表示介质
流程画面里的管道颜色，本质上是一套「图例」：看颜色就知道里面流的是什么。
- 一种介质一种颜色，整套画面统一，并配上图例
- 用流动的虚线或箭头表示流向，停泵时停止流动
- 主管道粗、支管细，交叉处用跨桥表示不相连
Savior 的管道支持多种管体风格和介质配色，一键统一整页管道。
HMI 设计小课堂导航别超过两层
总览生化区2# 提升泵
操作员在紧急情况下没有时间翻菜单。页面结构越扁平，越不容易迷路。
- 一级导航放主要区域（总览、各工艺段、报警、趋势），常驻在底部或左侧
- 设备详情用弹窗或二级页，一点就回来
- 报警页从任何地方一步可达
- 当前在哪一页要有明确的选中状态
用 Savior「从布局开始」生成整套画面时，导航会自动接好。
社群有问题，
有问题，
群里一问就有人答。
用户交流群 · 小助理企业微信
交流画面技巧、反馈问题、提素材需求，产品上新第一时间知道。群二维码在 Savior 里：
登录 Savior → 顶栏「社群」图标 → 扫码进群或加小助理
视频号 · 抖音
操作教程、新功能演示、行业画面赏析。
视频号「拯救HMI」抖音 @拯救HMI
公众号
版本更新、设计规范、行业案例的图文解读。
微信搜索「拯救HMI」
产品里随时反馈
每一屏都有「反馈」按钮，可以截图标注，团队会跟进回复。
邮件联系
合作、企业采购、对公付款、投稿案例。
hello@savehmi.com