WebAPP与原生APP有哪些交互设计区别？

@ChM_CuoreAzzurro ：Web App和原生APP同为移动端中心，很少有时间研究这两项的交互区别，好近公司做了一次从原生APP到Web App（HTML5 ）的移植，故总结一下期间碰到的问题及不同点总结。

从使用场景上，Web App用户面临比原生APP用户更严峻的问题：

1、页面跳转更加辛苦，不稳定感更强

思考点：如何削减跳转（扁平结构、页面布局技巧），增添数据及展示的流畅流程及稳定性（技术）

2、更小的页面空间（因为浏览器的导航自己占用一部分屏幕空间），更大的信息记忆负担

移动设备的屏幕要小得多。这种如同透过门缝进行的阅读增添了认知的负担。人脑的短期记忆是不稳定的，用户在滚动屏幕的过程中需要一时记忆的信息越多，他们的体现就会越差。——《贴心设计：打造高可用性的移动产品》

思考点：排版更清晰、信息更简练 （可在原生APP基础上去掉一些雄厚、复杂的视觉体现）

3、导航不显明，原有底部导航消逝，有用的导航碰到挑战

思考点：如何有用的提供导航？有哪些形式？

4、交互动态效果收到限制，影响一些页面场景、逻辑的理解。

思考点：比如登录注册流程的弹出、完成及异常退出，做好文字提醒。

针对以上困境网站优化公司，解决方法总结如下：

首先，从APP到WAP版，在产品上上海塑料托盘，好显明且核心的：

1、精简功能，只将核心的义务实现，非核心的枝节可考虑删减。

2、做好新的Web App导航.

3、增补从Web App 对 下载原生APP 的指导。

>>>>> Web App导航怎样设计？

一、常见的几种Web APP导航样式

1.1顶部底部导航的设计：

1.2导航快捷键设计：

美团：顶部栏固定位置

淘宝：悬浮圆圈–可睁开的按钮

优酷：非首屏时页面右侧悬浮

二、有用的导航设计

1、基本的快捷导航中包括 返回常用页面（如 首页 我的 等）的快捷体例

2、出现深层架构时 及时增补返回主要层级页面的快捷体例

3、情境式导航，方便用户快捷跳转到ta想去的页面，如购买结束时提供查看订单详情的按钮。

PS：Web APP更加需要画页面跳转的流程图，摸清各个页面的入口，尤其是页面返回的流程；有些简化的返回按钮，可以特殊注明返回到的页面

>>>>>>>>> 怎样指导用户下载APP？

在哪里出现指导？

一般首页、核心义务的页面（如 电商Web APP的商品详情页 、视频Web APP的视频观看页）

二、指导下载APP有哪些形式？

页面顶部放置下载条 页面底部悬浮层指导 融合在页面首屏中 下载按钮形式 底部Foot里含客户端下载入口