1、2019/7/5,哈工大软件学院,1,本章主要内容5.1 窗口设计 5.2 菜单设计 5.3 填表输入界面设计 5.4 操作控制元素设计 5.5 声音输出界面设计 5.6 图标设计 5.7 个性化界面设计 5.8 UnDo/ReDo设计,第5章 WIMP用户界面设计,2019/7/5,哈工大软件学院,2,回顾：直接操纵和WIMP界面设计,20世纪80年代以来，以直接操纵,WIMP界面和图形用户界面(GUI)，WYSIWYG原理等为特征的技术广泛为许多计算机系统所采用。,直接操纵 - Direct Manipulation 所见即所得 - WYSIWYG(What you see is what
2、 you get.） WIMP - Windows,Icons,Menus,Pointers窗口，图标，菜单，定位器- Windows,Icons,Mouse,Pull-down menu窗口，图标，鼠标器，下拉式菜单,第5章 WIMP用户界面设计,2019/7/5,哈工大软件学院,3,本章主要内容5.1 窗口设计 5.2 菜单设计 5.3 填表输入界面设计 5.4 操作控制元素设计 5.5 声音输出界面设计 5.6 图标设计 5.7 个性化界面设计 5.8 UnDo/ReDo设计,第5章 WIMP用户界面设计,2019/7/5,哈工大软件学院,4,5.1 窗口设计,1. 标题、图标 2. 可
3、缩放 3. 可最大化、最小化 4. 可移动 5. 有滚动条 6. 边框风格 7. 光标风格 8. 背景图案,第5章 WIMP用户界面设计,底层编写窗口例,2019/7/5,哈工大软件学院,5,本章主要内容5.1 窗口设计 5.2 菜单设计 5.3 填表输入界面设计 5.4 操作控制元素设计 5.5 声音输出界面设计 5.6 图标设计 5.7 个性化界面设计 5.8 UnDo/ReDo设计,第5章 WIMP用户界面设计,2019/7/5,哈工大软件学院,6,5.2 菜单设计,1. 下拉式菜单 2. 弹出式菜单 3. 线形菜单 4. 快捷方式 5. 动态菜单项 6. 菜单项图标,第5章 WIMP用
4、户界面设计,2019/7/5,哈工大软件学院,7,本章主要内容5.1 窗口设计 5.2 菜单设计 5.3 填表输入界面设计 5.4 操作控制元素设计 5.5 声音输出界面设计 5.6 图标设计 5.7 个性化界面设计 5.8 UnDo/ReDo设计,第5章 WIMP用户界面设计,2019/7/5,哈工大软件学院,8,5.3 填表输入界面设计,1. 提示：标签、提示信息2. 输入与编辑： 编辑框、缺省值；字体、字型、颜色；密码编辑; 按钮3. 选择： 单选框（RadioButton）; 多选框（CheckBox）;组合框（ComboBox）;列表框（ListBox）4. 帮助功能: 完整帮助（多
5、见于菜单中）;F1局部帮助,第5章 WIMP用户界面设计,2019/7/5,哈工大软件学院,9,本章主要内容5.1 窗口设计 5.2 菜单设计 5.3 填表输入界面设计 5.4 操作控制元素设计 5.5 声音输出界面设计 5.6 图标设计 5.7 个性化界面设计 5.8 UnDo/ReDo设计,第5章 WIMP用户界面设计,2019/7/5,哈工大软件学院,10,5.4 操作控制元素设计,1. 按钮：普通按钮：Button控件位图按钮：BitBtn控件2. 控制焦点： 用方法SetFocus3. 滚动条4. 进度条,第5章 WIMP用户界面设计,2019/7/5,哈工大软件学院,11,本章主要
6、内容5.1 窗口设计 5.2 菜单设计 5.3 填表输入界面设计 5.4 操作控制元素设计 5.5 声音输出界面设计 5.6 图标设计 5.7 个性化界面设计 5.8 UnDo/ReDo设计,第5章 WIMP用户界面设计,2019/7/5,哈工大软件学院,12,5.5 声音输出界面设计,调用Delphi一个音频播放函数PlaySound(pchar(filename),0,snd_async);/异步 PlaySound(pchar(filename),0,snd_synch);/同步,第5章 WIMP用户界面设计,2019/7/5,哈工大软件学院,13,本章主要内容5.1 窗口设计 5.2
7、菜单设计 5.3 填表输入界面设计 5.4 操作控制元素设计 5.5 声音输出界面设计 5.6 图标设计 5.7 个性化界面设计 5.8 UnDo/ReDo设计,第5章 WIMP用户界面设计,2019/7/5,哈工大软件学院,14,5.6 图标设计,1. 用已经设计好的*.ICO文件 2. 读入已有的图片(.bmp, .jpg等)进行再 编辑或修改 3. 抓取屏幕局部图像再编辑或修改 4. 纯像素画设计,第5章 WIMP用户界面设计,像素画资料,2019/7/5,哈工大软件学院,15,本章主要内容5.1 窗口设计 5.2 菜单设计 5.3 填表输入界面设计 5.4 操作控制元素设计 5.5 声
8、音输出界面设计 5.6 图标设计 5.7 个性化界面设计 5.8 UnDo/ReDo设计,第5章 WIMP用户界面设计,2019/7/5,哈工大软件学院,16,5.7 个性化界面设计,1. 使用2D或3D图形图像设计工具制作背景 图片 2. 将图中可活动的局部图像剪切为单个的 .bmp格式图片文件 3. 用Image控件装载背景图片，用BitBtn控 件装载局部bmp图片,第5章 WIMP用户界面设计,2019/7/5,哈工大软件学院,17,5.7 个性化界面设计,界面换肤设计与实现,第5章 WIMP用户界面设计,2019/7/5,哈工大软件学院,18,本章主要内容5.1 窗口设计 5.2 菜单设计 5.3 填表输入界面设计 5.4 操作控制元素设计 5.5 声音输出界面设计 5.6 图标设计 5.7 个性化界面设计 5.8 UnDo/ReDo设计,第5章 WIMP用户界面设计,2019/7/5,哈工大软件学院,19,5.8 UnDo/ReDo设计,1. 分析程序运行及操作步骤，分离出可独立的 操作对象；2. 建立一个数据结构，保护每个对象产生前的 现场：操作序列和结果数据；该数据结构是个环形栈(栈底不固定)；UnDo时做类退栈操作，恢复现场；4. ReDo时，将由于UnDo退出的栈元素 再压入栈(只有当UnDo后无新的操 作产生才可做),第5章 WIMP用户界面设计,
