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

李婉茹 余杨奎

摘要：手机端Web App是在智能手机上显示的联网软件，手机端Web App方便人们使用智能移动设备获取更多的信息和资讯，突破时间与空间的限制，给生活带来更大的便利。在视觉传达设计视角下，针对手机端Web App中字体、版面、颜色、动画等元素进行布局，向受众传达版面内涵，提升受众浏览兴趣。将PC端Web运用到手机端Web App中研究，使移动终端上正常浏览PC端的网页资源，实现PC端Web应用到手机端Web App的转换。方便用户使用手机访问互联网Web网页快速准确的捕捉到有用信息，弥补响应式技术面临多终端调用CSS样式出错，导致页面访问不协调的问题。

关键词： PC端Web;手机端 Web App;转换

中图分类号：TP311      文献标识码：A

文章编号：1009-3044（2021）30-0092-03

开放科学（资源服务）标识码（OSID）：

A Study and Realization of Mobile Phone End Web App Based on Visual Communication Design

LI Wan-ru， YU Yang-kui

（The Open University of Guangdong，Zhanjiang 524003， China）

Abstract：The mobile phone Web App is the networking software displayed on the smartphone. The mobile phone Web App which is convenient for people to use smart mobile devices to obtain more information and information， can break through the limitation of time and space， and bring greater convenience to life. From the perspective of visual communication design， the layout of font， layout， color and animation in the Web App of mobile phone is carried out to convey the connotation of layout to the audience and enhance the audience's interest in browsing. The PC end Web is applied to the mobile phone end Web App to make the mobile terminal browse the web resources of the PC end normally， and realize the application of the PC end to the mobile phone end Web App conversion. It is easy to  facilitate users to use mobile phones to access the Internet Web web pages quickly and accurately capture useful information， to make up for the response technology faced with multi-terminal calls CSS style errors， resulting in page access problems.

Key words：PC end Web; mobile Web App; conversion

科技發展日新月异，国家为了适应时代发展的要求，不断地提升软硬件实力，借助网络技术和信息技术的优势，开发新的智能产品，满足不同用户在不同场合的需求。无论是国内还是国外，人们对手机端Web App的接受度在不断增加，支付宝、微信钱包、手机QQ钱包、视频软件和阅读软件等在人们的生活中得到了广泛的应用，手机端Web App改变了人们的生活方式和生活空间，对各行各业都产生了深远的影响。为了更好地实现手机端Web App的使用性能，吸引受众的注意力，通过视觉来向人们传达手机端Web App的各种信息，视觉传达设计应该紧跟科技发展的步伐，体现设计者别出心裁的内涵，通过视觉传达设计来展现手机端Web App的设计版面，设计者根据现有的Web网页资源特点，实现网页转码，使传统PC浏览网页在移动终端中更好地显示出来。

1 PC端Web、手机端Web App之间的区别

手机端Web App与PC端Web的区别在于：手机端Web App是在手机上使用的，PC端Web是在电脑上使用。

移动互联网可以随时随地的为人们提供信息服务，PC端也称电脑端，人们使用电脑联网获取信息，通过Web同步数据。手机端Web App是人们使用移动设备上网浏览信息，在功能上两者没有什么不同，不过手机端Web App使用较为便捷。手机端的操作方式多为滑动，PS端则是点击。手机端Web App在使用时可能会因流量产生费用问题，而且对页面内容也有要求，手机端Web App的页面内容应该尽可能精简。手机端Web App受到浏览器性能资源的限制，最好不使用复杂的渲染动画，PC端Web这个问题不明显。PC端和手机端在界面布局上存在差异，PC端的屏幕较为宽大，布局更加灵活，手机端屏幕比较窄小，通常是单列，最多是双列+响应式。手机端Web App很接近手机端原生的App行为模式和外观，手机端开发的供给是专用的，不用于PC端;同样的，PC端的一些工具在手机端中也不好用[1]。

随着手机网民的数量不断增多，移动设备打开了移动互联网的市场，手机营销是未来必然的趋势，App作为手机营销的主要工具，有两个发展的方向：一是原生App，二是手机端Web App。原生App可以直接安装到移动设备中，原生App具有一定的针对性，是专门针对某一类移动设备产生的，原生App的每种平台都需要使用独立的开发语言，如Java（Android）[2]，移动操作系统中要有独立的开发项目，然后使用各自的软件开发包;手机端Web App通常是利用设备上的浏览器来运行的，不需要下载安装，只需要开发一个项目就可以，这种应用使用HTML5、CSS3、Java Script和服务器端语言完成，可以任意地选择一些跨平台的开发工具。原生App可以实现移动硬件设备的底层功能，例如摄像头、个人信息和重力加速度等等;手机端Web App只能使用有限的移动硬件设备功能。

2 手机端Web App性能的影响因素

手机端Web App被用户点击触发后展现在用户眼前的是一个可交互的状态，通过DNS域名解析将URL转换为IP地址，再将IP地址连接到Web服务器上，在浏览器与服务器之间建立TCP连接，连接成功后浏览器向Web服务器发送HTTP请求，获取各种资源，如图片、CSS、JavaScript文件、HTML文档等内容。手机端Web App的响应时间主要取决于页面的渲染时间和资源的加载时间。页面的渲染速度与设备硬件性能有关，不过，在相同的硬件设备使用中，CSS的使用规范性也会影响到渲染的速度。各种资源的加载时间受到打开页面和窗口数量的影响，通常手机端Web App最多只能同时发起4个网络请求，超出的请求太多会增加页面的加载时间，所以在使用中需要控制手机端Web App的网络请求数[3]。HTML5技术的快速发展与移动设备的大幅普及，促进了手机端Web App的发展。手机端Web App的稳定性随着手机性能的优化得到了不断提升，HTML5技术为手机端Web App的开发与应用提供了源源不断的动力，设备的性能越好，手机端Web App的用户体验度就越高。手机端Web App 将成为改变移动互联网生态格局的关键。

3手机端Web App开发的核心要点

3.1语义化与结构化

手机端Web App的页面生成最初以切图为导向，然后转变成以语义化导向，页面的结构与层次变得更加的清晰。结构化的页面有利于手机端Web App多浏览器兼容和多分辨率适配。手机的屏幕实际显示像素比电脑屏幕小，有些内容无法在一个屏幕中显示出来，结构化的页面可以使DOM显示与隐藏交互，便于管理。手机端Web App可以适配不同的分辨率，分辨率的变化可能会导致页面DOM显示/隐藏的交互。语义化、结构化的页面是手机端Web App最好的选择[4]。

3.2 移动设备的特性

移动设备的特性通常分为影响视觉的、影响触觉的，HTML5技术和CSS3技术可以实现响应式网页。影响视觉主要包括屏幕分辨率和设备像素比，视觉设计会影响手机端Web App的设计稿和移动设备产出的图片;影响触觉有触摸屏（用手指操作）、传感器（陀螺仪、GPS等）、软键盘等几部分组成，触觉部分对人机交互的输入接口有影响，Touch手势、滑动、语音识别、GPS、方位感应等属于输入，对应的HTML5、CSS3技术实现可以查阅W3C的相关文档。

3.3浏览器（WebView）兼容

移动浏览器兼容中的BUG有很多是浏览器运行中产生的问题，无法用理论解释清楚，可以使用改进技术实现，但是没有完美的技术解决方案，除非更改需求交互。在开发和设计产品的时候，将这些技术性的问题考虑到位，防止在测试阶段出现问题重新改进，会增加开发成本。

3.4手机端调试

手机端Web App的开发有95%的调试都是在 Chrome DevTools 移动设备模拟器下进行的，剩余的5%则使用特殊调试技巧。

3.5关于测试

开发调试与测试不同，测试是由专门的QA部门操作的，测试的方法主要是手工，测试需要在限定的运行环境下进行，QA部门对移动设备的机型、系统、浏览器（WebView）进行测试。如果运行的手机端Web App只在微信、QQ、微博等社交App中运行，就可以只测试微信、QQ、微博WebView。如果不限制运行环境，可能会因测试压力太大，出现一些系统BUG。

4 PC端Web应用到手机端WebApp 转换的实现

4.1网页转换

随着互联网的快速普及，为移动通信终端打开了市场。移动互联网结合了互联网的可扩展性和移动通信的便利性，成了通信业和互联网业融合发展的交叉领域。移动终端设备具有便携性和即时性的特点，但是移动终端设备的型号不同，屏幕分辨率的大小也不等，适配开发的成本较大，而且移动终端设备的CPU处理性能低，内存小，有些传统的PC网页不能在移动终端上正常显示，还需要进行二次开发，增加了网页的建设和维护成本[5]。针对这一问题，相关人员研究出了两个网站改进方案，一是利用响应式Web设计模式开发新的手机客户端网页，在开发的时候将手机型号、屏幕尺寸考虑在内，让内容的宽度随着手机端自动调整;二是根据PC端网站的页面，手动调整手机端显示的页面，在调整过程中考虑到手机尺寸、浏览器兼容等问题，将PC端Web 的网页转换成手机端Web App网页。将PC端Web 的网页转换成手机端Web App网页的方法是在原网址的内容、保持原有界面外观的前提下对其进行开发和设计，这种方式极大地降低了开发成本和维护成本，省时省力。

将PC端Web 的网页转换成手机端Web App网页需要完成以下步骤：1）分析网页的结构，设计人员通过Web应用对传统的PC网页进行配置，将配置信息存入数据库中。在这一步骤内，可以借助第三方工具分析传统PC网页的DOM结构，将网页汇总的内容划分到手机端展示的模块中，使每一模块的内容都适用于Web应用中的任一模板。2）天河适配 Java Script引擎，天河适配 Java Script引擎中的文件会被浏览器加载，能够根据相关的数据实现特定的功能[6]。天河适配 Java Script引擎的部署方式可以是静态部署、动态部署和代理部署中的任意一种。使用静态部署方式可以根據数据库中第一个步骤得到了配置信息，将JavaScript文件引入到原网页中，当手机用户端访问PC网页时，JavaScript文件里的天河适配引擎会根据用户访问的URL、原网页的内容和移动设备的参数将传统PC网页适配成移动版网页。3）页面适配，使用天河适配 Java Script引擎根据数据库中的配置信息、访问页面的URL、原网页的内容和移动设备的参数，将传统PC网页适配成手机端网页。自动调整标签之间的距离和标签的大小，重新设定页面内容的显示位置。

4.2 响应式Web设计

PC端Web应用到手机端Web App中，需要实现页面内容的自适应和浏览器的兼容性，基于响应式Web设计的模式能够自动切换分辨率、改变图片的尺寸，满足联网设备多样性的特点[7]。为了能够随时随地获取信息人们选择使用手机、平板等移动设备进行联网。在移动设备多元化的背景下，需要在不同设备上呈现给用户同样的Web网页。响应式Web设计是一种全新的Web设计思想，它能够自动适应用户的终端设备，让网页根据用户的浏览需求和设备环境作出相应的响应和调整。实现PC端Web向手机端Web App的转换，使一次编写的网页在不同分辨率的终端下友好显示。响应式Web设计能够在根本上解决网页在不同屏幕大小的移动设备的显示问题。

5 PC端Web应用转换到手机端Web App的优势

5.1个性化

受众可以通过响应式技术对版面进行调整，选择自己喜欢的版面风格，调整自己喜闻乐见感兴趣的栏目进行关注。移动终端浏览普通web页面，只能被动接受同样的资源信息，从而凸显出转换后的手机端Web App的个性化特征。

5.2交互性

手機端Web App封装后，与PC端Web应用共享同一个信息数据库，在反馈信息交互方面提供了一个更加便捷的渠道。受众在一定程度上摆脱了对PC端的依赖，可以随时随地作为信息的发布者和传递者，由此可见，转换后的手机端Web App有更强的交互性。

5.3多样性

PC端Web应用转换到手机端Web App后，能提供更多信息，选择性更强。音频、视频、文字、图片都可以作为转换后的手机Web App的信息载体，甚至可以将所有元素集合在一起，形成图文并茂的信息进行传递，体现了多样性的特点。

5.4及时性

转换后的手机端Web App打破仅依赖PC端在时间和空间等方面的局限性，受众可以利用Web App随时随地接收和发布信息。在大数据和云计算的推动下，能更准确、更及时推送信息给需要的客户群体。体现了Web App及时性的特点。

6 结束语

视觉传达设计是创新所向，创新是设计的目标，视觉传达设计视角下对手机端Web App的设计是吸引受众的手段，让受众更加方便快捷地浏览到互联网信息。现在的手机分辨率千奇百怪，一次开发，多种适应的响应式布局已经成为主流。设计者在手机端Web App中运用响应式Web设计模式，提高手机端的应用性能，保证页面具有适配性，页面内容能够兼容。手机端的电量和内存的资源有限，在手机端业务需求越来越复杂的情况下，优化手机端Web App的性能有着很大的意义。将PC端Web应用到手机端Web App转换，用户可以直接通过安装在手机端的Web App进行访问，满足用户的浏览需求。

参考文献：

[1] 李玥.PC端Web应用到手机端Web App转换的研究与实现[D].北京：北京邮电大学，2015.

[2] 沙季湲.基于IBM Domino的移动入口系统的设计与实现[D].成都：电子科技大学，2014.

[3] 刘向明.基于Internet的嵌入式远程监控网络技术的研究与实现[D].上海：东华大学，2012.

[4] 刘兵.利用Web Service实现嵌入式设备与PC端的无线通信[J].单片机与嵌入式系统应用，2016，16（3）：30-33.

[5] 北京天河石科技有限责任公司.一种PC端WEB网页转换为移动端WEB网页的方法：CN201510399492.0[P].2015-12-09.

[6] 朱珍元，王鹤琴，郭标.基于HTML5和SSM的移动Web App开发[J].电脑知识与技术，2017，13（21）：73-75.

[7] 郑舟，周芸韬.移动WebApp与原生App的深入比较[C]//2013全国报社新闻技术工作会议暨中国报业技术年会论文集，云南师范大学，2013：53-56.

【通联编辑：唐一东】