这就要求我们对原有PCAPP进行分析,舍弃页面中起修饰修饰作用,以及次要的内容,保留页面的核心内容。(2)编写适合于移动终端显示的样式表。精简APP的内容之后,即可编写适合移动终端浏览的CSS样式表。编写时需注意两个要点:其一,对于舍弃的内
伴随移动互联网技术的快速发展,各类移动设备得到广泛普及,智能手机用户的数量更是迅猛增长。在手机网民迅猛增加的情势之下,几乎所有用户都希望能通过手机方便、快捷地访问APP。而传统APP的界面和风格都是针对PC端设计的,用户直接在移动设备上面使用,会出现诸多问题。传统APP在用户体验上,不能满足手机用户的需求。
移动设备与PC在分辨率和屏幕显示方向上都有很大的区别,并且受网络和自身处理能力的限制,当用户使用手机浏览传统APP时,都会出现页面布局混乱、无用信息过多等现象,页面效果不尽如人意。主要的问题如下：第一,由于智能手机的屏幕尺寸比PC屏幕小,用户使用智能手机直接访问传统APP,往往会因为屏幕尺寸不足而页面变形。即使页面不变形,智能手机上显示的效果也是PC页面的缩小版,过小的文字、图片等页面元素,不利于用户浏览。
第二,对于用户操作比较多的功能性APP,传统的PC操作便利,不会给用户带来困扰。如果直接在手机上使用此类APP,缩小的功能按钮和虚拟键盘给用户操作带来极大的不便,用户体验大大降低。第三,PC是通过有线网络来访问网上的,其技术已经十分成熟,不会受流量与速度的限制。为了追求更高的用户体验,传统PC页面上会使用大量的APP特效,再加上广告等信息,页面数据量一般都比较大。而智能手机则通过无线网络来访问网上,并且智能手机终端的处理能力远不如PC,受到无线网络和智能手机自身处理能力的限制,使用智能手机直接访问传统PCAPP,会出现下载速度慢和产生大量流量资费等问题。在APP得到广泛应用的今天,考虑到移动互联网的个性与特点,如何将传统PCAPP构建为顺应移动互联网发展趋势,适用于各种智能移动终端的APP,成为了大家极为关注的焦点。
针对以上问题,将传统PCAPP构建为兼容各种智能终端的移动版APP已是大势所趋。目前,具体的实现方法主要有以下三种：
(一)页面重建该方法是在原有PC站点的基础之上,通过组织团队或寻找软件开发公司,针对智能移动终端的特点,开发移动版APP,形成PC站点+移动站点的结构。用户浏览APP时,根据自身使用的客户端设备类型,来选择对应的APP版本。此方法可以根据不同的客户端而量身定制满足客户需求的站点,可以最大程度的提高用户体验,但这种方式存在开发成本和维护成本高等缺点。
(二)利用百度SiteApp工具此方法借助第三方工具百度SiteApp,通过该工具快速将传统PCAPP构建为移动版APP。具体实现过程如下:
(1)通过输入官方地址http://siteapp.baidu.com,打开在线工具SiteApp,并在其中输入想要构建为手机APP的PCAPP地址;(2)选择目标APP的样式;(3)通过添加或者自动抓取等方式,设置目标APP的导航;
(4)根据需要,添加电话、邮箱、版权等相关组件;
(5)下载验证文件,上传至APP根目录进行APP验证;
(6)绑定域名,配置dns即可。
SiteApp工具对于复杂脚本的处理能力有限,并且对APP交互功能的转换效果比较差,因此它比较适合于构建以文字阅读为主的APP。
(三)响应式APP响应式APP也称之为自适应APP,它能够兼容各种客户终端。也就是说,采用这种方法,只需开发一个APP,便可提供给所有的设备设备使用,无需考虑屏幕尺寸不一的问题。将PCAPP构建为响应式APP,既要保留其原有的PC端浏览效果,又要使其兼容不同类型的智能终端设备,所以只能在保持原有APP结构的前提下,通过样式表来满足智能终端的浏览需求。具体实现过程如下:(1)分析APP,删减冗余内容。根据移动终端设备受网络和屏幕尺寸限制的特点,其浏览的APP应是最精简的。这就要求我们对原有PCAPP进行分析,舍弃页面中起修饰修饰作用,以及次要的内容,保留页面的核心内容。(2)编写适合于移动终端显示的样式表。精简APP的内容之后,即可编写适合移动终端浏览的CSS样式表。编写时需注意两个要点:其一,对于舍弃的内容,可通过display:none属性值对进行设置,将其隐藏掉;其二,用于布局的div模块,宽度都使用百分比进行设置,实现自适应宽度的流体布局。
(3)根据客户端屏幕尺寸大小,自动应用样式表。在APP页头中的link标签,使用CSS3的mediaquery设置功能,让页面能根据不同设备屏幕尺寸,自动加载对应的样式表。
响应式APP通过使用流体布局、媒体查询等技术制作APP,使得APP能够自适应不同的终端设备。它是目前构建兼容PC和智能移动设备APP的最佳方案,也是Web设计的趋势。
