`

论Web App、Hybrid App、Native App设计差异

 
阅读更多

目前主流应用程序大体分为三类:Web App、Hybrid App、 Native App。



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



首先,我们来看看什么是 Web App、Hybrid App、 Native App。

(1)Web APP

Web App 指采用Html5语言写出的App,不需要下载安装。类似于现在所说的轻应用。生存在浏览器中的应用,基本上可以说是触屏版的网页应用。


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


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

(2)Hybrid App

Hybrid APP指的是半原生半Web的混合类App。需要下载安装,看上去类似Native App,但只有很少的UI Web View,访问的内容是 Web 。
例如Store里的 新闻类APP,视频类APP普遍采取的是Native的框架,Web的内容。
Hybrid App 极力去打造类似于Native App 的体验,但仍受限于技术,网速,等等很多因素。尚不完美。

(3)Native App

Native APP 指的是原生程序,一般依托于操作系统,有很强的交互,是一个完整的App,可拓展性强。需要用户下载安装使用。


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


 缺点:
(1)分发成本高(不同平台有不同的开发语言和界面适配)
(2)维护成本高(例如一款App已更新至V5版本,但仍有用户在使用V2, V3, V4版本,需要更多的开发人员维护之前的版本)
(3)更新缓慢,根据不同平台,提交–审核–上线 等等不同的流程,需要经过的流程较复杂

 

二、Web App、Hybrid App、Native App 技术特性

 

由上图可见,Web APP 的开发基于Html5语言。而Html5语言本身又有着不可避免的局限性。正是这些局限性的存在,使得Web App在体验中要逊于Native App。

三、Web App受限制因素及设计要点

相比Native App,Web App体验中受限于以上5个因素: 网络环境,渲染性能,平台特性,受限于浏览器,系统限制。

(1)网络环境,渲染性能



Web APP对网络环境的依赖性较大,因为Web APP中的H5页面,当用户使用时,去服务器请求显示页面。如果此时用户恰巧遇到网速慢,网络不稳定等其他环境时,用户请求页面的效率大打折扣,在用户使用中会出现不流畅,断断续续的不良感受。同时,H5技术自身渲染性能较弱:对复杂的图形样式,多样的动效,自定义字体等的支持性不强。
因此,基于网络环境和渲染性能的影响,在设计H5页面时,应注意以下几点:


 简化不重要的动画/动效
 简化复杂的图形文字样式
 减少页面渲染的频率和次数


从下图移动Web版 jing.fm和Native版jing对比后可以看出:Web APP首页去除冗余的功能,回溯本源,只给用户提供了jing.fm最初的本质需求—电台。既符合H5精简功能又达到了突出核心功能的设计原则。无疑给用户眼前一亮的气息。
正如书中《瞬间之美》的一个核心观点:重要的并不是我们提供的信息量有多大,而是我们能否给他们提供真正需要的信息。



再如:百度最新推出的直达号,以良子健身为例:
从Native App和Web App(百度直达号)的对比中,我们可以看出Native良子以九宫格的形式展现,且属于双重导航,功能入口太多;弊端是用户不知道聚焦在哪里,分散用户的注意力。而Web版良子整合并减少了导航的入口,增强用户的专注度;界面清爽,整洁,很好地传达了良子本身的寓意——轻松、愉悦、休闲、舒适。

 

(2)受限于浏览器



通常Web App生存于浏览器里,宿主是浏览器。不同的浏览器自身的属性不尽相同,如:浏览器自带的手势,页面切换方式,链接跳转方式,版本兼容问题等等。
例如下图:UC 浏览器和百度浏览器自身支持手势切换页面。手指从左侧滑动页面,返回至上一级。百度手机助手H5页面,顶部Banner支持手势左右滑动切换。这一操作与浏览器自身手势是冲突的。



再如,基于浏览器的Web APP在打开新的模块中的页面时,大多会新开窗口来展现。例如用户在使用购物类APP时,浏览每日精选模块时,每当打开新的商品时,默认新开一个窗口。这样的优劣势显而易见:优势是能够记录用户浏览过的痕迹,浏览过的商品,以便后续横向对比;劣势是过多的页面容易使用户迷失在页面中。


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



因此,Web App基于浏览器的特性,从设计角度应该遵循以下了两点:
 少用手势,避免与浏览器手势冲突
 减少页面跳转次数,尽量在当前页面显示。

(3)系统限制,平台特性



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



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

 

Web 版地图耗费的流量大于Native版,且不能预先缓存离线地图。对于地理位置的判断也是基于宿主浏览器,而非Web地图本身。获取路线后,对于更换到达方式,相对来说是不便利的。
相反,Native 版地图,能够直接访问用户的地理位置,能够很清晰的为用户展现App规划的路线,并能轻松的查看多种路线方案,以便做出符合自己的最佳方案。对于切换公交,走路,自驾等路线方式也是只需一键操作。Native 版地图相对于 Web版地图增加更多情感化,易用的功能,如:能够记录用户的生活轨迹,记录用户的点滴足迹,能够享受躲避拥堵方案等。而Web版地图基于技术框架,很难实现以上功能,从用户体验角度来看,弱于Native版地图。

四、小结



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

(1)简化

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

(2)少用

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

(3)减少

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

(4)增强

增强Loading时的趣味性
增强页面主次关系
增强控件复用性


最后:小编给大家推荐一组优秀的Web APP
forecast.io/
m.ftchinese.com/phone.html
thenextweb.com
jing.fm
yuedu.fm
mail.google.com
plus.google.com
snowbird.com
everthing.me
m.vancl.com
pattern.dk/sun/



转载请注明出自”百度MUX”

http://mux.baidu.com/?p=6750

分享到:
评论

相关推荐

    Native App与Web App移动应用发展.pdf

    Hybrid App(混合应用)作为一种折衷方案,结合了Native App和Web App的优点,既利用了Web技术的跨平台性,又可以调用部分设备API,提升性能。同时,Progressive Web App(渐进式Web应用)的概念提出,使得Web App...

    native app, hybrid app

    在移动应用开发领域,我们经常会遇到“Native App”、“Hybrid App”以及“HTML5 App”这三种类型的应用。它们各自具有独特的特性和优势,也存在一定的局限性。接下来,我们将详细探讨这些概念,以及它们之间的优...

    Hybrid App(混合模式移动应用)

    Hybrid App,混合模式移动应用,是一种结合了Native App(原生应用)和Web App优点的应用类型。这类应用在外表上与Native App无异,提供类似客户端的用户体验,但其核心是一个UI WebView,用于加载和运行Web App的...

    移动HybridApp实战与架构与微信应用号开发教程

    Hybrid App作为一种结合了原生应用和Web应用优势的开发方式,越来越受到开发者和企业的青睐。本教程将深入探讨移动Hybrid App的实战与架构,同时也会涉及微信应用号(现称微信小程序)的开发。以下是关于这些主题的...

    HTML5在移动Web App中的应用研究 (2).pdf

    在移动Web App领域,主要存在NativeApp、Web App和Hybrid App三种类型。NativeApp是原生应用程序,通常性能优秀但开发成本高;Web App基于浏览器,易于更新但功能受限;Hybrid App结合两者优点,既有接近原生的体验...

    基于Web App服务模式的移动图书馆设计与实现.pdf

    移动图书馆的服务模式对其系统结构、技术路线以及建设成本有直接影响,常见的服务模式包括短信(SMS)、Web应用(Web App)、本地应用(Native App)和混合应用(Hybrid App)。 本文重点探讨了基于Web App服务模式...

    Hybrid App开发框架的实现及性能优化.pdf

    Hybrid App是一种结合了原生(Native)应用开发和Web应用开发优势的技术,它允许开发者利用HTML5、CSS3和JavaScript等Web技术构建应用程序,同时通过与原生平台的交互,提供接近原生应用的用户体验。随着移动互联网...

    Android Hybrid app H5 交互

    在移动应用开发领域,混合应用(Hybrid App)是一种结合原生应用特性和Web技术的开发方式。Android Hybrid App H5交互是指通过Android原生应用与HTML5(H5)页面进行通信,实现两者间的数据交换和功能调用。这种交互...

    Ionic : Hybrid Mobile App Development

    If you are a web developer who wants to build hybrid mobile app development using the Ionic framework, then this comprehensive course is best-suited for you. What You Will Learn Get to know about ...

    基于Hybrid APP和私有云平台发布的移动端开发设计.pdf

    移动应用开发已成为现代企业不可或缺的一部分,随着技术的进步,出现了多种开发模式,包括Native APP、Web APP和Hybrid APP。每种模式都有其独特的优缺点,适用于不同的场景和需求。本文主要讨论如何结合Hybrid APP...

    移动APP开发模式.pdf

    本文深入探讨了四种主要的移动APP开发模式:原生APP(Native APP)、Web APP、Hybrid App以及React Native App,并对它们各自的优缺点进行了分析。 1. **原生APP开发模式**:原生APP是专门为特定操作系统(如...

    手机淘宝app及web

    为了提升用户体验,手机淘宝APP还可能采用了Hybrid开发模式,结合原生和Web技术,比如使用React Native或WebView。这样可以在保持原生性能的同时,方便地复用Web端的代码。同时,APP可能会集成推送服务,如阿里云推...

    大话web&native;混合开发

    ### 大话Web & Native混合开发 #### 一、引言 随着移动互联网的发展,越来越多的应用程序被开发出来,为了适应不同的应用场景和技术需求,出现了多种应用程序的开发方式,包括纯Web应用、原生(Native)应用以及混合...

    HTML5, Hybrid or Native Mobile App Development

    在探讨《HTML5,混合或原生移动应用开发》这一主题时,我们深入解析了三种主要的移动应用开发路径:原生(Native)、混合(Hybrid)与基于Web的应用(Mobile Web Applications)。每种方法都有其独特的优势和局限性...

    跨终端Web之HybridApp

    NativeApp(以下简称Native)和MobileWeb(以下简称Web)二者混合开发的产物被称为HybridApp(以下简称Hybrid)。Hybrid并不是什么新概念,最早可以追溯到Symbian时代,直到iOS和Android出现之后才充分展现出价值。...

    Hybrid APP 与原生开发优缺点

    本文将围绕Hybrid APP、Native APP、Web APP这三种主流的开发模式进行比较,并详细阐述它们各自的优缺点。 #### 一、开发模式概述 1. **Native App(原生应用)** - **定义**:Native App 是指使用特定平台(如 ...

    6-SDCC-2016杭州-互联网应用架构峰会-电商APP客户端Hybrid架构实践-秦曲波.pdf

    首先,从“三种开发模式的对比”来看,秦曲波指出了Native APP、Web APP和Hybrid APP的优缺点。Native APP通常性能较好,用户体验佳,但开发门槛高,上线速度慢;Web APP开发门槛低,上线快,但更新不及时,性能和...

Global site tag (gtag.js) - Google Analytics