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

Posted 2021-01-01 小平头~

我们通常在做H5 APP设计的过程中，遇到很多看似很小，且很容易被忽略的问题，正是这些小问题，一次次的撩拨用户的耐心，让用户对你的APP心生怨念。现在WeX5君呕血为大家整理出H5 APP设计的21条禁忌，希望与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自动化测试，功能遍历测试并没什么不一样。