移动应用APP开发是如何处理UI设计的？

Web App和原生移动应用同为移动端，很少有时间考虑这两项的交互区别，最近公司做了一次从原生移动应用到Web App（HTML五）的移植，故总结一下期间遇到的问题及不同点总结。

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

1、页面跳转更为费力，不稳定感更强

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

二、更小的页面空

间（由于浏览器的导航本身占用一部分屏幕空间），更大的信息记忆负担

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

思考点：排版更清晰、信息更简练（可在原生移动应用基础上去掉一些丰富、复杂的视觉表现）

三、导航不明显，原有底部导航消失，有效的导航遇到挑战

思考点：怎么有效的提供导航？有哪些形式？

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

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

针对以上困境，解决方法总结如下：

第一，从移动应用到WAP版，在产品上，最明显且主要的：

1、精简功能，只将主要的任务实现，非主要的枝节可研究删减。

二、做好新的Web App导航.

三、补充从Web App 对下载原生移动应用的引导。

一、常见的几种Web 移动应用导航样式

1.1顶部底部导航的设计：

1.二导航快捷键设计：

美团：顶部栏固定位置

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

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

2、有效的导航设计

1、根本的快捷导航中包括返回通用页面（如首页我的等）的快捷方案

二、出现深层架构时及时补充返回关键层级页面的快捷方案html打包apk工具安卓版

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

Web 移动应用更为想要画页面跳转的流程图，摸清各个页面的入口，尤其是页面返回的流程；有些简化的返回按钮，能够特殊注明返回到的页面

怎样引导用户下载移移动端开发框架动应用？

在哪里出现引导？

通常首页、主要任务的页面（如电商Web 移动应用的商品详情页、视频Web 移动应用的视频观看页）

2、引导下载移动应用有哪些形式？

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

其次，在设计Web App时，有以下小技巧能够参考：

1、从页面布局上减少跳转：使用交互技巧隐藏文字

利用展开收起按钮减少页面跳转。

二、取消float浮层，增大展示空间

取消float浮层，同时在详情尾部再一次加上 “购买”按钮。

三、页面中对图片进行缩小（因情况而异）的处理、精简一些标签导航的视觉展示。