使用H5开发移动端app

使用H5开发移动端app

优点：
很大的好处就是快速、简单、方便，一套代码几乎不用怎么修改就可以同时打包iOS、Android安装包。

基于前端各方面应用技术栈成熟，资料齐全。

有不少的平台和开发工具可供选择，集代码编辑、调试、打包几乎一条龙服务 ， 基于H5+的环境与原生底层交互越来越多，很多功能界面在效果上几乎和原生的没啥区别。

不足：
H5开发APP的不足在与原生的相比，有些场景暴露的很彻底。比如一些过度动画，手势操作，任务异步处理等 ， 还有一些访问相册、图片处理底层设备硬件之类的。这些地方表现的有明显的不足。

开发工具框架之类的太多，如果一个不熟悉前端的新人过来，几乎不知道该如何下手。

所以对于一些业务逻辑简单，没有复杂的操作处理的应用，H5开发再好不过。对一些重型的应用还是原生的为主，H5为辅助也是一个很好的搭配。

更多功能查看官方文档
https://www.dcloud.io/mui.html

H5 App设计者需要注意的问题
1.不要在没有流程图之就前开始设计或者画线框图

即便一个简单的H5 APP也要有一个思虑周全的流程图，以确保在H5 APP有合乎逻辑的、合理的导航结构。跳过流程图直接进进入开发会让开发变得复杂、不可控，很容易让用户迷茫，最后选择关掉或者卸载你的App。

2.分工要明确不要忽略开发预算

一个计划好的H5 App可能有一个搜索框，设计师预想的是一个产生实时结果的键入搜索，但设计师不能是做这个重大决定的唯一决策人。

3.不要随意使用介绍动画

如果你打算使用介绍动画，那要让动画时间尽可能短，设计尽可能精细以及足够吸引人，值得用户花费时间等待。

App加载过程中会先展现图片，再过渡至动画。要确保这个过度是平滑的，贴切自然的。有的App从加载图片过渡至介绍动画设计的非常蹩脚，这就很无趣了。

4.别让用户空等

App加载时间过长很容易让用户以为出现了什么故障，也会带来糟糕的用户体验。App加载的时候不要让用户看到空白的屏幕，使用加载指示条或者小动画让用户知道App处于正常运行当中。

5、菜单层次太深

菜单项以5~7个为宜，如果有二级菜单，就要注意合理的菜单分类，不能有太多层级的菜单，否则很难预期，也很难找到，寻找和返回都会变得很麻烦。

6、交互流程分支太多

做交互的时候一定要有一个任务流程的概念贯穿始终，用户是为了完成某个任务而使用软件的，交互设计师除了关注界面元素、跳转逻辑和交互反馈之外，还要关注用户任务，分得清主要任务和次要人物，给主要任务一个畅通无阻的清晰流程，不要给予太多可能的分支，干扰主要流程。

7、相关的选项离的很远

相关选项一定要具有操作上的延续性，如果手机上相关选选离得很远的话，用户一是容易迷失，找不到下一步操作，二是需要移动手指，到屏幕另一端触发操作。

8、一次载入太多的数据

如果你的应用不能合理的帮助用户节约流量、电量，提升浏览速度和浏览体验，保证应用的稳定性能，就不要谈什么用户体验。

9、把所有的操作都暴露出来

H5 APP产品交互设计要经历缩减、隐藏、附加、组织的过程，千万不要妄图把什么功能、什么操作都暴露出来，以彰显强大。你需要把自己应用的所有功能所有操作做个优先级设定，那些常用的20%的功能，放在界面的主要位置上，其他80%的操作，放在次要位置或合理归类组织后，隐藏起来就可以了。

10、没有空数据界面设计

我们在做设计的时候，往往是提供理想化的场景，用户都已经进来了，我们怎么玩。但是，往往应用刚推出的时候，是没有用户的，甚至当应用有了一定用户基础的时候，新进来的用户打开应用的时候，应用仍然可能是一种没有数据的状态，再或者当用户清楚了全部数据，这三种情况下，用户都可能遇到空数据的界面。

11、用户引导的滥用

如果是通用的功能、非重点的模块，根本就不需要引导;如果是功能告知，只需呀轻量级的引导;如果是版本更新说明，说明书式的引导可以采用，但是要言简意赅。

12、无加载中状态

H5 APP产品只要是需要联网，需要交换数据，都需要提供一个加载中状态的，无论是菊花转还是Toast还是对话框，且要考虑到加载时间过长、网络开关没有打开、网络不通等情况分别怎么去处理。

13.不要忘记手势但不要滥用

不是每个元素都是可视化的，比如iPhone Mail app的删除进程。在收件箱内，用户可以猛击屏幕显示删除按钮，用户就不用点击“编辑”，选择信息然后再删除信息。

14.不要觉得每个用户有着跟你一样的App使用方式

可用性测试是必须的，不管你的App看起来多么好。找值得信任的人(或者有经验的设计师)进行小范围封闭测试，在公开发布之前更新下界面。另一个简单易行的获得用户反馈的方法是在分类网站张贴广告招募合适的人进行焦点小组测试。

15.上线前测试的重要性

对H5测试来说，与app测试项并没有什么区别，主要都是终端机的配饰问题，特别是不同终端浏览器系统和分辨率，但一样的是，app有安装、启动等步骤，相对简单。但在UI自动化测试，功能遍历测试并没什么不一样。

今天的文章使用H5开发移动端app分享到此就结束了，感谢您的阅读，如果确实帮到您，您可以动动手指转发给其他人。