移动应用APP开发是如何处理UI设计的?
Web App和原生移动应用同为移动端,很少有时间考虑这两项的交互区别,最近公司做了一次从原生移动应用到Web App(HTML五 )的移植,故总结一下期间遇到的问题及不同点总结。
从使用场景上,Web App用户面临比原生移动应用用户更严峻的问题:
思考点:怎么减少跳转(扁平结构、页面布局技巧),增加数据及展示的流畅流程及稳定性(技术)
二、更小的页面空
间(由于浏览器的导航本身占用一部分屏幕空间),更大的信息记忆负担
移动设备的屏幕要小得多。这种如同透过门缝进行的阅读增加了认知的负担。人脑的短期记忆是不稳定的,用户在滚动屏幕的过程中想要临时记忆的信息越多,他们的表现就会越差。——《贴心设计:打造高可用性的移动产品》
思考点:排版更清晰、信息更简练 (可在原生移动应用基础上去掉一些丰富、复杂的视觉表现)
三、导航不明显,原有底部导航消失,有效的导航遇到挑战
思考点:怎么有效的提供导航?有哪些形式?
四、交互动态效果收到限制,影响一些页面场景、逻辑的理解。
思考点:比如登录注册流程的弹出、完成及异常退出,做好文字提示。
针对以上困境,解决方法总结如下:
第一,从移动应用到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浮层,同时在详情尾部再一次加上 “购买”按钮。
三、页面中对图片进行缩小(因情况而异)的处理、精简一些标签导航的视觉展示。
虽然Web App现在处于比较尴尬的地位,我们是由于原移动应用客户端中一些页面想要分享出去才开启开发Web App版。
不过不得不承认,基于Web的轻移动应用 更新升级起来更方便,随着H五技术的成熟和发展,也许后期就是基于H五的Web App的天下了!
公司介绍及制作流程:
移动应用APP开发是如何处理UI设计的?
- 开发APP从一门开始www.yimenapp.com
- APP打包:https://www.yimenapp.com/more.html
- EXE打包:https://www.yimenapp.com/exe.html
- 小程序打包:https://www.yimenapp.com/sapp.html
- 商城APP:https://www.yimenapp.com/shop.html
- IOS免签打包:https://www.yimenapp.com/iosmianqian.html
- APP上架:https://www.yimenapp.com/iosup.html
- APP软著申请:https://www.yimenapp.com/softpage.html
- SSL申请:https://www.yimenapp.com/ssl.html
- Discuz APP:https://www.yimenapp.com/discuz.html
- 教程汇总:https://www.yimenapp.com/jiaocheng.html
编辑:小明,如若转载,请注明出处:https://www.yimenapp.com/kb-yimen/10618/
部分内容来自网络投稿,如有侵权联系立删