《图书管理系统-GUI设计.ppt》由会员分享，可在线阅读，更多相关《图书管理系统-GUI设计.ppt（41页珍藏版）》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。
1、IT Education&Training图书管理系统GUI设计IT Education&Training今天的工作任务1.完成图书管理系统GUI设计提交内容1.GUI工程师在课上完成第一个GUI设计，并确定完成的界面个数（含名称）。并且下周（月 日前）交付GUI设计图给组长，等待设计评审。我们的进度，在这里IT Education&TrainingGUI 工程师的工作并不是从设计阶段才开始的，早在需求分析阶段，GUI工程师就已经参与到用户访谈中，了解用户的使用习惯，喜好等，为设计用户界面做准备我们的进度，在这里IT Education&TrainingGUI（图形用户界面）设计概述对于用户来
2、说，一个友好的界面是至关重要的。用户界面（User Interface）的设计质量直接影响用户对软件产品的评价，从而影响软件产品的竞争力和使用寿命，因此，对人机界面的设计必须给予足够的重视。我们的进度，在这里IT Education&Training先看一个例子对比同一界面的以下两种不同设计，然后说出哪种要好一些？我们的进度，在这里IT Education&Training我们的进度，在这里IT Education&Training我们的进度，在这里IT Education&Training良好的设计原则1、关注用户及其任务，而不是技术2、首先考虑功能，其次才是表现3、与用户对任务的看法保持一
3、致4、设计要符合常见情况5、不要分散用户对他们目标的注意力6、促进学习，从外(用户)到里(设计人员)思考，而不是相反。7、传递信息，而不仅仅是数据8、设计应满足响应需求9、通过用户试用发现错误，然后修复它最好的程序界面就是用户无需去阅读操作手册最好的程序界面就是用户无需去阅读操作手册就知道该如何使用的界面。就知道该如何使用的界面。我们的进度，在这里IT Education&Training关注用户及其任务，而不是技术对人的理解对人的理解程序必须反映用户的视角和行为。要充分理解用户开发者首先要理解人。人类通过辨别比通过记忆学习起来更容易。要经常试着提供一个要经常试着提供一个数据列表给用户，而非让
4、用户凭记忆自己输入数据列表给用户，而非让用户凭记忆自己输入数据数据。普通人能记住2000到3000单词，但却可以认出50000单词。我们的进度，在这里IT Education&Training我们的进度，在这里IT Education&Training 从用户的视角看问题，使用用户的词汇进行描述，保持一致性，引导用户的使用习惯清楚一致的设计清楚一致的设计很多GUI程序对最终用户常常不够清楚。一个增强程序清楚表述能力的有效方法是使用列表中的保留字保留字进行开发。用户中最常见的抱怨是某个术语表述的不清楚或不一致。在软件开发中经常出现的情况是，在程序发布之后，一个屏幕上可能写着“项目”，而下一屏却写
5、着“产品”，而第三屏又变成了“货物”，可是其实这三个术语是指的同一个东西。这种一致性的缺乏导致用户非常迷惑并产生操作失误。我们的进度，在这里IT Education&Training保留字列表保留字列表文本文本 含义和行为含义和行为 是否出现是否出现在按在按钮上钮上 是否出现在是否出现在菜单上菜单上 MnemonicKeystrokes 热键？热键？ShortcutKeystrokes 快捷键？快捷键？OK 接受输入的数据或显示的响应信息，关掉窗口 Yes No None or Cancel 不接受输入的信息，关掉窗口 Yes No None Esc Close 结束当前的任务，让程序继续进行
6、；关掉数据窗口 Yes Yes Alt+C None Exit 推出程序 No Yes Alt+X Alt+F4 Help 调出程序的帮助信息 Yes Yes Alt+H Fl Save 保存数据，停留在当前窗口 Yes Yes Alt+S Shift+Fl2 SaveAs 用新名字保存数据 No Yes Alt+A F12 Undo 撤销前一个动作 No Yes Alt+U Ctrl+Z Cut 剪切高亮字符 No Yes Alt+T Ctrl+X Copy 拷贝高亮的文本 No Yes Alt+C Ctrl+C Paste 在插入点粘贴被拷贝或剪切的文本 No Yes Alt+P Ctrl
7、+V 利用保留字表使得系统词汇保持一致IT Education&Training提供可视反馈提供可视反馈如果你曾有过傻傻的瞪着自己电脑上显示的沙漏等着一个操作结束的时候，就会明白没有可视化的反馈信息有多糟糕。用户非常希望知道一个操作会花费多长的时间以便准备好足够的耐心。作为最一般的规则，当一个操作超过710秒的时候，大多数用户希望看到一个带有进度条的消息对话框。时间的长短要根据用户类型和应用程序的特点来调整。使常用的用户任务简单化，不要让用户解决额外的问题IT Education&Training一个医院派出救护车的系统界面IT Education&Training上图设计中的错误顶层有太多的
8、功能。顶层有太多的功能。用户要求新系统方便的提供所有信息，这使得窗体同时用于客户管理和救护车派送。更新客户资料时，需要输入完整的客户资料并按更新按钮。而同样的界面只输入最少量的客户信息，例如社会安全号，诊断，从哪里到哪里，然后按分派按钮，救护车就被派出。因此，更新功能和派送功能需要在不同的对话框中处理。IT Education&Training 太多按钮。太多按钮。右侧的按钮应该在父窗口中，也许就在工具栏中，但不应该在子窗口中。差的导向帮助。差的导向帮助。GUI控件应该按使用的频率摆放。最重最重要的字段应该放在左上要的字段应该放在左上；次要的字段应该放在右下次要的字段应该放在右下。当分派救护车
9、时很难想象公司名和发票号是最重要的字段。控件的不合理使用。控件的不合理使用。设计者采用了文本标签而不是组别框来区分屏幕上的数据应该归哪一组。这许许多多的文本标签弄得屏幕非常乱同时使数据和标签很难区分。可编辑的字段应该用一个框子框起来，以便可以非常直观的看出那些字段可以更改。缺乏对称性。缺乏对称性。IT Education&Training改善后的界面IT Education&TrainingGUI设计案例赏析1):常用菜单要有命令快捷方式。2):完成相同或相近功能的菜单用横线隔开放在同一位置。3):菜单前的图标能直观的代表要完成的操作。GoodGoodIT Education&Training
10、如果用户不能理解对话框里的内容，这就意味着是这个对话框设计者的失败。通常情况下，就像标准保存对话框或打开文件对话框那样，所有对话框都应该含有一个用来提问或警告的消息（图标），另外还含有一段附加的描述性文字来提供额外提示譬如“这个操作不可恢复”这个问题对话框的标题与所提示的信息不符，更糟糕的这个问题对话框的标题与所提示的信息不符，更糟糕的是没有任何信息告诉用户究竟要是没有任何信息告诉用户究竟要“确信确信”啥（对话框显示啥（对话框显示“您确信吗？您确信吗？”的问题，而窗口标题却的问题，而窗口标题却是是“错误错误”）BadBadIT Education&Training使用彩色用户界面元素时，要考虑
11、紧接这个界面元素的相邻界面元素是什么。特别是要注意文本所在的背景底色。提高对比度才看的清楚。BadBadIT Education&Training第一个例子不会让用户知道这个对话框是何用途。没有对话框里面文字的提示，用户不可能知道下一步该怎么办。相反，第二个例子用意则非常的明显以致于不需要解释文字用户也知道该怎么做。BadBadGoodGoodIT Education&Training第一个例子完全没有使用空白，按钮之间的距离都是一样的，尽管我们知道这三个按钮点下去造成的后果大不相同。有意思的是，这个会造成数据损失的按钮竟然相当不方便的放在中间。所以，这就造成一种被错误选择的可能性：如果你要点
12、“是（Yes）”的右部，或者“取消（Cancel)”的左边，可手不小心一抖错过了几个象素就点到“否”按钮上了！数据因此而丢失。而下面的这组按钮就有效的利用了空白。既然对话框中的提示是“您想在关闭文档前保存内容吗？”，所以这些按钮的动作结果和上面的一组一样：“取消”使关闭文档的命令取消；“保存”将保存文档并且关闭；因此“不要保存”按钮是唯一可以造成未保存数据丢失的按钮，所以它和其它两个按钮“取消”和“保存”（它们都不会未保存数据丢失）之间有一个很大的空白。这样的分布保证了让用户偶然错误选择“不要保存”的可能性非常小。利用空白分割利用空白分割BadBadGoodGoodIT Education&T
13、raining选择合适的控件。上图中，yes和no只能二选一，所以不应该使用checkbox，而是radiobuttonBadBadIT Education&TrainingGUI图形用户界面设计过程设计原型用户试用和评估修改原型评估IT Education&TrainingGUI设计工具GUI Design StudioMS Visio甚至可以是MyEclipse（加入VE插件后的）或者NETBean等IDE。IT Education&TrainingGUI Design Studio是什么？GUI Design Studio是一款针对windows系统系统的图形界面设计工具图形界面设计工具
14、,它可以便捷的创建界面圆形文档而不要任何的脚本和编程知识。使用标准组件绘制屏幕 窗口或者组建组合,并把它们按照工作流连结在一起,然后演示你的设计。IT Education&TrainingIT Education&Training项目浏览器可以在不同的磁盘分区中浏览设计项目IT Education&Training控件浏览器帮助你选择合适的控件IT Education&Training图标浏览器提供各种图标文件IT Education&Training注释浏览器IT Education&TrainingstoryBoard用来实现控制流IT Education&Training利用GUI De
15、sign Studio自带的案例进行学习打开GUI Design Studio文件夹下面的sample文件夹，选择Design Collection文件夹，打开案例，使用模拟器进行运行。查看效果依次学习Standard Components文件夹和Tutorial文件夹中的案例。IT Education&Training几个要点对齐，和调整大小使用下面这个工具条插入图片的方法：设计菜单添加位图IT Education&Training在GUI Design Studio中完成图书管理系统的GUI设计IT Education&Training建立界面控制流的转换新建一个设计，用来设计另外一个界面
16、“图书管理系统主界面”IT Education&Training建立界面控制流的转换在图书管理登录.gui中，点击右键选择“添加组合屏幕”选择图书管理系统主界面添加进去。用链接工具 将登陆按钮与图书管理系统主界面链接起来将图书管理系统登录界面点击右键，“设置为典型元件”运行模拟器查看效果。IT Education&Training为图书管理系统主界面增加菜单项IT Education&Training为“注销”和主界面的关闭按钮添加一个确认退出系统的对话框IT Education&Training依次类推画出其余的GUI界面来。交给代码人员，他们进行代码编写。如果你同时担任代码和GUI，那么建议你直接在IDE里面做GUI设计，省时省力IT Education&Training课程小结本次课中，用到以下知识1.设计2.学习使用了工具GUI Design Studio我们的进度，在这里