图形用户界面开发与测试.ppt

1,图形用户界面（GUI） 开发与测试,范萍丽 2007-06-21,2,主要的UI设计指导原则：（引自Jeff Johnson的GUI设计禁忌）,关注用户及其任务，而不是技术 首先考虑功能，然后才是表示 从用户的视角看问题，使用用户的词汇进行描述,不必向用户暴露实现细节 使常用的用户任务简单化，不要让用户解决额外的问题 促进学习,保持一致性，引导用户的使用习惯 保持显示惯性，传递信息，而不仅仅是数据 设计应满足响应需求,3,议程,界面设计指南(20分钟) 遵从窗口标准(20分钟） 屏幕元素确认列表(15分钟),4,概述,用户界面的需求通常是不明确的，一部分可能隐含在用户需求中，而另一部分则是用户不可能预先想到的。因此，软件企业应积累用户界面开发和测试的成果，将一些元素和规则进行重用，从而高效地开发出用户乐意接受的界面。 企业应在测试过程中积累自己的图形用户界面测试用例（通常称为GUI测试检查列表），形成自己的图形用户界面测试标准。,5,界面设计指南,(Color)颜色 (Resource)资源 (Font)字体 (Text)文字表述 (STYLE)控件选择 (ALIGN)控件布局 (TAB ORDER)TAB顺序 (Shortcut Key & Accelerator & Pop Menu)快捷键、加速键和弹出菜单 (ACTION)用户交互,6,(Color)颜色,统一色调，采用标准Windows的基本色调，做到与操作系统统一，读取系统标准色表。 整个界面色彩尽量少的使用类别不同的颜色。除非特殊场合，杜绝使用对比强烈，让人产生憎恶感的颜色。 同时色调也具有一定的含义，在整个系统中应保持色调含义的一致性，避免同一中颜色在不同的画面中表示不同的意义。,7,(Resource)资源,计算机的资源包括图标资源和鼠标光标资源等。 图标资源也需要遵循统一的规则，因为不同的图标代表不同的意义。例如：我们用图标来表示保存，因此我们在整个系统中只要涉及到保存的话,都应该使用同一个图标，不论是用在工具栏上还是在菜单上,还是在按钮上。 图标、图像应该很清晰的表达出意思，遵循常用标准，或者用户机器容易联想的到物件，绝对不允许画出默认奇妙的图案。 鼠标光标样式统一，使用系统标准。注意：本系统中不采用窗体做进度条，对于点击按钮后，鼠标变成沙漏形状，执行完成后, 鼠标变回。,8,(Font)字体,系统中中文一律采用标准字体“宋体”，英文一律采用标准 Microsoft Sans Serif ，除登录界面和图标中的特殊字体用图片实现,原则上不考虑特殊字体(隶书、草书等,特殊情况可以使用图片取代),保证每个用户使用起来显示都很正常。 字体大小统一规定， MSS字体8磅，宋体为10磅，字体颜色一般采用系统默认颜色。 所有控件尽量使用大小统一的字体属性，除了特殊提示信息、加强显示等例外情况。,9,(Text)文字表达,使用统一的语言描述，提到同一个概念时，用相同的术语描述。例如一个关闭退出功能按钮，统一描述为关闭，避免使用返回、退出描述。 通常情况下，每个窗口应该有一个唯一的标题，和触发它的菜单或按钮命令相对应。 在提示信息中多用“您、请”等礼貌用语，不要用对用户来说晦涩的计算机用语，杜绝错别字。 断句逗号句号顿号分号的用法，提示信息比较多的话，应该分段。 错误消息对话框不仅仅指出问题，还要提供解决问题的建议。,10,(STYLE)控件选择,不要随意使用控件，控件功能要专一，风格统一。如果没有好的控件，则使用标准控件。 控件的风格统一。 同一类型的控件操作方式相同，避免出现一个控件双击可以执行某些动作，而同样控件，双击却没有任何反映。 一个控件只做单一功能，尽量不复用。,11,(ALIGN)控件布局，窗口不拥挤，按功能组合控件,屏幕不能拥挤，让人看上去，不能太拥挤，也不能太松散。 整个项目，尽量采用统一的控件间距，通过调整窗体大小达到一致，即使在窗体大小不变的情况下，宁可留空部分区域，也不要破坏控件间的行间距。 文字和文本框一般采用左对齐方式，如单行文本框前的标签提示，使用左对齐加冒号；数据列表表头文字和内容，也采用左对齐。文字和文本框中的文字水平中对齐。横排按钮，最右边的一个与上面的控件右对齐窗口缩放时，控件位置、布局。 为了使界面不出现跑版或者难看的局面，解决方法是固定窗口大小，不允许改变尺寸。 弹出窗口有唯一的标题，和触发它的菜单或按钮命令相对应。,12,间距与对齐示例,13,(TAB ORDER)TAB顺序,习惯用法，阅读顺序，从左到右，从上到下。,14,(Shortcut Key & Accelerator& Pop Menu) 快捷键、加速键和弹出菜单,使用非破坏性缺省按钮，回车、ESC键的正确使用。对于弹出模态窗体，有默认加速键，如回车表示激活当前窗口设置为default的按钮动作，esc表示关闭窗口。同时在调用default按钮动作和关闭动作时候，不应该做有破坏性的操作，避免用户错误操作产生危害程度，例如不能把删除数据等功能的按钮作为缺省按钮。当用户要提交很多数据时，应该屏蔽ESC，或者做退出提示，告诫用户是否保存提交。 尽量避免使用右键菜单， 如使用的话尽量在可视化界面上拥有对应的按钮或者菜单选项。因为右键菜单由用户点击鼠标左右键或者别的动作才能调出来显示给用户。无法清晰的显示给用户，所以对应选项应该可以通过别的途径得到的。,15,(ACTION)用户交互,要使一个功能有时允许有时不允许用户使用，则这个控件的不能随便隐藏，应该使用disable属性进行表示，以免用户发现控件失踪后措手无策。 窗口弹出位置要明显，点击一个控件，弹出窗口或者菜单，应该给人明显提示。对于弹出窗体,统一要求显示位置在屏幕中央，要求窗体是以模态显示，并且不出现在任务拦上。 执行动作要有提示。UI作为人机对话的工具，用户做了任何动作，应该给用户一个视觉或者听觉、触觉提示。而且这个提示应该行明显，但不应提示过长，可以有以下几种方法：弹出交互对话框让用户点击确认； 改变UI中控件参数提示：(处理不用用户确认的提示，有一定延时，或者用户按键后自动清除。)；改变标题栏字符串，显示“信息：提交成功”,或者专门设置一个状态栏、TLable等用来进行提示。,16,图形用户界面（GUI）的一些业界标准,1对于每个应用程序(Application) 在图形上双击启动应用：装入信息应显示应用名、版本号，以及以大图形代替原来的图形； 关闭应用时应有信息窗提示用户确认：“您确认要退出*？”； 试图同时打开两次应用时不允许，当应用正在装载时试一下第二次开启应用；(一般而言) 所有的屏幕都应响应帮助【F1】键且做同样的工作(显示相应的帮助信息)。,17,图形用户界面（GUI）的一些业界标准,2 对于应用中的每个窗口 如果窗口有最小化按钮，点一下它，应最小化到任务栏，且显示相应的图标; 再次单击这个图标，可以返回到窗口并恢复到窗口原有的大小； 窗口控件的大小、对齐方向、颜色、背景等属性的设置值是否和标准要求的一致； 检查窗口中的下拉菜单、工具条、滚动条、对话框、按钮、图标和其他控制的功能，是否错用窗口元素、是否符合标准要求；,18,图形用户界面（GUI）的一些业界标准,2 对于应用中的每个窗口 使用【TAB】键在窗口中移动光标/焦点，使用【Shift】+【Tab】组合键回移； 屏幕中各元素得到焦点的次序应从左到右，从上到下； 如果一个钮能产生一个新窗口，则它不应盖住先前的窗口，并能回到先前的窗口中； 一般情况下，窗口中的所有事情应既能用鼠标又能用键盘来完成。,19,通用界面元素设计与测试,文本框（Text Boxes） 不要使用文本输入框来显示只读数据和信息。只读信息的文本框应该底色变灰，并且去掉文本框边框，和可编辑但未激活的状态区别开来。 给日期，数字，单位等特殊文字选择框或特殊文本框，检测到非法输入后应给出说明并能自动获得焦点。 单选钮（Radio Buttons） 用左右键和上下键移动，或以及鼠标单击选中。 单选框是一种多选一设置，可选数目在2-8之间。 当空间不够时，单选框可以用循环按钮、下拉菜单、滚动列表框来代替。 复选框（Check Boxes） 在框中用鼠标单击，或在文本上设置/取消设置，试着用空格键做这件事。 复选框和选项框按选择几率的高底而先后排列。 复选框和选项框要有默认选项，并支持Tab选择。,20,通用界面元素设计与测试,命令钮（Command Buttons） (1）如果它能导出一个新的窗口，使用户能输入或改变内容，则按钮的文字后带省略号（3个小点）； (2)除确定（ok）或取消（Cancel）外，其他的按钮应有一个字符代表，这个字符在按钮上是以下划线表示的，用ALT+字符组合键的方式可激活它，保证不重复定义这类字符； (3)用鼠标单击每一个按钮，应能激活； (4)用Tab走到这个按钮后，按空格或Enter键应能激活； (5)用Tab移到其他类型的控制按钮（非命令），则在屏上这个控制钮以加宽黑框表示，这时按Enter应能激活这个控制钮； (6)按Esc键应能激活Cancel钮。,21,通用界面元素设计与测试,下拉列表框（Drop Down List Boxes） (1) 按下拉列表框右边的箭头处，应能得到（打开）选择列表项，列表项可以卷动（当内容多时应有卷动条），其框中应不能输入文本； (2) 按一个字符应到以这个字符开头的项（英文时），按Ctrl+F4组合键应能打开下拉列表框。 (3) 下拉列表框中的选项应是排好了序的。,通用界面元素设计与测试,联合框（Combo Boxes） (1) 与下拉列表框的区别是，联合框中既可以输入文字，又可以在列表中选择。 列表框（List Boxes） (1) 用鼠标单击或上下箭头键可以选中一项； (2) 用卷动条可看到所有的数据。,23,菜单的设计与测试,菜单是应用程序命令项的列表，菜单可以是多级，这时是按照功能来组织的。菜单可以有多种形式，如：条形菜单、水平和垂直的弹出式菜单、下拉菜单等。 菜单功能是否正确执行； 常用菜单要有命令快捷方式。 文本字体、大小和格式是否正确； 菜单功能的名字是否具有自解释性; 右键快捷菜单是否采用与菜单相同的准则； 是否适当地列出了所有的菜单功能 是否根据系统功能进行合理分类，将选项进行分组（完成相同或相近功能的菜单用横线隔开放在同一位置。）； 菜单深度是否控制在3层以内 菜单标题是否简洁、有意义；菜单前的图标能直观的代表要完成的操作，如不能则不要用图标。 是否依使用频度排列；是否依逻辑顺序排列；是否依使用顺序排列； 各级菜单显示格式和操作方式是否一致。,24,系统响应时间,系统响应时间包括两个方面：时间长度和时间的易变性。用户响应时间应该适中，系统响应时间过长，用户就会感到不安和沮丧，而响应时间过短有时会造成用户加快操作节奏，从而导致错误。在系统响应时间上坚持如下原则： 响应时间长度 界面设计 0-10 秒 鼠标显示成为沙漏 10 到18 秒 由微帮助来显示处理进 18 秒 以 上 显示处理窗口，或显示进度条 对可能造成等待时间较长的操作最好提供取消功能。 当一个长时间的处理完成时应发出一个提示警告声如beep(1)， 这样用户不必总看着屏幕。,25,MessageBox 消息框。,标题：建议以主窗口的名称作为标题，以变量的形式显示，最好不要写死。（标题是否根据内容显示为“提示”，“警告”） 文本：不考虑国际化开发时，可以直接以中文显示，考虑国际化开发时，需要根据字串取本地化文本。请注意提示信息的语气及标点符号。 按钮：当有多个按钮时，执行删除操作时，默认按钮应为否（取消）。 符号：根据提示的内容，确认图标的显示。,26,根据提示的内容，确认图标的显示,27,屏幕元素确认列表,美学方面测试 确认正确性 导航测试 元素易用性测试 数据完整性测试 只读模式的测试 通用性测试 特殊域的测试,28,美学方面测试,屏幕/窗口的背景色是否正确； 图标基调颜色、大小。布局是否协调； 图标的外形与实际功能的相似性，尽量避免抽象； 重要的命令按钮与使用较频率的按钮是否放在了界面上醒目的位置； 域提示的颜色是否正确； 域背景色是否正确； 只读模式下，域提示的颜色是否正确； 只读模式下，域背景色是否正确；,29,美学方面测试,屏幕中提示的字体是否正确； 域中文本的字体是否正确； 域的排列是否美观； 域的编辑框排列是否美观； 成组的框的排列是否美观； 按钮的大小与界面的大小和空间是否协调； 屏幕窗口是否可极小化 屏幕窗口是否可以恢复大小； 域提示的拼写是否正确； 字符或字母域的对齐方式是否正确；,30,美学方面测试,数字域的对齐方式是否正确； 屏幕窗口中的帮助提示文本中是否有错别字； 屏幕窗口中错误信息文本中是否也有错别字； 文本中英文字符的大小写是否敏感； 域中是否有缺省值； 保证所有窗口看上去或感觉上，具有一致性； 保证所有的会话框看上去或感觉上，具有一致性；,31,确认正确性,每个域中确认有问题时，是否给用户一个恰当的信息； 是否要求用户对一个已确认的错误域进行修改； 当域有多项检查规则，进行覆盖测试； 在域中输入非法值并单击了确认按钮后，是否会出现报错信息； 保持屏幕/窗口级的一致性（除特殊要求外）；,32,确认正确性,对于数字域，检查负数是否能输入； 对于数字域，检查最大值、最小值，以及中间值是否允许； 对字符/字母域检查是否有一个特定的限制； 检查必输域是否需要用户输入； 必输域对应的数据库表字段是否不能为空；,33,导航测试,通过菜单是否可以进入应用屏（窗口）； 通过工具条是否可以进入应用屏(窗口)； 通过父窗口中的按钮是否可以进入子窗口； 可以双击父窗口的列表控制是否可以进入子窗口； 当窗口激活时，窗口模式是否正确； 同时能打开相同应用窗口的数量是否符合要求；,34,元素易用性测试,窗口中下拉表中的项目排序是否正确，一般以字母升序作为缺省情况； 测试日期输入的正确格式； 窗口中的按钮是否都有适当的快捷键； 快捷键的工作是否正常； 菜单中的选项是否定义了快捷键； 用【Tab】键在元素间移动的次序是否正确，一般缺省为从左上到右下； 只读域应不在TAB键能达到的序列中； 非激活域应不在TAB键能达到的序列中；,35,元素易用性测试,用鼠标点出文本框，是否会出现帮助信息； 用鼠标单击只读域，是否能进入； 当打开窗口时，光标/焦点应位于第一个可输入域； 窗口中是否有缺省的按钮定义； 缺省按钮的工作是否正常； 当错误信息确认时，焦点是否会回到出错的域； 使用【Alt】【Tab】组合键从一个应用到另一个应用切换时是否有冲突； 编辑框域是否指示了字符的长度；,36,数据完整性测试,关闭窗口时数据是否得到了保存； 检查域的长度，以保证没有字样被截掉； 有的域是通过在数据库中查询一个值作为缺省值，并且用户可以输入一个有效值来取代这个值； 检查数字域的最大值和最小值； 检查能接受负数的数字域能将负数正确的存储； 一组单选按钮是否由一组值代表（在数据库中）； 数据库对数据的存储是否完整，如字符串是否被截，数值是否被舍入。,37,只读模式的测试,只读模式屏幕和域的颜色设置是否正确； 只读模式是否合乎实际（这种情况下，是否应设为只读模式）； 字段域和控制按钮是否以只读模式来表示非激活； 与正在进行的操作无关的按钮应加以屏蔽（只读模式） 从窗口/菜单/工具条的只读模式是否能进入下一级窗口； 从只读模式进入的窗口是否有效； 只读模式下不能执行或进行“确认”；,38,通用性测试,保证有“帮助”菜单的存在； 保证在每个菜单中有适当的命令或先项； 保证工具条中的所有按钮对应一个命令； 保证每个菜单命令有一个热键方式； 在下拉列表中，保证值不被截断； 在下接列表中，保证表中的条目能通过适当的键或热键联合来存取； 窗口中没有重复定义的热键；,39,通用性测试,保证Esc键的正确使用（常用于“取消”），应有类似的提示：“更新的数据将丢失 是否继续？”； 保证“取消”按钮的功能同Esc键； “取消”但不能回退（已作的变化不能回退）时，应相当于“关闭”； 保证隐藏于当前屏幕后上的命令按钮不能工作； 当一个命令按钮应根据情况来确定是否能使用时，应保证在不能使用时变灰； 保证“确认”键和“取消Cancel”键按钮成对，并与其它命令按钮分开；,40,通用性测试,保证命令按钮名字清楚； 保证字段域的标签或名字不过于专业性，而是对系统的用户有意义的； 保证命令按钮有相似的大小和形状，相同的字体和字体大小； 保证每个按钮能通过热键盘方式来访问； 保证命令按钮在同一个窗口会话框中不会重复； 保证每个窗口会话框中元素（命令按钮、其它元素）在按回车键时，有一个清晰的缺省值响应回车；,41,通用性测试,保证对象按钮的设置对应于窗口会话框需要的功能； 保证可选按钮（包括单选项、复选项、以及选择框）的名字清楚； 保证可选按钮的名字不过于专业性，而是对系统的使用者有意义； 如果热键用于访问可选键，保证在同一窗口会话框中，热键不重复； 保证选择窗、选择按钮和命令按钮被逻辑地组在一起，形成功能“组”；,42,通用性测试,保证使用Tab键（序列）逻辑地在屏幕的域中移动光标； 保证在窗口中、鼠标中的一致性； 红色不用于加亮被激活的元素（色盲中最常风的为红-绿色盲）； 保证屏幕窗口中的展现与分布不混乱