图形用户界面(gui)ppt

《图形用户界面(gui)ppt》由会员分享，可在线阅读，更多相关《图形用户界面(gui)ppt（49页珍藏版）》请在金锄头文库上搜索。

1、1,图形用户界面（GUI） 开发与测试,范萍丽 2007-06-21,2,主要的UI设计指导原则：（引自Jeff Johnson的GUI设计禁忌）,关注用户及其任务，而不是技术 首先考虑功能，然后才是表示 从用户的视角看问题，使用用户的词汇进行描述,不必向用户暴露实现细节 使常用的用户任务简单化，不要让用户解决额外的问题 促进学习,保持一致性，引导用户的使用习惯 保持显示惯性，传递信息，而不仅仅是数据 设计应满足响应需求,3,议程,界面设计指南(20分钟) 遵从窗口标准(20分钟） 屏幕元素确认列表(15分钟),4,概述,用户界面的需求通常是不明确的，一部分可能隐含在用户需求中，而另一部分则是

2、用户不可能预先想到的。因此，软件企业应积累用户界面开发和测试的成果，将一些元素和规则进行重用，从而高效地开发出用户乐意接受的界面。 企业应在测试过程中积累自己的图形用户界面测试用例（通常称为GUI测试检查列表），形成自己的图形用户界面测试标准。,5,界面设计指南,(Color)颜色 (Resource)资源 (Font)字体 (Text)文字表述 (STYLE)控件选择 (ALIGN)控件布局 (TAB ORDER)TAB顺序 (Shortcut Key & Accelerator & Pop Menu)快捷键、加速键和弹出菜单 (ACTION)用户交互,6,(Color)颜色,统一色调，采用

3、标准Windows的基本色调，做到与操作系统统一，读取系统标准色表。 整个界面色彩尽量少的使用类别不同的颜色。除非特殊场合，杜绝使用对比强烈，让人产生憎恶感的颜色。 同时色调也具有一定的含义，在整个系统中应保持色调含义的一致性，避免同一中颜色在不同的画面中表示不同的意义。,7,(Resource)资源,计算机的资源包括图标资源和鼠标光标资源等。图标资源也需要遵循统一的规则，因为不同的图标代表不同的意义。例如：我们用图标来表示保存，因此我们在整个系统中只要涉及到保存的话,都应该使用同一个图标，不论是用在工具栏上还是在菜单上,还是在按钮上。 图标、图像应该很清晰的表达出意思，遵循常用标准，或者用户

4、机器容易联想的到物件，绝对不允许画出默认奇妙的图案。 鼠标光标样式统一，使用系统标准。注意：本系统中不采用窗体做进度条，对于点击按钮后，鼠标变成沙漏形状，执行完成后, 鼠标变回。,8,(Font)字体,系统中中文一律采用标准字体“宋体”，英文一律采用标准 Microsoft Sans Serif ，除登录界面和图标中的特殊字体用图片实现,原则上不考虑特殊字体(隶书、草书等,特殊情况可以使用图片取代),保证每个用户使用起来显示都很正常。 字体大小统一规定， MSS字体8磅，宋体为10磅，字体颜色一般采用系统默认颜色。 所有控件尽量使用大小统一的字体属性，除了特殊提示信息、加强显示等例外情况。,9

5、,(Text)文字表达,使用统一的语言描述，提到同一个概念时，用相同的术语描述。例如一个关闭退出功能按钮，统一描述为关闭，避免使用返回、退出描述。 通常情况下，每个窗口应该有一个唯一的标题，和触发它的菜单或按钮命令相对应。 在提示信息中多用“您、请”等礼貌用语，不要用对用户来说晦涩的计算机用语，杜绝错别字。 断句逗号句号顿号分号的用法，提示信息比较多的话，应该分段。 错误消息对话框不仅仅指出问题，还要提供解决问题的建议。,10,(STYLE)控件选择,不要随意使用控件，控件功能要专一，风格统一。如果没有好的控件，则使用标准控件。 控件的风格统一。 同一类型的控件操作方式相同，避免出现一个控件双

6、击可以执行某些动作，而同样控件，双击却没有任何反映。 一个控件只做单一功能，尽量不复用。,11,(ALIGN)控件布局，窗口不拥挤，按功能组合控件,屏幕不能拥挤，让人看上去，不能太拥挤，也不能太松散。 整个项目，尽量采用统一的控件间距，通过调整窗体大小达到一致，即使在窗体大小不变的情况下，宁可留空部分区域，也不要破坏控件间的行间距。 文字和文本框一般采用左对齐方式，如单行文本框前的标签提示，使用左对齐加冒号；数据列表表头文字和内容，也采用左对齐。文字和文本框中的文字水平中对齐。横排按钮，最右边的一个与上面的控件右对齐窗口缩放时，控件位置、布局。 为了使界面不出现跑版或者难看的局面，解决方法是固

7、定窗口大小，不允许改变尺寸。 弹出窗口有唯一的标题，和触发它的菜单或按钮命令相对应。,12,间距与对齐示例,13,(TAB ORDER)TAB顺序,习惯用法，阅读顺序，从左到右，从上到下。,14,(Shortcut Key & Accelerator& Pop Menu) 快捷键、加速键和弹出菜单,使用非破坏性缺省按钮，回车、ESC键的正确使用。对于弹出模态窗体，有默认加速键，如回车表示激活当前窗口设置为default的按钮动作，esc表示关闭窗口。同时在调用default按钮动作和关闭动作时候，不应该做有破坏性的操作，避免用户错误操作产生危害程度，例如不能把删除数据等功能的按钮作为缺省按钮。

8、当用户要提交很多数据时，应该屏蔽ESC，或者做退出提示，告诫用户是否保存提交。 尽量避免使用右键菜单， 如使用的话尽量在可视化界面上拥有对应的按钮或者菜单选项。因为右键菜单由用户点击鼠标左右键或者别的动作才能调出来显示给用户。无法清晰的显示给用户，所以对应选项应该可以通过别的途径得到的。,15,(ACTION)用户交互,要使一个功能有时允许有时不允许用户使用，则这个控件的不能随便隐藏，应该使用disable属性进行表示，以免用户发现控件失踪后措手无策。窗口弹出位置要明显，点击一个控件，弹出窗口或者菜单，应该给人明显提示。对于弹出窗体,统一要求显示位置在屏幕中央，要求窗体是以模态显示，并且不出现

9、在任务拦上。执行动作要有提示。UI作为人机对话的工具，用户做了任何动作，应该给用户一个视觉或者听觉、触觉提示。而且这个提示应该行明显，但不应提示过长，可以有以下几种方法：弹出交互对话框让用户点击确认； 改变UI中控件参数提示：(处理不用用户确认的提示，有一定延时，或者用户按键后自动清除。)；改变标题栏字符串，显示“信息：提交成功”,或者专门设置一个状态栏、TLable等用来进行提示。,16,图形用户界面（GUI）的一些业界标准,1对于每个应用程序(Application) 在图形上双击启动应用：装入信息应显示应用名、版本号，以及以大图形代替原来的图形； 关闭应用时应有信息窗提示用户确认：“您确

10、认要退出*？”； 试图同时打开两次应用时不允许，当应用正在装载时试一下第二次开启应用；(一般而言) 所有的屏幕都应响应帮助【F1】键且做同样的工作(显示相应的帮助信息)。,17,图形用户界面（GUI）的一些业界标准,2 对于应用中的每个窗口如果窗口有最小化按钮，点一下它，应最小化到任务栏，且显示相应的图标; 再次单击这个图标，可以返回到窗口并恢复到窗口原有的大小；窗口控件的大小、对齐方向、颜色、背景等属性的设置值是否和标准要求的一致；检查窗口中的下拉菜单、工具条、滚动条、对话框、按钮、图标和其他控制的功能，是否错用窗口元素、是否符合标准要求；,18,图形用户界面（GUI）的一些业界标准,2 对

11、于应用中的每个窗口使用【TAB】键在窗口中移动光标/焦点，使用【Shift】+【Tab】组合键回移；屏幕中各元素得到焦点的次序应从左到右，从上到下；如果一个钮能产生一个新窗口，则它不应盖住先前的窗口，并能回到先前的窗口中；一般情况下，窗口中的所有事情应既能用鼠标又能用键盘来完成。,19,通用界面元素设计与测试,文本框（Text Boxes） 不要使用文本输入框来显示只读数据和信息。只读信息的文本框应该底色变灰，并且去掉文本框边框，和可编辑但未激活的状态区别开来。 给日期，数字，单位等特殊文字选择框或特殊文本框，检测到非法输入后应给出说明并能自动获得焦点。单选钮（Radio Buttons）用左

12、右键和上下键移动，或以及鼠标单击选中。 单选框是一种多选一设置，可选数目在2-8之间。 当空间不够时，单选框可以用循环按钮、下拉菜单、滚动列表框来代替。复选框（Check Boxes）在框中用鼠标单击，或在文本上设置/取消设置，试着用空格键做这件事。 复选框和选项框按选择几率的高底而先后排列。 复选框和选项框要有默认选项，并支持Tab选择。,20,通用界面元素设计与测试,命令钮（Command Buttons）(1）如果它能导出一个新的窗口，使用户能输入或改变内容，则按钮的文字后带省略号（3个小点）；(2)除确定（ok）或取消（Cancel）外，其他的按钮应有一个字符代表，这个字符在按钮上是以

13、下划线表示的，用ALT+字符组合键的方式可激活它，保证不重复定义这类字符； (3)用鼠标单击每一个按钮，应能激活； (4)用Tab走到这个按钮后，按空格或Enter键应能激活； (5)用Tab移到其他类型的控制按钮（非命令），则在屏上这个控制钮以加宽黑框表示，这时按Enter应能激活这个控制钮； (6)按Esc键应能激活Cancel钮。,21,通用界面元素设计与测试,下拉列表框（Drop Down List Boxes）(1) 按下拉列表框右边的箭头处，应能得到（打开）选择列表项，列表项可以卷动（当内容多时应有卷动条），其框中应不能输入文本； (2) 按一个字符应到以这个字符开头的项（英文时）

14、，按Ctrl+F4组合键应能打开下拉列表框。 (3) 下拉列表框中的选项应是排好了序的。,22,通用界面元素设计与测试,联合框（Combo Boxes）(1) 与下拉列表框的区别是，联合框中既可以输入文字，又可以在列表中选择。 列表框（List Boxes） (1) 用鼠标单击或上下箭头键可以选中一项； (2) 用卷动条可看到所有的数据。,23,菜单的设计与测试,菜单是应用程序命令项的列表，菜单可以是多级，这时是按照功能来组织的。菜单可以有多种形式，如：条形菜单、水平和垂直的弹出式菜单、下拉菜单等。菜单功能是否正确执行； 常用菜单要有命令快捷方式。 文本字体、大小和格式是否正确； 菜单功能的名

15、字是否具有自解释性; 右键快捷菜单是否采用与菜单相同的准则； 是否适当地列出了所有的菜单功能 是否根据系统功能进行合理分类，将选项进行分组（完成相同或相近功能的菜单用横线隔开放在同一位置。）； 菜单深度是否控制在3层以内 菜单标题是否简洁、有意义；菜单前的图标能直观的代表要完成的操作，如不能则不要用图标。 是否依使用频度排列；是否依逻辑顺序排列；是否依使用顺序排列； 各级菜单显示格式和操作方式是否一致。,24,系统响应时间,系统响应时间包括两个方面：时间长度和时间的易变性。用户响应时间应该适中，系统响应时间过长，用户就会感到不安和沮丧，而响应时间过短有时会造成用户加快操作节奏，从而导致错误。在

16、系统响应时间上坚持如下原则：响应时间长度 界面设计 0-10 秒 鼠标显示成为沙漏 10 到18 秒 由微帮助来显示处理进 18 秒 以 上 显示处理窗口，或显示进度条 对可能造成等待时间较长的操作最好提供取消功能。 当一个长时间的处理完成时应发出一个提示警告声如beep(1)， 这样用户不必总看着屏幕。,25,MessageBox 消息框。,标题：建议以主窗口的名称作为标题，以变量的形式显示，最好不要写死。（标题是否根据内容显示为“提示”，“警告”） 文本：不考虑国际化开发时，可以直接以中文显示，考虑国际化开发时，需要根据字串取本地化文本。请注意提示信息的语气及标点符号。 按钮：当有多个按钮时，执行删除操作时，默认按钮应为否（取消）。 符号：根据提示的内容，确认图标的显示。,26,根据提示的内容，确认图标的显示,27,屏幕元素确认列表,美学方面测试 确认正确性 导航测试 元素易用性测试 数据完整性测试 只读模式的测试 通用性测试 特殊域的测试,