UI测试注意事项

用户拿到我们的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插入