关于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相关推荐

H5开发的web APP和原生APP的区别
H5开发的web APP和原生APP的区别有以下几个方面:一.开发方面原生App ⊙ 每一种移动操作系统都需要独立的开发项目⊙ 每种平台都需要独立的开发语言.Java(Android), Objec ...
【项目问题】Ionic开发移动端app，手把手教你如何打包生成apk
ionic 开发移动端app Ionic 介绍创建项目移动端适配的方式 Ionicons 的使用方法打包项目网页 Android 生成apk 其他知识点设置apk名称设置网络权限 Ioni ...
html5app大赛,Anyoffice -HTML5大赛悦心（基于H5开发安卓音乐app）-项目总结
悦心,一款音乐播放器应用.由"女立方"团队开发.眼下.较为流行的音乐播放器有QQ音乐.网易云音乐.多米音乐等. "悦心"音乐播放器的主要功能,提供音乐数据库,点 ...
H5唤醒移动端APP，或跳转到App Store和应用宝
//实际上就是新建一个iframe的生成器 var createIframe=(function(){var iframe;return function(){if(iframe){return if ...
国外html5转app store,H5唤醒移动端APP，或跳转到App Store和应用宝
//实际上就是新建一个iframe的生成器 var createIframe=(function(){ var iframe; return function(){ if(iframe){ retur ...
开发缺点_开发移动端手机APP有哪些优缺点？
在当今移动互联网高速发达的现在,如果非要说什么工具最重要,那么一定要数手机APP了. 企业可以借助它来进行移动端的营销,提高企业品牌推广力度和盈利:用户也可以借助它解决日常生活衣食住行等各方面的问题, ...
MUI框架开发HTML5手机APP(一)--搭建第一个手机APP
前言 JRedu 随着HTML5的不断发展,移动开发成为主流趋势!越来越多的公司开始选择使用HTML5开发手机APP,而随着手机硬件设备配置的不断提升,各种开发框架的不断优化,也使着H5开发的 ...
MUI框架开发HTML5手机APP(一)--搭建第一个手机APP(转)
出处:http://www.cnblogs.com/jerehedu/p/7832808.html 前言 JRedu 随着HTML5的不断发展,移动开发成为主流趋势!越来越多的公司开始选择使用H ...
移动端导出excel_连载系列【4】Excel开发移动端quot;APPquot;
前三篇文章介绍了百度地图生成器.源代码编辑器.GPS经纬度批量转换工具.源代码编辑器中添加自定义功能按钮和地图控件.这些写好的Java Script代码虽然可以实现所有期望的结果,但毕竟不是一个HTM ...

关于H5开发移动端APP

关于H5开发移动端APP相关推荐

最新文章

热门文章