图形用户界面（GUI）设计举例
Tags: MATLAB图形用户界面GUI设计举例
Time : 2005-2-21 18:25:39 | Views : 756 | Font Size : Large Medium Small | Category : 毕业设计，留底回忆
前面我们已经大概的了解了MATLAB环境下的图形用户界面（GUI）设计，下面便通过具体的例子来演示在MATLAB环境下图形用户界面设计的方法与思想。
MATLAB的图形用户界面设计实际上是一种面向对象的设计方法。假设想建立一个图形界面来显示和处理二维图形的颜色、线型及数据点的图标。要求其基本功能是：
（1）建立一个主坐标系，用来显示要绘制的二维图形；
（2）建立一个列表框，允许用户选择不同的着色方法；
（3）建立一组按扭，用于处理二维图形线型和数据点的图标；
（4）为图形界面加入菜单项，用于决定坐标轴是否显示及坐标轴上是否需要网格；
（A）最初图形界面的设想如下图所示：
（B）根据上面的设想，下面我们就来制作它的图形用户界面：
首先，我们先来看其图形窗口的设置。在MATLAB命令窗口中选择菜单可获得一个标准MATLAB 的图形窗口，但我们可采用如下命令使得打开窗口的形式更富于变化：
窗口句柄=figure（属性1，属性值1，属性2，属性值2，……）；
通过这样的方式可以很容易地打开一个新的图形窗口，并返回该窗口的句柄，以后我们可以方便地对它进行进一步修正，窗口的属性诸如颜色（Color），标题名（Name）、位置（Position）等，都可根据需要设定。若要改变窗口的某些属性，则可通过调set（）函数来完成。这样我们就得到其窗口生成的程序如下：
yWin=figure('Position',[100,100,410,310],'Name','对MATLAB绘图功能选项的演示
(2003/3/21)','Menubar','none', 'Resize','off','pointer','custom',
'numbertitle','off');
接下来我们看起菜单项的加入。我们已建立了一个图形窗口，下面给它加入菜单项。
菜单设置是由uimenu（）函数来完成的，该函数调用格式为：
菜单项句柄=uimenu（窗口句柄，属性1，属性值1，属性2，属性值2，……）；
还可在某一个菜单条下定义一个新的子菜单条：
子菜单句柄=uimenu（菜单项句柄，属性1，属性值1，属性2，属性值2，……）；
uimenu（）函数的属性最基本的有：
提示名称（Label）：可以是任意一个字符串，在菜单项提示的字符串中允许使用下划线&标志，这样可用键盘容易地激活相应的菜单项。
回调函数（Call）：可以是一个函数名称（用引号括起），也可以是一组MATLAB命令。在该菜单条被选中后，MATLAB自动调用此回调函数来做出菜单项的响应，实现某一功能。在产生下拉菜单时“call”选项可省略，因为这时可以直接打开下一级菜单，而不是侧重对某一函数进行响应。其菜单项生成
的程序如下：
ymenu001=uimenu(yWin,'label','Grid');
ymenu0011=uimenu(ymenu001,'label','Grid on','callback','Grid on');
ymenu0011=uimenu(ymenu001,'label','Grid off','callback','Grid off');
ymenu002=uimenu(yWin,'label','Axes');
ymenu0021=uimenu(ymenu002,'label','Axes on','callback','set(gca,''visible'',''on'')'); ymenu0021=uimenu(ymenu002,'label','Axes off','callback','set(gca,''visible'',''off'')');
其次我们再来设定其控件设计技术。MATLAB提供uicontrol命令来实现控件设计。在图形窗口或对话框窗口上的各种控件均可以由该命令实现。用Chandle=uicontrol（窗口句柄，‘属性名’，属性值设置，……）；
设置的属性值在窗口句柄所指的窗口中实现一个控件。其程序如下：
CBox=uicontrol(yWin,'style','listbox','Position',[15,240,80,45],'String','red|blue|black|bron ze|mauve|yellow|green','Callback',['Colornum=get(CBox,''value'');','set(Fun,''color'',ColorS tr(Colornum))']);
pushbutton1=uicontrol(yWin,'style','pushbutton','Position',[15,20,80,20],'String','实线',... 'Callback',['Fun=plot(x,sin(x),union(ColorStr(Colornum),LineStr(1)))']);
pushbutton2=uicontrol(yWin,'style','pushbutton','Position',[15,50,80,20],'String','虚线',... 'Callback',['Fun=plot(x,sin(x),union(ColorStr(Colornum),LineStr(2)))']);
pushbutton3=uicontrol(yWin,'style','pushbutton','Position',[15,80,80,20],'String','星号',... 'Callback',['Fun=plot(x,sin(x),union(ColorStr(Colornum),LineStr(3)))']);
pushbutton4=uicontrol(yWin,'style','pushbutton','Position',[15,110,80,20],'String','圆圈',...
'Callback',['Fun=plot(x,sin(x),union(ColorStr(Colornum),LineStr(4)))']);
pushbutton5=uicontrol(yWin,'style','pushbutton','Position',[15,140,80,20],'String','五角星',...
'Callback',['Fun=plot(x,sin(x),union(ColorStr(Colornum),LineStr(5)))']);
pushbutton6=uicontrol(yWin,'style','pushbutton','Position',[15,170,80,20],'String','十字号',...
'Callback',['Fun=plot(x,sin(x),union(ColorStr(Colornum),LineStr(6)))']);
pushbutton7=uicontrol(yWin,'style','pushbutton','Position',[15,200,80,20],'String','六角星',...
'Callback',['Fun=plot(x,sin(x),union(ColorStr(Colornum),LineStr(7)))']);
最后我们再来看窗口建立时的初始化程序：
yAxes=axes('Box','on','Units','points','Position',[100,20,190,200]);
ColorStr=['r','b','k','c','m','y','g'];
LineStr=['-',':','*','o','p','+','h'];
Colornum=1;
x=0:0.1:2*pi;
Fun=plot(x,sin(x),union(ColorStr(Colornum),LineStr(1)));
编写完程序后保存为mydraw.m运行，可以得到如下图所示的界面表示：
总结：
通过MATLAB的图形用户界面设计，我们可以开发出很友好的交互式图形界面和各种有效的工具及应用程序。总之生成用户图形界面的几点理由为：
* 编写一个多次反复用的实用函数，菜单、按钮、文本框作为输入方法具有意义；
* 编写函数或开发应用程序供别人使用；
* 创建一个过程、技术或分析方法的交互式示例；
* 认为GUI的简洁，性能良好，并且想实践一下。
一个不错的Matlab的gui界面设计实例 %非常漂亮的日历， function CalendarTable; % calendar 日历 % Example: % CalendarTable; S=datestr(now); [y,m,d]=datevec(S); % d is day % m is month % y is year DD={'Sun','Mon','Tue','Wed','Thu','Fri','Sat'}; close all figure; for k=1:7; uicontrol(gcf,'style','text',... 'unit','normalized','position',[0.02+k*0.1,0.55,0.08,0.06],... 'BackgroundColor',0.6*[1,1,1],'ForegroundColor','b',... 'String',DD(k),'fontsize',16,'fontname','times new roman'); end h=1; ss='b'; qq=eomday(y,m); for k=1:qq; n=datenum(y,m,k); [da,w] = weekday(n); if k==d; ss='r'; end uicontrol(gcf,'style','push',... 'unit','normalized','position',[0.02+da*0.1,0.55-h*0.08,0.08,0.06],... 'BackgroundColor',0.6*[1,1,1],'ForegroundColor',ss,... 'String',num2str(k)); ss='b'; if da==7; h=h+1;
实验三图形用户界面设计 实验目的 1．掌握Java语言中GUI编程的基本方法 2．掌握Java语言中AWT组件的基本用法 3．掌握Java语言中Swing组件的基本用法 实验导读 1.通过图形用户界面(GUI：Graphics User Interface)，用户和程序之间可以方便地进行 交互。 AWT(Abstract Windowing Toolkit)，中文译为抽象窗口工具包，是Java提供的用来建立和设置Java的图形用户界面的基本工具。AWT由Java中的包提供，里面包含了许多可用来建立与平台无关的图形用户界面(GUI)的类，这些类又被称为组件(components)。 Swing是一个用于开发Java应用程序用户界面的开发工具包。它以抽象窗口工具包（AWT）为基础使跨平台应用程序可以使用任何可插拔的外观风格。Swing开发人员只用很少的代码就可以利用Swing丰富、灵活的功能和模块化组件来创建优雅的用户界面。 JDK写程序所有功能都是靠虚拟机去操作本地操作系统。比如window下，就是JDK 用windows API实现功能。而awt包中很多组件是组件自身去调用本地操作系统代码swing包中的组件采用的是调用本地虚拟机方法，由虚拟机再调用本地操作系统代码。意思就是中间多了一层，这样就加强了swing包的移植性，与本地关系不那强了。 图AWT常用组件继承关系图 Container为容器，是一个特殊的组件，该组件中可以通过add方法添加其他组件进来。 2.布局，容器中的组件的排放方式。常见的布局管理器： FlowLayout（流式布局管理器）：从左到右的顺序排列。Panel默认的布局管理器。 BorderLayout（边界布局管理器）：东，南，西，北，中。Frame默认的布局管理器。 GridLayout（网格布局管理器）：规则的矩阵
MFC用户界面设计 (2007-07-03 14:08:02) 转载 MFC用户界面设计一 （创建一个MFC工程的框架） 打开VC++6.0选择New，出现如下界面： 然后选中MFC AppWizard[exe] ，即我们将创建一个MFC的可执行文件，然后在Project Name下面的框中写入这个工程的名字，注意： 工程的名字不要是中文的，且不要太过于长（到底多长是长我也不知道），最好使用英语的单词来定义你所要实现的工程项目的名字。 Location你可以自定义你的创建的这个工程的存放地方。个人建议不要存放在C盘。以防病毒感染之后C盘打不开，你的工作就全没有了。并且最好建一个专用的C++工程的存放文件夹。不推荐使用中文文件夹和存储路路径较长的文件
夹。如：D:\xx\xxx\xxx\xxx\xxx\xxx\xxxx\xxxxxxx\xxx(这样至少自己找的时候都要烦死了)。 Platform只有选择Win32了。在完成了这些之后就可以点击OK了。已开始创建的6小步中的第一步。如下图所示。 可以看见。上面的标题栏显示的是 MFC AppWizard Step 1,这一步是规划一个MFC程序框架的最重要的一部，我们可以选择 1：Single Document（单文档）即创建的程序能在某个时间内装入和编辑一个文档，使用了所有四个基类（C WinApp CFrameWnd CDocument Cview，至于四个基类都是什么作用参考第二章中所述）。典型的对话框应用程序包括配置硬件设备的应用程序、屏幕保护程序和游戏程序等。 2：Multiple Documents （多文档）一次可以装载和编辑多个文档，并且不但使用了所有四个基类，还使用了CFrameWnd的两个派生类，即CMDIFrameWnd和CMDIChildWnd。
4.2 图形用户界面的打开和初步设计 在Matlab命令行运行guide命令打开图形用户启动界面GUIDE Quick Start对话框，选择Blank GUI(Default)，单击“OK”按钮，新建一个图形用户界面设计界面，如图4-1所示。 图4-1 图形用户界面的新建 根据本实验的具体要求和图形用户界面的设计原则，将主界面命名为“kaishi”，如图4-2Static Text，双击控件可引出图形窗和相应控件的属性编辑框“Property Inspector”，其属性设置为欢迎进入数字基带传输系统的仿真，字体大小可设置为16号，另外在工作区放置两个“Push Button”按钮，分别双击这两个控件可引出图形窗和相应控件的属编辑框“Property Inspector”，在String一栏中修改各个控件的名称分别为进入和关闭，字体大小可设置为16号。如图4-3示的主界面和属编辑框“Property Inspector”。
图4-2 总界面 图4-3 设置开始界面
4.3 主界面的激活和回调函数的生成 经以上操作后，工作台上所制作的界面外形及所含构件已经符合设计要求，但这个界面各构件之间的通讯还没有建立，为此必须激活处理。 激活方式为：选中其中的一个控件，如“眼图”控件，右击控件选择“View Callback”中的“callback”可出现一个可以(待填写回调指令的)M函数文件的文件编辑器界面，在待填写回调指令处填写语句figure(yantu)，其余控件依此类推分别在指令处填写figure(digital)，figure(digital_receive)，figure(mjcr)，figure(raise)，figure(partrespond)其中digital，digital_receive，mjcr，raise，yantu，partrespond为显示数字基带传输过程中各过程波形的图形用户界面，这样就和其他的子界面之间建立了通信，回调函数如下填写： function pushbutton1_Callback(hObject, eventdata, handles) % hObject handle to pushbutton1 (see GCBO) % eventdata reserved - to be defined in a future version of MATLAB % handles structure with handles and user data (see GUIDATA) figure(digital) 回调函数编写完成后，点击保存按钮进行保存，点击工作台上的“Activate Figure”工具图标，便可以看到链接关系，如图4-4示。 图4-4 写完成的总界面
实验一图形用户界面设计 一实验目的和要求 1）熟悉图形用户界面的设计原则 遵循用户友好原则、一致性原则、帮助和提示等原则设计用户界面。 2）利用一种设计工具完成图形化的用户界面设计 二实验内容与步骤 （一）实验内容 利用常用的设计工具（UI界面设计工具GUI Design Studio）完成一个通用图形用户界面设计，要遵循界面设计的一般原则（一致性、快捷方式、提供错误处理），注意颜色的使用，学会图标、按钮、屏幕布局、菜单和对话框的设计。 软件的界面如同人的脸一样,软件界面的好坏决定了用户对软件的第一印象。设计好的界面能够引导用户自己完成相应的操作，起到引导作用。设计合理的界面能给用户带来轻松愉悦的感受。一些专家指出：对于用户，人机界面就是系统本身。这充分说明了软件界面设计的重要性。请完成各自的系统用户界面的设计。 （二）实验步骤 1．设计多个对话框，完成填表输入界面的设计，合理使用图标、按钮、颜色； 2．设计不同形式的菜单，完成对不同对话框的调用； 3．提供简单的错误处理、联机帮助。 GUI Design Studio主界面
三界面示例1、登录界面 2、主界面
3、聊天界面 4、QQ空间界面
四实验总结 1．界面要具有一致性、常用操作要有快捷方式、提供简单的错误处理、对操作人员的重要操作要有信息反馈、操作可逆、设计良好的联机帮助、合理划分并高效地使用显示屏、保证信息显示方式与数据输入方式的协调一致。 2．颜色是一种有效的强化手段，同时具有美学价值。使用颜色时应注意如下几点：限制同时显示的颜色数；画面中活动对象的颜色应鲜明，而非活动对象应暗淡；尽量避免不相容的颜色放在一起，如黄与蓝，红与绿等，除非作对比时用；若用颜色表示某种信息或对象属性，要使用户理解这种表示，并尽量采用通用的表示规则。 3．图标是可视地表示实体信息的简洁、抽象的符号。图标设计是方寸艺术，需要在很小的范围内表现出图标的内涵。设计图标时应该着重考虑视觉冲击力，要使用简单的颜色，利用眼镜对色彩和网点的空间混合效果，做出精彩图标。 1）设计按钮应该具有交互性，应该有3到6种状态效果（点击时的状态、鼠标放在上面但未点击的状态、点击前鼠标未放在上面时的状态、点击后鼠标未放在上面时的状态、不能点击时的状态、独立自动变化的状态），按钮应具备简洁的图示效果，应能够让使用者产生功能上的关联反应。属于一个群组的按钮应该风格统一，功能差异大的按钮应该有所区别。 2）设计屏幕布局（Layout）时应该使各功能区重点突出，应遵循如下几条原则：平衡原则、预期原则、经济原则、顺序原则、规则化。 3）菜单在图形界面的应用程序中使用得非常普遍，是软件界面设计的一个重要组成方面，描述了一个软件的大致功能和风格。菜单中的选项在功能上与按钮相当，一般具有下列一种或几种类型的选项：命令项、菜单项和窗口项。菜单的结构一般有单一菜单、线状序列菜单、树状结构菜单、网状结构菜单等，其中树状结构菜单是最常见的结构。 设计菜单界面时应注意一般性原则：功能组织菜单，合理分类，并力求简短，前后一致；合理组织菜单界面的结构与层次；按一定的规则对菜单项进行排序；菜单选项的标题要力求文字简短、含义明确，并且最好以关键词开始；常用选项要设置快捷键；充分利用菜单选项的使能与禁止、可见与隐藏属性；使用弹出式菜单。 4）在处理大量相关数据的场合下，需要输入一系列的数据，这时填表输入界面是最理想的数据输入界面。在设计填表输入界面时应遵循的原则：一致性；有含义的表格标题；使用易于理解的指导性说明文字；栏目按逻辑分组排序；表格的组织结构和用户任务相一致；光标移动方便；出错提示；提供帮助；表格显示应美观、清楚，避免过分拥挤。
用户界面设计报告封面： 目录： 引言 (1) 01文档介绍 (1) 02项目背景 (1) 03读者对象 (1) 04参考文献 (2) 05术语与缩写解释 (2) 06界面设计规范 (2) 07界面关系和工作流程图 (2) 08主界面 (3) 09子界面 (4) 10美学设计 (5) 11网页配色基本概念 (5) 12网页设计理念 (5)
引言： 电子商务网站是人类商业发展一种全新模式。而要令这种全新模式真正化去实行和运作，则需要进行软件化的设计制作。对于此类电子商务网站来说，用户界面设计尤其重要。故针对用户界面得设计中，此设计报告能真正的方便于其电子商务网站的界面开发。 01文档介绍：该文档为MP4电子商务网站用户界面设计报告说明文档。 02文档目的： 此文档的编写目的是为了让界面设计人员能通过该文档以明确的界面设计规划来实现项目此方面的要求，方便使客户、电子商务网站 总软件设计人员、软件开发人员和整合测试人员了解设计方案的具体 界面分配，方便其他功能的制作。同时也为界面设计的制作工作提供 了直接文档说明。 03项目背景： 针对商务网站界面设计需求，以及方便日后买家的审美需要。随着市面上各风格网站的诞生，根据本公司做的电子网站资料需求用到 的界面所在，有必要地对此界面的诞生。 04参考文献： 【A】李梅、钟阳晶、李冬睿、李振军、杨颖、廖福保 共同编著《WEB程序设计》，广东农工商职业学
院出版，2010-6 【B】李德奇，《Windows程序设计案件教材（C#）》， 大连理工大学出版社，2008-1 【C】 郝安林SQL Server 2005 基础教程与实验指导 清华大学出版社2008.11 05术语与缩写解释： 06界面设计规范： 本界面制作应遵循互联网电子商务网站使用标准，界面设计制作合法化、理性化，既符合大众的市场所需也做到不侵权不盗版的 原则要求。 07界面关系和工作流程图： 经客户要求及小组讨论，本接口学习网站各个界面关系图如下：
UI设计(流程/界面)规范 一：UI设计基本概念与流程 1.1 目的 规范公司UI设计流程，使UI设计师参与到产品设计整个环节中来，对产品的易用性进行全流程负责，使UI设计的流程规范化，保证UI设计流程的可操作性。 1.2范围 l 界面设计 l 此文档用于界面设计,本文档的读者对象是项目管理人员、售前服务人员、UI界面设计人员、界面评审人员和配置测试人员。 1.3 概述 UI设计包括交互设计，用户研究，与界面设计三个部分。基于这三部分的UI设计流程是从一个产品立项开始，UI设计师就应根据流程规范，参与需求阶段、分析设计阶段、调研验证阶段、方案改进阶段、用户验证反馈阶段等环节，履行相应的岗位职责。UI设计师应全面负责产品以用户体验为中心的UI设计，并根据客户（市场）要求不断提升产品可用性。本规范明确规定了UI设计在各个环节的职责和要求，以保证每个环节的工作质量。 1.4 基本介绍 A、需求阶段 软件产品依然属于工业产品的范畴。依然离不开3W的考虑（Who,where,why.）也就是使用者，使用环境，使用方式的需求分析。所以在设计一个软件产品之前我们应该明确什么人
用(用户的年龄，性别，爱好，收入，教育程度等)。什么地方用（在办公室/家庭/厂房车间/公共场所）。如何用（鼠标键盘/遥控器/触摸屏）。上面的任何一个元素改变结果都会有相应的改变。 除此之外在需求阶段同类竞争产品也是我们必须了解的。同类产品比我们提前问世，我们要比他作的更好才有存在的价值。那么单纯的从界面美学考虑说哪个好哪个不好是没有一个很客观的评价标准的。我们只能说哪个更合适，更合适于我们的最终用户的就是最好的。B、分析设计阶段 通过分析上面的需求，我们进入设计阶段。也就是方案形成阶段。我们设计出几套不同风格的界面用于被选。 C、调研验证阶段 几套风格必须保证在同等的设计制作水平上，不能明显看出差异，这样才能得到用户客观真实的反馈。 测试阶段开始前我们应该对测试的具体细节进行清楚的分析描述。 调研阶段需要从以下几个问题出发： 用户对各套方案的第一印象 用户对各套方案的综合印象 用户对各套方案的单独评价 选出最喜欢的 选出其次喜欢的 对各方案的色彩，文字，图形等分别打分。 结论出来以后请所有用户说出最受欢迎方案的优缺点。 所有这些都需要用图形表达出来，直观科学。
人机交互基础教程 实验报告 实验题目：图形用户界面的设计 专业计算机科学与技术 学生姓名 班级学号 教师 指导单位计算机软件学院 日期
教师 评语教师签名： 年月日 成绩评定 备注
一、实验目的 (1)熟悉图形用户界面的设计原则 (2)利用一种设计工具完成图形化的用户界面设计 二、预备知识 图形用户界面又称为WIMP界面，由窗口(windows)、图标(icons)、菜单(menu)、指点设备(pointing device)四位一体，形成桌面(desktop) ，如图所示。 WIMP界面 用 户 手 眼 击键/指点 窗口、图标 菜单、文本 应用例程 图形用户界面是当前用户界面的主流，广泛应用于各档台式微机和图形工作站。图形用户界面的共同特点是以窗口管理系统为核心，使用键盘和鼠标器作为输入设备。窗口管理系统除了基于可重叠多窗口管理技术外，广泛采用的另一核心技术是事件驱动(event-driven)技术。 WIMP界面可看作是第二代人机界面，是基于图形方式的人机界面。在WIMP界面中，人被称为用户，人机通过对话进行工作。用户只能使用手这一种交互通道输入信息，通过视觉通道获取信息。在WIMP界面中，界面的输出可以为静态或动态的二维图形或图像等信息。
这种方式能同时输出不同种类的信息，用户也可以在几个工作环境中切换而不丢失几个工作之间的联系，通过菜单可以执行控制型和对话型任务。由于引入了图标、按钮和滚动条技术，大大减少键盘输入，提高了交互效率。基于鼠标和图形用户界面的交互技术极大地推动了计算机技术的普及。 (1)图形用户界面的三个重要思想 1）桌面隐喻(desktop metaphor) 指在用户界面中用人们熟悉的桌面上的图例清楚地表示计算机可以处理的能力。隐喻的表现方法:静态图标、动画、视频2）所见即所得(What You See Is What You Get，WYSIWYG) 显示的用户交互行为与应用程序最终产生的结果是一致的。 3）直接操纵(direct manipulation) 直接操纵是指可以把操作的对象、属性、关系显式地表示出来，用光笔、鼠标、触摸屏或数据手套等指点设备直接从屏幕上获取形象化命令与数据的过程。直接操纵的对象是命令、数据或是对数据的某种操作。 (2)设计图形用户界面的原则 1) 一般性原则：界面要具有一致性、常用操作要有快捷方式、提供简单的错误处理、对操作人员的重要操作要有信息反馈、操作可逆、设计良好的联机帮助、合理划分并高效地使用显示屏、保证信息显示方式与数据输入方式的协调一致 2) 颜色的使用：颜色是一种有效的强化手段，同时具有美学价
实验 5 建立图形用户界面 一、实验目的 了解图形用户界面基本组件窗口、按钮、文本框、选择框、滚动条等的使用方法，了解如何使用布局管理器对组件进行管理，以及如何使用Java 的事件处理机制。 二、实验要求 1. 掌握在Applet 容器中添加组件的方法，掌握使用布局管理器对组件进行管理的方法。 2. 理解Java 的事件处理机制，掌握为不同组件编写事件处理程序的方法。 3. 掌握编写独立运行的窗口界面的方法。 4. 了解Java Swing 组件的使用方法。 5. 了解对话框的使用方法。 三、实验内容 前面的在于体会，重点完成（六）的编程题。 （一）创建图形用户界面 图形用户界面（Graphic User Interface ，简称GUI）是为方便用户使用设计的窗口界面，在图形用户界面中用户可以看到什么就操作什么，取代了在字符方式下知道是什么后才能操作什么的方式。组件（Component）是构成GUI 的基本要素，通过对不同事件的响应来完成和用户的交互或组件之间的交互。组件一般作为一个对象放置在容器（Container）内，容器是能容纳和排列组件的对象，如Applet、Panel（面板）、Frame（窗口）等。通过容器的add 方法把组件加入到容器中。 1.在Applet 中添加标签、按钮并使用网格布局 ?程序功能：在Applet 容器中添加组件标签、按钮，并使用网格布局管理器排列组件在容器中的位置。 ?编写KY7_1.java 程序文件，源代码如下。 import java.awt.*; import java.applet.Applet; public class KY6_1 extends Applet { Label l1; Button b1, b2, b3, b4, b5, b6; public void init() { setLayout(new GridLayout(3,3)); // 设置网格布局（3 行3 列共9 个网格）
目录 第一章设计任务及要求 ---------------------------------------------------------------------------------------------------------------- 1 1.1设计依据-------------------------------------------------------------------------------------------------------------------------- 1 1.2课程设计内容 ------------------------------------------------------------------------------------------------------------------- 1 1.3课程设计要求 ------------------------------------------------------------------------------------------------------------------- 1 第二章设计原理-------------------------------------------------------------------------------------------------------------------------- 2 2.1设计题目分析 ------------------------------------------------------------------------------------------------------------------- 2 2.2 设计原理------------------------------------------------------------------------------------------------------------------------- 2 第三章设计实现-------------------------------------------------------------------------------------------------------------------------- 4 3.1 菜单栏编辑---------------------------------------------------------------------------------------------------------------------- 4 3.2 控件及代码的加入 ------------------------------------------------------------------------------------------------------------ 6 3.2.2 控件按钮的创建 ------------------------------------------------------------------------------------------------------ 7 3.2.3 控件代码加入 --------------------------------------------------------------------------------------------------------- 8 3.4 图像灰度处理 ------------------------------------------------------------------------------------------------------------------ 9 3.5 亮度调节------------------------------------------------------------------------------------------------------------------------- 9 3.6 底片处理----------------------------------------------------------------------------------------------------------------------- 11 3.7 直方图均衡化 ---------------------------------------------------------------------------------------------------------------- 12 第四章结果分析及总结 -------------------------------------------------------------------------------------------------------------- 13 第五章参考文献------------------------------------------------------------------------------------------------------------------------ 14 第六章附录 ------------------------------------------------------------------------------------------------------------------------------ 15
详细设计方案界面设计说明 2016.09
界面设计方案 总述 基本设计思路是所有的查询操作只通过一个文本框进行输入，如果不进行精确类别选择，将提供指定城市内的全局数据的模糊查询。 界面总览 展示的地图为右上城市列表中所选的城市的地图的全市总览。登入时默认城市为上海。 城市列表效果说明 城市列表应该按省份分开显示。 效果示意如下：
内部同时提供搜索框，帮助迅速定位城市。 效果示意如下： 定位完城市后，城市列表则收起。 效果示意如下： 查询框效果说明 查询框分为搜索输入框、类别选择菜单栏、输入提示框、结果展示框4大部分组成。 搜索输入框 用于接收用户输入的查询关键词。该输入框一直处于显示状态。 效果示意： 标注①所示的为关键字输入框。所有需要搜索的内容在此输入。 该文本框主要为接收用户所输入的查询关键字。 当在查询框输入内容后，该文本框末尾处将出现一个“X”的清除按钮控件，点击该按钮可以快速清除文本框中内容。参见示意图。 在输入内容时候，如果匹配到相关结果，将会在该文本框底部弹出输入提示框。效果示意如下：
如果无匹配结果，则不弹出“输入提示框”。 如果用户在该输入框中输入内容后，可以通过点击“回车键”激活查询（相当于点击“搜索按钮”），结果将显示在“结果展示框”内。 标注②为类别菜单通知栏。 该通知栏用于提示用户当前进行的搜索类别为何种类别。同时当用户进行搜索的时候，所要进行的搜索方式也据此决定。 此处的图标由用户在“类别选择菜单”中所点选的决定。用户在“类别选择菜单”中点选菜单后，其对应的图标也会显示在此。 标注③为搜索按钮。 点击该按钮后，如果“关键字输入框”内有输入的内容，则将激活查询，否则将不会做任何动作。 类别选择菜单栏 用于给用户选择所要进行的查询方式。本菜单栏默认为隐藏。 （建议菜单通过数据接口获得） 效果示意：
实验9 图形用户界面程序设计 实验目的： 1、通过编写程序掌握按钮、标签、文本框、菜单的使用方法 2、掌握ActionEvent、ItemEvent事件类接口监听器的产生，添加方法 3、掌握复选框、的创建与常用的使用方法 4、掌握以上各控件的事件响应过程及相应的处理方法 实验内容：（使用Jbuilder2005编写Application） 一、新建主类及主窗体 1.新建工程：【file】-【new project】，输入工程名Tes9； 2.新建Application：【file】-【new General】-Application，输入工程名主类名（class name 如图琐事），点击【next】，输入主窗体名：TestFrame，和标题栏文字“实验9主窗体”；
3.在打开的主窗体中点击【UI】视图，添加一个Swing控件：“File JMenuBar”如图所 示； 4.点击主窗体中【Menu】视图，添加菜单后，运行界面如下图所示：
二、新建“设置标签颜色”窗体 1.新建窗体：【new】-【Greneral-Frame】，在代码视图中，找到jbInit()方法设置窗体大 小及标题，语句如下：this.setSize(360,140); this.setTitle("设置标签颜色"); 2.在窗体中加入两个按钮名分别为“红色”，“蓝色”，还有一标签，其中显示的内容为 “hello,world”,要求按“红色”按钮时标签中的文字变为红色，按“蓝色”按钮时标签中文字显示蓝色，程序界面如下图所示： 提示： 使用jLabel1.setForeground(Color.RED);来改变标签的字体颜色。 3.在主窗体中的代码视图中定义成员变量Frame1 f； 4.然后进入主窗体的设计视图，对主菜单编程，双击鼠标（如图所示），
6.831 用户界面设计与实现 2004年秋季 GR0: 项目计划 本课程的核心是一个学期长的项目，其中，你将设计、实现并评估一个用户界面。用户界面设计是一个迭代过程，因此，你不能一次就建立好自己的UI，而要经过三次，逐步达到更高的精度，实现更完整的原型。为了有充足的时间实现这些迭代，我们需要尽早地开始该项目。 项目小组可以包括2到3个人。你们有很大的自由选择自己的主题。下面的一些指导原则会帮助你们选择一个好的主题。 ?项目必须有大量的用户界面。只是单纯播放MP3文件的程序是不够的；而允许用户浏览并组织MP3文件集合的播放器会更好。 ?用户界面必须是交互的。不允许开发一个只有静态web页面组成的web站点；而具有产品查询和购物车功能的电子商务网站更好。 ?首选有创意、原始的项目。已经有数不清的MP3播放器和电子商务购物车了。如果你的项目属于这样的热点领域，那么你应该选择一个该领域中使用现有方案尚不能很好解决的问 题。 你的项目可以与你课外的研究领域相关。如果在你们的研究小组中你或者其他人的系统需要一个良好的用户界面，那也可以作为该学期的项目。校园周围的其他组织或者活动需要特定的软件需求，你也才可以从中获得灵感，找到好的项目：宿舍或生活群体、体育队、活动小组、班级等。 大部分项目可能是桌面或者web应用程序，但是你可以建议使用其他类型的UI，只要适合于你希望解决的问题：例如，语言、手势、掌上电脑、或者普适计算。但至少必须能够在桌面上模拟你的项目，因为原型之一就是这样的一种模拟。不要过分地要求自己；例如，如果你们小组成员都没有掌上电脑的编程经验，那么要开发有这种需求的项目时应该深思熟虑。教学人员可以给你们选择的UI提供一些帮助，但我们也不是全能的。 这里有一些项目的例子，可能会激发你们的想象力： ?可定制的远程控制器。允许用户使用该界面创建和使用定制的远程控制面板遥控嵌入式设备，如电灯、A/V设备、家用电器。
实验二基于图形用户界面程序设计（上）实验目的 1．了解图形用户界面程序设计方法。 2．掌握继承的概念和继承的使用。 3．掌握访问权限的种类以及使用方法。 4．学会使用控件。 实验指导 任务一： 内容： 表 表 并定义该类的构造函数，写一段代码来测试你所写的类。 提交： 代码： ; { ; ; ; ;
{ ("我的无参数构造函数"); } () { ""; (); } () { ; (); } () { ; (); } () { "男"; (); } ( []) { (); (); (); (); (); } } 运行结果： :\\> 我的无参数构造函数 男 存在的问题和解决办法：
任务二： 内容： 表 并定义该类的构造函数，写一段代码来测试你所写的类。提交： 代码： ; { ; ; ; ; () { ("我的无参数构造函数"); } () { ""; (); } () { ; (); } () { ; ();
() { "男"; (); } ( []) { (); (); (); (); (); (); } } { ; () { ("我(子类)的无参数构造函数"); } () { ""; (); } } 运行结果： :\\> 我的无参数构造函数 我(子类)的无参数构造函数 男 存在的问题和解决办法：
任务三： 编写以下代码观察其运行结果，并解释每行代码： 提交： 包含解释的代码： 运行结果：
存在的问题和解决办法： 任务四： 用生成一个图像界面，在上添加两个组件，观察运行结果。提交： 代码： .*; { ; ; () { (""); (""); (""); ()(); ()(); (); (); } ( []) { (); } }
界面设计方案
目录 一、概述 (3) 二、用户界面设计原则 (3) 三、关于软件界面设计 (5) 1．用户导向（User oriented）原则 (5) 2．KISS（Keep It Simple And Stupid）原则 (6) 3．布局控制 (6) 4．视觉平衡 (7) 5．色彩的搭配和文字的可阅读性 (8) 6．和谐与一致性 (9) 7．个性化 (9) 四、关于网页界面设计 (10) 五、交互设计 (11) 六、图标 (11) 七、界面设计需求分析 (11) 八、界面参考 (12) 福隆界面设计 (12) 其他界面欣赏 (15) 1.WebQQ (15) 2. 一个虚拟展会软件的中国官网设计 (16) 3.香港置地集团 (20) 4、图标 (23) 5.景观园林 (28) 6.一组精美的外国网页 (30) 7、匈牙利M1LLAH网页界面欣赏 (38) 8、Web design 页面设计收集 (42) 9. 色彩与质感并重的国外网页设计欣赏 (47) 10、漂亮简洁的布局 (56)
一、概述 界面设计是人与机器之间传递和交换信息的媒介，包括硬件界面和软件界面，是计算机科学与心理学、设计艺术学、认知科学和人机工程学的交叉研究领域。近年来，随着信息技术与计算机技术的迅速发展，网络技术的突飞猛进，人机界面设计和开发已成为国际计算机界和设计界最为活跃的研究方向。 UI即 User Interface(用户界面)的简称。UI设计则是指对软件的人机交互、操作逻辑、界面美观的整体设计。好的UI设计不仅是让软件变得有个性有品味，还要让软件的操作变得舒适、简单、自由,充分体现软件的定位和特点。 二、用户界面设计原则 1.简易性 界面的简洁是要让用户便于使用、便于了解、并能减少用户发生错误选择的可能性。 2.用户语言 界面中要使用能反应用户本身的语言，而不是游戏设计者的语言。 3.记忆负担最小化 人脑不是电脑，在设计界面时必须要考虑人类大脑处理信息的限度。人类的短期记忆极不稳定、有限，24小时内存在25%的遗忘率。所以对用户来说，浏览信息要比记忆更容易。
GUI指导教程系列(1)：GUI入门基本操作 为什么在MATLAB中要使用GUI呢？其实GUI就是Matlab中的Visual Basic，是面向对象的编程，可以使Matlab程序的终端用户，即使不懂的Matlab也可以轻易操作该程序！ 如果没有图形用户界面(GUI)我们只能从命令行(Command Window)中调用相关程序，这相对比较繁琐，并且不是所有用户都是这个能力。就好比计算机的DOS 系统，在有windows的情况下，您会选择DOS吗？当然我们也不排除骨灰级的人物！ 在本节教程我们主要针对没有GUI创建和使用经历的网友，但是必要的MATLAB 基础知识是需要的。在教程中我们将创建一个简单的GUI程序，它执行两个数的加法运行，然后显示其运算结果。 好下面开始我们的教程！ 一、打开和创建GUI界面 1、首先打开Matlab，在Command Window中输入guide回车 2、此时打开GUI编辑器GUIDE(GUI Developer的缩写) 2.1 界面上有两个标签也“Creat New GUI”和“Open Existing GUI” 如果创建新的GUI此时我们选择第一个标签页，但如果打开其它已经存在的GUI 就点击第二个标签吧
2.2 这里我们选择第一个标签下的“Blank GUI”(空白GUI)，下面还有几个系统GUI模版，你可以根据需要选择其它的。 2.3 点击“OK”我们正式进入GUIDE界面，呵呵，是不是感觉似曾相识 3、添加你需要的控件到figure中 在添加控件之前，您最好对您的GUI界面布局已经有一定的构思了，否则盲目性太大了不利于您的编程。下面是我们构思的布局。
实验6. 图形用户界面设计 一、 实验目的 1. 掌握图形对象属性的基本操作； 2. 掌握菜单及对话框设计、建立控件对象的方法。 二、 实验环境 1. 计算机 2. matlab7.1 三、 实验说明 1. 正确操作，认真观察； 2. 实验学时：2学时； 3. 学会使用help ； 4. 保存整理实验结果，提交实验报告。 四、 实验内容 1.设计如教材P374 图1所示的菜单，并在此基础上增加选项：可以改变曲线的颜色，可以改变窗口背景颜色。 2.（选做）采用图形用户界面，从键盘输入参数a 、b 、n 的值，考察参数对极坐标曲线)cos(θρn b a +=的影响。 五、 实验程序及结果 1. screen=get(0,'ScreenSize'); W=screen(3);H=screen(4); figure('Color','w','Position',[0.2*H,0.2*H,0.5*W,0.3*H],... 'Name','菜单设计实验','NumberTitle','off','MenuBar','none'); hplot=uimenu(gcf,'Label','&Plot'); %定义plot 菜单项 uimenu(hplot,'Label','Sine Wave','Call',... ['t=-pi:pi/20:pi;','h0=plot(t,sin(t));',...
'set(hlr,''Enable'',''on'');',... 'set(hlg,''Enable'',''on'');',... 'set(hlb,''Enable'',''on'');']); uimenu(hplot,'Label','Cosine Wave','Call',... ['t=-pi:pi/20:pi;','h0=plot(t,cos(t));',... 'set(hlr,''Enable'',''on'');',... 'set(hlg,''Enable'',''on'');',... 'set(hlb,''Enable'',''on'');']); uimenu(hplot,'Label','&Exit','Call','close(gcf)'); hc=uimenu(gcf,'Label','&Color'); %定义Color菜单项 hw=uimenu(hc,'Label','&Window Color'); uimenu(hw,'Label','&Red','Call','set(gcf,''Color'',''r'');'); uimenu(hw,'Label','&Green','Call','set(gcf,''Color'',''g'');'); uimenu(hw,'Label','&Blue','Call','set(gcf,''Color'',''b'');'); hl=uimenu(hc,'Label','&Line Color','Separator','on'); hlr=uimenu(hl,'Label','&Red','Call',... 'set(h0,''Color'',''r'');','Enable','off'); hlg=uimenu(hl,'Label','&Green','Call',... 'set(h0,''Color'',''g'');','Enable','off'); hlb=uimenu(hl,'Label','&Blue','Call',... 'set(h0,''Color'',''b'');','Enable','off'); 2. hf=figure('menubar','none','name','图形演示',... 'numbertitle','off'); %定义图形窗口 set(gcf,'unit','normalized','posi',[0.2,0.3,0.55,0.36]); axes('posi',[0.05,0.15,0.55,0.7]); %定义坐标轴 uicontrol(gcf,'style','text','unit','normalized',... %定义静态文本'posi',[0.63,0.85,0.1,0.1],'string','参数 a',... 'horizontal','center'); uicontrol(gcf,'style','text','unit','normalized',...