[UI测试]界面风格与测试的必要规则

最新推荐文章于 2020-12-06 10:41:31 发布

GreenLearner

最新推荐文章于 2020-12-06 10:41:31 发布

阅读量1.1k

点赞数

分类专栏：测试文章标签：测试 ui 工具 windows 产品文档

测试专栏收录该内容

3 篇文章 0 订阅

订阅专栏

[UI 测试] 界面风格与测试的必要规则

界面是软件与用户交互的最直接的层，界面的好坏决定用户对软件的第一印象。而且设计良好的界面能够引导用户自己完成相应的操作，起到向导的作用。同时界面如同人的面孔，具有吸引用户的直接优势。设计合理的界面能给用户带来轻松愉悦的感受和成功的感觉，相反由于界面设计的失败，让用户有挫败感，再实用强大的功能都可能在用户的畏惧与放弃中付诸东流。目前界面的设计引起软件设计人员的重视的程度还远远不够，直到最近网页制作的兴起，才受到专家的青睐。
目前流行的界面风格有三种基本方式：多窗体、单窗体以及资源管理器风格， 无论那种风格，以下规则是应该被重视的。

1 ：易用性：
按钮名称应该易懂，用词准确，屏弃摸棱两可的字眼，要与同一界面上的其他按钮易于区分，能望文知意最好。理想的情况是用户不用查阅帮助就能知道该界面的功能并进行相关的正确操作。

易用性细则：
1): 完成相同或相近功能的按钮用Frame 框起来，常用按钮要支持快捷方式 。
2): 完成同一功能或任务的元素放在集中位置，减少鼠标移动的距离。
3): 按功能将界面划分局域块，用Frame 框括起来, 并要有功能说明或标题。
4): 界面要支持键盘自动浏览按钮功能，即按Tab 键的自动切换功能。
5): 界面上首先应输入的和重要信息的控件在Tab 顺序中应当靠前, 位置也应放在窗口上较醒目的位置。
6): 同一界面上的控件数最好不要超过10 个，多于10 个时可以考虑使用分页界面显示。
7): 分页界面要支持在页面间的快捷切换，常用组合快捷键Ctrl+Tab
8): 默认按钮要支持Enter 及选操作，即按Enter 后自动执行默认按钮对应操作。
9): 可写控件检测到非法输入后应给出说明并能自动获得焦点。
10):Tab 键的顺序与控件排列顺序要一致，目前流行总体从上到下，同时行间从左到右的方式。
11): 复选框和选项框按选择几率的高底而先后排列。
12): 复选框和选项框要有默认选项，并支持Tab 选择。
13): 选项数相同时多用选项框而不用下拉列表框。
14): 界面空间较小时使用下拉框而不用选项框。
15): 选项数较少时使用选项框，相反使用下拉列表框。
16): 专业性强的软件要使用相关的专业术语，通用性界面则提倡使用通用性词眼。

2 ：规范性：
通常界面设计都按Windows 界面的规范来设计，即包含“ 菜单条、工具栏、工具厢、状态栏、滚动条、右键快捷菜单” 的标准格式，可以说：界面遵循规范化的程度越高，则易用性相应的就越好 。小型软件一般不提供工具箱。

规范性细则：

1): 常用菜单要有命令快捷方式 。
2): 完成相同或相近功能的菜单用横线隔开放在同一位置。
3): 菜单前的图标能直观的代表要完成的操作。
4): 菜单深度一般要求最多控制在三层以内 。
5): 工具栏要求可以根据用户的要求自己选择定制。
6): 相同或相近功能的工具栏放在一起。
7): 工具栏中的每一个按钮要有及时提示信息。
8): 一条工具栏的长度最长不能超出屏幕宽度。
9): 工具栏的图标能直观的代表要完成的操作。
10): 系统常用的工具栏设置默认放置位置。
11): 工具栏太多时可以考虑使用工具箱。
12): 工具箱要具有可增减性，由用户自己根据需求定制。
13): 工具箱的默认总宽度不要超过屏幕宽度的1/5 。
14): 状态条要能显示用户切实需要的信息，常用的有：

目前的操作、系统状态、用户位置、用户信息、提示信息、错误信息等，

如果某一操作需要的时间较长，还应该显示进度条和进程提示。

15): 滚动条的长度要根据显示信息的长度或宽度能及时变换，以利于用户了解显示信息的位置和百分比。
16): 状态条的高度以放置5 号字为宜，滚动条的宽度比状态条的略窄。
17): 菜单和工具栏要有清楚的界限; 菜单要求凸出显示，这样在移走工具栏时仍有立体感。
18): 菜单和状态条中通常使用5 号字体。工具栏一般比菜单要宽，但不要宽的太多，否则看起来很不协调。
19): 右键快捷菜单采用与菜单相同的准则。

3 ：帮助设施：
系统应该提供详尽而可靠的帮助文档，在用户使用产生迷惑时可以自己寻求解决方法。
帮助设施细则：
1): 帮助文档中的性能介绍与说明要与系统性能配套一致。( 我们的系统帮助文档都是系统的祖先时期的说明，让人困惑) 。
2): 打包新系统时，对作了修改的地方在帮助文档中要做相应的修改。
3): 操作时要提供及时调用系统帮助的功能。常用F1 。
4): 在界面上调用帮助时应该能够及时定位到与该操作相对的帮助位置。也就是说帮助要有即时针对性。
5): 最好提供目前流行的联机帮助格式或HTML 帮助格式。
6): 用户可以用关键词在帮助索引中搜索所要的帮助，当然也应该提供帮助主题词。
7): 如果没有提供书面的帮助文档的话，最好有打印帮助的功能。
8): 在帮助中应该提供我们的技术支持方式，一旦用户难以自己解决可以方便的寻求新的帮助方式。

4 ：合理性：
屏幕对角线相交的位置是用户直视的地方，正上方四分之一处为易吸引用户注意力的位置，在放置窗体时要注意利用这两个位置。

合理性细则：
1): 父窗体或主窗体的中心位置应该在对角线焦点 附近。
2): 子窗体位置应该在主窗体的左上角或正中。
3): 多个子窗体弹出时应该依次向右下方偏移，以显示窗体出标题为宜。
4): 重要的命令按钮与使用较频繁的按钮要放在界面上注目的位置。( 默认界面应该只显示目标用户最常使用的功能，至于不常用到的高级功能，可以“ 隐藏” 起来，比如说，放到菜单里，不要都做成按钮摆到界面上。果真需要需要这些高级功能的话，用户自然会到菜单里去找的。 )

5): 错误使用容易引起界面退出或关闭的按钮不应该放在易点位置。横排开头或最后与竖排最后为易点位置。
6): 与正在进行的操作无关的按钮应该加以屏蔽(Windows 中用灰色显示，没法使用该按钮) 。
7): 对可能造成数据无法恢复的操作必须提供确认信息, 给用户放弃选择的机会。
8): 非法的输入或操作应有足够的提示说明。
9): 对运行过程中出现问题而引起错误的地方要有提示，让用户明白错误出处，避免形成无限期的等待。
10): 提示、警告、或错误说明应该清楚、明了、恰当。

5 ：美观与协调性：
界面应该大小适合美学观点，感觉协调舒适，能在有效的范围内吸引用户的注意力。
美观与协调性细则：
1): 长宽接近黄金点比例，切忌长宽比例失调、或宽度超过长度。
2): 布局要合理, 不宜过于密集，也不能过于空旷，合理的利用空间。
3): 按钮大小基本相近，忌用太长的名称，免得占用过多的界面位置。
4): 按钮的大小要与界面的大小和空间要协调。
5): 避免空旷的界面上放置很大的按钮。
6): 放置完控件后界面不应有很大的空缺位置。
7): 字体的大小要与界面的大小比例协调, 通常使用的字体中宋体9-12 较为美观，很少使用超过12 号的字体。
8): 前景与背景色搭配合理协调，反差不宜太大，最好少用深色，如大红、大绿等。蓝色文字以白色背景容易识别，而在红色背景则不易分辨，原因是红色和蓝色没有足够反差，而蓝色和白色反差很大。除非特殊场合，杜绝使用对比强烈，让人产生憎恶感的颜色。常用色考虑使用Windows 界面色调。
9): 整个界面色彩尽量少的使用类别不同的颜色。统一色调，针对软件类型以及用户工作环境选择恰当色调: 如：安全软件，根据工业标准，可以选取黄色，绿色体现环保，蓝色表现时尚、紫色表现浪漫等等，淡色可以使人舒适，暗色做背景使人不觉得累等
10): 如果使用其他颜色，主色要柔和，具有亲和力与磁力，坚决杜绝刺目的颜色。
11): 大型系统常用的主色有"#E1E1E1" 、"#EFEFEF" 、"#C0C0C0" 等。
12): 界面风格要保持一致，字的大小、颜色、字体要相同，除非是需要艺术处理或有特殊要求的地方。
13): 如果窗体支持最小化和最大化或放大时，窗体上的控件也要随着窗体而缩放；切忌只放大窗体而忽略控件的缩放。
14): 对于含有按钮的界面一般不应该支持缩放，即右上角只有关闭功能。
15): 通常父窗体支持缩放时，子窗体没有必要缩放。
16): 如果能给用户提供自定义界面风格则更好，由用户自己选择颜色、字体等。

6 ：菜单位置：

菜单是界面上最重要的元素，菜单位置按照按功能来组织。

菜单位置细则：

1): 菜单通常采用“ 常用-- 主要-- 次要-- 工具-- 帮助” 的位置排列，符合流行的Windows 风格。
2): 常用的有“ 文件” 、“ 编辑” ，“ 查看” 等，几乎每个系统都有这些选项，当然要根据不同的系统有所取舍。
3): 下拉菜单要根据菜单选项的含义进行分组，并切按照一定的规则进行排列，用横线隔开。
4): 一组菜单的使用有先后要求或有向导作用时，应该按先后次序排列。
5): 没有顺序要求的菜单项按使用频率和重要性排列，常用的放在开头，不常用的靠后放置；重要的放在开头，次要的放在后边。

6): 如果菜单选项较多，应该采用加长菜单的长度而减少深度的原则排列。
7): 菜单深度一般要求最多控制在三层以内。
8): 对常用的菜单要有快捷命令方式，组合原则见8 。
9): 对与进行的操作无关的菜单要用屏蔽的方式加以处理，如果采用动态加载方式—— 即只有需要的菜单才显示—— 最好。
10): 菜单前的图标不宜太大，与字高保持一直最好。
11): 主菜单的宽度要接近，字数不应多于四个，每个菜单的字数能相同最好。
12): 主菜单数目不应太多，最好为单排布置。

7 ：独特性：

如果一味的遵循业界的界面标准，则会丧失自己的个性. 在框架符合以上规范的情况下，设计具有自己独特风格的界面尤为重要。尤其在商业软件流通中有着很好的迁移默化的广告效用。
独特性细则：
1): 安装界面上应有单位介绍或产品介绍，并有自己的图标。
2): 主界面，最好是大多数界面上要有公司图标。
3): 登录界面上要有本产品的标志，同时包含公司图标。
4): 帮助菜单的“ 关于” 中应有版权和产品信息。
5): 公司的系列产品要保持一直的界面风格，如背景色、字体、菜单排列方式、图标、安装过程、按钮用语等应该大体一致。

8 ：快捷方式的组合

在菜单及按钮中使用快捷键可以让喜欢使用键盘的用户操作得更快一些。在西文Windows 及其应用软件中快捷键的使用大多是一致的。

菜单中：
1): 面向事务的组合有:
        Ctrl-D 删除
        Ctrl-F 寻找
        Ctrl-H 替换
        Ctrl-I 插入
        Ctrl-N 新建
        Ctrl-S 保存
        Ctrl-O 打开

2): 列表:
        Ctrl-R   刷新
        Ctrl-G   定位
        Ctrl-Tab 下一分页窗口或反序浏览同一页面控件

3): 编辑:
        Ctrl-A 全选
        Ctrl-C 拷贝
        Ctrl-V 粘贴
        Ctrl-X 剪切
        Ctrl-Z 撤消操作
        Ctrl-Y 恢复操作

4): 文件操作:
        Ctrl-P 打印
        Ctrl-W 关闭

5): 系统菜单
        Alt-A 文件
        Alt-E 编辑
        Alt-T 工具
        Alt-W 窗口
        Alt-H 帮助

6):MS Windows 保留键:
        Ctrl-Esc 任务列表
        Ctrl-F4 关闭窗口
        Alt-F4 结束当前程序
        Alt-Tab 切换当前程序
        Enter 缺省按钮/ 确认操作
        Esc 取消按钮/ 取消操作
        Shift-F1 上下文相关帮助

按钮中：

可以根据系统需要而调节，以下只是常用的组合。
        Alt-Y 确定( 是)
        Alt-C 取消
        Alt-N 否
        Alt-D 删除
        Alt-Q 退出
        Alt-A 添加
        Alt-E 编辑
        Alt-B 浏览
        Alt-R 读
        Alt-W 写
这些快捷键也可以作为开发中文应用软件的标准, 但亦可使用汉语拼音的开头字母（不推荐）。

9: 安全性考虑：

在界面上通过下列方式来控制出错几率，会大大减少系统因用户人为的错误引起的破坏。开发者应当尽量周全地考虑到各种可能发生的问题, 使出错的可能降至最小。
如应用出现保护性错误而退出系统, 这种错误最容易使用户对软件失去信心。因为这意味着用户要中断思路, 并费时费力地重新登录, 而且已进行的操作也会因没有存盘而全部丢失。

安全性细则：
1): 最重要的是排除可能会使应用非正常中止的错误。
2): 应当注意尽可能避免用户无意录入无效的数据。
3): 采用相关控件限制用户输入值的种类。
4): 当用户作出选择的可能性只有两个时, 可以采用单选框。
5): 当选择的可能再多一些时, 可以采用复选框, 每一种选择都是有效的, 用户不可能输入任何一种无效的选择。
6): 当选项特别多时，可以采用列表框，下拉式列表框。
7): 在一个应用系统中, 开发者应当避免用户作出未经授权或没有意义的操作。
8): 对可能引起致命错误或系统出错的输入字符或动作要加限制或屏蔽。
9): 对可能发生严重后果的操作要有补救措施。通过补救措施用户可以回到原来的正确状态。
10): 对一些特殊符号的输入、与系统使用的符号相冲突的字符等进行判断并阻止用户输入该字符。
11): 对错误操作最好支持可逆性处理，如取消系列操作。
12): 在输入有效性字符之前应该阻止用户进行只有输入之后才可进行的操作。
13): 对可能造成等待时间较长的操作应该提供取消功能。
14): 特殊字符常有；;’”><, ｀‘ ：“ ［” ｛、/| ｝］+=)-(_*&&^%$#@!,. 。?/ 还有空格。（此外，还要注意全角和半角符号的区别）
15): 与系统采用的保留字符冲突的要加以限制。
16): 在读入用户所输入的信息时，根据需要选择是否去掉前后空格。
17): 有些读入数据库 的字段不支持中间有空格，但用户切实需要输入中间空格，这时要在程序中加以处理。

10: 多窗口的应用与系统资源：

设计良好的软件不仅要有完备的功能，而且要尽可能的占用最底限度的资源。
应用细则：
1): 在多窗口系统中，有些界面要求必须保持在最顶层，避免用户在打开多个窗口时，不停的切换甚至最小化其他窗口来显示该窗口。
2): 显示多个窗口时，窗口的名称是否被适当地表示？
3): 活动窗口是否被适当地加亮？
4): 如果使用多任务，是否所有的窗口被实时更新？
5): 在主界面载入完毕后自动卸出内存，让出所占用的WINDOWS 系统资源。
6): 关闭所有窗体，系统退出后要释放所占的所有系统资源，除非是需要后台运行的系统。
4): 尽量防止对系统的独占使用。

美丽的事物常常会让人无法抗拒。这就是为什么产品出色的外观设计对于电脑、汽车、日用品、家具、食品、服装等等几乎所有商品的销售与推广，都有着举足轻重的作用的原因。
同样的道理，对于软件公司来说，软件产品就是他们的商品，而软件界面就是他们产品的外观，界面的美观与否，直接关系到了软件产品的营销成败。
我们可以清楚地看到，微软公司对软件界面设计的重视。请回想一下您在第一次见到win2000 时的情景，与nt4.0 相比是否惊叹他界面的美观性与易用性？而您如果使用过xp 系统，则会被其令人神奇的感官概念而震惊折服！金山公司的金山词霸就是国内软件成功的例子了，从金山词霸3.0 到金山词霸2001 的变化堪称经典。著名的网页动画制作软件flash 从3.0 到4.0 ，仅仅修改了图标和窗体，立即大为增色…

现今世界上成功的软件公司都非常重视软件界面的美化设计工作，因为他们深刻地知道，在激烈的市场竞争中，仅仅有强大的功能是远远不够的，不足以战胜强劲的对手。我们可以相象一下，您在挑选手机的时候，如果有两款手机，性能相同，而第一款比第二款要美观很多，那么您将选择哪一款呢？当然是美观的那一款了。试想，您的客户，也会拿您和您竞争对手的软件做这样的比较的。
现在的软件企业都知道，广告和市场推销活动对市场营销的作用是多么的重要，并不遗余力地打广告、做活动、做推广。但我们知道，这些活动的最终目的，是为了让用户购买并使用软件产品，而用户最终使用的也是您的产品，那么为什么不在软件界面的美观性上多下些工夫呢？在诸如家用电器、汽车、电脑等成熟的市场中，用非常精美的广告去推广一种功能强大却丑陋无比的产品，是一种笑话。然而，这样的笑话在软件行业里却屡见不鲜。这也是像中国足球一样，中国软件业与国外相比较存在的一个很大的差距