5-图书管理系统-GUI设计.ppt

今天的工作任务 完成图书管理系统GUI设计 提交内容 GUI工程师在课上完成第一个GUI设计 并确定完成的界面个数 含名称 GUI工程师的工作并不是从设计阶段才开始的 早在需求分析阶段 GUI工程师就已经参与到用户访谈中 了解用户的使用习惯 喜好等 为设计用户界面做准备 GUI 图形用户界面 设计概述 对于用户来说 友好的界面是至关重要的 用户界面 UserInterface 的设计质量直接影响用户对软件产品的评价 从而影响软件产品的竞争力和使用寿命 因此 对人机界面的设计必须给予足够的重视 先看一个例子 对比同一界面的以下两种不同设计 然后说出哪种要好一些 良好的 设计原则 1 关注用户及其任务 而不是技术2 首先考虑功能 其次才是表现3 与用户对任务的看法保持一致4 设计要符合常见情况5 不要分散用户对他们目标的注意力6 促进学习 从外 用户 到里 设计人员 思考 而不是相反 7 传递信息 而不仅仅是数据8 设计应满足响应需求9 通过用户试用发现错误 然后修复它 最好的程序界面就是用户无需去阅读操作手册就知道该如何使用的界面 关注用户及其任务 而不是技术 对人的理解程序必须反映用户的视角和行为 要充分理解用户开发者首先要理解人 人类通过辨别比通过记忆学习起来更容易 要经常试着提供一个数据列表给用户 而非让用户凭记忆自己输入数据 普通人能记住2000到3000单词 但却可以认出50000单词 从用户的视角看问题 使用用户的词汇进行描述 保持一致性 引导用户的使用习惯 清楚一致的设计很多GUI程序对最终用户常常不够清楚 一个增强程序清楚表述能力的有效方法是使用列表中的保留字进行开发 用户中最常见的抱怨是某个术语表述的不清楚或不一致 在软件开发中经常出现的情况是 在程序发布之后 一个屏幕上可能写着 项目 而下一屏却写着 产品 而第三屏又变成了 货物 可是其实这三个术语是指的同一个东西 这种一致性的缺乏导致用户非常迷惑并产生操作失误 利用保留字表使得系统词汇保持一致 提供可视反馈如果你曾有过傻傻的瞪着自己电脑上显示的沙漏等着一个操作结束的时候 就会明白没有可视化的反馈信息有多糟糕 用户非常希望知道一个操作会花费多长的时间以便准备好足够的耐心 作为最一般的规则 当一个操作超过7 10秒的时候 大多数用户希望看到一个带有进度条的消息对话框 时间的长短要根据用户类型和应用程序的特点来调整 使常用的用户任务简单化 不要让用户解决额外的问题 GUI设计案例赏析 1 常用菜单要有命令快捷方式 2 完成相同或相近功能的菜单用横线隔开放在同一位置 3 菜单前的图标能直观的代表要完成的操作 Good 如果用户不能理解对话框里的内容 这就意味着是这个对话框设计者的失败 通常情况下 就像标准保存对话框或打开文件对话框那样 所有对话框都应该含有一个用来提问或警告的消息 图标 另外还含有一段附加的描述性文字来提供额外提示譬如 这个操作不可恢复 这个问题对话框的标题与所提示的信息不符 更糟糕的是没有任何信息告诉用户究竟要 确信 啥 对话框显示 您确信吗 的问题 而窗口标题却是 错误 Bad 使用彩色用户界面元素时 要考虑紧接这个界面元素的相邻界面元素是什么 特别是要注意文本所在的背景底色 提高对比度才看的清楚 Bad 第一个例子不会让用户知道这个对话框是何用途 没有对话框里面文字的提示 用户不可能知道下一步该怎么办 相反 第二个例子用意则非常的明显以致于不需要解释文字用户也知道该怎么做 Bad Good 第一个例子完全没有使用空白 按钮之间的距离都是一样的 尽管我们知道这三个按钮点下去造成的后果大不相同 有意思的是 这个会造成数据损失的按钮竟然相当不方便的放在中间 所以 这就造成一种被错误选择的可能性 如果你要点 是 Yes 的右部 或者 取消 Cancel 的左边 可手不小心一抖错过了几个象素就点到 否 按钮上了 数据因此而丢失 而下面的这组按钮就有效的利用了空白 既然对话框中的提示是 您想在关闭文档前保存内容吗 所以这些按钮的动作结果和上面的一组一样 取消 使关闭文档的命令取消 保存 将保存文档并且关闭 因此 不要保存 按钮是唯一可以造成未保存数据丢失的按钮 所以它和其它两个按钮 取消 和 保存 它们都不会未保存数据丢失 之间有一个很大的空白 这样的分布保证了让用户偶然错误选择 不要保存 的可能性非常小 利用空白分割 Bad Good 选择合适的控件 上图中 yes和no只能二选一 所以不应该使用checkbox 而是radiobutton Bad GUI图形用户界面设计过程 设计原型 用户试用和评估 修改原型 评估 GUI设计工具 GUIDesignStudioMSVisio甚至可以是MyEclipse 加入VE插件后的 或者NETBean等IDE GUIDesignStudio是什么 GUIDesignStudio是一款针对windows系统的图形界面设计工具 它可以便捷的创建界面圆形文档而不要任何的脚本和编程知识 使用标准组件绘制屏幕窗口或者组建组合 并把它们按照工作流连结在一起 然后演示你的设计 利用GUIDesignStudio自带的案例进行学习 打开GUIDesignStudio文件夹下面的sample文件夹 选择DesignCollection文件夹 打开案例 使用模拟器进行运行 查看效果依次学习StandardComponents文件夹和Tutorial文件夹中的案例 几个要点 对齐 和调整大小使用下面这个工具条插入图片的方法 设计菜单 添加位图 在GUIDesignStudio中完成图书管理系统的GUI设计 建立界面控制流的转换 新建一个设计 用来设计另外一个界面 图书管理系统主界面 建立界面控制流的转换 在图书管理登录 gui中 点击右键选择 添加组合屏幕 选择图书管理系统主界面添加进去 用链接工具将登陆按钮与图书管理系统主界面链接起来将图书管理系统登录界面点击右键 设置为典型元件 运行模拟器查看效果 为图书管理系统主界面增加菜单项 为 注销 和主界面的