《谈谈MobleWebApp的设计方法.docVIP

谈谈Mobile Web App的设计方法 作者：千年牛皮糖 | 发布： (网友)千年牛皮糖 | 时间：2012-11-05 16:41:50 文字大小：- + Native App与Web App的争论从未停息过，尽管很多人在批判Web App的各种不是，但也阻止不了各种各样的Web App如雨后春笋般出现，尤其是伴随智能手机的普及而受到重视的Mobile Web App。这是一种在非议声里成长起来的产品形态，无论其结果如何，都应该吸引开发者和设计师的关注。 笔者通过自己在参与Mobile Web App的项目，总结出本文，也许还不能称之为方法，但目的是希望能对感兴趣的读者提供一些有价值的参考。如有谬误，在所难免，烦请联系本人更改，感激不尽。 一. Web App定义 维基百科对Web App的定义是：Web App是指使用浏览器支持语言编写的App，运行于浏览器中，通过网络访问。所以移动Web App就特指特指运行在智能手机浏览器中的Web App。 我认为在用户眼里，它是App；在开发者眼里，它是Web。 二. Web App的特点 Google Chrome开发小组推出的《Web App开发指南》提出了如下对Web App的判断标准： 是否独立，完成当前任务不需要链接到另一个完全不同的使用环境？ 使用它是否可通过交互、参与并完成特定任务？ 是否具有良好的用户界面，看起来非常美观，并且占据全屏？ 是否使用和本地应用一样的界面模型，比如按钮、对话框或者其他元素？ 是否可以离线工作？ 是否应用了设备的某些功能，比如使用到来自GPS的定位和动作传感器的数据？ 是否隐藏了传统的网站导航栏和导向链接？ 应用是否是参照客户端架构模型设计？ 这也不是本文讨论的重点，仅供读者参考。 另外就是谈Web App和HTML5的文章必提的Web App相对于Native App所存在的优势和不足。 【优势】 跨平台和终端 更新实时，无需用户手动升级 开发成本和技术门槛很低，前段开发工程师可快速上手 无需安装、占空间少 易于维护 搜索引擎索引优化 调试，发布方便 【劣势】 受限于浏览器，性能和界面效果存在差距 严重依赖网络连接 调用硬件和本地文件不便 无法在app store里上架销售，但未来搜索引擎可以扮演Web App的分发入口也说不定 下面是关于开发各平台应用的语言、开发工具、应用格式和应用商店的对比图： 三. 发展现状 截止到目前，app store和google play中的app数量均已接近70万，marketplace的app数量接近13万。而且随着iOS、Android、Windows Phone各平台层出不穷的新设备的发布和普及，app数量始终保持着增长态势。 Web app由于其定义比较模糊，所以暂时还没有一个比较准确的统计数据。但国内主流的手机浏览器都将Web App放在很重要的位置（从左到右依次是遨游、百度、360、QQ、UC浏览器的应用中心）： 根据最新的调查显示开发者对开发HTML5 Web App的兴趣也在与日俱增： jQuery, Sencha, JQ.Mobi, Zepto等移动UI组件和框架的发展也使得Mobile Web App的开发越来越简单、高效和性能更好。 封装了webView的Hybrid App则兼具Web App和Native App特点，在开发成本和用户体验上取到了一个很好的平衡点。好的Hybrid App完全能媲美Native App的用户体验。这种开发模式正在得到越来越多的开发商和开发者的青睐。Facebook，百度都使用过这种方式开发过自己的产品。 四. 设计 1. 屏幕适配 移动设备的屏幕是各式各样的，对设计影响较大的主要是屏幕分辨率、尺寸、屏幕方向这些因素。现在的iOS设备有 320×480，640×960，1136×640，1024×768，2048×1536这些分辨率，3.5寸、4寸、7.9寸、9.7寸这些尺寸。 Android设备的碎片化则更严重。所以需要关注Web app在不同屏幕下的界面适配问题。 1.1 适配不同分辨率 通过响应式网页的设计方法提升页面在不同分辨率下的兼容性： 由于手机屏幕尺寸下，一般来说只能一个模块一个模块地从上到下排列。此时设计者就需要考虑模块摆放的优先级了。一般来说，用户重点关注的、最近更新、与用户相关的信息应该放在前面。 另外最好以主流分辨率480×800进行设计，对略高于和略低于