在我们网站Web界面设计好之后,需要做详细的测试。下面我和大家分享自己在做Web界面测试的测试点以及应该注意的一些问题。
我们通过用户界面测试来核实用户与软件的交互来进行界面测试,必须明确UI测试的目的——确保用户界面向用户提供了适当的访问和浏览对象功能的操作,除此之外,UI测试还却表UI功能内部的对象符号预期的要求,并遵循公司和行业的标准。
接下来,我们具体的分析一下界面测试的依据从哪些方面着手。
测试目标:
1、窗口与窗口之间、字段与字段之间的浏览,以及各种访问方法(tab键、鼠标移动和快捷键)的使用
2、窗口的对象和特征(例如、菜单、大小、位置、状态和中心)都符号标准
测试方法:
为每个窗口创建或修改测试,以核实各个应用程序窗口和对象都可正确的进行浏览,并处于正常的对象状态。
我们在实际工作当中,针对web应用程序,也就是经常所说的B/S系统,可以从如下方面来进行用户界面测试、
1、导航测试
导航描述了用户在一个页面内操作的方式,在不同的用户接口控制之间,例如按钮、对话框、列表和窗口等;
不同的链接页面之间,通过考虑下列问题,可以决定一个web应用系统是否易于导航;导航是否直观?web系统的主要部分是否可通过主页存取?web系统是否需要站点地图、搜索引擎或其他的导航帮助
当然,这些同美工以及客户需求有关。我们是根据已经确认的页面进行测试即可。
2、图形测试
图形包括图片、动画、边框、颜色、字体、背景、按钮等。
(1) 要确保图形有明确的用途,图片或动画不要胡乱的堆在一起,以免浪费传输时间,web应用系统的图片尺寸要尽量地小,并且要能清楚的说明某件事情。一般都链接到某个具体的页面
(2)验证所有页面字体的风格是否一致
(3)背景颜色与字体颜色和背景色相搭配
(4)图片的大小和质量,一般采用jpg或gif压缩,最好能使用图片的大小减小到30k以下
(5)演示文字回绕是否正确,如果说明文字指向右边的图片,应该确保该图片出现在右边,不要因为使用图片而使窗口和段落排列古怪或者出现骨性。
3、内容测试
内容测试用来检验Web应用系统提供信息的正确性、准确性和相关性。信息的正确性是指信息是可靠的还是误传的。信息的相关性是指是否在当前页面可以找到与当前浏览信息相关的信息列表或入口,也就是一般Web站点中的所谓"相关文章列表"
4、表格测试
需要验证表格是否设置正确,用户是否需要向右滚动页面才能看见产品的价格?
把价格放在左边,产品细节放在右边是否更有效?
每一栏的宽度是否足够宽,表格里的文字是否都有折行?
是否因为某一格的内容太多,而将整行的内容拉长?
5、整体界面测试
整体界面是指整个Web应用系统的页面结构设计,是给用户的一个整体感。例如、当用户浏览Web应用系统时是否感到舒适,是否凭直觉就知道要找的信息在什么地方?整个Web应用系统的设计风格是否一致?
对整体界面的测试过程,其实是一个对最终用户进行调查的过程。一般Web应用系统采取在主页上做一个调查问卷的形式,来得到最终用户的反馈信息。
对所有的用户界面测试来说,都需要有外部人员(与Web应用系统开发没有联系或联系很少的人员)的参与,最好是最终用户的参与。
Web界面测试中需要注意的细节问题:
1、界面的线条是否一致,每个界面中线条是否对齐,是否一致。(静态页面没有确认的情况下)
2、整个系统的界面是否保持一致
3、界面中是否存在错别字
4、界面所有的按钮样式是否一致
5、每个界面是否同原静态页面设计一致(静态页面确认的情况下)
6、操作是否友好
7、界面所有的按钮、下拉框是否有响应
8、界面所有的链接是否正常
9、界面所有的输入框是否都进行校验(例如、搜索框、字段输入框)
10、界面所有的列表页标题字是否会折行,标题字是否统一居中等,当然也可以居左,这需要同客户沟通(折行的话影响美观)
11、界面所有的展示图片是否样式一致
12、浏览器的兼容性问题,检查页面在不同浏览器下是否会发生异常
13、每个页面的提示字体的颜色、格式是否统一准确
14、界面中所有字段后面是否都存在冒号,有冒号,查看是否冒号为统一的中文冒号还是英文冒号。
15、界面中的提示说明叙述是否太啰嗦,有时候需要能简化尽量简化,并且字体显示格式一致,颜色统一。
16、在web网站,一般经常是后台控制前台的显示,因此在对后台进行数据添加时,查看前台是否有变化,并且查看界面的数据是否溢出框外。
相关视频
相关阅读 WebVR是什么 WebVR有什么功能火狐VR组长跳槽 担任谷歌WebVR产品设计师假如绕道版权 用泰捷WEBOX可以看直播和所有内容Web前端应用十种常用技术WebLoad与哲想软件携手共进webfreer去广告方法 webfreer浏览器去广告教程expression web 4文档乱码解决方法IIS6安装时提示“将加密数据写入Web服务器配置数据库时出错”解决
热门文章 Wordpress本地安装教程dx1.5如何设置二级域名
最新文章
hbuilder有哪些快捷键Wordpress本地安装教程
Wordpress本地安装教程expression web 4文档乱码解决方法dz 2.5“收藏本版”关闭小对话框无法关闭解在制作安装软件之前,您必须先将易语言存盘,
人气排行 如何使用multipart/form-data格式上传文件Photoshop PS图层混合模式详解(非常详细)ISAPI_Rewrite3使用教程网站里添加收藏和设为首页代码桌面快捷方式图标不见了C#获取执行程序所在的当前路径的方法详解(XMLHttpRequest)进行跨域请求方法如何用远程桌面连接进行传输文件
查看所有0条评论>>