树立体验和规范意识.pdfVIP

H5App⽤户体验开发规范 树⽴体验和规范意识 背景： • 钱包内有⼤量H5App应⽤ • 各个H5APP⽤户体验不⼀致，体验差 • 业务特性，需要⼤量应⽤转H5 ⺫标： • 从H5的特点出发，以⽤户为纬度，规范⽤户体验的规范 • 主要针对：应⽤/⻚⾯转场，⻚⾯交互，⻚⾯渲染 • 督促⼤家能够在遵守规范，重视⽤户体验 • 提升⽤户在钱包内能达到⽤户体验的⼀致性 • 增强对⽤户体验的意识，使⽤户体验真正融⼊到产品研发整个周期中 • 让我们的产品变的更好，让钱包变得更好 应⽤/⻚⾯转场 1. 转场时需要设置容器颜⾊为⻚⾯底⾊ 2. 转场⻚⾯是在线H5⽅式时，加载时，显⽰进度条样式 3. 转场⻚⾯为离线H5⽅式时，加载提⽰显⽰菊花样式 4. 转场⻚⾯之前不显⽰加载提⽰，有需要在下个⻚⾯处理 5. 禁⽌出现⽤户可⻅但⽆法操作的⾃动⻚⾯转场 6. 转场⻚⾯的标题避免短时间内连续变动和闪动 7. 转场⻚⾯右上⾓的⽂字/ 图标避免出现连续变动 1、转场时需要设置容器颜⾊为⻚⾯底⾊ 原因： 容器默认是“⽩⾊”背景，如果⻚⾯设置了⾮“⽩⾊背景” ，⻚⾯背景⾸先 ⽩⾊，然后闪烁变换为设定的颜⾊ ⽅案： 打开⻚⾯时候，增加：[容器启动参数：backgroundColor] 2、转场⻚⾯是在线H5⽅式时，加载时，显⽰进度条样 式 原因： 当打开的⻚⾯为在线⻚⾯时，端在请求获取htm⻚⾯时也是有时间的， 在这种情况下，如果是空⽩⻚⾯，体验不好 ⽅案： 在线H5⻚⾯加载时，设置：[容器启动参数：showProgress=YES ]。 3、转场⻚⾯为离线H5⽅式时，加载提⽰显⽰菊花样式 原因： 离线⻚⾯和在线⻚⾯的不同时，离线⻚⾯不需要发起⺴络请求，但是 ⻚⾯的数据需要发起请求获取，这时通过菊花⽅式更为友好 ⽅案： 菊花分为两种：顶部标题旁边⼩菊花 showTitleLoading （⻚⾯不冻结， 可操作）、⻚⾯中间⼤菊花 showLoading （⻚⾯操作被冻结，只能后 退，不能操作） 。 提⽰： 当需要显⽰菊花时候，需要延迟 1000ms ，如果1000ms 后有数据了，就不 出现菊花。这是为了：防⽌⺴速过快、总是出现菊花的不好体验。 call⽅式： 启动参数⽅式： 全局菊花： 4、转场⻚⾯之前不显⽰加载提⽰，有需要在下个⻚⾯ 处理 原因： 为保证钱包内体验⼀致性，所有操作均统⼀为：转场⻚⾯之前不显⽰ 加载提⽰ 5、禁⽌出现⽤户可⻅但⽆法操作的⾃动⻚⾯转场 原因： 对于有内容的⻚⾯，使⽤[showLoading]会有⻓时间锁定⻚⾯的情况， 会让⽤户焦虑 ⽅案： ⻚⾯如果是有预填充内容（即⾮空⽩⻚），优先使⽤titleLoading ，不 锁定⻚⾯ 6、转场⻚⾯的标题避免短时间内连续变动和闪动 原因： ⺴速慢的情况下标题闪烁变化，以及超时时读取不到标题 ⽅案： 需要再打开⻚⾯时候，将标题带过来 启动参数： 设置：defaultTitle={ ⻚⾯标题 } ，详⻅：[容器启动参数：defaultTitle] 7、转场⻚⾯右上⾓的⽂字/ 图标避免出现连续变动 原因： 和标题闪烁变化类似，特别是如果使⽤在线图标时，由于⺴络请求， 会有替换右上⾓图标的时间差 ⽅案： 如果不使⽤右上⾓默认的样式，都需要在启动⻚⾯时候，隐藏右上⾓按 钮，在⻚⾯中使⽤ base64 icon （在线图⽚需要监听onLoad）/⽂字改变 右上⾓按钮，然后显⽰右上⾓按钮 启动参数： 设置：showOptionMenu=NO。详⻅：[容器启动参数：showOptionMenu] ，[控制标题栏] ⻚⾯交互 1. ⻚⾯数据加载时，如果⻚⾯已有内容，则在标题处显⽰加载提⽰，如果⻚ ⾯⽆内容时，则显⽰全屏加载提⽰ 2. ⻚⾯中不可同时出现两种及以上的加载提⽰，⽐如说标题菊花和全屏菊花 3. 禁⽌在1秒内，连续出现加载样式 4. ⼀秒以内的数据获取等待不要出现菊花样式 5. ⻚⾯上可点击元素按下要有即时反馈,即⽤户⼿刚指触碰元素时，元素需 要有颜⾊的变化，当⽤户进⾏滑动或者离开的时候，变化恢复成原状 6. iOS所有⻚⾯允许⽤户垂直滚动超出⻚⾯区域（有固定头部的⻚⾯适⽤于 可滚动部分），即⻚⾯允许下拉出现⻚⾯后⾯的