支付宝小程序 体验评测规范
1. :active 伪类来实现点击态检测
使用 css :active
伪类来实现点击态,很容易触发,并且滚动或滑动时点击态不会消失,体验较差。建议使用小程序内置组件的 hover-*
属性来实现。
2. 开启惯性滚动检测
惯性滚动会使滚动比较顺畅,在安卓下默认有惯性滚动,而在 iOS 下需要额外设置 -webkit-overflow-scrolling: touch
的样式。
3. 保持图片大小比例检测
如果图片未按原图宽高比例显示,可能会导致图片拉伸变形,不美观,甚至造成用户识别困难。建议根据实际情况设置 image 组件的 mode 属性,以保持原图宽高比。
4. 可点击元素的响应区域检测
应该合理地设置好可点击元素的响应区域大小,如果过小会导致用户很难点中,体验很差。
5. 无效页面检测
加载一个没有内容的页面,没有实际业务意义,而且会影响用户体验,建议移除。
6. 弹屏使用频次检测
一般情况下,弹屏都是模态的,模态弹框会打断用户的当前操作流程,强制用户交互,如果首页中多次使用,体验较差,建议尽量将弹屏融入到业务中,让用户对小程序有一定的了解之后,再给到用户。
7. iPhone X 兼容性检测
对于 position: fixed
的可交互组件,如果渲染在 iPhone X 的安全区域外,容易误触 Home Indicator,应当把可交互的部分都渲染到安全区域内。
8. 导航组件样式检测
导航组件只有白色背景才可使用黑色的标题和按钮,彩色背景要使用透明样式(文案和按钮为白色)。此外,不可使用颜色过浅的彩色背景,以保证导航内容清晰可见。
9. 合理的颜色搭配和字体样式检测
文字颜色与背景色需要搭配得当,适宜的颜色对比度和字体样式可以让用户更好地阅读,提升小程序的用户体验。