H5 App设计者须要注意的问题

咱们一般在作H5 APP设计的过程当中，遇到不少看似很小，且很容易被忽略的问题，正是这些小问题，一次次的撩拨用户的耐心，让用户对你的APP心生怨念。如今WeX5君呕血为你们整理出H5 APP设计的21条禁忌，但愿与H5 APP设计者的您共勉。

1. 不要在没有流程图之就前开始设计或者画线框图

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

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

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

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

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

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

1. 别让用户空等

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

五、菜单层次太深

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

六、交互流程分支太多

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

七、相关的选项离的很远

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

八、一次载入太多的数据

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

九、把全部的操做都暴露出来

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

十、没有空数据界面设计

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

十一、用户引导的滥用

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

十二、无加载中状态

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

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

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

1. 不要以为每一个用户有着跟你同样的 App 使用方式

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

15.上线前测试的重要性

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