用户体验规范

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

一：界面规范

1：列表

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

2：图片

• 不允许图片被挤扁展示,要同比例裁剪展示或者全部展示
• 当图片资源不存在,界面不能展示裂开的图或者白屏,默认展示一张报错的图片
• 当某张图片不需要添加点击事件时,需要给图片加一个css属性pointer-events: none,防止部分安卓机点击图片时会覆盖在页面上
• 当图片大小过大,需要进行压缩,减少图片体积,利于项目运行(前提是不影响图片质量)
• 图片数量过多时图片做懒加载
• 展示图片需求做点击预览大图功能
• 图片加载过程中应显示占位图或骨架屏，避免布局抖动
• 图片资源应根据不同设备分辨率提供不同尺寸版本，提高加载速度
• 考虑使用webp等现代图片格式，在保证质量的同时减小体积

3：文字

• 当文字需求为只展示一行或者具体几行时,其余文字不展示时,需要加文字溢出省略号样式
• 文字大小应考虑不同设备的适配，建议使用rpx单位
• 重要文字信息应有足够对比度，确保可读性

4：表单

• 提交表单时需要继续表单验证,例如:手机号是否正确,必填项是否填写,密码是否符合指定的规则等!
• 提交表单时需要做防抖操作,防止用户手速过快,多次点击多次提交的问题
• 表单中获取验证码需要60s倒计时，倒计时过程中不允许更改手机号,不允许再次获取
• 表单验证错误时，应在输入框附近显示明确的错误提示
• 表单提交成功后应有明确的成功反馈
• 长表单应考虑分步填写，减轻用户认知负担
• 输入框获取焦点时应自动滚动到可视区域，避免被键盘遮挡

5：交互反馈

• 所有可点击元素应有明确的点击态反馈
• 操作成功或失败时应有toast提示
• 耗时操作应显示进度条或进度提示
• 页面跳转应有过渡动画，避免生硬切换
• 重要操作（如删除）应有二次确认机制

6：小程序特有体验

• 页面返回时应保持上一页面的滚动位置
• 考虑小程序冷启动优化，减少白屏时间
• 合理使用分包加载，提高首屏加载速度
• 适配不同机型的安全区域，特别是刘海屏和底部操作区
• 遵循微信小程序设计规范，保持体验一致性

二：项目规范

1:项目优化

• 按需加载UI组件库
• 删除没用到的依赖
• 移除项目中所有的console,可以看下babel-plugin-transform-remove-console插件
• 图片压缩
• 图片资源懒加载
• 路由懒加载
• 定时器必须销毁
• v-for 遍历必须为 item 添加 key，且避免同时使用 v-if
• CDN 的使用
• 组件异步加载
• 合理使用computed和watch，避免不必要的重复计算
• 避免深层嵌套组件，减少渲染层级
• 使用节流和防抖优化频繁触发的事件

2:跨端适配

• 使用条件编译处理平台差异
• 避免使用平台特有API，优先使用uni-app通用API
• 样式适配不同屏幕尺寸，使用flex布局
• 测试覆盖主流机型，特别关注iOS和Android差异
• 字体图标优先于图片图标，提高跨平台一致性

3:性能监控

• 实现页面加载性能监控
• 监控并优化首屏加载时间
• 定期检查内存泄漏问题
• 监控API请求性能
• 建立性能基线，持续优化

4:错误处理

• 全局统一的错误捕获机制
• 友好的错误提示界面
• 关键操作的容错处理
• 网络异常时的重试策略
• 错误日志上报与分析