支付宝小程序 体验评测规范

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. 合理的颜色搭配和字体样式检测

文字颜色与背景色需要搭配得当，适宜的颜色对比度和字体样式可以让用户更好地阅读，提升小程序的用户体验。