这里以串口助手为例子，记录UI的设计过程。
1. 自定义标题栏
软件左上角的小图标（icon）、名称版本以及最右边的 "最小化" ， "最大化" ， "关闭" 按钮等都可以自己设计。而Qt也提供了原生的windows风格标题栏（如果在苹果上，就是苹果的风格），如下图（Windows）。
自定义标题栏主要用到QLable和QPushButton控件。如果想让QLabel和QPushButton控件显示相应的图标，可以使用Qt Designer的QSS样式，这个和HTML中的CSS的样式差不多。
修改QLable控件的图案，先点击QLabel控件，然后选择属性栏的styleSheet一栏后面的 "..." ，后续也会经常用到这个来修改控件的样式。
打开之后输入以下代码，url后面的括号是图片的绝对路径，也可以用项目的相对路径（相对路径就是工程目录下的地址），这个最后会影响软件的依赖文件。
border-image: url(C:/images/title_icon.png)
一般控件都是通过这句代码设置成图片的。
软件名称的修改比较简单，双击就可以修改。
右上角的三个小图标想要设计成当鼠标靠近这几个图标时颜色会发生改变的样式，如下图所示。需要做以下操作
这3个都是QPushButton控件，每个控件需要准备两张图片，一张是鼠标靠近前的，一张是鼠标靠近后的。然后通过设置QSS样式（即styleSheet）来实现鼠标的靠近检测，代码如下。第一句是鼠标没有移动到这个图片前，即正常情况下的图标，第二个是鼠标移动到图标上方，通过hover属性来设置。
QPushButton{border-image: url(C:/images/close_first.png);}
QPushButton:hover{border-image: url(C:/images/close_latter.png);}
单个控件的样式都配置完成之后，需要将他们统一放到一块作为标题栏。基本的操作是新建一个Widget控件。
新建完成后把对应的控件放到Widget里面，如下图所示。这里用到了一个弹簧工具，这个主要是用来占据空白地方的，Layout之后保证相应的控件在标题栏的两边，这个控件可以在左侧控件栏的 "Spacers" 分类下找到，该分类下有两种，一种是横向的，一种是纵向的。
通过修改Widget的styleSheet属性可以将标题栏设计成黑色，代码如下。这里有个问题#TitleBar前面需要带#，TitleBar是Widget控件的名称，重点是 "#" ，这里主要是因为父类跟子类的特性，父类的属性会继承给子类即内部的每个控件，所以修改的属性都会被子类继承，如果不用 "#"，那么修改父类的背景颜色为黑色，那父类下的所有子类背景颜色也会被设成黑色，这不是我们想要的，所以需要加个 "#" ，表示该父类的属性不用子类继承。
#TitleBar{background-color: rgb(0, 0, 0);}
弄到这里标题栏已经有了大概的形状了，不过还差最后一步，就是上面提到的Layout。Layout的作用是在软件被拉伸的时候保持相对位置。可以在Ctrl+R的状态下，把界面拉大，可以看到下图的情况，标题栏并没有随着软件的拉伸而跟着拉伸。
为了解决这个问题只需要点击新建的Widget，然后右键Layout，这里主要用到的是Lay out Horizontally（横向分布），选择之后标题栏就会根据我们的选择进行横向分布，纵向同理。
再次按下Ctrl+R后，可能会发现Layout完在拉伸的时候还是不会变化。这时点击控件栏下方的 "Object Inspector" 可以看到标题栏的Widget其实是在整个Widget下的，所以还需要Layout 整个工作区，由于下面还有两个部分需要设计，这里就先不Layout整个工作区了。另外在这里还能看到没有Layout的属性会有一个类似 "禁停" 的图标，这代表哪个控件还没有Layout。
标题栏Layout之后，如果对控件的位置不满意，可以通过调节以下绿色框内的属性来调整控件的大小位置。Layout之后geometry就无法更改了，所以一开始不用急着修改，等最终Layout之后再修改绿色框的属性。
点击标题栏的Widget，除了看到上图的属性外，往下拉可以看到几个不一样的属性。
2. 主体
主体部分控件比较多，这些控件都是由小小的部件组合而成的，每几个控件可以组合起来再Layout。
这套UI有两个坑：
- 由于这套UI的背景是灰色的，而默认的字体是黑色的，两者色差不是很多大，用户就很难分辨，所以可以将字体全部改成白色，修改字体的颜色有两种方法：第一种可以通过修改HTML属性。
点击后面的 "..." 可以进入设置，如下图所示。在红色框的地方可以修改字体颜色为白色，修改之后点击Source就会看到HTML代码发生变化了，而且Rich Text下的文字好像消失了，其实只是变成白色了，只要全选它就能看见了，这是第一种方法。
第二种方法是直接修改QSS样式，代码如下：
color: rgb(255, 255, 255);
这两种方法都能设置字体的颜色，但后来发现如果两者同时使用会出现冲突，造成QSS的样式无法显示的问题！！这里建议统一是用QSS设置。如果出现无法显示QSS样式可以试试将Source的HTML代码删掉或者把控件删除重新添加。
- 第二个坑来自CheckBox控件。以 "Hex显示" 为例，其他同理，在界面上可以看到下图。一般会认为这是一个控件，其实我这里是由CheckBox控件和QLable控件组成的，只是把CheckBox自带的文字删掉。
这样做的原因还是因为背景是灰色的，需要将字体设为白色。这个步骤上面也说到了，就是通过修改QSS属性来改，但是发现修改之后字体确实变成了白色。但是，里面的 "√" 也变成了白色，因为框本来就是白色背景的，最终的效果就是 "√" 看不见了，这显然不是我们想要的，所以干脆不用自带的字体，再增加一个QLabel控件，就可以解决这个问题（目前没有想到其他更好的办法）。
3. 底部
底部的 "Receive" 、 "Send" 还有 "当前时间" 后面需要多添加一个控件，控件的实际数据会在程序中修改，这里只是为了看到排版及调整控件的间隔，内容本身并无实际意义。
设计完之后需要给控件改个名字，因为在程序中需要调用一些控件，如果在程序中没有调用的控件，不改也行。修改的方法是鼠标点一下控件，在属性栏的第一个 "objectName" 那里修改，也可以直接双击控件栏中的控件修改。
最后需要将Qt的界面转换成python，这一步用到Pyuic这个工具，可以将.ui文件转化成.py文件，具体操作如下图。
操作之后就会生成一个XXXX_UI.py文件，这个文件就是程序的界面程序，有一点要注意的是，每一次修改Qt Designer中的内容都需要保存，并执行转化。
