用户体验注意事项(小程序开发)

javascript/jquery

浏览数:157

2019-9-3

AD:资源代下载服务

写在前面

    最近一直都在开发小程序,关于如何开发小程序的这里就不提了,因为有前端基础的人,看看官网文档就能写小程序了,这里总结我在开发小程序当中有关用户体验的一些问题。对于前端来说用户体验是非常重要的,技术在好的网页,用户体验没做好,也是枉费的。 

    具体注意事项如下

加载相关(加载动画是很重要的)

1. 所有的加载都需要加入加载动画,除非是个别接口是用户无感知的;

   我们在项目中主要用到了两种加载动画,第一种全屏加载动画,见图一,放在屏幕中间显示,第二种底部加载动画,见图二,放在屏幕底部展示,具体怎么展示稍后会提

                 图一                   图二

2.大部分页面首次进入需要加入全屏加载动画,接口请求完毕之后,展示内容

3. 如果一个页面需要加载多个接口,接口从上到下依次加载(不然一次全部请求,页面下面的先请求完毕会出现页面跳动),第一个接口显示现在全屏加载动画,其他所有的接口显示底部加载动画(但是不建议一个页面加载多个接口,尽量一个页面一个接口)

4.想订单列表这种每个tab下都有列表的页面,都用底部加载动画,tab下内容频繁变化的可以点击tab每次都重新请求,但是不建议这么做。不频繁变化的可以用变量保存下每个列表的内容,不做重复的请求。如果能够记录到用户上个tab停留的位置,用户回到上个tab的时候位置不变这样用户体验更好(大部分APP这么做的,目前我们小程序也在做这个事情)

5.点击按钮,如果需要请求接口,出现中间加载动画且按钮不可再点击,如我们小程序提交订单就要请求接口

6.加载过的接口不加载第二次,可以用一个变量保存起来,竟可能的少请求接口

7.进入页面能少加载一个接口就少加载一个,可以选择滑到底部加载或者用户点击然后加载

8.要有错误页面,当接口请求超时的时候要给错误页面,还是有很多情况下网络不好的,关键小程序是有缓存的,有时候进去不会重新加载,就会导致用户每次进去都看到的在家或者雪白一片(重要)

图片相关:

1.所有的图片都需要加七牛的参数,需要多宽参数就传多宽,因为七牛的参数会有一定的优化

  我们公司用的七牛,其他的一些CDN应该也差不多,像又拍云

  如:(1)https://image1.ichuanyi.cn/group7/M00/80/7B/CgAALlrXWteEVn8OAAAAAP-ZFzQ591.jpg?imageMogr2/thumbnail/750x/interlace/1/q/95

       (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.对于结果是确定的,优先展示结果给用户看,如收藏功能,点赞功能,购物车的删除等,这类优化给响应,然后再感知请求接口;

最后

附上我最近做的两个小程序的小程序码,有兴趣的可以一起看看讨论,然后所有的东西都是我自己总结的,如果有不对的地方还请见谅

 

作者:面包大虾