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

实验一   图形用户界面的设计

一  实验目的和要求
1) 熟悉图形用户界面的设计原则

2)利用一种设计工具完成图形化的用户界面设计

二  实验内容与步骤

(一) 实验内容：

利用常用的设计工具(VC/VB/Delphi/PB等)完成一个通用图形用户界面设计，要遵循界面设计的一般原则(一致性、快捷方式、提供错误处理)，注意颜色的使用，学会使用图标、按钮、屏幕布局、菜单和对话框的设计

(二)实验步骤

1．设计多个对话框，完成填表输入界面的设计，合理使用图标、按钮、颜色；

2．设计不同形式的菜单，完成对不同对话框的调用；

3．提供简单的错误处理、联机帮助

三界面示例

1、登录界面

2、主界面


3代码：

登录界面：

using System;

using System.Drawing;

using System.Collections;

using System.ComponentModel;

using System.Windows.Forms;

using System.Data;

using System.Data.OleDb;

// Download by http://www.codefans.net

namespace WealthMIS.user

{

       /// <summary>

       /// Form1 的摘要说明。

       /// </summary>

       public class Login : System.Windows.Forms.Form

       {

              private System.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.Forms.ComboBox comboName;

              /// <summary>

              /// 必需的设计器变量。

              /// </summary>

              private System.ComponentModel.Container components = null;

              private System.Windows.Forms.Button btSure;

              private OleDbConnection oleConnection1 = null;

              public Login()

              {

                     //

                     // Windows 窗体设计器支持所必需的

                     //

                     InitializeComponent();

                     //

                     // TODO: 在 InitializeComponent 调用后添加任何构造函数代码

                     //

              }

              /// <summary>

              /// 清理所有正在使用的资源。

              /// </summary>

              protected override void Dispose( bool disposing )

              {

                     if( disposing )

                     {

                            if (components != null)

                            {

                                   components.Dispose();

                            }

                     }

                     base.Dispose( disposing );

              }

              #region Windows 窗体设计器生成的代码

              /// <summary>

              /// 设计器支持所需的方法 - 不要使用代码编辑器修改

              /// 此方法的内容。

              /// </summary>

              private void InitializeComponent()

              {

            System.ComponentModel.ComponentResourceManager resources = new System.ComponentModel.ComponentResourceManager(typeof(Login));

            this.btClose = new System.Windows.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();

            this.comboName = new System.Windows.Forms.ComboBox();

            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.TabIndex = 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 = "btSure";

            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);

            //

            // 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 System.Drawing.Size(100, 21);

            this.password.TabIndex = 25;

            this.password.Text = "admin";

            //

            // label3

            //

            this.label3.Font = new System.Drawing.Font("宋体", 10.5F, System.Drawing.FontStyle.Bold, System.Drawing.GraphicsUnit.Point, ((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.Font("宋体", 10.5F, 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.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";

            this.label1.Size = new System.Drawing.Size(208, 28);

            this.label1.TabIndex = 21;

            this.label1.Text = "理财管理信息系统";

            //

            // comboName

            //

            this.comboName.Location = new System.Drawing.Point(130, 96);

            this.comboName.Name = "comboName";

            this.comboName.Size = new System.Drawing.Size(104, 20);

            this.comboName.TabIndex = 28;

            //

            // Login

            //

            this.AutoScaleBaseSize = 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(this.comboName);

            this.Controls.Add(this.btClose);

            this.Controls.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 = "登录";

            this.Load += new System.EventHandler(this.Login_Load);

            this.ResumeLayout(false);

            this.PerformLayout();

              }

              #endregion

              /// <summary>

              /// 应用程序的主入口点。

              /// </summary>

              [STAThread]

              static void Main()

              {

                     Application.Run(new MainForm());

              }

              private void btSure_Click(object sender, System.EventArgs e)

              {

                     try

                     {

                            string sql="select uName,PWD from family where uName='"+this.comboName.Text +"'";

                            if(oleConnection1==null)

                                   oleConnection1 = MainForm.getConnection();

                            OleDbCommand cmd = oleConnection1.CreateCommand();

                            cmd.CommandText =sql;                            

                            OleDbDataReader dr = cmd.ExecuteReader();                      

                            if(!dr.Read())

                            {

                                   MessageBox.Show("无此用户，请重试！","提示");

                                   dr.Close();

                                   cmd.Dispose();

                                   return;

                            }

                            else

                            {    

                                   if(!dr.GetString(1).Equals (this.password.Text.ToString()))

                                   {

                                          MessageBox.Show("\n密码错误，请重试！","提示");

                                          dr.Close();

                                          cmd.Dispose();

                                          return;

                                   }                                

                                   Menu mainmenu=((MainForm)(this.MdiParent)).getMainMenu();

                                   for (int i=0;i<6;i++)

                                   {

                                          mainmenu.MenuItems[i].Visible=true;

                                   }

                                   StatusBar statusBar = ((MainForm)(this.MdiParent)).getStatusBar();

                                   statusBar.Panels[0].Text="当前登录用户";

                                   statusBar.Panels[1].Text=this.comboName.Text.Trim();

                                   statusBar.Panels[2].Text=DateTime.Now.ToString();

                                   statusBar.Panels[3].Text="理财管理信息系统";

                    

                                   dr.Close();

                                   cmd.Dispose();

                                   this.Close();

                            }                                       

                     }

                     catch(Exception ee)

                     {

                            MessageBox.Show("\n"+ee.ToString());

                     }

              }

              private void btClose_Click(object sender, System.EventArgs e)

              {

                     this.Close();

              }

              private void Login_Load(object sender, System.EventArgs e)

              {

                     if (oleConnection1==null)

                            oleConnection1=MainForm.getConnection();

                     //取出系统的所有用户名

                     //显示在下拉列表,这样用户登录的时候

                     //选择用户名就可以了,不用再输入用户名了

                     string sql="select uName from family";

                     OleDbCommand cmd = new OleDbCommand(sql,oleConnection1);

                     OleDbDataReader dr = cmd.ExecuteReader();

                     int flag = 0;

                     while(dr.Read())

                     {

                            this.comboName.Items.Add(dr.GetString(0));

                            flag++;

                     }

                     //如果系统存在用户,则默认选中第一个用户

                     if (flag>0)

                            this.comboName.SelectedIndex=0;

                     dr.Close();

                     cmd.Dispose();

              }

       }

}

主界面：

using System;

using System.Drawing;

using System.Collections;

using System.ComponentModel;

using System.Windows.Forms;

using System.Data;

using System.Data.OleDb;

// Download by http://www.codefans.net

namespace WealthMIS.user

{

       /// <summary>

       /// Form1 的摘要说明。

       /// </summary>

       public class Login : System.Windows.Forms.Form

       {

              private System.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.Forms.ComboBox comboName;

              /// <summary>

              /// 必需的设计器变量。

              /// </summary>

              private System.ComponentModel.Container components = null;

              private System.Windows.Forms.Button btSure;

              private OleDbConnection oleConnection1 = null;

              public Login()

              {

                     //

                     // Windows 窗体设计器支持所必需的

                     //

                     InitializeComponent();

                     //

                     // TODO: 在 InitializeComponent 调用后添加任何构造函数代码

                     //

              }

              /// <summary>

              /// 清理所有正在使用的资源。

              /// </summary>

              protected override void Dispose( bool disposing )

              {

                     if( disposing )

                     {

                            if (components != null)

                            {

                                   components.Dispose();

                            }

                     }

                     base.Dispose( disposing );

              }

              #region Windows 窗体设计器生成的代码

              /// <summary>

              /// 设计器支持所需的方法 - 不要使用代码编辑器修改

              /// 此方法的内容。

              /// </summary>

              private void InitializeComponent()

              {

            System.ComponentModel.ComponentResourceManager resources = new System.ComponentModel.ComponentResourceManager(typeof(Login));

            this.btClose = new System.Windows.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();

            this.comboName = new System.Windows.Forms.ComboBox();

            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.TabIndex = 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 = "btSure";

            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);

            //

            // 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 System.Drawing.Size(100, 21);

            this.password.TabIndex = 25;

            this.password.Text = "admin";

            //

            // label3

            //

            this.label3.Font = new System.Drawing.Font("宋体", 10.5F, System.Drawing.FontStyle.Bold, System.Drawing.GraphicsUnit.Point, ((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.Font("宋体", 10.5F, 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.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";

            this.label1.Size = new System.Drawing.Size(208, 28);

            this.label1.TabIndex = 21;

            this.label1.Text = "理财管理信息系统";

            //

            // comboName

            //

            this.comboName.Location = new System.Drawing.Point(130, 96);

            this.comboName.Name = "comboName";

            this.comboName.Size = new System.Drawing.Size(104, 20);

            this.comboName.TabIndex = 28;

            //

            // Login

            //

            this.AutoScaleBaseSize = 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(this.comboName);

            this.Controls.Add(this.btClose);

            this.Controls.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 = "登录";

            this.Load += new System.EventHandler(this.Login_Load);

            this.ResumeLayout(false);

            this.PerformLayout();

              }

              #endregion

              /// <summary>

              /// 应用程序的主入口点。

              /// </summary>

              [STAThread]

              static void Main()

              {

                     Application.Run(new MainForm());

              }

              private void btSure_Click(object sender, System.EventArgs e)

              {

                     try

                     {

                            string sql="select uName,PWD from family where uName='"+this.comboName.Text +"'";

                            if(oleConnection1==null)

                                   oleConnection1 = MainForm.getConnection();

                            OleDbCommand cmd = oleConnection1.CreateCommand();

                            cmd.CommandText =sql;                            

                            OleDbDataReader dr = cmd.ExecuteReader();                      

                            if(!dr.Read())

                            {

                                   MessageBox.Show("无此用户，请重试！","提示");

                                   dr.Close();

                                   cmd.Dispose();

                                   return;

                            }

                            else

                            {    

                                   if(!dr.GetString(1).Equals (this.password.Text.ToString()))

                                   {

                                          MessageBox.Show("\n密码错误，请重试！","提示");

                                          dr.Close();

                                          cmd.Dispose();

                                          return;

                                   }                                

                                   Menu mainmenu=((MainForm)(this.MdiParent)).getMainMenu();

                                   for (int i=0;i<6;i++)

                                   {

                                          mainmenu.MenuItems[i].Visible=true;

                                   }

                                   StatusBar statusBar = ((MainForm)(this.MdiParent)).getStatusBar();

                                   statusBar.Panels[0].Text="当前登录用户";

                                   statusBar.Panels[1].Text=this.comboName.Text.Trim();

                                   statusBar.Panels[2].Text=DateTime.Now.ToString();

                                   statusBar.Panels[3].Text="理财管理信息系统";

                    

                                   dr.Close();

                                   cmd.Dispose();

                                   this.Close();

                            }                                       

                     }

                     catch(Exception ee)

                     {

                            MessageBox.Show("\n"+ee.ToString());

                     }

              }

              private void btClose_Click(object sender, System.EventArgs e)

              {

                     this.Close();

              }

              private void Login_Load(object sender, System.EventArgs e)

              {

                     if (oleConnection1==null)

                            oleConnection1=MainForm.getConnection();

                     //取出系统的所有用户名

                     //显示在下拉列表,这样用户登录的时候

                     //选择用户名就可以了,不用再输入用户名了

                     string sql="select uName from family";

                     OleDbCommand cmd = new OleDbCommand(sql,oleConnection1);

                     OleDbDataReader dr = cmd.ExecuteReader();

                     int flag = 0;

                     while(dr.Read())

                     {

                            this.comboName.Items.Add(dr.GetString(0));

                            flag++;

                     }

                     //如果系统存在用户,则默认选中第一个用户

                     if (flag>0)

                            this.comboName.SelectedIndex=0;

                     dr.Close();

                     cmd.Dispose();

              }

       }

}

四实验总结

1.界面要具有一致性、常用操作要有快捷方式、提供简单的错误处理、对操作人员的重要操作要有信息反馈、操作可逆、设计良好的联机帮助、合理划分并高效地使用显示屏、保证信息显示方式与数据输入方式的协调一致

2. 颜色是一种有效的强化手段，同时具有美学价值。使用颜色时应注意如下几点：限制同时显示的颜色数；画面中活动对象的颜色应鲜明，而非活动对象应暗淡；尽量避免不相容的颜色放在一起，如黄与蓝，红与绿等，除非作对比时用； 若用颜色表示某种信息或对象属性，要使用户理解这种表示，并尽量采用通用的表示规则。

3.图标是可视地表示实体信息的简洁、抽象的符号。图标设计是方寸艺术，需要在很小的范围内表现出图标的内涵。设计图标时应该着重考虑视觉冲击力，要使用简单的颜色，利用眼睛对色彩和网点的空间混合效果，做出精彩图标 。

1）    设计按钮应该具有交互性，应该有3到6种状态效果(点击时的状态、鼠标放在上面但未点击的状态、点击前鼠标未放在上面时的状态、点击后鼠标未放在上面时的状态、不能点击时的状态、独立自动变化的状态)，按钮应具备简洁的图示效果，应能够让使用者产生功能上的关联反应。属于一个群组的按钮应该风格统一，功能差异大的按钮应该有所区别。  

2）    设计屏幕布局(Layout)时应该使各功能区重点突出 ,应遵循如下几条原则：平衡原则、预期原则、经济原则、顺序原则、规则化

3）    菜单在图形界面的应用程序中使用得非常普遍，是软件界面设计的一个重要组成方面，描述了一个软件的大致功能和风格。 菜单中的选项在功能上与按钮相当，一般具有下列一种或几种类型的选项：命令项、菜单项和窗口项。 菜单的结构一般有单一菜单、线状序列菜单、树状结构菜单、网状结构菜单等，其中树状结构菜单是最常见的结构。

设计菜单界面时应注意的一般性原则：功能组织菜单，合理分类，并力求简短，前后一致；合理组织菜单界面的结构与层次；按一定的规则对菜单项进行排序；菜单选项的标题要力求文字简短、含义明确，并且最好以关键词开始；常用选项要设置快捷键；充分利用菜单选项的使能与禁止、可见与隐藏属性；使用弹出式菜单 。 

4）    在处理大量相关数据的场合下，需要输入一系列的数据，这时填表输入界面是最理想的数据输入界面。在设计填表输入界面时应遵循的原则：一致性；有含义的表格标题；使用易于理解的指导性说明文字；栏目按逻辑分组排序；表格的组织结构和用户任务相一致；光标移动方便；出错提示；提供帮助；表格显示应美观、清楚，避免过分拥挤。

相关推荐

专栏推荐