用户体验注意事项(小程序开发)
写在前面
最近一直都在开发小程序,关于如何开发小程序的这里就不提了,因为有前端基础的人,看看官网文档就能写小程序了,这里总结我在开发小程序当中有关用户体验的一些问题。对于前端来说用户体验是非常重要的,技术在好的网页,用户体验没做好,也是枉费的。
具体注意事项如下
加载相关(加载动画是很重要的)
1. 所有的加载都需要加入加载动画,除非是个别接口是用户无感知的;
我们在项目中主要用到了两种加载动画,第一种全屏加载动画,见图一,放在屏幕中间显示,第二种底部加载动画,见图二,放在屏幕底部展示,具体怎么展示稍后会提
图一 图二
2.大部分页面首次进入需要加入全屏加载动画,接口请求完毕之后,展示内容
3. 如果一个页面需要加载多个接口,接口从上到下依次加载(不然一次全部请求,页面下面的先请求完毕会出现页面跳动),第一个接口显示现在全屏加载动画,其他所有的接口显示底部加载动画(但是不建议一个页面加载多个接口,尽量一个页面一个接口)
4.想订单列表这种每个tab下都有列表的页面,都用底部加载动画,tab下内容频繁变化的可以点击tab每次都重新请求,但是不建议这么做。不频繁变化的可以用变量保存下每个列表的内容,不做重复的请求。如果能够记录到用户上个tab停留的位置,用户回到上个tab的时候位置不变这样用户体验更好(大部分APP这么做的,目前我们小程序也在做这个事情)
5.点击按钮,如果需要请求接口,出现中间加载动画且按钮不可再点击,如我们小程序提交订单就要请求接口
6.加载过的接口不加载第二次,可以用一个变量保存起来,竟可能的少请求接口
7.进入页面能少加载一个接口就少加载一个,可以选择滑到底部加载或者用户点击然后加载
8.要有错误页面,当接口请求超时的时候要给错误页面,还是有很多情况下网络不好的,关键小程序是有缓存的,有时候进去不会重新加载,就会导致用户每次进去都看到的在家或者雪白一片(重要)
图片相关:
1.所有的图片都需要加七牛的参数,需要多宽参数就传多宽,因为七牛的参数会有一定的优化
我们公司用的七牛,其他的一些CDN应该也差不多,像又拍云
(2)https://image1.ichuanyi.cn/group7/M00/80/7B/CgAALlrXWteEVn8OAAAAAP-ZFzQ591.jpg
第一张图和第二张是同一张图,但是一个张图只有100K左右,第二种大于1M,第一张图的画质完全没有问题,所以这就提现出加七牛参数的重要性了
2.尽量少用 mode='widthFix',因为小程序中图片只有默认的高度的,withFix计算图片的高度需要一定的时间,这个时间图片就会发生抖动和变形,目前我们公司返回图片时,也会返回图片的高和宽
3. 如果图片变形了,那一定是写错了
4.图片都要有预加载的图片,不然图片没加载出来的时候一片雪白,用户会很惊讶
其他
1.点击区域做一定程度的放大,考虑一下小屏手机,地铁上还有很多人用iphone 5s
2.多收集用户的formId,小程序的推送必要要有formId才行,每次我们的小程序发推送,用户活跃度和订单就直线飙升
3.对于结果是确定的,优先展示结果给用户看,如收藏功能,点赞功能,购物车的删除等,这类优化给响应,然后再感知请求接口;
最后
附上我最近做的两个小程序的小程序码,有兴趣的可以一起看看讨论,然后所有的东西都是我自己总结的,如果有不对的地方还请见谅