Web App、Hybrid App与Native App的设计差异

正如Google开发手册里描述:当用户打开一个Web App的时候,他们期待这个应用就像是一个单个应用,而不是一系列网页的结合。然而,什么情况下需要跳转页面,什么情况下在当前页面展示则需要设计师细致考量。

Web App、Hybrid App与Native App的设计差异

因此,Web App基于浏览器的特性,从设计角度应该遵循以下了两点:

少用手势,避免与浏览器手势冲突。

减少页面跳转次数,尽量在当前页面显示。

3. 系统限制,平台特性

由于Html5语言的技术特性,无法调用系统级别的权限。例如,系统级别的弹窗,系统级别的通知,地理信息,通讯录,语音等等。且与系统的兼容性也会存在一些问题。以上限制通常导致APP的拓展性不强,体验相对较差。例如百度地图:

Web App、Hybrid App与Native App的设计差异

Web版地图基于浏览器展现,因此,不能全屏显示地图,给用户的眼界带来局限感;相反,Native 版地图以全屏展现的形式,很好的拓展了用户的视野。整个界面干净简洁,首页去除冗余功能。

在制定路线的体验中,如图:

Web 版地图耗费的流量大于Native版,且不能预先缓存离线地图。对于地理位置的判断也是基于宿主浏览器,而非Web地图本身。获取路线后,对于更换到达方式,相对来说是不便利的。

相反,Native 版地图,能够直接访问用户的地理位置,能够很清晰的为用户展现App规划的路线,并能轻松的查看多种路线方案,以便做出符合自己的最佳方案。对于切换公交,走路,自驾等路线方式也是只需一键操作。

Native 版地图相对于 Web版地图增加更多情感化,易用的功能,如:能够记录用户的生活轨迹,记录用户的点滴足迹,能够享受躲避拥堵方案等。而Web版地图基于技术框架,很难实现以上功能,从用户体验角度来看,弱于Native版地图。

四、小结

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

1. 简化

  • 简化不重要的动画/动效
  • 简化复杂的图形文字样式

2. 少用

  • 少用手势,避免与浏览器手势冲突
  • 少用弹窗

3. 减少

  • 减少页面内容
  • 减少控件数量
  • 减少页面跳转次数,尽量在当前页面显示

4. 增强

  • 增强Loading时的趣味性
  • 增强页面主次关系
  • 增强控件复用性
Jeary Cheung
阿里云ECS

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

目前评论:1   其中:访客  1   博主  0

    • avatar 中山婚纱摄影 2

      谢谢博主的分享