移动网页应用程序设计方法探析

《移动网页应用程序设计方法探析》由会员上传分享，免费在线阅读，更多相关内容在工程资料-天天文库。

1、移动网页应用程序设计方法探析摘要：针对目前移动互联网的广泛应用，本文就移动设备中所使用的网页应用程序（Mob订eWebApp）的开发特点、发展现状及设计方法等方面作了较为深入的探讨和研究。关键词：移动设备；网页应用；程序设计一.网页应用程序的定义及特点网页应用程序应具备以下这些特点：1•独立性，即完成当前任务不需要链接到另一个完全不同的使用环境；2•交互性，即可通过交互、参与并完成特定任务；3•类本地性，即具有良好的用户界面，看起来非常美观，并且占据全屏，并可以使用和本地应用一样的界面模型，如按钮、对话框或者其他元素等；4•可以离线工作；5•应用了设备的某些功能，

2、比如使用到来自GPS的定位和动作传感器的数据；6•隐藏了传统的网站导航栏和导向链接；7.参照客户端架构进行模型设计。二.网页应用程序的发展现状截止到目前，应用商店中的应用程序数量均已接近70万，marketplace的应用数量接近13万。而且随着iOS、AndroidsWindowsPhone各平台层出不穷的新设备的发布和普及，应用程序数量始终保持着增长态势。而网页应用程序由于其定义比较模糊，所以暂时还没有一个比较准确的统计数据。但国内主流的手机浏览器都将网页应用程序放在很重要的位置，最新的调查显示，开发者对开发HTML5网页应用程序的兴趣也在与日俱增，jQuer

3、y,Sencha,JQ.Mobi,Zepto等移动UI组件和框架的发展也使得程移动网页应用程序的开发越来越简单、高效和性能更好。封装了webView的HybridApp则兼具WebApp和NativeApp特点，在开发成本和用户体验上取到了一个很好的平衡点。好的HybridApp完全能媲美NativeApp的用户体验。这种开发模式正在得到越来越多的开发商和开发者的青睐。一.移动网页应用程序的设计方法(1)屏幕适配移动设备的屏幕是各式各样的，对设计影响较大的主要是屏幕分辨率、尺寸、屏幕方向这些因素。现在的iOS设备有十多种分辨率与尺寸。Android设备的碎片化则更

4、严重。所以需要关注网页应用程序在不同屏幕下的界面适配问题。通过响应式网页的设计方法提升页面在不同分辨率下的兼容性。由于手机屏幕尺寸下，一般来说只能一个模块一个模块地从上到下排列，因此需要考虑模块摆放的优先级，通常是将用户重点关注的、最近更新、与用户相关的信息放在前面。另外最好以主流分辨率480X800进行设计，对略高于和略低于该分辨率的屏幕可将界面元素进行缩放，对间距、边距进行适当调整。在设定容器、图片、文本框的宽度时最好避免使用PX单位，使用％可使页面在不同分辨率屏幕下保持布局和页面结构不发生改变。而对于平板电脑我们可以使用CSS3的媒体查询(mediaquer

5、y)语句获得浏览器的髙宽和设备的像素比，并可根据开发者的需要对不同的设备应用不同的样式表。所以开发者可以控制一个页面在不同设备上的表现。由于手机屏幕和平板电脑的屏幕尺寸和像素都相去甚远，所以为了充分利用平板电脑的大屏优势，以获得良好的用户体验，最好在两种设备上使用不同的界面布局。这样用户使用起来会更方便，更美观。在平板电脑上，有哪些需要注意的设计点呢？因为平板电脑多在横屏下使用，所以使用分栏视图可在一个界面内显示两个层级的内容，方便用户快速切换。首页多以宫格视图、Tab为主，微博、QQ这种以内容为主的界面将分栏视图作为默认首页也是可以的。在手机上最常使用的list

6、在平板上就不是很常用了，整个屏幕显示list,不仅浪费空间，也没有分栏视图的操作高效。(1)动态效果受浏览器性能影响，很多本地应用能实现的华丽动画在网页应用里的表现并不是很好。所以应该果断去掉非必要的动态效果以保证网页应用能够运行流畅。但很多动态效果会对用户起到很好的引导作用，如果没有这些动画，可能会导致用户对界面逻辑关系的理解产生混乱，这就对动态效果的设计提出了较高的要求。因此其设计原则可归纳为以下几点：一是尽量不使用不必要的动效；二是优先使用简单的动画，尽量避免使用3D动画；三是避免刷新页面；四是框架元素优先显示，只在内容加载区域显示loading动画；五是避

7、免跳变，在不影响性能的情况下，可尽量用缩放和平移动画，保证用户视觉焦点的延续性和理解的延续性；六是同类界面/对象，同层级界面/对象的动效保持一致，这样可帮助用户理解产品架构和导航逻辑；七是高层级界面的动效对应高级物理位置。(1)信息架构移动网页应用程序既然要实现本地应用的操作体验，照传统的移动客户端的设计模式去设计即可，只需要注意设计的网页应用需要运行在多个平台、多种设备上即可。由于iOS相比其他平台，没有back按键，所以在iOS上运行需要保证界面内的导航能够实现闭环。所以Android上有些操作可以通过Menu键唤出，但是在iOS上就需要直接暴露出来。(2)针

8、对浏览器优