苏州科技大学数理学院面向对象的分析与设计课件 第8讲.pptVIP

如果用户不能理解对话框里的内容，这就意味着是这个对话框设计者的失败。通常情况下，就 像标准保存对话框或打开文件对话框那样，所有对话框都应该含有一个用来提问或警告的消息 （图标），另外还含有一段附加的描述性文字来提供额外提示譬如“这个操作不可恢复” 这个问题对话框的标题与所提示的信息不符，更糟糕的是没有任何信息告诉用户究竟要“确信” 啥（对话框显示“您确信吗？”的问题，而窗口标题却是“错误”） Bad 使用彩色用户界面元素时，要考虑紧接这个界面元素的相邻界面元素是什么。特别是要注意文本所在的背景底色。 提高对比度才看的清楚。 Bad 第一个例子不会让用户知道这个对话框是何用途。没有对话框里面文字的提示，用户不可能知道下一步该怎么办。 相反，第二个例子用意则非常的明显以致于不需要解释文字用户也知道该怎么做。 Bad Good 第一个例子完全没有使用空白，按钮之间的距离都是一样的，尽管我们知道这三个按钮点下去造成的后果大不相同。有意思的是，这个会造成数据损失的按钮竟然相当不方便的放在中间。 所以，这就造成一种被错误选择的可能性：如果你要点“是（Yes）”的右部，或者“取消（Cancel)”的左边，可手不小心一抖错过了几个象素就点到“否”按钮上了！数据因此而丢失。 而下面的这组按钮就有效的利用了空白。既然对话框中的提示是“您想在关闭文档前保存内容吗？”，所以这些按钮的动作结果和上面的一组一样：“取消”使关闭文档的命令取消；“保存”将保存文档并且关闭；因此“不要保存”按钮是唯一可以造成未保存数据丢失的按钮，所以它和其它两个按钮“取消”和“保存”（它们都不会未保存数据丢失）之间有一个很大的空白。这样的分布保证了让用户偶然错误选择“不要保存”的可能性非常小。 利用空白分割 Bad Good 选择合适的控件。上图中，yes和no只能二选一，所以不应该使用checkbox，而是radiobutton Bad GUI图形用户界面设计过程 设计原型 用户试用 和评估 修改原型 评估 GUI设计工具 GUI Design Studio MS Visio 甚至可以是MyEclipse（加入VE插件后的）或者NETBean等IDE。 GUI Design Studio是什么？ GUI Design Studio是一款针对windows系统的图形界面设计工具,它可以便捷的创建界面圆形文档而不要任何的脚本和编程知识。 使用标准组件绘制屏幕 窗口或者组建组合,并把它们按照工作流连结在一起,然后演示你的设计 。 项目浏览器 可以在不同的磁盘分区中浏览设计项目 控件浏览器 帮助你选择合适的控件 图标浏览器 提供各种图标文件 注释浏览器 storyBoard 用来实现控制流 利用GUI Design Studio自带的案例进行学习 打开GUI Design Studio文件夹下面的sample文件夹，选择Design Collection文件夹，打开案例，使用模拟器进行运行。查看效果 依次学习Standard Components文件夹和Tutorial文件夹中的案例。 几个要点 对齐，和调整大小使用下面这个工具条 插入图片的方法：设计菜单——添加位图 在GUI Design Studio中完成图书管理系统的GUI设计 建立界面控制流的转换 新建一个设计，用来设计另外一个界面“图书管理系统主界面” 建立界面控制流的转换 在图书管理登录.gui中，点击右键选择“添加组合屏幕” 选择图书管理系统主界面添加进去。 用链接工具 将登陆按钮与图书管理系统主界面链接起来 将图书管理系统登录界面点击右键，“设置为典型元件” 运行模拟器查看效果。 为图书管理系统主界面增加菜单项 为“注销”和主界面的关闭按钮添加一个确认退出系统的对话框 依次类推…… 画出其余的GUI界面来。交给代码人员，他们进行代码编写。 如果你同时担任代码和GUI，那么建议你直接在IDE里面做GUI设计，省时省力～ 课程小结 本次课中，用到以下知识 ＧＵＩ设计 学习使用了工具GUI Design Studio 我们的进度，在这里 * IT Education Training 软件工程与UML 图书管理系统——第9周第1-2次课 今天的工作任务 完成图书管理系统GUI设计 提交内容 GUI工程师在课上完成第一个GUI设计，并确定完成的界面个数（含名称）。并且下周（11月20日前）交付GUI设计图给组长，等待设计评审。 我们的进度，在这里 GUI 工程师的工作并不是从设计阶段才开始的，早在需求分析阶段，GUI工程师就已经参与到用户访谈中，了解用户的使用习惯，喜好等，为设计用户界面做准备…… 我们的进度，在这里 GUI （图形用户界面）设计概述 对于用户来说，一个友好的界面是至关重要的。