视觉传达设计视角下手机端WebApp的研究与实现

科技发展日新月异，国家为了适应时代发展的要求，不断地提升软硬件实力，借助网络技术和信息技术的优势，开发新的智能产品，满足不同用户在不同场合的需求。

无论是国内还是国外，人们对手机端WebApp的接受度在不断增加，支付宝、微信钱包、手机QQ钱包、视频软件和阅读软件等在人们的生活中得到了广泛的应用，手机端WebApp改变了人们的生活方式和生活空间，对各行各业都产生了深远的影响。为了更好地实现手机端WebApp的使用性能，吸引受众的注意力，通过视觉来向人们传达手机端WebApp的各种信息。

视觉传达设计应该紧跟科技发展的步伐，体现设计者别出心裁的内涵，通过视觉传达设计来展现手机端WebApp的设计版面，设计者根据现有的Web网页资源特点，实现网页转码，使传统PC浏览网页在移动终端中更好地显示出来。

手机端WebApp受到浏览器性能资源的限制，最好不使用复杂的渲染动画,PC端Web这个问题不明显。PC端和手机端在界面布局上存在差异，PC端的屏幕较为宽大，布局更加灵活，手机端屏幕比较窄小，通常是单列，最多是双列+响应式。手机端WebApp很接近手机端原生的用的，不用于App行为模式和外观，手机端开发的供给是专好用。

PC端；同样的，PC端的一些工具在手机端中也不随着手机网民的数量不断增多，移动设备打开了移动互联网的市场，手机营销是未来必然的趋势，App作为手机营销的主要工具，有两个发展的方向：一是原生App，二是手机端WebApp。

原生App可以直接安装到移动设备中，原生App具有一定的针对性，是专门针对某一类移动设备产生的，原生App的每种平台都需要使用独立的开发语言，如Java（Android），移动操作系统中要有独立的开发项目，然后使用各自的软件开发包；手机端WebApp通常是利用设备上的浏览器来运行的，不需要下载安装，只需要开发一个项目就可以，这种应用使用HTML5、CSS3、JavaScript和服务器端语言完成，可以任意地选择一些跨平台的开发工具。

原生App可以实现移动硬件设备的底层功能，例如摄像头、个人信息和重力加速度等等；手机端WebApp只能使用有限的移动硬件设备功能。随着互联网的快速普及，为移动通信终端打开了市场。移动互联网结合了互联网的可扩展性和移动通信的便利性，成了通信业和互联网业融合发展的交叉领域。

移动终端设备具有便携性和即时性的特点，但是移动终端设备的型号不同，屏幕分辨率的大小也不等，适配开发的成本较大，而且移动终端设备的CPU处理性能低，内存小，有些传统的PC网页不能在移动终端上正常显示，还需要进行二次开发，增加了网页的建设和维护成本。

针对这一问题，相关人员研究出了两个网站改进方案，一是利用响应式Web设计模式开发新的手机客户端网页，在开发的时候将手机型号、屏幕尺寸考虑在内，让内容的宽度随着手机端自动调整；二是根据PC端网站的页面，手动调整手机端显示的页面，在调整过程中考虑到手机尺寸、浏览器兼容等问题，将PC端Web的网页转换成手机端WebApp网页。

将PC端Web的网页转换成手机端WebApp网页的方法是在原网址的内容、保持原有界面外观的前提下对其进行开发和设计，这种方式极大地降低了开发成本和维护成本，省时省力。将PC端Web的网页转换成手机端WebApp网页需要完成以下步骤：

1）分析网页的结构，设计人员通过Web应用对传统的PC网页进行配置，将配置信息存入数据库中。在这一步骤内，可以借助第三方工具分析传统PC网页的DOM结构，将网页汇总的内容划分到手机端展示的模块中，使每一模块的内容都适用于Web应用中的任一模板。

2）天河适配JavaScript引擎，天河适配JavaScript引擎中的文件会被浏览器加载，能够根据相关的数据实现特定的功能[6]。天河适配JavaScript引擎的部署方式可以是静态部署、动态部署和代理部署中的任意一种。

使用静态部署方式可以根据数据库中第一个步骤得到了配置信息，将JavaScript文件引入到原网页中，当手机用户端访问PC网页时，JavaScript文件里的天河适配引擎会根据用户访问的URL、原网页的内容和移动设备的参数将传统PC网页适配成移动版网页。

3）页面适配，使用天河适配JavaScript引擎根据数据库中的配置信息、访问页面的URL、原网页的内容和移动设备的参数，将传统PC网页适配成手机端网页。自动调整标签之间的距离和标签的大小，重新设定页面内容的显示位置。