怎样设计漂亮的HMI? |
您所在的位置:网站首页 › 触摸屏面板设计教程 › 怎样设计漂亮的HMI? |
对HMI感兴趣的,强烈推荐看一下上次发的视频. [大师视频] HMI人机交互设计-- (2019iF设计奖获得者Oliver Gerstheimer) 背景色 过程控制人机界面背景色大致的流行色变迁: 黑-绿-灰 (还有部分小众浅蓝色背景) 黑 最早的DCS都是那种黑乎乎的背景,据说是当年用于DCS的CRT大脑壳显示器的显示技术问题,显示器长期停留某种颜色特别是高亮颜色会产生疲劳效应老化加快,甚至击穿显像管,降低显示器的使用寿命。 ![]() 当年的CRT显示器用于过程工艺画面显示还是DOS系统,2015年去项目现场看到的古董级CRT以及编程PC,客户犹犹豫豫,有意进行系统升级因为控制系统一旦坏掉就没有更换设备,但是它目前又运行的好好的没出过什么问题。 ![]() 当时配套的编程设备SIMATIC PG740,记得编程语言好像是PASCAL,现场的控制器和IO是西门子的S5系列 直到现在,显示技术日益先进,根本不存在以前色彩停留的疲劳问题,但黑色背景色一直沿用到现在,而且如汽机锅炉什么的都还偏向使用黑色的背景,有什么特殊原因非要使用这种黑色背景吗?我认为是没有的,这就是真爱。 ![]() 也是2015年现场实地拍摄看到工程师在现场调试这种黑色背景HMI画面时,乍一看还以为在画AutoCAD。 ![]() 绿 并不是纯绿,是蓝绿色,介于深蓝和绿色之间,我们使用的颜色有点近似孔雀绿,至于为什么要用这种绿色:我也不知道它的历史缘由。 我大概猜猜,因为蓝绿色大家可以公认的是能一定程度放缓视力疲劳,据说其原理大概是跟颜色的波长有点关系,还在读书时辅修过颜色搭配,突然想起膨胀色和收缩色对视觉的影响,于是百度摘抄了一段: 我们都在初中物理中学过,同一种透光物质对不同波长光线的折射率是不同的,所以当各种不同波长的光同时通过晶状体时,其集点并不全都落在视网膜平面上,因此在视网膜上的影像的清晰度就有一定差别。长波长的暖色影像焦距不准确,因此在视网膜上所形成的影像模糊不清,似乎具有一种扩散性;短波长的冷色影像就比较清晰,似乎具有某种收缩性。所以,我们平时在凝视红色的时候,时间长了会产生眩晕现象,景物形象模糊不清似有扩张运动的感觉。 像红色、橙色和黄色这样的暖色。而蓝色、蓝绿色等冷色系颜色,绿色就是里面的波长较短的颜色,但是满足这些条件的颜色还有不少,“孔雀绿”当年能够脱颖而出的原因我们不得而知。 ![]() ![]() 灰 目前国外品牌主流集成商的demo示例程序HMI设计都是灰色系列背景色。 高级灰持续热度不减,而且越来越流行,工控姐是顺应潮流的,灰色我觉得除了灰色本身不强烈外,另外微妙的灰色层上,运用点睛般的对比强色加以疏导,当观众们从刺激性的、指引性的强色中,渐渐又解读出厚重丰富的灰色信息时;就升华出识别变化性、状态性与流动性的真实审美。(知乎文化人说话就是好听)。 回归主题用正常的人说话就是,背景色与设备管道都是灰色的渐变,如果设备监视时有报警和警告的红色以及黄色这样的强烈色就会非常的打眼,操作员能迅速的察觉以及定位设备故障的位置。因此特别是DCS过程对象很多的时候,不要使设备和管道带有强对比色,特别不要使用黄色和红色这样的报警色。理解了这些那你再回头看看上面那段话,是不是深有体会。 ![]() 这条规则也是我自己设计HMI时,最先考虑的原则之一,我是世界反花里胡哨联盟成员,极度反感HMI上花花绿绿配色。喜欢对朋友圈晒HMI的指指点点,就是忍不住的那种。 ![]() ![]() ![]() 讲到了背景色的选定,不论选用那种背景色都可以做出好看有颜的HMI,但灰色作为现在的流行色,如果用户没有对背景色有强烈的指定,建议采用灰色。 对于设备的表示,通常有以下几种大方向的风格 简单图形表示设备,放弃如阴影、透视、纹理、渐变等等能做出3D效果的装饰效果。逼真3D模型,由MAYA,3DMAX等软件设计,但市面的高级HMI以及DCS的上位机都都不支持3D建模,所谓的3D也只是编辑软件导出的图片插入HMI显示。混合型,3D装饰效果的图片,但管道为线条或者HMI软件提供的简单管道组件。简单图形表示设备 ![]() 优势 1. 设备复现到HMI上的工作量小 2. 容易使用脚本控制其变色移动等 3. HMI设备管道上的控制对象显示密度大,每个工艺画面可以放置更多的电机阀门PID等对象,适合控制对象较多的流程行业,石化基本采用这种方式。 4. 传统DCS厂家的提供的库搭配的电机阀门图标设计风格与之相近 劣势 1. 不是所有行业都能接受这种风格,其原因很多很杂,其中控制对象少的工艺,用简单图形表示,画面会显得特别的单调空洞。 ![]() 优势 1. 画面大气逼真,现在市政水作为形象工程使用这种渲染后3D画面基本是硬性要求,无法撼动 2. 控制对象较少时,逼真的3D画面可以丰富画面内容,不显单调 劣势 1. 需要一个专业的画手 2. 与传统DCS提供的库风格不一致,需要自制图标和控制面板,自己编写控制对象的单体程序 3. 增加删除设备难度较大,需要重新编辑源3D文件,传统的HMI上不能直接编辑这种3D模型,通常是专业的3D软件到处模型为图片格式后插入HMI作为背景,增加设备通常发生在现场调试时,工程师一般不具备编辑3D源文件的能力,需要辗转跟美工沟通如何修改 4. 不同的项目,不同的行业每次去建模的工作量大 ![]() 优势 1. 设备怎么看着也是有点3D效果的,用户会觉得集成商还是花了点心思,这种风格可以布局的过程对象数量适中,可以弹性的调整画面的饱和程度。 2. 没有美工的情况下,这种3D效果,老板不给加鸡腿逼一下工程师,也是能学会简单PS操作就能做出来,工厂的设备千万种,而集成商拿到的项目面对的行业种类也是七七八八,这便以最低的成本跨入了“3D” 劣势 1. 通常工程师不会主动去学习PS软件,并且花时间去丰富完善行业设备图片,而老板也不会关注到这些细节,所以老板没提,工程师多一事不如少一事,往往我们看到的HMI都是3D效果图片和简单图形混合表示设备,风格不统一。另外等到老板关注这个HMI设计的时候,以老板的格局那就是要上3D的,不是这样简单的3D效果,所以也就没有工程师什么事情了。 以下跟大家分享下管道HMI设计体会 1. HMI画哪些管道 管道的在HMI上布线唯一的参考就是设计院的PI&D,但在PI&D图上还有一些非必要的信息,如只有手动阀门的管道我们没有必要表示到HMI上(如用来卸料的排空手阀),另外管道的材质、是否做保温、去往设备的层高等这些也不需要标记到HMI上,HMI应简化PI&D,通常只画有自控对象电机阀门仪表安装的管道。但为了让操作员对工艺有更好的理解,少数没有自控阀的管道也需要画到HMI。 2. 为管道布局画初稿 画初稿时,将HMI设计软件的网格设定为10的粗网格,我们用来布局管道走向与设备的位置,这个过程中要尽量避免管道交叉同时要调整好设备的大小,通常工艺画面的主设备是要居中显示的,如果现场最大的设备不是很重要且与之连接管道上的自控对象也很少,便可以缩小它在画面中的长宽占比,我们要根据设备的重要性和价值来表征设备,不能现场设备1比1强行添加到HMI。等到后期放置好电机阀门PID等对象后,再使用网格为1来进行精调,期间可以调整歪斜的线,去掉线头,过程对象与管线居中对齐。 同上面的原则,管道也不是现场管道越粗就要画的线越粗,我们要根据管道内的物料重要性,划分为主要产品、辅助物料线路等,可以用较粗的线条表示主要的产品管道线用以区分。 ![]() 3. 管道的工艺方向 在PI&D中管道内的物料在HMI上通常的画法都是从左往右,但有时用户在现场操作室看现场工艺设备物料方向是从右往左的,就会提出要求要修改HMI设计,因此工程师最好是能提前在大脑中想象模拟一下你坐在操作室中看HMI时,工艺方向是从左至右还是从右至左。希望你不要觉得操作员跟他忽悠一下,他就接受了。我在现场碰到的情况是,操作员一旦发现这个问题,他就会越看越别扭,开始抓狂越看越觉得自己分不清左右,甚至开错设备。 4. 管道颜色 通常不建议管道采用多种颜色,在GB中不同的物料线路需要用不同颜色标记,但过多带颜色的线条极易导致故障设备被操作员忽略,因为设备故障的报警色难以突出。 如下图中管道使用了亮色,这跟报警色是冲突的,会分散操作员的注意力。把管道只用1~2中颜色来表示,可以用粗线和浅深区分主要产品和辅助线路,整体的灰色层得以保留,报警色会灰色层强烈对比情况下,操作员能迅速锁定故障设备在工艺画面中的位置。 ![]() ![]() |
今日新闻 |
推荐新闻 |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |