codecamp

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

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

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

支付宝小程序 性能体验评测规范
支付宝小程序 最佳实践评测规范
温馨提示
下载编程狮App,免费阅读超1000+编程语言教程
取消
确定
目录

支付宝小程序开发文档

支付宝小程序 快速示例

支付宝小程序 小程序快速示例

支付宝小程序 框架

支付宝小程序 组件

支付宝小程序组件 基础组件

支付宝小程序组件 无障碍访问

支付宝小程序 扩展组件

支付宝小程序扩展组件 UI组件

支付宝小程序 API

支付宝小程序 开发工具

支付宝小程序 云服务

支付宝小程序 Serverless

关闭

MIP.setData({ 'pageTheme' : getCookie('pageTheme') || {'day':true, 'night':false}, 'pageFontSize' : getCookie('pageFontSize') || 20 }); MIP.watch('pageTheme', function(newValue){ setCookie('pageTheme', JSON.stringify(newValue)) }); MIP.watch('pageFontSize', function(newValue){ setCookie('pageFontSize', newValue) }); function setCookie(name, value){ var days = 1; var exp = new Date(); exp.setTime(exp.getTime() + days*24*60*60*1000); document.cookie = name + '=' + value + ';expires=' + exp.toUTCString(); } function getCookie(name){ var reg = new RegExp('(^| )' + name + '=([^;]*)(;|$)'); return document.cookie.match(reg) ? JSON.parse(document.cookie.match(reg)[2]) : null; }