随着微信的诞生,很多公众号都是H5页面形式展现,设计H5页面时要区分于APP,主要把握好以下区别点:
1、较少页面跳转——在同样的网络环境下,(H5页面渲染需要调取服务器,但APP的渲染在本地,所以H5的页面跳转更费力——请教研发小伙伴),不稳定感更强;
改进:使用交互技巧隐藏文字,如“更多—收起”,减少跳转,
是否考虑在当前页上弹出?——技术上是否更复杂?
2、更小的页面展示空间,更大的记忆负担——人脑的短期记忆是不稳定的,用户在滚动屏幕的过程中需要临时记忆的信息越多,他们的表现就会越差,碎片阅读,已经很少有人能耐心的看完长长的内容,H5页面相对于APP,还多了浏览器导航所占用的屏幕空间,所以在设计时要考虑在APP基础上去掉复杂的视觉表现;
改进:如移动仓库项目,商详去掉评价、购买咨询等复杂的跳转;只保留核心功能
缩小页面展示图片
取消float浮层,增大页面展示空间
3、导航不明显——要考虑导航设计,顶部底部或左右侧,还要考虑如何快速跳转回重要页面,导航快捷键:如顶部固定位置、悬浮圆圈或非首屏时页面右侧悬浮;
技术上应注意:
1、各手机浏览器的兼容测试;
2、底层服务的调取(能调取,但只有当其是核心功能时才保留 eg:新浪、美团等皆去掉了头像上传功能);
3、注意离线数据存储,减少数据请求频率;
4、考虑保存用户的哪些数据:设置、个人数据、阅读锚点、跳出页面等;
5、避免动效与浏览器的交互冲突;
6、按顺序 异步加载?
H5优势:页面可以随意分享,且迭代方便,不同系统只需适配一次,但APP每次迭代需要不同系统基础上迭代,而且IOS因有审核期,每月只可迭代一次
原出处: