
1.3 图形用户界面设计
本章先简单介绍图形用户界面(Graphical User Interface,GUI,又称图形用户接口)的基本概念,然后说明GUI开发环境及其组成部分的用途和使用方法。
1.3.1 GUI概述
GUI是指采用图形方式显示的计算机操作用户界面。
GUI是一种人与计算机通信的界面显示格式,允许用户使用鼠标等输入设备操纵屏幕上的图标或菜单选项,以选择命令、调用文件、启动程序或执行其他一些日常任务。与通过键盘输入文本或字符命令来完成例行任务的字符界面相比,GUI有许多优点。
GUI的主要功能是实现人与计算机等电子设备的人机交互。它是用户与操作系统之间进行数据传递和互动操控的工具,用户可以通过一定的操作实现对电子设备的控制,同时电子设备会将用户操作的结果通过显示屏进行反馈。作为使用电子信息产品的必备环节,GUI实现了人与软件之间的信息交互。这种人机交互性使得用户的操作更加便捷。
GUI的目的是实现人机交互。开发人员研究并设计出具体的用户界面,将晦涩难懂的计算机语言包装成简单易懂的图形,用户通过对图形的识别即可理解复杂的计算机语言背后所表达的内容。图形化的操作方式具有很强的实用性,方便了用户的使用,提高了使用效率。这种创造性的转化使冷冰冰的电子产品变得亲切,从实验室走进千家万户的生活。开发人员通过对GUI的不断优化,使信息、数据的传输更高效,结果运行与反馈更便捷、准确,带来了良好的用户体验,实用性很强。
1.3.2 GUI设计
对于设计GUI的应用程序,用户通过与界面交互执行指定的行为即可,而无须知道程序是如何执行的。GUI开发环境包括MATLAB操作环境、GUIDE应用程序、App应用程序等图形用户设计界面。
1. MATLAB操作环境
在MATLAB中,最简单的图形用户界面的创建方法是在MATLAB操作环境中使用组件函数以编程方式创建App,在App中通过与界面交互,执行指定的行为,如图1-54所示。

图1-54 App交互界面
2. GUIDE应用程序
在MATLAB中,GUIDE是一种包含多种对象的图形应用程序,并为GUI开发提供了一个方便高效的集成开发环境,如图1-55所示。GUIDE主要是一个界面设计工具集,MATLAB将所有GUl支持的组件都集成在这个环境中,并提供界面外观、属性和行为响应方式的设置方法,设计执行交互的界面,如图1-56所示。

图1-55 GUIDE应用程序

图1-56 GUI设计界面
3. App应用程序
在MATLAB中,App Designer是一个用于构建MATLAB应用程序的环境,它简化了布置用户界面可视组件的过程。它包括一整套标准用户界面组件,以及一组用于创建控制面板和人机交互界面的仪表、旋钮、开关和指示灯,如图1-57所示。通过改程序通广可以设计人机交互的界面,如图1-58所示。

图1-57 App Designer应用程序

图1-58 人机交互界面
思考与学习:
GUIDE应用程序、App应用程序优于操作界面App设计的主要特点是界面设计的接口不用再需要自己设计,可以直接在系统自带组件的属性窗口中更改,代码会自动更新,大大提高了设计效率。
GUIDE应用程序与App应用程序集成了构建应用程序的两个主要任务:
◆布置可视化组件。
◆设定应用程序行为。
GUIDE应用程序与App应用程序的差异见表1-9。
表1-9 GUIDE应用程序与App应用程序的差异

(续)
