zoukankan      html  css  js  c++  java
  • 用户体验注意事项(小程序开发)

    写在前面

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

        具体注意事项如下

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

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

    最后

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

  • 相关阅读:
    Oracle 11g服务详细介绍及哪些服务是必须开启的?
    分析函数Ratio_to_report使用
    在datagrid中,IE浏览器报错:SCRIPT5007: 无法获取属性“rowspan”的值: 对象为 null 或未定义
    身为一个产品经理应该了解自己的本职
    创意思维常用练习方法资料
    思维导图五个关键秘诀
    思维导图与超级记忆力之间的联系
    易让大脑变迟钝的九中习惯
    分享怎样快速阅读的5大方法
    思维导图运用的四个特征
  • 原文地址:https://www.cnblogs.com/mianbaodaxia/p/9040946.html
Copyright © 2011-2022 走看看