28.Labview界面设计--- (上篇) 软件登陆界面设计与控件美化

摘要： 作为GUI界面设计的老大哥般的存在，Labview本身的G语言属性就展现了其优越的外观设计能力，其中不乏许多编程爱好者、架构师等的喜欢使用Labview进行界面相关的设计，而使用Matlab、Python等软件写底层数据处理模块、自动化脚本等，有着出色的混合编程习惯。那么本文就从基础开始详细讲解Labview中的前面板设计相关的内容。

前面板设计可以说是为了让使用者(用户)有更好的使用体验，往往面板有着便于操作、模块清晰、分类准确等特点。本文从头到尾讲解了一个软件界面的设计过程，分析了该软件的模型框架，大家读完觉得感兴趣的可以下载下来自己使用。
下载链接：

本文程序及更多福利资源请关注微信公众号：“软件领航站” 获取

---

1. 界面框架搭建

这一部分讲解 界面弹出、界面跳转、界面登录 相关的内容，因为一个成熟的软件往往不是一个简单界面就可以实现的，往往伴随着不同功能界面的切换、调出等，就像我们玩游戏时有游戏登陆界面、游戏开始界面，它们之间往往都会通过点击一个按键来实现界面切换，通过Labview的方式也比较好实现，本节主要讲解这种功能。(如果有同学不需要这种功能，可以直接跳过本节。)

1.1 界面切换

顾名思义这种界面方式就是切换至一个界面时关闭当前界面，切回当前界面时再关闭界面，这个之前讲过，更详细的细节可以看下面连接：

11.Labview实现用户界面切换的几种方式—通过VI间相互调用

这两个VI之间的关系为同级关系，他们之间可以相互调用，就比如我们在使用一个观影软件时，当我们从电影频道切换到电视剧频道时，也可以从电视剧频道切换回电影频道，并且在切换到电影频道时，我们要关闭电视剧频道让软件仅显示电影频道。程序如下图所示：

这样就可以实现两个程序之间的界面相互切换了。
前面板如下图所示，当我们点击 “切换界面” ，当前第一个蓝色页面程序关闭，跳转到第二个红色页面并打开运行，当我们点击第二个页面的 “返回上一层” 时，关闭当前红色页面打开第一个蓝色页面。这样我们就是实现了两个界面之间的无限相互切换啦。

1.2 界面登录

这个就比较简单了，这个其实是在上述1.1节界面切换的基础上增加了一个登陆选项，并且不需要返回登陆界面即可，一般常用于测试管理系统中， 话不多说直接上程序讲解：

1. 这是登陆界面，题主设计的比较简单，具体外观设计下一章题主会讲。

2. 这是后面板程序，程序主要由一个账号密码的管理库、登录按钮、账号密码输入框组成，这里主要说的是账号密码的管理库，大家可以建立一个 .txt文件存储账号密码，或者使用Mysql数据库存储(这个后期题主会讲)，登陆时调出账号密码与用户输入的值做比对，即完成界面切换操作。
   
   下面是登陆界面跳转演示动画：
   账号密码登陆界面：
   
   登陆成功界面：
   

1.3 界面弹出

顾名思义这种界面的方式是保持原界面不动然后弹出一个可操作窗口的界面方式。
这里向大家介绍一个概念：重入执行，这个是指被调用的子VI在运行时会弹出其前面板窗口。接下来通过一个例子帮助大家理解，我们将显示图形的程序称为 “主程序”，将被按下按钮弹出后的程序叫 “子程序” ，下面一共使用了一个主程序和两个被弹出的子程序：

1. 主程序后面板及前面板如下图所示。
   
2. 两个子程序的后面板及前面板如下图所示：
   
   那么直接演示最终的弹出界面操作结果，弹出设置参数界面的程序如下图所示。是不是这种切换界面看上去比较有层次感呢？
   
   除了主要程序后面板已经截图给大家之外，相信大家使用过子vi程序的都i有一个相同的问题，怎样才能让子vi弹出前面板并操作呢？
   重入vi设置方式：
   
   在子vi点击右键，选择“设置子vi节点”，点击选用“调用时显示前面板”即可完成设置啦。

2. 前面板控件及修饰风格

这一章内容和大家讲解一下前面板的控件类型及一些容器、选项卡、修饰线等的修饰风格，分两大块来讲解。

2.1 前面板控件

这一部分讲解前面板控件的几种类型及使用技巧，在Labview中，一共有五种风格的控件，分别是经典、新式、系统、银色NXG风格五种，可以在“文件 ---- VI属性 — 编辑器选项”中设置默认控件风格。

题主将以下的几种类型的控件列举在下面，供大家查看，选择适合自己的设计风格，题主这里只建议大家一点：同一个大型程序尽量使用同一种控件风格或偶尔几个控件使用其他风格。 这样也会让用户有更佳的观感。

当然有句题外话，题主本人比较喜欢NXG和银色的控件，设计起来比较有简约和科技感。

2.2 面板外观修饰

前面板修饰内容可以在前面板单击鼠标右键找到“修饰”这一项，其中包括各种类型的修饰线和修饰框、分隔栏布局和选项卡等。

这里题主将这些外观分为几种，一种是功能类型的、一种是纯修饰为了好看型的，下面请看。

2.2.1 功能类型

1. 选项卡控件

这个不但可以在前面板将所有的控件分放在多个选项卡里面，而且还可以在后面板设置这个选项卡相关的一些操作，这个具体功能大家自己在软件上去尝试，他的一个重要作用就是：当前面板控件过多时，讲控件按选项卡名称分类，让程序更加简洁明了。

2. 工具选板

这个是很容易被大家忽略的一项功能，这个选板可以将任何图片、前面板、控件进行染色等的操作，增加控件或者图片的美观度。具体打开方式是在：查看 — 工具选板(T) 中打开即可，可以看到如下窗口弹出，这个窗口最侧的毛笔可以将我们前面板的控件涂抹成自己两个方框中自定义的颜色，大家可以自己试试看。

3. 系统分隔栏
   这一项在NXG控件中的布局 — 分隔栏选项中，选中分隔栏之后可将程序前面板分割为两个分面板，以便于前面板分配设计。
   

2.2.2 非功能类型

这就是纯装饰了，这里包括各种不同粗细的直线、各种类型的容器等等，容易一般要放置在控件下面，所以大家建立背景容器后，要选中并单击这个选项就好啦。

好的，本章内容就到此结束了，以上的程序我将上传在夸克网盘中，下面是链接：

本文章程序均可在网盘下载，使用夸克App或微信QQ扫描二维码即可：

本文程序及更多福利资源请关注微信公众号：“软件领航站” 获取

---