谈谈mobile web app的设计方法

《谈谈mobile web app的设计方法》由会员上传分享，免费在线阅读，更多相关内容在行业资料-天天文库。

1、谈谈MobileWebApp的设计方法【编者按】以下内容来自于千年牛皮糖，作者任职百度公司，分享了谈谈MobileWebApp的产品设计方法。　　NativeApp与WebApp的争论从未停息过，尽管很多人在批判WebApp的各种不是，但也阻止不了各种各样的WebApp如雨后春笋般出现，尤其是伴随智能手机的普及而受到重视的MobileWebApp。这是一种在非议声里成长起来的产品形态，无论其结果如何，都应该吸引开发者和设计师的关注。笔者通过自己在参与MobileWebApp的项目，总结出本文，也许还不能称之为方法，但目的是希望能对感兴趣的读者提供一些有价值的参考

2、。如有谬误，在所难免，烦请联系本人更改，感激不尽。　　一.WebApp定义维基百科对WebApp的定义是：WebApp是指使用浏览器支持语言编写的App，运行于浏览器中，通过网络访问。所以移动WebApp就特指特指运行在智能手机浏览器中的WebApp。我认为在用户眼里，它是App;在开发者眼里，它是Web。　　二.WebApp的特点GoogleChrome开发小组推出的《WebApp开发指南》提出了如下对WebApp的判断标准：是否独立，完成当前任务不需要链接到另一个完全不同的使用环境?使用它是否可通过交互、参与并完成特定任务?是否具有良好的用户界面，看起来非常

3、美观，并且占据全屏?是否使用和本地应用一样的界面模型，比如按钮、对话框或者其他元素?是否可以离线工作?是否应用了设备的某些功能，比如使用到来自GPS的定位和动作传感器的数据?是否隐藏了传统的网站导航栏和导向链接?应用是否是参照客户端架构模型设计?这也不是本文讨论的重点，仅供读者参考。另外就是谈WebApp和HTML5的文章必提的WebApp相对于NativeApp所存在的优势和不足。【优势】跨平台和终端更新实时，无需用户手动升级开发成本和技术门槛很低，前段开发工程师可快速上手无需安装、占空间少易于维护搜索引擎索引优化调试，发布方便【劣势】受限于浏览器，性能和界面

4、效果存在差距严重依赖网络连接调用硬件和本地文件不便无法在appstore里上架销售，但未来搜索引擎可以扮演WebApp的分发入口也说不定下面是关于开发各平台应用的语言、开发工具、应用格式和应用商店的对比图：　　三.发展现状截止到目前，appstore和googleplay中的app数量均已接近70万，marketplace的app数量接近13万。而且随着iOS、Android、WindowsPhone各平台层出不穷的新设备的发布和普及，app数量始终保持着增长态势。Webapp由于其定义比较模糊，所以暂时还没有一个比较准确的统计数据。但国内主流的手机浏览器都将W

5、ebApp放在很重要的位置(从左到右依次是遨游、百度、360、QQ、UC浏览器的应用中心)：根据最新的调查显示开发者对开发HTML5WebApp的兴趣也在与日俱增：jQuery,Sencha,JQ.Mobi,Zepto等移动UI组件和框架的发展也使得MobileWebApp的开发越来越简单、高效和性能更好。封装了webView的HybridApp则兼具WebApp和NativeApp特点，在开发成本和用户体验上取到了一个很好的平衡点。好的HybridApp完全能媲美NativeApp的用户体验。这种开发模式正在得到越来越多的开发商和开发者的青睐。Facebook

6、，百度都使用过这种方式开发过自己的产品。　　四.设计1.屏幕适配移动设备的屏幕是各式各样的，对设计影响较大的主要是屏幕分辨率、尺寸、屏幕方向这些因素。现在的iOS设备有320×480，640×960，1136×640，1024×768，2048×1536这些分辨率，3.5寸、4寸、7.9寸、9.7寸这些尺寸。Android设备的碎片化则更严重。所以需要关注Webapp在不同屏幕下的界面适配问题。1.1适配不同分辨率通过响应式网页的设计方法提升页面在不同分辨率下的兼容性：　　由于手机屏幕尺寸下，一般来说只能一个模块一个模块地从上到下排列。此时设计者就需要考虑模块摆

7、放的优先级了。一般来说，用户重点关注的、最近更新、与用户相关的信息应该放在前面。另外最好以主流分辨率480×800进行设计，对略高于和略低于该分辨率的屏幕可将界面元素进行缩放，对间距、边距进行适当调整。所以，在设定容器、图片、文本框的宽度时最好避免使用px单位，使用%可使页面在不同分辨率屏幕下保持布局和页面结构不发生改变。　　1.2平板电脑使用CSS3的媒体查询(mediaquery)语句可获得浏览器的高宽和设备的像素比，并可根据开发者的需要对不同的设备应用不同的样式表。所以开发者可以控制一个页面在不同设备上的表现。由于手机屏幕和平板电脑的屏幕尺寸和像素都相去甚

8、远，所以为了充分利用平板