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

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

一、Web AppHybrid AppNative 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 AppHybrid AppNative 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时的趣味性

ï 增强页面主次关系

ï 增强控件复用性

时间: 2024-12-10 17:24:23

Web App、Hybrid App与Native App的设计差异的相关文章

Hybrid APP基础篇(二)->Native、Hybrid、React Native、Web App方案的分析比较

说明 Native.Hybrid.React.Web App方案的分析比较 目录 前言 参考来源 前置技术要求 楔子 几种APP开发模式 概述 Native App Web App Hybrid App React Native App 分析 各大开发模式直观对比 如何选择开发模式 另类的app方案 微网页 微信小程序 其它 前言 参考来源 前人栽树,后台乘凉,本文参考了以下来源 对当前主流hybrid app.web app与native app工具的初步比较与分析 H5.React Nati

Native App, Hybrid App, Web App对比

Native App,Hybrid App和Web App简介 目前基本所有的移动互联网app可以分为三类:Native App,Hybrid App和Web App. Native App是基于智能手机操作系统API,使用原生语言编写的App: Web App是基于Web的系统或应用,使用的是HTML,JavaScript和CSS等网页相关语言编写的App: Native App则是融合了Native和Web,使用原生语言编写应用的外壳然后在其中内嵌网页语言编写的内容信息: 三种模式对比: N

WebApp与Native App及WebApp的布局方式和技术

开发者们都知道在高端智能手机系统中有两种应用程序:一种是基于本地(操作系统)运行的APP:一种是基于高端机的浏览器运行的WebApp,本文将主要讲解后者. Web App与Native App有何区别呢? Native App: 1.开发成本非常大. 一般使用的开发语言为JAVA.C++.Objective-C. 2.更新体验较差.同时也比较麻烦 每一次发布新的版本,都需要做版本打包,且需要用户手动更新(有些应用程序即使不需要用户手动更新,但是也需要有一个更新的提示). 3.非常酷 因为nati

详解WebApp与Native App的区别

一篇真的很棒关于html5的Web App与Native App的技术分析 ! 自Iphone和Android这两个牛逼的手机操作系统发布以来,在互联网界从此就多了一个新的名词-WebApp(意为基于WEB形式的应用程序,运行在高端的移动终端设备). 开发者们都知道在高端智能手机系统中有两种应用程序:一种是基于本地(操作系统)运行的APP:一种是基于高端机的浏览器运行的WebApp,本文将主要讲解后者. WebApp与Native App有何区别呢? Native App: 1.开发成本非常大.

移动开发 Native APP、Hybrid APP和Web APP介绍

快速区分定义: Native App 以基于智能手机本地操作系统如IOS.Android.WP并使用原生程式(SDK)编写运行的需要用户安装使用的第三方应用程序; Web APP 以HTML+JS+CSS等WEB技术编程,代码运行在移动端浏览器中,通过该移动端浏览器来调用Device API(取决于HTML5未来的支持能力)的不需要用户安装的应用程序: Hybrid App 同时使用网页语言(Web技术)与程序语言(Java.Objective-C等)开发,通过应用商店区分移动操作系统分发,需要

聊聊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)更新无需通知用户,不需要手动

测试工作——如何区别一个 App 是 Native App, Web App 还是 Hybrid app?

nativeapp是一个原生程序,一般运行在机器操作系统上,有很强的交互,一般静态资源都是在本地的.浏览使用方便,体验度高.在实现上要么使用Objecttive-c和cocoaTouch Framework撰写IOS程序,要么选择java+Android Framework撰写android应用程序. hybridapp是一个半原生程序,伪造了一个浏览器的apk/ipa原生程序,把地址写死了,然后里面运行了一个webapp.里面是WebView UI .但是还是运行在机器的操作系统上,交互较弱,

测试工作——Native App, Web App 和 Hybrid app

目前主流应用程序大体分为三类:Web App.Hybrid App. Native App. 一.Web App.Hybrid App.Native App 纵向对比 首先,我们来看看什么是 Web App.Hybrid App. Native App. Web APP Web App 指采用Html5语言写出的App,不需要下载安装.类似于现在所说的轻应用.生存在浏览器中的应用,基本上可以说是触屏版的网页应用. · 优点 (1)开发成本低, (2)更新快, (3)更新无需通知用户,不需要手动升

超赞!聊聊WEB APP、HYBRID APP与NATIVE APP的设计差异

编者按:这3类主流应用你都了解吗?设计师除了要有视觉功夫,对不同形式的APP也应当了然于胸,今天百度的同学写了一篇非常全面的总结,帮你迅速搞定3类主流APP的设计方法,附带一大波避雷针,带你巧妙跳过APP设计的雷区,涨姿势是分分钟刻不容缓的事咯! 目前主流应用程序大体分为三类:Web App.Hybrid App. Native App. 一.Web App.Hybrid App.Native App 纵向对比 首先,我们来看看什么是 Web App.Hybrid App. Native App