新闻资讯
记录首创点滴进步 见证远行
我们一直紧跟时代前沿,聚焦行业实时动态,发布公司最新资讯,欢迎您的关注
您目前的位置:网站首页 > 新闻资讯 > 网站常识 >

3.07日音讯,H5WebAPP原生APP的设计区别

发布日期:2016-03-07文章来源:首创网络浏览次数:1318次
    3.07日音讯,H5WebAPP原生APP的设计区别,WebAPP和原生APP同为移动端,很少有研究这两项的交互区别,最近公司做了一次从原生APP到WebAPP(HTML5)的移植,故总结一下期间遇到的问题及不同点总结。 WebAPP和原生APP同为移动端,很......
    本文关键字:3.07日,音讯,H5WebAPP,原生,APP,的,设计,区别,
  3.07日音讯,H5WebAPP原生APP的设计区别,WebAPP和原生APP同为移动端,很少有研究这两项的交互区别,最近公司做了一次从原生APP到WebAPP(HTML5)的移植,故总结一下期间遇到的问题及不同点总结。
  WebAPP和原生APP同为移动端,很少有研究这两项的交互区别,最近公司做了一次从原生APP到WebAPP(HTML5)的移植,故总结一下期间遇到的问题及不同点总结。
  从使用场景上,WebAPP用户面临比原生APP用户更严峻的问题:
  1、页面跳转更加费力,不稳定感更强
  思考点:如何减少跳转(扁平结构、页面布局技巧),增加数据及展示的流畅流程及稳定性(技术)
  2、更小的页面空间(由于浏览器的导航本身占用一部分屏幕空间),更大的信息记忆负担
  移动设备的屏幕要小得多。这种如同透过门缝进行的阅读增加了认知的负担。人脑的短期记忆是不稳定的,用户在滚动屏幕的过程中需要临时记忆的信息越多,他们的表现就会越差。
  思考点:排版更清晰、信息更简练(可在原生APP基础上去掉一些丰富、复杂的视觉表现)
  3、导航不明显,原有底部导航消失,有效的导航遇到挑战
  思考点:如何有效的提供导航?有哪些形式?
  4、交互动态效果收到限制,影响一些页面场景、逻辑的理解。
  思考点:比如登录注册流程的弹出、完成及异常退出,做好文字提示。
  针对以上困境,解决方法总结如下。
  首先,从APP到WAP版,在产品上,最明显且核心的:
  1、精简功能,只将核心的任务实现,非核心的枝节可考虑删减。
  2、做好新的WebAPP导航.
  3、补充从WebAPP对下载原生APP的引导。
  一、常见的几种WebAPP导航样式
  1.1顶部底部导航的设计:
  常见WebAPP导航设计
  1.2导航快捷键设计:
  美团:顶部栏固定位置
  淘宝:悬浮圆圈--可展开的按钮
  优酷:非首屏时页面右侧悬浮
  导航快捷方式
  二、有效的导航设计
  1、基本的快捷导航中包括返回常用页面(如首页我的等)的快捷方式
  2、出现深层架构时及时补充返回重要层级页面的快捷方式
  3、情境式导航,方便用户快捷跳转到ta想去的页面,如购买结束时提供查看订单详情的按钮。
  ps:WebAPP更加需要画页面跳转的流程图,摸清各个页面的入口,尤其是页面返回的流程;有些简化的返回按钮,可以特殊注明返回到的页面
  一、在哪里出现引导?
  一般首页、核心任务的页面(如电商WebAPP的商品详情页、视频WebAPP的视频观看页)
  二、引导下载APP有哪些形式?
  1、页面顶部放置下载条2、页面底部悬浮层引导3、融合在页面首屏中
  4、下载按钮形式5、底部foot里含:客户端下载入口
  下载APP引导
  其次,在设计WebAPP时,有以下小技巧可以参考:
  1、从页面布局上减少跳转:使用交互技巧隐藏文字(eg腾讯视频)
  利用展开收起按钮减少页面跳转
  2、取消float浮层,增大展示空间(eg:大众点评)
  取消float浮层,同时在详情尾部再次加上“购买”按钮
  浮层的转换处理
  3、页面中对图片进行缩小(因情况而异)的处理、精简一些标签导航的视觉展示
  视觉微调
  技术上注意点:
  1)各手机浏览器的兼容测试
  2)底层服务的调取(能调取,但只有当其是核心功能时才保留eg:新浪、美团等皆去掉了头像上传功能)
  3)注意离线数据存储,减少数据请求频率。
  4)考虑保存用户的哪些数据:设置、个人数据、阅读锚点、跳出页面等。
  5)避免动效与浏览器的交互冲突
  6)按顺序异步加载eg:腾讯视频
    本文由邯郸网络公司首创网络整理编辑发布,请勿转载、复制、摘抄等!

+ 查看更多我们的客户 / Our client

0310-4559740
400-990-1661
    24小时报务热线
    18931045623
在线客服
首创网络邯郸公司
邯郸公司
电话:0310-4559740 / 18931045623  地址:邯郸市丛台区颐高广场B座13层1304室