web测试一两事

前几天我们上线的一个功能，抛砖引玉列两个我印象深刻的点，也欢迎大家指正。

这个功能是用户在后台维护员工信息，生成名片，有预览和保存名片的功能。预览是前台做的效果，保存是后台合成生成的图片。这个过程中要保证前台和后台合成的效果一样的。

1.一开始在外接显示器测试，预览效果和后台合成已经约束好，每行显示的字数，字体等。效果都大体一致。但是后来在电脑上，不同屏幕的尺寸、分辨率等设置，预览的效果就参差不齐。这个是因为，前台字体已经选用最小了，但是设计图要求正反两面的预览要横着摆一排，并不让出现滚动条。所以，整体名片的大小就比较小，但是在小屏上，即便是最小字体也做不到和后台合成的效果一样，约束好的字数会在小屏预览的时候超出预设的位置。
后来我们也请教了前台资深同事，发现没有很好的办法。最后也发现了其实设计本身是不符合网页设计的，比如随便浏览一些网页，其实两侧都是有留白的。本身设计是不合理的。这个我觉得对于我的意义就是，从需求、设计图阶段就应该分析它的可行性、合理性，只是这次如果没有一些专业的知识容易忽视。我想起来，小程序最开始的时候，大家对小程序都不熟悉，我当时的团队要做一个小程序，开发经理建议我去微信公众平台去了解下微信给的开发规范和接口。比如底栏建议不要超过4个还是5个tab之类的、界面的统一性、页面的跳转流程、微信开放了哪些接口等，好验证看看需求、设计是否可行。说了这么多，这一点想说的是，针对测试不同类型的产品，可能都有的不同的特性，这些特性背后又有一些规范或者公约，我们都可以了解下才好保证质量和用户体验等。

2.其中还有一个环节是上传头像，这个头像会显示在名片上。一开始页面功能没有完全开发好的时候，是先测试单个接口的，上传图片的接口是没有问题的，300DPI的图片上传后还是300DPI。但是页面功能开发完了以后，以为头像清晰度应该是没问题的。但是我们担心合成的名片和实际外面设计的名片有差距，担心可用性。我们就去外面找了个打印店打印了下，让人家看看是否和一般的名片差距不大。格式都没有太大问题，打印出来头像是不够清晰的，这才发现，其实前台上传后，把图片压缩了。后台开发的同学把这个问题给解决了。很庆幸这个大家担心可用性，去验证、发现问题解决问题的过程，也提醒我以后每个环节都不能放松，前台上传后的图片，也得看下是否被压缩等。