丹凤千字科普：feet cm 换算器（详细资料介绍）

关于Web App和原生APP交互区别的探讨

@ChM_CuoreAzzurro：Web App和原生APP都是移动端的重要组成部分，虽然我们常常忽略它们之间的交互差异。最近我们公司进行了一次从原生APP到Web App（HTML5）的迁移，让我对这两者有了更深入的了解。在此，我想分享一下这次迁移过程中遇到的问题以及我对这两者的不同点的总结。

在使用场景上，Web App的用户相较于原生APP用户面临一些特殊挑战。

1. 页面跳转更加费力，稳定性较差。

针对这个问题，我们需要思考如何减少页面跳转，例如采用扁平化结构设计，运用页面布局技巧等。我们也需要通过技术手段增加数据和展示的流畅性和稳定性。

2. 由于浏览器导航占用了部分屏幕空间，Web App的页面空间更小，这增加了用户的认知负担。

移动设备的屏幕空间有限，这要求我们设计更加简洁明了的排版，精简信息，以减轻用户的认知负担。在原生APP的基础上，我们可以考虑去除一些复杂丰富的视觉表现。

3. Web App的导航不够明显，有效的导航面临挑战。原有底部导航消失，需要思考如何有效地提供导航，并确定导航的具体形式。

4. Web App的交互动态效果受到限制，这可能影响到一些页面场景和逻辑的理解。

针对以上问题，我们可以采取以下解决方案：

从APP迁移到WAP版，核心的产品功能需要得到精简，只实现核心任务，非核心的功能可以考虑删除。我们需要设计好新的Web App导航，并补充从Web App引导用户下载原生APP的相关内容。

关于Web APP的导航设计，常见的方式包括顶部和底部导航的设计，以及导航快捷键的设计。例如，美团采用顶部栏固定位置的导航设计，淘宝则使用悬浮圆圈可展开的按钮设计。有效的导航设计应该包括基本的快捷导航、深层架构时的返回重要层级页面的快捷方式，以及情境式导航等。

在设计Web App时，我们可以采用一些技巧来提高用户体验。例如，从页面布局上减少跳转，使用交互技巧隐藏文字或使用展开收起按钮等。取消float浮层、增大展示空间、对图片进行缩小处理、精简标签导航的视觉展示等也是不错的方法。

在技术方面，我们需要注意各手机浏览器的兼容测试、底层服务的调取、离线数据存储、数据请求频率的控制等。还需要避免动效与浏览器的交互冲突，按序异步加载页面等。

虽然Web App目前在一些方面还处于比较尴尬的地位，但随着H5技术的不断发展和成熟，也许未来基于H5的Web App会成为主流。我们的迁移工作是为了更好地满足用户需求，分享出更好的产品和服务体验。

（原创文章）