Qt for MCU呼吸机界面设计案例，含源码，基于QML设计

eric2013 · 发表于 2020-4-12 16:06:03

说明：

此界面源码由siili auto提供，并在github开源。

respirator-qt-for-mcu-master.zip (627.69KB)

视频展示：http://v.qq.com/x/page/e0949w00pr2.html

效果图：

cjunrong · 发表于 2020-4-12 16:34:13

漂亮，UI很重要

taobaofarmer · 发表于 2020-4-12 17:19:14

这么简洁的界面，没有任何的花里胡哨，但功能非常清晰

ghslfgkkl88 · 发表于 2020-4-12 18:08:30

漂亮。这种界面用QML做挺容易的

litin326 · 发表于 2020-4-12 21:57:29

挺简洁漂亮

rgzdb · 发表于 2020-4-12 23:51:23

一个优秀的美工很重要。

missfox · 发表于 2020-4-13 07:43:32

我看了下源码，都是贴图。。。

murphy · 发表于 2020-4-13 15:59:06

D:\Downloads\Compressed\respirator-qt-for-mcu-master\images\full.png

murphy · 发表于 2020-4-13 16:00:13

[img]D:\Downloads\Compressed\respirator-qt-for-mcu-master\images\full.png[/img

]

ghslfgkkl88 · 发表于 2020-4-14 10:01:33

下载工程看了，确实是图片搭的，不过挺奇怪，除了那个肺部的图片，其他的都很容易画，不知道为啥还要用图片。

eric2013 · 发表于 2020-4-14 11:53:03

ghslfgkkl88 发表于 2020-4-14 10:01
下载工程看了，确实是图片搭的，不过挺奇怪，除了那个肺部的图片，其他的都很容易画，不知道为啥还要用图片 ...

现在GUI这块，好的Builder如果能方便的让用户贴图，且生成的代码流畅度还行，的确可以大大降低开发难度，麻烦的就是需要一个好的美工帮忙制作图标和背景图。

ghslfgkkl88 · 发表于 2020-4-14 12:36:14

eric2013 发表于 2020-4-14 11:53
现在GUI这块，好的Builder如果能方便的让用户贴图，且生成的代码流畅度还行，的确可以大大降低开发难度， ...

这个还是需要看行业。我自己就是一个半吊子的美工，以前产品都是用图片搭出来的。工控行业，经常有非标定制，功能改为改去，参数加来加去，有时候要重新处理的图片太多，然后工期又紧，就一两天，欲哭无泪。所以现在我都改成代码直接画了，像多页项、控件数量与布局等都直接在代码里面定义，增加或减少修改配置就行了，开发效率高很多。

eric2013 · 发表于 2020-4-14 12:38:16

ghslfgkkl88 发表于 2020-4-14 12:36
这个还是需要看行业。我自己就是一个半吊子的美工，以前产品都是用图片搭出来的。工控行业，经常有非标定 ...

有道理，侧重点不同，有些项目可以靠美工就可以维护，有些项目靠程序员维护。

murphy · 发表于 2020-4-14 14:45:14

eric2013 发表于 2020-4-14 12:38
有道理，侧重点不同，有些项目可以靠美工就可以维护，有些项目靠程序员维护。

其实我发这个图片出来就是讨论这个问题，美工只做做效果图，程序员用程序实现。尽量减少图片的使用。不会因为换个颜色，而换图片

eric2013 · 发表于 2020-4-14 15:00:37

murphy 发表于 2020-4-14 14:45
其实我发这个图片出来就是讨论这个问题，美工只做做效果图，程序员用程序实现。尽量减少图片的使用。不会 ...

界面这个还有一个麻烦的地方就是布局，如果美工把界面布局做好了，也可以帮很大的忙。

years · 发表于 2020-8-7 09:47:55

这种界面设计有专门的设计软件吗看着而好漂亮啊

eric2013 · 发表于 2020-8-7 10:16:58

years 发表于 2020-8-7 09:47
这种界面设计有专门的设计软件吗看着而好漂亮啊

是个图片，见9楼

caicaptain2 · 发表于 2020-8-7 10:24:19

ghslfgkkl88 发表于 2020-4-14 10:01
下载工程看了，确实是图片搭的，不过挺奇怪，除了那个肺部的图片，其他的都很容易画，不知道为啥还要用图片 ...

每个图标的背景颜色似乎不是均匀的？有过模糊渐进的效果？所以需要贴图吧。

eric2013 · 发表于 2020-8-7 10:28:29

caicaptain2 发表于 2020-8-7 10:24
每个图标的背景颜色似乎不是均匀的？有过模糊渐进的效果？所以需要贴图吧。

这种界面，贴图最简单，也最适合单片机

ghslfgkkl88 · 发表于 2020-8-7 11:19:56

caicaptain2 发表于 2020-8-7 10:24
每个图标的背景颜色似乎不是均匀的？有过模糊渐进的效果？所以需要贴图吧。

QML用来做动画的，纯代码实现这些没问题。

years · 发表于 2020-8-7 15:09:37

eric2013 发表于 2020-8-7 10:16
是个图片，见9楼

stemwin也能实现这个效果？

dykwai · 发表于 2020-8-10 10:29:59

编程实现需要程序员改代码，贴图只需要美工，很多人都能做，特别是涉及布局变更，改图更快一些
从初始设计出发，先把需求定义好了，通过画图讨论就可以先把人机界面基本做了，都确认好了程序员再介入
这样一来，工作效率会更高些，当然代码效率可能差点
但现在连嵌入式的cpu也是资源越来越多、性能越来越高，发展趋势是尽快出产品，占用资源多点、代码效率低点，真没多少人关心

years · 发表于 2023-5-17 15:14:02

这是一家专门做设计的公司？siili auto

eric2013 · 发表于 2023-5-17 18:10:00

years 发表于 2023-5-17 15:14
这是一家专门做设计的公司？siili auto

对，就是他们家

Ccbbkk · 发表于 2023-8-24 16:55:04

都是贴图怎么把数据显示在ui上呢

yxydoctor · 发表于 2023-8-26 12:43:30

这正是GUIX的定位。自己画势必会存在渲染问题，渲染需要时间。
贴图就像是已经预渲染了，压缩时间开销。

		自动登录	找回密码
密码			立即注册

[Qt for MCUs] Qt for MCU呼吸机界面设计案例，含源码，基于QML设计