人机交互用户界面设计实验报告.pdf

《人机交互用户界面设计实验报告.pdf》由会员分享，可在线阅读，更多相关《人机交互用户界面设计实验报告.pdf（16页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、实验一图形用户界面的设计一一实验目的和要求实验目的和要求1) 熟悉图形用户界面的设计原则2)利用一种设计工具完成图形化的用户界面设计二二实验内容与步骤实验内容与步骤(一) 实验内容：利用常用的设计工具(VC/VB/Delphi/PB 等)完成一个通用图形用户界面设计，要遵循界面设计的一般原则(一致性、快捷方式、提供错误处理)，注意颜色的使用，学会使用图标、按钮、屏幕布局、菜单和对话框的设计(二)实验步骤1设计多个对话框，完成填表输入界面的设计，合理使用图标、按钮、颜色；2设计不同形式的菜单，完成对不同对话框的调用；3提供简单的错误处理、联机帮助三三 界面例如界面例如1 1、登登录界面录界面2

2、2、主界面、主界面13代码：登录界面：using System;using System.Drawing;using System.Collections;using SystemponentModel;using System.Windows.Forms;using System.Data;2using System.Data.OleDb;/ / Form1 的摘要说明。/ private System.Windows.Forms.Button btClose;private System.Windows.Forms.TextBox password;private System.Windo

3、ws.Forms.Label label3;private System.Windows.Forms.Label label2;private System.Windows.Forms.Label label1;private System.Windows.FormsboBox comboName;/ / 必需的设计器变量。/ private SystemponentModel.Container components = null;private System.Windows.Forms.Button btSure;private OleDbConnection oleConnection1

4、 = null;public Login()/ Windows 窗体设计器支持所必需的/InitializeComponent();/ TODO: 在 InitializeComponent 调用后添加任何构造函数代码/ / 清理所有正在使用的资源。/ protected override void Dispose( bool disposing )if( disposing )if (components != null)components.Dispose();3base.Dispose( disposing );#region Windows 窗体设计器生成的代码/ / 设计器支持所需的

5、方法 - 不要使用代码编辑器修改/ 此方法的内容。/ private void InitializeComponent()SystemponentModelponentResourceManager resources =new SystemponentModelponentResourceManager(typeof(Login);this.btClose = new System.Windows.Forms.Button();this.btSure = new System.Windows.Forms.Button();this.password = new System.Windows.

6、Forms.TextBox();this.label3 = new System.Windows.Forms.Label();this.label2 = new System.Windows.Forms.Label();this.label1 = new System.Windows.Forms.Label();thisboName = new System.Windows.FormsboBox();this.SuspendLayout();/ btClose/this.btClose.FlatStyle = System.Windows.Forms.FlatStyle.Popup;this.

7、btClose.ForeColor = System.Drawing.Color.Black;this.btClose.Location = new System.Drawing.Point(159, 220);this.btClose.Name = btClose;this.btClose.Size = new System.Drawing.Size(75, 23);this.btClose.TabIndex = 27;this.btClose.Text = 取消;this.btClose.Click += new System.EventHandler(this.btClose_Click

8、);/ btSure/this.btSure.FlatStyle = System.Windows.Forms.FlatStyle.Popup;this.btSure.ForeColor = System.Drawing.Color.Black;this.btSure.Location = new System.Drawing.Point(46, 220);this.btSure.Name = btSure;this.btSure.Size = new System.Drawing.Size(75, 23);this.btSure.TabIndex = 26;this.btSure.Text

9、= 确定;this.btSure.Click += new System.EventHandler(this.btSure_Click);4/ password/this.password.BorderStyle =System.Windows.Forms.BorderStyle.FixedSingle;this.password.Location = new System.Drawing.Point(130, 136);this.password.Name = password;this.password.PasswordChar = *;this.password.Size = new S

10、ystem.Drawing.Size(100, 21);this.password.TabIndex = 25;this.password.Text = admin;/ label3/this.label3.Font = new System.Drawing.Font(宋体, ,System.Drawing.FontStyle.Bold, System.Drawing.GraphicsUnit.Point, (byte)(134);this.label3.ForeColor = System.Drawing.Color.Black;this.label3.Location = new Syst

11、em.Drawing.Point(66, 136);this.label3.Name = label3;this.label3.Size = new System.Drawing.Size(56, 23);this.label3.TabIndex = 23;this.label3.Text = 密码;/ label2/this.label2.Font = new System.Drawing.Font(宋体, ,System.Drawing.FontStyle.Bold, System.Drawing.GraphicsUnit.Point, (byte)(134);this.label2.Fo

12、reColor = System.Drawing.Color.Black;this.label2.Location = new System.Drawing.Point(66, 96);this.label2.Name = label2;this.label2.Size = new System.Drawing.Size(56, 23);this.label2.TabIndex = 22;this.label2.Text = 用户名;/ label1/this.label1.Font = new System.Drawing.Font(楷体_GB2312, 18F,System.Drawing

13、.FontStyle.Bold, System.Drawing.GraphicsUnit.Point, (byte)(134);this.label1.ForeColor = System.Drawing.Color.Black;this.label1.Location = new System.Drawing.Point(42, 48);this.label1.Name = label1;this.label1.Size = new System.Drawing.Size(208, 28);this.label1.TabIndex = 21;this.label1.Text = 理财管理信息

14、系统;5/ comboName/thisboName.Location = new System.Drawing.Point(130, 96);thisboName.Name = comboName;thisboName.Size = new System.Drawing.Size(104, 20);thisboName.TabIndex = 28;/ Login/this.AutoScaleBaseSize = new System.Drawing.Size(6, 14);this.BackColor = System.Drawing.Color.SeaShell;this.Backgrou

15、ndImage =(System.Drawing.Image)(resources.GetObject($this.BackgroundImage);this.ClientSize = new System.Drawing.Size(298, 287);this.Controls.Add(thisboName);this.Controls.Add(this.btClose);this.Controls.Add(this.btSure);this.Controls.Add(this.password);this.Controls.Add(this.label3);this.Controls.Ad

16、d(this.label2);this.Controls.Add(this.label1);this.MaximizeBox = false;this.MinimizeBox = false;this.Name = Login;this.StartPosition =System.Windows.Forms.FormStartPosition.CenterScreen;this.Text = 登录;this.Load += new System.EventHandler(this.Login_Load);this.ResumeLayout(false);this.PerformLayout()

17、;#endregion/ / 应用程序的主入口点。/ STAThreadstatic void Main()Application.Run(new MainForm();6private void btSure_Click(object sender, System.EventArgs e)trystring sql=select uName,PWD from family where uName=+thisboName.Text +;if(oleConnection1=null)oleConnection1 = MainForm.getConnection();OleDbCommand cm

18、d = oleConnection1.CreateCommand();cmdmandText =sql;OleDbDataReader dr = cmd.ExecuteReader();if(!dr.Read()MessageBox.Show(无此用户，请重试！,提示);dr.Close();cmd.Dispose();return;elseif(!dr.GetString(1).Equals (this.password.Text.ToString()MessageBox.Show(n密码错误，请重试！,提示);dr.Close();cmd.Dispose();return;Menumain

19、menu=(MainForm)(this.MdiParent).getMainMenu();for (int i=0;i0)thisboName.SelectedIndex=0;dr.Close();cmd.Dispose();主界面：using System;using System.Drawing;using System.Collections;using SystemponentModel;using System.Windows.Forms;using System.Data;8using System.Data.OleDb;/ / Form1 的摘要说明。/ private Sys

20、tem.Windows.Forms.Button btClose;private System.Windows.Forms.TextBox password;private System.Windows.Forms.Label label3;private System.Windows.Forms.Label label2;private System.Windows.Forms.Label label1;private System.Windows.FormsboBox comboName;/ / 必需的设计器变量。/ private SystemponentModel.Container

21、components = null;private System.Windows.Forms.Button btSure;private OleDbConnection oleConnection1 = null;public Login()/ Windows 窗体设计器支持所必需的/InitializeComponent();/ TODO: 在 InitializeComponent 调用后添加任何构造函数代码/ / 清理所有正在使用的资源。/ protected override void Dispose( bool disposing )if( disposing )if (compon

22、ents != null)components.Dispose();9base.Dispose( disposing );#region Windows 窗体设计器生成的代码/ / 设计器支持所需的方法 - 不要使用代码编辑器修改/ 此方法的内容。/ private void InitializeComponent()SystemponentModelponentResourceManager resources =new SystemponentModelponentResourceManager(typeof(Login);this.btClose = new System.Windows

23、.Forms.Button();this.btSure = new System.Windows.Forms.Button();this.password = new System.Windows.Forms.TextBox();this.label3 = new System.Windows.Forms.Label();this.label2 = new System.Windows.Forms.Label();this.label1 = new System.Windows.Forms.Label();thisboName = new System.Windows.FormsboBox()

24、;this.SuspendLayout();/ btClose/this.btClose.FlatStyle = System.Windows.Forms.FlatStyle.Popup;this.btClose.ForeColor = System.Drawing.Color.Black;this.btClose.Location = new System.Drawing.Point(159, 220);this.btClose.Name = btClose;this.btClose.Size = new System.Drawing.Size(75, 23);this.btClose.Ta

25、bIndex = 27;this.btClose.Text = 取消;this.btClose.Click += new System.EventHandler(this.btClose_Click);/ btSure/this.btSure.FlatStyle = System.Windows.Forms.FlatStyle.Popup;this.btSure.ForeColor = System.Drawing.Color.Black;this.btSure.Location = new System.Drawing.Point(46, 220);this.btSure.Name = bt

26、Sure;this.btSure.Size = new System.Drawing.Size(75, 23);this.btSure.TabIndex = 26;this.btSure.Text = 确定;this.btSure.Click += new System.EventHandler(this.btSure_Click);10/ password/this.password.BorderStyle =System.Windows.Forms.BorderStyle.FixedSingle;this.password.Location = new System.Drawing.Poi

27、nt(130, 136);this.password.Name = password;this.password.PasswordChar = *;this.password.Size = new System.Drawing.Size(100, 21);this.password.TabIndex = 25;this.password.Text = admin;/ label3/this.label3.Font = new System.Drawing.Font(宋体, ,System.Drawing.FontStyle.Bold, System.Drawing.GraphicsUnit.P

28、oint, (byte)(134);this.label3.ForeColor = System.Drawing.Color.Black;this.label3.Location = new System.Drawing.Point(66, 136);this.label3.Name = label3;this.label3.Size = new System.Drawing.Size(56, 23);this.label3.TabIndex = 23;this.label3.Text = 密码;/ label2/this.label2.Font = new System.Drawing.Fo

29、nt(宋体, ,System.Drawing.FontStyle.Bold, System.Drawing.GraphicsUnit.Point, (byte)(134);this.label2.ForeColor = System.Drawing.Color.Black;this.label2.Location = new System.Drawing.Point(66, 96);this.label2.Name = label2;this.label2.Size = new System.Drawing.Size(56, 23);this.label2.TabIndex = 22;this

30、.label2.Text = 用户名;/ label1/this.label1.Font = new System.Drawing.Font(楷体_GB2312, 18F,System.Drawing.FontStyle.Bold, System.Drawing.GraphicsUnit.Point, (byte)(134);this.label1.ForeColor = System.Drawing.Color.Black;this.label1.Location = new System.Drawing.Point(42, 48);this.label1.Name = label1;thi

31、s.label1.Size = new System.Drawing.Size(208, 28);this.label1.TabIndex = 21;this.label1.Text = 理财管理信息系统;11/ comboName/thisboName.Location = new System.Drawing.Point(130, 96);thisboName.Name = comboName;thisboName.Size = new System.Drawing.Size(104, 20);thisboName.TabIndex = 28;/ Login/this.AutoScaleB

32、aseSize = new System.Drawing.Size(6, 14);this.BackColor = System.Drawing.Color.SeaShell;this.BackgroundImage =(System.Drawing.Image)(resources.GetObject($this.BackgroundImage);this.ClientSize = new System.Drawing.Size(298, 287);this.Controls.Add(thisboName);this.Controls.Add(this.btClose);this.Contr

33、ols.Add(this.btSure);this.Controls.Add(this.password);this.Controls.Add(this.label3);this.Controls.Add(this.label2);this.Controls.Add(this.label1);this.MaximizeBox = false;this.MinimizeBox = false;this.Name = Login;this.StartPosition =System.Windows.Forms.FormStartPosition.CenterScreen;this.Text = 登

34、录;this.Load += new System.EventHandler(this.Login_Load);this.ResumeLayout(false);this.PerformLayout();#endregion/ / 应用程序的主入口点。/ STAThreadstatic void Main()Application.Run(new MainForm();12private void btSure_Click(object sender, System.EventArgs e)trystring sql=select uName,PWD from family where uNa

35、me=+thisboName.Text +;if(oleConnection1=null)oleConnection1 = MainForm.getConnection();OleDbCommand cmd = oleConnection1.CreateCommand();cmdmandText =sql;OleDbDataReader dr = cmd.ExecuteReader();if(!dr.Read()MessageBox.Show(无此用户，请重试！,提示);dr.Close();cmd.Dispose();return;elseif(!dr.GetString(1).Equals

36、 (this.password.Text.ToString()MessageBox.Show(n密码错误，请重试！,提示);dr.Close();cmd.Dispose();return;Menumainmenu=(MainForm)(this.MdiParent).getMainMenu();for (int i=0;i0)thisboName.SelectedIndex=0;dr.Close();cmd.Dispose();四四 实验总结实验总结1. 1.界面要具有一致性、常用操作要有快捷方式、提供简单的错误处理、对操作人员的重要操作要有信息反馈、操作可逆、设计良好的联机帮助、合理划分并1

37、4高效地使用显示屏、保证信息显示方式与数据输入方式的协调一致2. 颜色是一种有效的强化手段，同时具有美学价值。使用颜色时应注意如下几点：限制同时显示的颜色数；画面中活动对象的颜色应鲜明，而非活动对象应暗淡；尽量防止不相容的颜色放在一起，如黄与蓝，红与绿等，除非作比照时用； 假设用颜色表示某种信息或对象属性，要使用户理解这种表示，并尽量采用通用的表示规则。3. 3.图标是可视地表示实体信息的简洁、抽象的符号。图标设计是方寸艺术，需要在很小的范围内表现出图标的内涵。设计图标时应该着重考虑视觉冲击力，要使用简单的颜色，利用眼睛对色彩和网点的空间混合效果，做出精彩图标 。1 1） 设计按钮应该具有交互

38、性，应该有3 到 6 种状态效果(点击时的状态、鼠标放在上面但未点击的状态、点击前鼠标未放在上面时的状态、点击后鼠标未放在上面时的状态、不能点击时的状态、独立自动变化的状态 )，按钮应具备简洁的图示效果， 应能够让使用者产生功能上的关联反应。属于一个群组的按钮应该风格统一，功能差异大的按钮应该有所区别。2） 设计屏幕布局(Layout)时应该使各功能区重点突出,应遵循如下几条原则：平衡原则、预期原则、经济原则、顺序原则、规则化3） 菜单在图形界面的应用程序中使用得非常普遍，是软件界面设计的一个重要组成方面，描述了一个软件的大致功能和风格。 菜单中的选项在功能上与按钮相当， 一般具有以下一种或几

39、种类型的选项： 命令项、 菜单项和窗口项。 菜单的结构一般有单一菜单、线状序列菜单、树状结构菜单、网状结构菜单等，其中树状结构菜单是最常见的结构。设计菜单界面时应注意的一般性原则：功能组织菜单，合理分类，并力求简短，前后一致；合理组织菜单界面的结构与层次；按一定的规则对菜单项进行排序；菜单项选择项的标题要力求文字简短、含义明确，并且最好以关键词开始；常用选项要设置快捷键； 充分利用菜单项选择项的使能与禁止、 可见与隐藏属性；使用弹出式菜单 。4） 在处理大量相关数据的场合下，需要输入一系列的数据，这时填表输入界面是最理想的数据输入界面。在设计填表输入界面时应遵循的原则：一致性；有含义的表格标题；使用易于理解的指导性说明文字；栏目按逻辑分组排序；表15格的组织结构和用户任务相一致；光标移动方便；出错提示；提供帮助；表格显示应美观、清楚，防止过分拥挤。16