用户拿到我们的APP后,最先看到的就是UI,所以UI也是决定用户能否继续使用我们APP的一个关键原因之一,那么怎么测试UI呢,下面会简单说一下一些测试过程中需要注意的地方
文案:
1、错别字,千万不要有错别字
2、大小写,比如iOS的i一定要小写,OS一定要大写
3、标点符号,中文英文标点符号要统一
4、中英文换行,英文换行最好不要截断英文单词,中文换行最好两端对齐
5、字体字号颜色,和UI保持一致,尤其是加粗、斜体、灰色、小字提示等
6、文案统一,同一个功能,尽量保持叫一个名字,不要一个地方叫“设定”,一个地方叫“设置”
7、文案要简单明了,尽量不要写一大段话
布局
1、页面位置,居中、左对齐、右对齐、上对齐、下对齐等,设计稿中的页面logo是居中的,结果app中是靠左的,肯定不行
2、主次分明,突出主要功能或主要提示
图片
1、清晰程度
2、图片大小,不要出现被拉伸,被挤压
3、图片位置,在页面中的位置要适中,居中对齐、左端对齐等对齐方式
4、图片自适应,在不同大小的手机屏幕或者web浏览器窗口下,图片可以自适应的显示,且不会出现拉伸挤压等
5、图片加载速度,网络正常的情况下,不要出现图片加载不出来的情况
6、图文混合的排列方式
7、动图是否能正常播放,播放循环次数,如果是循环播放,那播放一次后要继续播放
控件
文本框
1、是否有默认值
2、是否有提示文案,一般预设提示文案要置灰显示
3、长度超出限制后,应该怎么显示,是换行,还是...显示
对话框
1、模态 or 非模态,打开对话框后是否可以对程序做操作
2、显示的位置,一般对话框要在屏幕的中间位置,或者app的中间位置显示
3、对话框层叠关系,打开一个对话框后,在打开一个对话框,是层叠关系还是会关闭之前的对话框
4、对话框是否可以移动
5、对话框中至少要一个可以不做任何操作就关闭对话框的功能,比如右上角的X,或者点击对话框之外的其他位置
6、对话框内布局要合理,文案和按钮的整体位置
底部操作列表
1、操作列表中的项不宜过多,要突出重点
2、点击其他位置或取消可以收起操作列表
选择框
单选
1、是否存在默认选项
2、选中其他选项后,当前选项要自动取消选择
多选
1、是否存在默认选项
2、选中其他选项后,不会影响当前选项
3、选择的热区,是只能点击选择框生效还是点击文字也可以生效
按钮
1、未点击、点击态要有两个样式
2、不可点击和点击要有两个样式
标签栏
1、选中要有选中的样色,选中和未选中不会有视觉上的位置差异
toast
1、提示信息的展示时间,要让用户至少能看明白提示的是什么,不要一闪而过
开关控件
1、开关和该开关所要表达的文案对的上
2、开关打开和关闭的样式要有明显的区别
3、开关的响应范围
滚动条
1、一页显示的下的时候,不要有滚动条
2、一页显示不下的时候,要有滚动条,且滚动条的样式要和UI的整体风格保持一致
内容轮显
1、只有一页的时候,不要有滚动的...显示
2、内容有多页的时候,要有滚动额...显示,有多少页,显示多少个点
3、要是轮播的方式,从第一页播放到最后一页后,要自然的滚动到第一页,而不是有明显的视觉上的跳动
操作习惯
1、左滑右滑
2、链接到第三方的,第三方app的名称,比如新浪微博,不能叫新浪
3、微信朋友圈一般在微信右方,QQ空间一般在QQ的右方,且中间不要被其他app插入