世界工厂网线上生态学院 世界工厂网线上生态学院：制造企业开展线上业务的加油站 H5 页面交互设计的缺点与解决方案为什么说 H5 现在越来越火，主要是因为 H5 以其较高的趣味性和良好的交互性受到越来越多用户的青睐。随着H5 技术的发展，H5 的类型和形式也越来越多，带给人的新奇感也越来越多。H5 页面从一开始只有展示型，发展到现在多样的交互类型，下面先来给大家说说 H5 页面常用的交互类型。一、交互类型1、展示型虽然现在交互类型多种多样，但是展示型的主导地位还是不容动摇的。H5 页面展示型属于图文型，常见的是翻页，多用于一些产品、功能、活动介绍、总结报告中。除了翻页以外，还有点击，输入文字，擦除屏幕，滑动屏幕等，玩法非常丰富。2、游戏型游戏型也是近非常火热的一种类型，自“围住神经猫”之后，H5 页面游戏型越来越成为企业选择的营销方式。H5 游戏以其可爱的画风、简单的操作、诱人的奖励虏获了许多用户的点击，通过游戏，企业不仅达到了营销推广的目的，还能够提高企业在用户心目中的形象。3、产品型产品型和上面两种类型有所不同，一般来说，H5 页面都是一次性的，这个营销活动过去了，那么这个页面也很少会被点击。但是产品型是是作为一个长期运营的产品存在的，用户的访问可能会更固定，比如微信里的购物页面等。H5 页面的交互类型远不止以上三种，企业在决定使用哪种类型之前，一定要做好全面策划，考虑到哪种类型更适合该营销活动，从而选择正确的类型。二、缺点及解决方案1、页面跳转费力页面跳转更加费力，不稳定感更强。而且页面之间的跳转也不是很流畅，很多时候出现卡顿或卡死现象。思考点：如何减少跳转（扁平结构、页面布局技巧），增加数据及展示的流畅流程及稳定性（技术） 2、页面空间小更小的页面空间（由于浏览器的导航本身占用一部分屏幕空间），更大的信息记忆负担移动设备的屏幕要小得多。这种如同透过门缝进行的阅读增加了认知的负担。人脑的短期记忆是不稳定的，用户在滚动屏幕的过程中需要临时记忆的信息越多，他们的表现就会越差。思考点：排版更清晰、信息更简练 （可在原生 APP 基础上去掉一些丰富、复杂的视觉表现） 。世界工厂网线上生态学院 世界工厂网线上生态学院：制造企业开展线上业务的加油站 3、导航不明显导航不明显，原有底部导航消失，有效的导航遇到挑战等。思考点：如何有效的提供导航？有哪些形式？ 4、交互动态受到限制交互动态效果受到限制，影响一些页面场景、逻辑的理解。思考点：比如登录注册流程的弹出、完成及异常退出，做好文字提示。针对以上困境，解决方法总结如下。首先，从 APP 到 H5 版，在产品上，最明显且核心的：以下几点就是目前我们常见的解决方案：1、精简功能，只将核心的任务实现，非核心的枝节可考虑删减。2、做好新的 WebAPP（h5）交互导航.3、补充从 WebAPP（h5） 对 下载原生 APP 的引导。4、减少页面层级的数量和输入操作。5、H5 版上只做查询、浏览、显示结果等操作。