H5 App设计者需要注意的21条禁忌

我们通常在做H5 APP设计的过程中，遇到很多看似很小，且很容易被忽略的问题，正是这些小问题，一次次的撩拨用户的耐心，让用户对你的APP心生怨念。现在WeX5君呕血为大家整理出H5 APP设计的21条禁忌，希望与H5 APP设计者的您共勉。

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

即便一个简单的H5  APP 也要有一个思虑周全的流程图，以确保在H5  APP 有合乎逻辑的、合理的导航结构。另一点值得关注的是确保核心功能所在的屏幕位于上层而不是被埋没在多层导航元素之下。

跳过流程图直接进进入开发会让开发变得复杂、不可控，很容易让用户迷茫，最后选择关掉或者卸载你的 App。

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

设计师创建的每一个细节都要经过开发者才能变得活灵活现。花几个小时和几天时间做出的简单设计更改对H5  App 功能的影响是截然不同的。还有，设计不能命令功能。比如，一个计划好的H5  App 可能有一个搜索框，设计师预想的是一个产生实时结果的键入搜索，但设计师不能是做这个重大决定的唯一决策人。

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

在用户首次打开 App 的时候，给用户一个动画的介绍是个不错的想法，但不能太过火了。事实上，这些介绍动画也延迟了用户接触 App 的时间。如果你打算使用介绍动画，那要让动画时间尽可能短，设计尽可能精细以及足够吸引人，值得用户花费时间等待。

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

4. 别让用户空等

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

5、没有不可点击的效果

一般按钮会有四态，不可点击效果、可点击效果、聚焦状态、按下状态。

如果你的按钮此时处于不可用状态，那么一定要灰掉，或者拿掉按钮，否则会给用户误导。

6、菜单层次太深

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

7、文字长度不加以限制

H5 APP界面很小，寸土寸金，一页只能显示下6~10个列表，一行只能显示下10~16个字，标题栏的字数以5个以内为宜，标签栏也以2~3个为宜，那么这时 候出现文字过长的情况，一定要定义一下处理方式，如果是选择型的，一般是截断或者打点缩略;如果是内容阅读型的，可以折行。但最合理的方式还是精简文字内容，缩短文字长度。

8、文字表意不明

由于H5 APP是碎片时间、片段式阅读，所以H5 APP界面上的文字表意性要求的更高，更苛刻，一定要在用户瞟到的瞬间，准确的传达信息。除了表意清晰之外，还要求语言精简，避免啰嗦;使用用户的语言而不是程序的语言;产品文案体现产品性格。

9、交互流程分支太多

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

10、相关的选项离的很远

相关选项一定要具有操作上的延续性，虽然APP屏幕看起来比电脑屏幕要小的多，但是APP在屏幕上移动的代价，却要比鼠标在电脑上移动的代价大的多，如果手机上相关选选离得很远的话，用户一是容易迷失，找不到下一步操作，二是需要移动手指，到屏幕另一端触发操作。

11、一次载入太多的数据

流量、电量、速度和稳定性是APP产品的四个硬指标，如果你的应用不能合理的帮助用户节约流量、电量，提升浏览速度和浏览体验，保证应用的稳定性能，就不要谈什么用户体验。你可以利用预加载缓存、批量载入、动态刷新、服务端数据压缩等方式来保证省、快、稳基础体验。

12、按钮可点击范围比看起来小

我们都知道移动端有个神奇的数字“44”，根据食指最小点触距离7mm、拇指最小点触距离9mm，可以推导出做设计的时候，最小的点触距离是44*32 px。你可以设计一个精美的小图标，但是在定义它的点触大小的时候，却可以做放大处理，但你千万不要设计一个傻大的图标，点触范围却比图标要小，这样会给用户带来明显的误操作挫败感。

13、标签页跟内容没有从属关系

标签页跟内容需要有很好的联动关系，一般一个界面内有二级标签就足够复杂了，千万不要再有三级标签、四级标签。每个标签页都有自己特有的内容，当切换标签的时候，内容跟着切换。标签页如果是点击切换，内容部分可以整体刷新，标签页如果是滑动切换，内容页也要跟着滑动切换，千万不要一个点、一个滑。

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

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

15、没有空数据界面设计

我们在做设计的时候，往往是提供理想化的场景，用户都已经进来了，我们怎么玩。但是，往往应用刚推出的时候，是没有用户的，甚至当应用有了一定用户基础的时候，新进来的用户打开应用的时候，应用仍然可能是一种没有数据的状态，再或者当用户清楚了全部数据，这三种情况下，用户都可能遇到空数据的界面。新手设计师往往不加设计，这时候用户就会看到一个空白界面，茫然失措。有经验的做法就是，提供一个情感化的界面，告诉用户当前没有内容;更具引导性的做法，就是引导用户去执行操作。

16、用户引导的滥用

去年就预言用户引导将要泛滥，很明显设计部门都喜欢用漂亮的引导界面告诉用户新增的功能或隐藏的应用，但不是所有的应用、所有的功能都需要花哨的引导的。 如果是通用的功能、非重点的模块，根本就不需要引导;如果是功能告知，只需呀轻量级的引导;如果是版本更新说明，说明书式的引导可以采用，但是要言简意赅。

17、无加载中状态

H5 APP产品只要是需要联网，需要交换数据，都需要提供一个加载中状态的，无论是菊花转还是Toast还是对话框，你需要给开发人员一个全局的定义，并且要告知加载中是模态(前台加载)的还是非模态的(后台加载)。且要考虑到加载时间过长、网络开关没有打开、网络不通等情况分别怎么去处理。

18、未定义Back的逻辑

在为Android APP做设计的时候，会涉及到硬件交互，其中Back键的使用，是一门学问，Android官方有一些指导原则可以借鉴，但是具体开发的时候，还是会有很多特殊情况，比如单一实例的替换、键盘及一些中间状态，这种情况下，Back可能需要被定义一下，该回到前一个实例(那就需要变成多实例 了)还是该回到初始状态(清空输入内容或恢复初始状态)。

19、无横屏模式的设计

由于横屏模式下，纵向空间变得格外宝贵，导航栏、标签栏、键盘都需要被压扁，横盘模式一定要考虑是简单拉伸适配还是重新设计，如果你的应用不适合在横屏模式下使用，就屏蔽横盘，如果你的应用包括应用widget都需要支持横盘模式(甚至是带侧滑键盘的横屏机器)，就需要提供设计方案。

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

不是每个元素都是可视化的，比如 iPhone Mail app 的删除进程。在收件箱内，用户可以猛击屏幕显示删除按钮，用户就不用点击“编辑”，选择信息然后再删除信息。不过，也不能说“编辑”菜单一点用处都没有，不知道快捷操作的用户还是需要的，而用户还可以通过“编辑”菜单一次性标注多条信息/邮件。

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

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

22.怎么才21条？

App江湖上传言多年的关于多屏、多分辨率、多端、多操作系统支持的若干注意呢？

在WeX5君的世界观里，移动开发者根本不需要、不应该操心这个问题。

继续阅读相关文章：http://wex5.com/cn/2016/01/