webview与原生页面

一、如何判断

安卓:可通过打开开发者选项-显示布局边界来判断。原生:无;webview:有边界。

iOS:如果应用本身带缓存的,断网打开,加载页面。原生:有内容;webview:空白页面。

二、web应用性

webview有进度条:h5。加载慢,不等发版能更新,开发快。

webview无进度条:hybrid。加载快,需要等发版能更新,开发快。兼具“Native App良好用户交互体验的优势”和“Web App跨平台开发的优势”。可以用react native 或weex。

三、Web App、Hybrid App、Native App 纵向对比

1. Web APP

优点:(1)开发成本低;(2)更新快;(3)更新无需通知用户,不需要手动升级;(4)能够跨多个平台和终端。

缺点::(1)临时性的入口;(2)无法获取系统级别的通知,提醒,动效等等;(3)用户留存率低;(4)设计受限制诸多。

2. Hybrid App

Hybrid APP指的是半原生半Web的混合类App。需要下载安装,看上去类似Native App,但只有很少的UI Web View,访问的内容是 Web 。更新快,类似原生,但仍有许多不稳定性。

3. Native App

优点:(1)打造完美的用户体验;(2)性能稳定;(3)操作速度快,上手流畅;(4)访问本地资源(通讯录,相册);(5)设计出色的动效,转场;(6)拥有系统级别的贴心通知或提醒;(7)用户留存率高。

缺点:(1)分发成本高(不同平台有不同的开发语言和界面适配)(2)维护成本高(3)更新缓慢。

四、小结

综述所述,在设计Web APP时,应当遵循以下几点:

1. 简化:简化不重要的动画/动效;简化复杂的图形文字样式。

2. 少用:少用手势;避免与浏览器手势冲突;少用弹窗。

3. 减少:减少页面内容;减少控件数量;减少页面跳转次数,尽量在当前页面显示。

4. 增强:增强Loading时的趣味性;增强页面主次关系;增强控件复用性。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 175,633评论 25 709
  • 现有3类主流APP,分别为:Web App、Hybrid App(混合模式移动应用,Hybrid有“混合的”意思)...
    小圣阅读 16,615评论 26 137
  • 名词介绍 Native APP Native APP 指的是原生程序,一般依托于操作系统,有很强的交互,是一个完整...
    福兮祸所依阅读 14,683评论 0 20
  • 名词介绍 Native APP Native APP 指的是原生程序,一般依托于操作系统,有很强的交互,是一个完整...
    LabRaDor2079阅读 5,948评论 0 5
  • 1.坐享10分钟,有点跑神儿… 2.昨晚有点失眠,估计一点多才睡着,前面几天培养的早睡又泡汤啦…早上就到了7:30...
    想写书的Linda阅读 1,670评论 0 2