拯救HMI第2期—常见的工业触摸屏设计问题，避坑自查指南 ...
朋友们～大家好恍如隔世，这个专栏起初是2017年弄的，本来想着记录自己工作中的一些关于hmi设计的一些思考，虽然我不是一个职业的ui设计师，也不是一个职业的电气工程师。但是自己对HMI设计很热爱，也很有兴趣。可惜这几年工作确实比较忙。这里也和大家简单的介绍一下自己。
16年大学本科毕业，很荣幸当时进了西门子的培训生项目，培训1年半之后，进去了销售岗位，没错，我就是一个销售。这几年在西门子摸爬滚打，做个大项目，拿下过大客户，做销售2年也被promote到带团队，负责12人的销售团队。对一个93年的小伙子来说，是难得的机会。去年年底因为职业发展考虑，现在在SAP工作，从我热爱的工业自动化领域，转到了我一直想去学习了解的企业管理信息化领域，从底层的数字化，赚到企业层次的数字化学习工作中。所以这也是这个专栏一直难产的原因。一直忙于工作，但是以后不会啦。这个专栏我会坚持学下去。
因为我看到很多的私信和点赞，大家很关心这个专栏和HMI设计，希望自己的一些见解能够帮助到大家。
好了，开始正文，设计HMI有时候和做PPT是一样的，在做HMI设计之前，其实我们有很多的前置步骤需要做，
设计流程
1-项目调研，了解客户设备工艺、现有控制画面、痛点、目标和要求等
2-绘制项目框架图，梳理清楚客户需要做的所有画面清单，要求等，确定功能和流程，确定还缺失哪些材料，画出系统的结构树，基本的画面切换关系、存在的各个画面等
3-绘制草图【利用模版，通过描绘标题、画布、功能、不同元素、考虑相关性和实用频率】，先确定主要画面的草图，然后做原型沟通，确认客户可以接受
4-概念化交互，逻辑交互，以及信息提示等
5-测试原型
6-最后润色，图标，颜色等
设计工具
严格的遵照设计流程，不要直接上手就开始画图，也不要一开始就在触摸屏组态软件去做画面，你可以用一些ui设计工具去帮助你最前期的整体布局和思路，最后的最后才是去组态软件去实施，常用的ui设计软件有很多，不过在这里，为了避免大家走弯路，我推荐1个我很喜欢的工具，当然了，还有很多，比如：Sketch、Figma
强烈推荐-墨刀
这个工具界面比较简单，大致就长这样，一用就会！好用！3个项目以内是免费，多了就要收费，我本人是个极致的知识付费支持者，花小钱办大事，你的时间和效率最重要！所以项目不多的情况，先用免费版本就可以啦，多的话就支持一下开发者～
HMI画面分类
设计工作的系统化中，我们的画面类型实际上就那么几类，没有很复杂，常见的按照下列的类型去对照自己的：
1-开机登陆页面：提供用户登陆
2-主页面: 这是用户进入控制系统后看到的第一个页面，通常包含控制系统的主要功能和导航菜单，例如开关机、调整参数、选择模式等
3-自动运行画面：用于自动连续生产模式下的控制
4-手动运行画面:这种页面通常包含机器的各种操作控制，例如启动、停止、调节转速、改变方向等。用户可以在操作页面上进行各种机器操作。
5-参数工艺设置画面：这种页面通常用于工艺生产过程控制，例如化工生产过程中的流程控制、机械加工生产中的工艺参数控制等。
6-IO和运行状态监控画面:这种页面通常显示与机器相关的监控数据和状态信息，例如温度、压力、电流、电压、转速等。用户可以通过监控页面了解机器的运行情况，并及时处理异常情况。
7-报警画面:这种页面会显示机器的故障信息和报警信息，帮助用户及时处理机器的异常情况。
8-设备维护：这种页面通常包含机器的维护信息和操作
9-统计和流程页面：这种页面会显示机器的数据统计信息，例如工作时间、产量、效率等，帮助用户进行生产计划和管理，或者某个订单的执行进度
流程
10-帮助画面：包含设备的一些操作信息等帮助，可以考虑添加二维码的方式引导客户用手机查看帮助信息
11-设备和厂商信息：描述设备型号、功能、以及生产商的联系方式和介绍等
页面分区
1. 标题栏：设备、当前画面标题、时间
2. 状态栏：核心状态显示，如通讯情况、是否存在报警等【根据需要1和2可以合并】
3. 内容区：根据当前画面主要显示区域，如自动操作、手动操作、参数设置等页面
4. 导航栏（底部/顶部/弹出式）：导航功能，用于切换画面
5. 弹出对话框或画面区域：根据需要弹出
当然了，从上往下分解，接下来我们也要了解我们的画面都是由哪些控件和元素组成，这一点非常重要
1. 状态指示灯：用于显示机器的运行状态、故障信息等，例如绿色表示正常、红色表示故障。
2. 文本标签：用于显示文字信息，例如标题、操作说明、状态提示等。
3. 按钮：用于执行操作，例如启动、停止、重置、确认等。
4. 滑块条：用于设置参数值，例如速度、温度、压力等。
5. 复选框：用于选择多项操作或设置选项，例如多选、单选、开关等。
6. 输入框：用于用户输入信息，例如密码、用户名、文本等。
7. 图标：用于表示机器或设备的功能或状态，例如电机、传感器、阀门等。
8. 图形：用于显示机器或设备的结构或布局，例如机器图、平面图、三维图等。
9. 警报：用于显示机器的警报信息或提示信息，例如警告、错误、成功等。
10. 进度条：用于显示机器的运行进度或任务进度，例如下载进度、生产进度等。
11. IO输出域
好了，这一期线介绍这么多，主要是一些系统分析和总结的，这些我认为远比个别技巧重要。
下一期，我会就如何开始画面布局做一些分析～帮你一步步实现设计审美在线。最后分享一个帮朋友做的案例吧～
祝大家愉快～
-----------------------------
页:
[1]