开始正文之前，先对这个栏目做一个简单介绍。

这个专栏是我个人的兴趣爱好以及对工作中的一些经验总结，不代表任何第三方观点，基于审美标准不同，欢迎理性交流。有兴趣的可以私信。

咱们的专栏架构如下：

下面开始第一期（基础元素和配色）

首先我们搜一下，现在的HMI都是怎么样被玩坏的，随手用某度搜一下HMI

组态软件：怪我啰~

恕我直言，windows 03 的画面风格给客户真的好吗？随便选一个画面咱们来挑挑骨头，然后再来修改

最近做的一个项目，攻城狮给我之前，菜单画面是这样的

好了，来和我一起修改下，先看我修改之后的图，然后再给大家介绍下怎么实现，以及分享给大家一些超级实用、丰富、高效的网址和工具

-----------------------------------思考几秒钟--------------------------------------------

换个风格试一下

这是经过修改之后的hmi画面，是不是有点感觉了！继续往下看！

1、背景色的修改（举个例子为了说明背景可以多样化一下，而不是单纯的灰色单色）

一般来说，去匹配每个公司自己的风格，很奇怪的一个问题，企业很注重自己的广告和设备的宣传图，但是很少有企业会将自己的机器设备的人机界面和企业整体风格整合，比如企业的logo偏蓝色，那为什么你的画面要做成会不啦叽，而且每个机型的界面都是不一样的！这里根据公司的logo，选用渐变色的背景，显得科技感十足！

做好一张渐变色背景图，将透明度调到40%，存储为png格式，png这个格式图片用的非常多，以后会详细介绍！然后再添加到组态软件，作为背景图

2、按钮的修改

我们可以参考iphone的app图标，将按钮做成圆形的、带小图标的、带文字的按钮，就是如图所示的，那问题来了，上面这些好看的图标都是在哪找的？怎么给我的项目找到最全的图标，电机啊、传感器啊、风机啊、阀门啊等等，你想到的我都能让你找到！

推介一个超级实用的找图标的网址：www.iconfont.com ，登录之后的界面是这样的

看中哪个直接点击下载

下载之前选择颜色和格式

一般下载png格式就可以了，因为这种格式，图标的背景色是透明的，这就意味着，你添加到你的组态软件中，不会有难看的白色背景，方面你的设计。

3、接下来解决配色的问题

你可以对色彩不敏感，你可以只用一种颜色，但是也好过一个画面五颜六色下搭配，红的黄的白的黑的，真的很扎眼。可是工科男的审美就这样了，爱咋咋地！交给你另外一个网站，帮你快速高效的配色，傻瓜式操作，知道这个公司或者设备的主题色，加入公司的logo是蓝色为主基调，也配上了白色，那你就可以登录这个网站

这个网站进去，直接选择两个主色调，然后就会生成右下角的色板，直接选择格式下载就可以了。

这个色板会告诉你，原色、暗原色、标题、正文、分割、图标都用什么颜色，按照这个去配色，你还不会作图？保证立马让你的hmi逼格飙升几个层次！

图标和配色解决之后，背景、按钮、图标、配色都解决之后，你就可以打开你的组态软件开始画图连接变量了。

总结一下：

下期主题：如何做好hmi画面的规划？ See you next episode!