基于HTML5技术的移动Web前端设计与开发

吴元杰，何毅平，朱晓庆，陈 庚

（长江工程职业技术学院 湖北 武汉 430212）

1 引言

在互联网迅速发展的背景下，移动终端也越来越多地被人们使用和了解，5G时代应运而生[1]。由于移动终端技术以新颖的形式出现在大众视野，交易市场上出现了各式各样的操作系统。从现在市场情况来看，Windows Phone系统、Android系统和iOS系统占有绝大多数[2]。除系统外，移动终端市场也呈现出被垄断的状态，主要的品牌有微软、谷歌和苹果等。与此同时，HTML5也逐渐进入人们视野。HTML5是在其他技术之后产生的，但HTML5发展速度很快，在移动Web前端设计与开发中取得了显著成绩。HTML5在功能上能解决更多问题，显示更多内容，慢慢加速了Web的完整度和成熟度。HTML5在性能方面逐渐完善，在新的大数据互联网状况下，其可以带给使用者全新的使用体验和感受。综上所述，研究HTML5技术的移动Web前段设计和开发分析有着非常重要的意义。

2 HTML5技术介绍

HTML技术在Web设计过程中被使用，其有广阔的市场和研究意义，价值和潜力也极高。HTML5作为HTML技术中的新形式，其是组成Web内容不可忽视的关键部分[3]。

事实上，HTML技术最早产生于20世纪90年代，并逐渐被使用到Web内容的设计和研发过程中。在90年代末期，HTML以全新的面貌发展成为互联网技术风向标的一种。在此之后，HTML被越来越多的人研究和使用，受众群体广，范围也逐渐加大。本文所介绍的HTML5技术产生的影响是深远的，不单是为当下服务，对下一个时期的互联网发展也有深远的影响[4]。HTML技术相比传统的Web设计与开发技术手段来看，体现出全新的功能性和更完整的使用感。除此之外，HTML5技术在内容和设计手段两方面，体现了更加全面性以及多元化的特点，在此过程中还融入了大量新的元素和创新点。除了以上方面，还改变了原有的canvas标签，在此基础上进行删除和增加新的想法。

HTML5技术促进了Web前端设计的发展，为其创造了新的形式，丰富了其内容，给人一种崭新的使用感受，为研发工作人员提供了新的技术支持，提高了其工作效率。使用者在观看内容过程中，可以通过多种类型的观看模式。第一，可通过跨终端对一样的内容采用不同的观看和获取信息的模式。第二，可通过插件等方法将更多形式的内容引入Web核心内容当中。使用者的观看浏览过程不再被其的系统和设备所阻碍，在获取信息的时候更加方便快捷[5]。

当然，HTML5技术也并非万能的，在使用时也存在相应的问题：（1）新技术的发展速度还没有达到很高的水平，在使用的受众人群中也没有达到普及化要求，其在性能和功能上还够健全，存在一定缺陷，在使用者群体中还有一些人表示使用感不太好。（2）HIML5技术在使用过程中，还存在一定局限，这也是一个值得长期探讨的问题。

3 Web技术

在互联网时代，智能手机是人们离不开的交流设备，其功能也在不断完善和发展，由原来的打电话、发短信等功能，发展为看视频、听音乐、玩游戏等用于交流聊天的设备。智能手机发展到如今的状态离不开研发人员对系统的研发和设计，操作系统始终支持着智能手机的发展。正是因为研发人员的不断努力，才让彼此之间的沟通和交流更加便捷和顺畅，缩短了人与人之间的距离。

在带来好处的同时，我们还应看到移动终端操作系统在使用和操作过程中的复杂性。由此可见，当前构建一个系统化的操作系统是非常必要的。目前，社会发展状况和经济发展的结构都不能组建一个系统化的操作系统。HTML5技术的出现可以实现跨平台的交流和合作[6]。然而，当前Web技术还存在一定的问题，比如存在运行比较慢等问题。但随着移动前端技术的不断发展，这些问题都会迎刃而解，最终带给使用者全新的体验和服务升级。

4 Web前端系统设计

针对于前端设计，不得不说Web前端开发是被谈及最多的。针对目前的和传统的Web前端开发技术内容进行比较开展探讨，有利于说明和分析移动Web前端设计的主要部分及优点。

在性能上，移动Web前端开发与Web前端开发技术是一样的，所以移动Web前端开发与Web前端开发技术在实际的应用过程中存在很多相同的部分。目前的前端开发工作越来越受到关注，在这样的关注状态下，前端研发工作人员越来越重视其技术性。

4.1 交互设计

交互设计在整个研发过程中都发挥着关键作用。在全程设计中，以解决用户的使用便利性、满足使用者的需求为最根本的目的，给使用者良好的、全新的使用感。第一方面，在前期设计的时候针对不同类型的使用者做全面、详细的深入调查，结合更多信息设计出最好的方案。第二方面，应该深入了解使用者目前的生活习惯，使用简单明了的语言，便于使用群体记忆和学习，始终坚持以使用者为主体、为使用者服务的方针和理念，了解使用者的心理状态，使生产出来的产品贴近使用者的生活需求。

4.2 视觉设计

在视觉设计方面，要满足使用者的视觉使用需求，提升视觉观看的感受。不同人有不同的视觉使用需求，因此要有针对性地满足使用者，尽可能达到各类型使用者的需求。

4.3 界面设计

在界面设计方面，要想给使用者留下深刻的第一印象，界面的设计应具有一定特点，能够抓住使用者的眼球，需要有较强的吸引力，但在吸引使用者的同时还需要传输关键重要的信息内容，因此在界面设计方面就要多下功夫。文字和图像是界面设计的两个关键部分。（1）文字上，在界面设计过程中，在添加图片的同时需要附加上一些文字进行解释，在文字的使用上还要融入写作者自己的想法，吸引观看者的眼球。（2）图像上，图片吸引人眼球的效果不言而喻，就如我们小时候观看动画片一样，会被界面生动形象的图片所吸引，激发我们观看的兴趣，这就是图片给界面设计增强的吸引力，能够拉近我们与需要宣传产品的距离，产生亲切的感觉。

5 基于HTML5的移动Web前端设计与开发

一直将使用者作为主要的目标群。设计的理念应该以人的服务为中心，设计的产品最终要为人民群众服务。所以，在移动Web前端的设计上，应该考虑目前适用人群的心理变化和特征，从人们的需求和使用感出发，只有这样才能设计出满足人们需要的设计方案。在设计之初，应该有清晰的目标，此目标的建立应该以人为本、贴近人们生活实际需要。

在Web前端流程的构建过程中，需要事前对使用者进行调查和分析，只有对使用者进行清晰的了解和调查才能开展下一步骤的研究，但是在原型设计阶段需要进行交互设计，之后再进行其他步骤的发展。

当前基于HTML5的移动Web前端设计与开发在很多地方已经被运用。HTML5技术虽然在此过程中发挥着重要的作用，但是其发挥的作用还远不及移动互联网时代的Web技术[7-8]。基于HTML5的Web 应用为移动端发展提供了良好的发展环境，其发展促进了移动互联网发展和智能手机到移动端的Web浏览器的发展。

HTML5在移动设备HTML5页面布局的呈现过程中发挥着不可替代的作用，其所起的作用促进了移动端Web前端研发工作的发展。HTML5技术在发展过程中不断增加新的创新元素，促进了其性能的发展，这一突破有利于实现良好的页面构建格局，很好地解决了页面存在的一系列问题。其不仅在页面布局上发挥重要作用，HTML5技术在移动端Web前端开发中的本地存储以及离线应用中也发挥了重要作用。这一作用使HTML5表单元素变得更加多元化，除此之外，还实现了移动Web页面的版式变得多样化，很好地展现了页面的丰富性和多样性，以便于处理各种复杂工作。除此，Geolocation地理定位等功能很好地填补了Web应用自身的漏洞。要想提高开发的速度和质量就需要特别关注HTML5技术的移动端Web前端开发框架，轻量级框架如Jquery Mobile，重量级框架如Sencha Touch。

6 结语

本文针对HTML5技术及移动Web前端技术展开探讨，在探讨的最后，我们发现此类技术所具有的优势，从目前来看其还不是太完善，还存在一定漏洞，但其有非常广阔的前景，在以后的发展中将会逐渐实现操作系统上的统一化。总之，基于HTML5技术移动Web前端设计与开发是当下流行趋势，为软件开发带来的效益不可估量。