人机交互实验2

实验二 图形用户界面的设计 软件 131 张力祥 201307202 一一 实验目的和要求实验目的和要求 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 颜色的使用 颜色的使用 颜色是一种有效的强化手段 同时具有美学价值 使用颜 色时应注意如下几点 限制同时显示的颜色数 画面中活动对象的颜色应鲜明 而非活动对象应暗淡 尽量避免不相容的颜色放在一起 如黄与蓝 红与绿等 除非作对比时用 若用颜色表示某种信息或对象属性 要使用户理解这种表示 并尽量采用通用的表示规则 3 图标的设计 图标的设计 图标是可视地表示实体信息的简洁 抽象的符号 图标设 计是方寸艺术 需要在很小的范围内表现出图标的内涵 设计图标时应该着重 考虑视觉冲击力 要使用简单的颜色 利用眼睛对色彩和网点的空间混合效果 做出精彩图标 4 按钮的设计 按钮的设计 设计按钮应该具有交互性 应该有 3 到 6 种状态效果 点 击时的状态 鼠标放在上面但未点击的状态 点击前鼠标未放在上面时的状态 点击后鼠标未放在上面时的状态 不能点击时的状态 独立自动变化的状态 按钮应具备简洁的图示效果 应能够让使用者产生功能上的关联反应 属于一 个群组的按钮应该风格统一 功能差异大的按钮应该有所区别 5 屏幕布局的设计 屏幕布局的设计 设计屏幕布局 Layout 时应该使各功能区重点突出 应遵循如下几条原则 平衡原则 预期原则 经济原则 顺序原则 规则化 6 菜单界面的设计 菜单界面的设计 菜单在图形界面的应用程序中使用得非常普遍 是软 件界面设计的一个重要组成方面 描述了一个软件的大致功能和风格 菜单中 的选项在功能上与按钮相当 一般具有下列一种或几种类型的选项 命令项 菜单项和窗口项 菜单的结构一般有单一菜单 线状序列菜单 树状结构菜单 网状结构菜单等 其中树状结构菜单是最常见的结构 设计菜单界面时应注意的一般性原则 功能组织菜单 合理分类 并力求 简短 前后一致 合理组织菜单界面的结构与层次 按一定的规则对菜单项进 行排序 菜单选项的标题要力求文字简短 含义明确 并且最好以关键词开始 常用选项要设置快捷键 充分利用菜单选项的使能与禁止 可见与隐藏属性 使用弹出式菜单 7 填表输入界面的设计 填表输入界面的设计 在处理大量相关数据的场合下 需要输入一系列 的数据 这时填表输入界面是最理想的数据输入界面 在设计填表输入界面时 应遵循的原则 一致性 有含义的表格标题 使用易于理解的指导性说明文字 栏目按逻辑分组排序 表格的组织结构和用户任务相一致 光标移动方便 出 错提示 提供帮助 表格显示应美观 清楚 避免过分拥挤 三三 实验内容与步骤实验内容与步骤 一 实验内容 利用常用的设计工具 VC VB Delphi PB 等 完成一个通用图形用户界面设 计 要遵循界面设计的一般原则 一致性 快捷方式 提供错误处理 注意颜 色的使用 学会使用图标 按钮 屏幕布局 菜单和对话框的设计 二 实验步骤 1 设计多个对话框 完成填表输入界面的设计 合理使用图标 按钮 颜 色 2 设计不同形式的菜单 完成对不同对话框的调用 3 提供简单的错误处理 联机帮助 三 界面设计 计入界面以后会出现如下的窗口界面 此时 会有三个选项供用户选择 1 随机抽签 2 欧冠最佳对阵 3 球队介绍 用户可以随意选择一个后进入 到下一个窗口 如下是打开其余三个窗口的界面后在它们上面进行操作的图 2 打开第三个以后 对球队的介绍可以用一个网页来自消息 实现桌面隐喻 对每个球队进行介绍 4 关键代码 Form1 using System using System Collections Generic using System ComponentModel using System Data using System Drawing using System Linq using System Text using System Windows Forms namespace 欧冠 public partial class Form1 Form public Form1 InitializeComponent private void button1 Click object sender EventArgs e Form2 frm2 new Form2 frm2 Show private void button2 Click object sender EventArgs e Form3 frm3 new Form3 frm3 Show private void button3 Click object sender EventArgs e zuixiai frm4 new zuixiai frm4 Show Form2 using System using System Collections Generic using System ComponentModel using System Data using System Drawing using System Linq using System Text using System Windows Forms namespace 欧冠 public partial class Form2 Form private int count 0 private List sort new List public Form2 InitializeComponent label1 BackColor Color Transparent label2 BackColor Color Transparent label3 BackColor Color Transparent label4 BackColor Color Transparent label5 BackColor Color Transparent label6 BackColor Color Transparent label7 BackColor Color Transparent label8 BackColor Color Transparent label9 BackColor Color Transparent label10 BackColor Color Transparent label11 BackColor Color Transparent label12 BackColor Color Transparent label1 ForeColor Color Black label2 ForeColor Color Pink label3 ForeColor Color Yellow label4 ForeColor Color Green label5 ForeColor Color Gold label6 ForeColor Color Blue label7 ForeColor Color Red label8 ForeColor Color Brown label9 ForeColor Color Orange label10 ForeColor Color Teal label11 ForeColor Color Salmon label12 ForeColor Color Tan private void getEnemy List team new List team Add 拜仁慕尼黑 team Add 巴塞罗那 team Add 皇家马德里 team Add 巴黎圣日耳曼 team Add 尤文图斯 team Add 马德里竞技 team Add 波尔图 team Add 摩纳哥 for int i 0 i team Count i Random rm new Random int number rm Next 0 team Count sort Add team number team RemoveAt number i private void button1 Click object sender EventArgs e getEnemy if count 0 label1 Text sort count if count 1 label9 Text sort count if count 2 label2 Text sort count if count 3 label10 Text sort count if count 4 label3 Text sort count if count 5 label11 Text sort count if count 6 label4 Text sort count if count 7 label12 Text sort count count private void label8 Click object sender EventArgs e public partial class zuixiai Form public zuixiai InitializeComponent private void comboBox1 SelectedIndexChanged object sender EventArgs e textBox1 Text 您选择的最佳对阵是 r n comboBox1 Text private void textBox1 TextChanged object sender EventArgs e private void textBox2 TextChanged object sender EventArgs e private void comboBox2 SelectedIndexChanged object sender EventArgs e textBox2 Text 您最喜欢的球员是 r n comboBox2 Text 五 实验总结 1 界面要具有一致性 常用操作要有快捷方式 提供简单的错误处理 对操作 人员的重要操作要有信息反馈 操作可逆 设计良好的联机帮助 合理划分并 高效地使用显示屏 保证信息显示方式与数据输入方式的协调一致 2 颜色是一种有效的强化手段 同时具有美学价值 使用颜色时应注意如下几 点 限制同时显示的颜色数 画面中活动对象的颜色应鲜明 而非活动对象应 暗淡 尽量避免不相容的颜色放在一起 如黄与蓝 红与绿等 除非作对比时 用 若用颜色表示某种信息或对象属性 要使用户理解这种表示 并尽量采用 通用的表示规则 3 图标是可视地表示实体信息的简洁 抽象的符号 图标设计是方寸艺术 需 要在很小的范围内表现出图标的内涵 设计图标时应该着重考虑视觉冲击力 要使用简单的颜色 利用眼镜对色彩和网点的空间混合效果 做出精彩图标 1 设计按钮应该具有交互性 应该有 3 到 6 种状态效果 点击时的状态 鼠标 放在上面但未点击的状态 点击前鼠标未放在上面时的状态