chenshuai1
活到老,学到老V:18550114023
级别: 家园常客
精华主题: 0
发帖数量: 110 个
工控威望: 663 点
下载积分: 1902 分
在线时间: 53(小时)
注册时间: 2022-07-14
最后登录: 2024-11-13
查看chenshuai1的 主题 / 回贴
楼主  发表于: 2024-08-15 14:13
随便举一个栗子


随便选一个画面咱们来挑挑骨头,然后再来修改,最近做的一个项目,攻城狮给我之前,菜单画面是这样的
chenshuai1
活到老,学到老V:18550114023
级别: 家园常客
精华主题: 0
发帖数量: 110 个
工控威望: 663 点
下载积分: 1902 分
在线时间: 53(小时)
注册时间: 2022-07-14
最后登录: 2024-11-13
查看chenshuai1的 主题 / 回贴
1楼  发表于: 2024-08-15 14:49
图片:
1、背景色是最大的败笔,RGB有255*255*255种颜色,偏偏选择这个颜色,差评!
2、按钮,就这样一个灰不拉几的按钮,恕我直言,我并没有想按下去的想法,这个机器是给药厂使用,你认为药厂的小姑娘们会喜欢这个风格?
3、配色,这个问题其实一般人都不敢轻易去谈,因为说实话一般工程师们对色彩搭配确实不太会。
4、没有小图标,整个画面都是靠矩形圆形正方形三角形撑起来,一点都不活泼可爱,简单明了!
chenshuai1
活到老,学到老V:18550114023
级别: 家园常客
精华主题: 0
发帖数量: 110 个
工控威望: 663 点
下载积分: 1902 分
在线时间: 53(小时)
注册时间: 2022-07-14
最后登录: 2024-11-13
查看chenshuai1的 主题 / 回贴
2楼  发表于: 2024-08-15 14:50
图片:
我们来换一个风格





好了,来和我一起修改下,先看我修改之后的图,然后再给大家介绍下怎么实现,以及分享给大家一些超级实用、丰富、高效的网址和工具。
chenshuai1
活到老,学到老V:18550114023
级别: 家园常客
精华主题: 0
发帖数量: 110 个
工控威望: 663 点
下载积分: 1902 分
在线时间: 53(小时)
注册时间: 2022-07-14
最后登录: 2024-11-13
查看chenshuai1的 主题 / 回贴
3楼  发表于: 2024-08-15 14:50
1、背景色的修改

(举个例子为了说明背景可以多样化一下,而不是单纯的灰色单色)一般来说,去匹配每个公司自己的风格,很奇怪的一个问题,企业很注重自己的广告和设备的宣传图,但是很少有企业会将自己的机器设备的人机界面和企业整体风格整合,比如企业的logo偏蓝色,那为什么你的画面要做成灰不拉几的,而且每个机型的界面都是不一样的!这里根据公司的logo,选用渐变色的背景,显得科技感十足!

做好一张渐变色背景图,将透明度调到40%,存储为png格式,png这个格式图片用的非常多,以后会详细介绍!然后再添加到组态软件,作为背景图。
chenshuai1
活到老,学到老V:18550114023
级别: 家园常客
精华主题: 0
发帖数量: 110 个
工控威望: 663 点
下载积分: 1902 分
在线时间: 53(小时)
注册时间: 2022-07-14
最后登录: 2024-11-13
查看chenshuai1的 主题 / 回贴
4楼  发表于: 2024-08-15 14:51
图片:
图片:
图片:
2、按钮的修改

我们可以参考iphone的app图标,将按钮做成圆形的、带小图标的或带文字的按钮。那么问题来了,上面这些好看的图标都是在哪找的呢?怎么给我的项目找到最全的图标,电机、传感器、风机和阀门等等,你想到的我都能让你找到!推荐一个超级实用的找图标的网址:www.iconfont.cn ,登录之后的界面是这样的:
注意:看中哪个直接点击下载,下载之前选择颜色和格式,一般下载png格式就可以了,因为这种格式的图标背景色是透明的,这就意味着添加到你的组态软件中,不会有难看的白色背景,方便你的设计。
chenshuai1
活到老,学到老V:18550114023
级别: 家园常客
精华主题: 0
发帖数量: 110 个
工控威望: 663 点
下载积分: 1902 分
在线时间: 53(小时)
注册时间: 2022-07-14
最后登录: 2024-11-13
查看chenshuai1的 主题 / 回贴
5楼  发表于: 2024-08-15 14:52
图片:
3、接下来解决配色的问题

你可以对色彩不敏感,你可以只用一种颜色,但是也好过一个画面五颜六色的搭配,红的黄的白的黑的,真的很扎眼!可是工科男的审美就这样了,爱咋咋地!下面再推荐一个超级实用的调色工具,帮你快速高效的配色,傻瓜式操作,网址:www.materialpalette.com,登录之后的界面是这样的: