支付宝小程序体验

使用 css ':active' 伪类来实现点击态，很容易触发，并且滚动或滑动时点击态不会消失，体验较差。建议使用小程序内置组件的 hover-*属性来实现。

得分条件：不使用 :active 伪类，使用 hover-class 替换 :active

惯性滚动会使滚动比较顺畅，在安卓下默认有惯性滚动，而在 iOS 下需要额外设置 -webkit-overflow-scrolling: touch 的样式。

得分条件：css 中带有 overflow: scroll 的元素，在 iOS 下需要设置 -webkit-overflow-scrolling: touch 样式

如果图片未按原图宽高比例显示，可能会导致图片拉伸变形，不美观，甚至造成用户识别困难。建议根据实际情况设置 image 组件的 mode 属性，以保持原图宽高比。

得分条件：显示的高/宽与原图的高/宽不超过 15%

应该合理地设置好可点击元素的响应区域大小，如果过小会导致用户很难点中，体验很差。

得分条件：可点击元素的宽高都不小于 20px

加载一个没有内容的页面，没有实际业务意义，而且还影响用户体验，建议移除。

得分条件：小程序中没有无效页面

一般情况下，弹屏都是模态的，模态弹框会打断用户的当前操作流程，强制用户交互。如果首页中多次使用，体验较差，建议尽量将弹屏融入到业务中，让用户对小程序有一定的了解之后，再给到用户。

得分条件：首页弹屏使用次数不超过 1 次

对于 position: fixed 的可交互组件，如果渲染在 iPhone X 的安全区域外，容易误触 Home Indicator，应当把可交互的部分都渲染到安全区域内。

得分条件：position: fixed 的可交互组件渲染在安全区域内

导航组件只有白色背景才可使用黑色的标题和按钮，彩色背景要用透明样式（文案和按钮为白色）。此外，不可使用颜色过浅的彩色背景，以保证导航内容清晰可见。

得分条件：颜色明度达到一定的区间时，相同明度不同色相清晰度差异较大，且饱和度也影响肉眼识别感知，因此针对导航栏的背景色约定的得分条件如下：

如果明度小于 95，可得分；
如果明度大于等于 95：
- 色相在 0~55 之间，饱和度小于 20，则不得分；
- 色相在 50~100 之间，饱和度小于 60，则不得分；
- 色相在 100~190 之间，饱和度小于 40，则不得分；
- 色相在 190~360 之间，饱和度小于 15，则不得分；

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

得分条件：字体大小不低于 20px，文字颜色和背景颜色的对比度不小于 1.4

支付宝小程序 体验