H5用户体验规范

H5用户体验规范

为保证最后项目的用户体验，项目中的部分交互和视觉属于约定俗成的默认逻辑，产品文档和交互文档中即使未出现相关的说明，作为开发人员，在开发过程中也需要补全这部分的交互和视觉逻辑，如有疑问，可向项目管理人员询问。

一、界面规范

1. 列表

• 列表页进入加载数据时需要显示加载中的loading；
• 列表页数据为空时需要有无数据的提示或者icon；
• 列表页默认进入不需要展示无数据的提示,应该在请求数据之后,判断数据为空时再展示
• 列表页需要分页功能，不能一次性加载所有数据
• 列表页需要具备上拉加载更多以及下拉刷新的功能，这两者在加载过程中也需要加loading
• 列表页数据加载完成或者加载失败之后都需要关闭loading

2. 图片

• 不允许图片被挤扁展示,要同比例裁剪展示或者全部展示
• 当图片资源不存在,界面不能展示裂开的图或者白屏,默认展示一张报错的图片
• 当某张图片不需要添加点击事件时,需要给图片加一个css属性pointer-events: none,防止部分安卓机点击图片时会覆盖在页面上
• 当图片大小过大,需要进行压缩,减少图片体积,利于项目运行(前提是不影响图片质量)
• 图片数量过多时图片做懒加载
• 展示图片需求做点击预览大图功能

3. 文字

• 当文字需求为只展示一行或者具体几行时,其余文字不展示时,需要加文字溢出省略号样式

4. 表单

• 提交表单时需要继续表单验证,例如:手机号是否正确,必填项是否填写,密码是否符合指定的规则等!
• 提交表单时需要做防抖操作,防止用户手速过快,多次点击多次提交的问题
• 表单中获取验证码需要60s倒计时，倒计时过程中不允许更改手机号,不允许再次获取

二、项目规范

1. 项目优化

• 按需加载UI组件库
• 删除没用到的依赖
• 移除项目中所有的console,可以看下babel-plugin-transform-remove-console插件
• 图片压缩
• 图片资源懒加载
• 路由懒加载
• 定时器必须销毁
• v-for 遍历必须为 item 添加 key，且避免同时使用 v-if
• CDN 的使用
• 组件异步加载