.h5是什么文件_H5 与 Native 的区别

全文共1328字  预计阅读时间3分钟

什么是H5和Native 在APP的开发过程中，我们经常会听到说“这个页面用Native做，那个页面用H5做……”那么这两者有什么区别呢，产品设计时又需要注意些什么？ APP可以大致分为3类： Native： Native是我们传统意义上的软件，使用我们大家熟悉的iOS和Android系统框架语言编写。 H5： H5是用浏览器中的Html语言框架进行开发，相当于网页。 Hybrid： 是一种常见的Native+H5的混合模式，结合了两种开发语言。 如何判断哪些是Native页面哪些是H5页面呢： 比较简便的方法是：

• 看断网情况下是否能打开，如果断网不能打开则属于H5页面；

• 在打开的过程中有明显的Loading进度条，也是属于H5页面。

Native的特点 优点：

• 可以离线使用

• 性能较好，使用稳定

• 打开页面不需要loading等待

• 可以充分调用手机基础组件、唤起应用通知

• 有丰富的转场动效

• 方便储存本地文件

• 复杂的功能也保持高性能(例如游戏)

缺点：

• 开发成本高，需要针对iOS和Android平台分别开发适配

• 安装包大，相比于H5和Hybird

• 更新需要下载安装包，会让用户觉得很麻烦；并且往往不是所有用户都会下载更新，所以还需要维护旧版本，维护成本高

• 开发周期长，安装包/更新包的发布需要经历“上传应用平台——审核修改——上线发布”的过程；而iOS审核难度大，Android的发布平台又很多。

H5的特点  优点：

• 开发成本低，只需要一套Html语言就可以满足开发

• 升级方便，无需下载更新包，用户直接打开网页使用APP

• 维护成本低，给用户使用的都是最新版本，不用维护老版本

• 更新速度快，只需将服务端数据更新即可

缺点：

• 使用时需要联网，否则无法打开

• 部分系统组件和系统通知不可调用

• 转场效果单一

• 每次打开都会Loading，等待时间长(且易受网络影响)

• 整体性能相比Native较差

Hybrid的特点

Hybrid即：一部分用Native开发，一部分用H5开发。

这种方式结合了两者的优点，节约了一部分开发成本，更新快速，同时保证了性能和体验，是目前APP的主流开发方式。而不同的APP，二者所占比例又有所区别。

产品设计的注意点

• 核心框架结构最好用Native开发，例如TAB标签页。因为这往往是用户进入APP后首先看到的页面，需要保证高性能以建立良好的第一印象，防止用户一进入APP就流失。

• 需要频繁切换的页面最好用Native开发，因为H5存在加载进度条。如果使用H5开发，用户在频繁切换的过程中，会不停地等待加载，体验较差。

• Native页面可以做出流畅的转场动效，利用好这一点以提升APP的交互感受。

• H5开发特别要考虑到弱网，断网等异常情况，提前设计好相关提示页面。

• 活动页等临时性强，变化快的页面，最好用H5开发，更新速度快，成本低。

• Native与H5结合开发时，需要让视觉和交互上保持一致，因为二者调用的组件不同，实现效果可能存在差异。

• 采用H5开发时，产品设计上尽量减少对系统组件的调用。

• H5页面上尽量减少图片(弱网环境下加载慢，容易加载失败)，并且严格控制图片大小，开发时需要采用异步加载等策略。

往期推荐

• 初级UI设计师——如何通过面试？

• 如何用“可用性测试”指导设计

• 【干货】交互设计自查表