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

秦源

（石河子大学信息科学与技术学院，新疆 石河子 832003）

0 引言

随着网络信息时代的迅速来临，智能手机在人们日常生活、工作中所发挥的作用也越来越大。虽然现阶段人们日常使用的移动终端操作系统已经有IOS、Andriod、Windows等几种，但真正具备兼容移动前端系统开发的语言却少之又少。传统的系统开发工作主要是通过在电脑终端与移动终端分别设置不同开发系统的方式进行移动前端系统的开发和研究工作。由于这种开发模式具有成本高、周期长且开发速度缓慢等缺点，已经无法满足互联网信息时代发展的要求。对此，研究人员应该从前台界面着手，从中寻找能够有效兼容各个平台的开发语言和架构，推动系统开发工作的顺利开展。

1 HTML5技术及Web技术概述

互联网技术与移动应用的深度融合，不但促进了人们工作效率、生活质量的全面提升，而且使人们的生活、工作方式发生了翻天覆地的变化。所以，移动互联网必然是人类社会未来发展的必然趋势。4G、5G、大数据技术迅速发展，为微信、抖音等移动社交服务软件的发展提供了强有力的技术支持。在社交服务软件开发和应用的过程中，人们对移动应用全段使用体验提出的要求也随之越来越高。而HTML5技术则成了近年来移动互联网技术中应用最广泛的先进技术手段之一。诞生于20世纪90年代的HTML5技术，最初主要发挥着为移动APP开发提供技术服务的作用，该技术的应用，彻底解决了用户在体验迭代优化和兼容不同类型操作系统时出现的问题。互联网技术的迅速发展和普及、HTML5技术的大范围应用将Web前端开发与设计推向了新的阶段。研究人员在标准设计、开发等各方面取得了长足进步，以HTML5技术为依托的Web开发技术水平得到了有效提升，通过将视频、动画、图像等融入网页中，增强了用户的使用体验感。

2 基于HTML5的移动Web前端技术分析

2.1 移动Web前端开发技术

2.1.1 交互设计

交互设计是软件设计工作的关键环节之一，由于软件设计的全过程中，不管是基础设计，还是概念表达都涉及了交互设计，因此为了保证软件设计工作的顺利完成，设计人员应该充分重视交互设计工作的重要性。首先，明确软件设计的目标，从不同层次开展用户群的测试检验工作，完善和优化软件设计方案；其次，采取有效措施减少软件设计过程中的信息总量，降低后期软件应用过程中数据存储的压力；最后，严格按照系统功能设计要求，及时向用户弹出处理错误提示，保证用户可以根据自身使用要求，自主选择错误处理方式。并充分发挥交互设计功能的优势，增强用户的使用体验，增强用户使用应用程序的信息，提高软件应用的效果[1]。

2.1.2 视觉设计

软件设计中的视觉设计也是影响软件设计质量和效果的关键因素之一，视觉设计也就是软件设计中的UI视觉设计，其主要是从以下几方面着手对软件界面进行相应视觉设计，从而达到增强软件视觉效果的目的。

（1）文字。系统界面开发设计中的文字与图像等基本元素是信息传递不可或缺的重要载体，由于单一的图像传递方式无法体现出系统界面设计的最佳效果，所以设计人员在系统界面设计过程中，应该增加相应的文字，才能呈现出软件设计界面的最佳效果。而其为了丰富软件设计表达的内涵，设计人员在开展软件设计工作时，应该合理运用文字丰富软件界面，才能在增强软件界面艺术魅力与视觉冲击力的基础上，为用户使用应用软件提供更好的使用体验。

（2）图像。图像是一种最直观且有效的信息表达和传递方式。图像与文字的紧密结合，不但丰富了页面信息传递的效果，而且丰富了信息传递的内涵。图像与声音和文字等信息传递方式相比，其作为一种视觉化语言，有效地缩短了空间距离，拉近了用户之间的距离，提高了用户软件使用的效率。

（3）版式布局。如果网站向用户传递的信息不仅零散且内容过于复杂的话，该网站必须将信息内容以整体且准确的方式传递给用户，才能确保用户及时地接收到网站传递的信息。这就要求网站必须采用合理的文字、视频以及图片排版布局方式，增强网站的视觉效果，确保用户在阅读信息的过程中，获得更多的线索，解决信息阅读和接收过程中遇到的问题。

（4）色彩。色彩中包括了湿、冷、纯、乱等各种不同的人类情感，不同色彩组合在一起为用户带来的使用体验也各不相同。色彩的合理搭配不但增强了用户界面的立体感，还为用户带来了美的享受。所以设计人员应该准确掌握网页排版的艺术，就应用程序视觉设计中存在的问题，借助电脑或移动设备Web应用程序，合理地进行视觉设计概念的布局，充分发挥HTML，CSS，javascript代码工具的优势，将PSD、PNG等不同类型的文件图片整合在一起，促进设计质量与效率的有效提升。

2.1.3 Web 前端开发

Web行为标准并不是单一的行为标准，而是各种不同行为标准整合在一起的一个有机整体。目前，常见的网页设计主要包括了网页结构、表现、结构优化行为等几种语言构成。如果将与之对应的网页行为标准进行详细划分的话，那么机构化行为标准语言主要有XHTML、XML等几种。表现行为标准语言则主要以CSS为主，行为标准则主要涉及了对象行为模型、ECMAScript等相关内容。总之任何一种行为标准语言的起草或发布，都必须以国家或组织起草、制定的行为标准为依据。比如，ecma本就是ECMAScript的行为标准。Web标准的起草和发布，则进一步降低了Web与Web开发设计的难度。也就是说，如果将Web标准结构详细划分为HTML、CSS、javascript等几部分内容的话，设计人员必将表现结构中的行为表现以及HTML等标签，写入各个标签中才能体现出页面结构的整体性效果。

2.2 HTML5的关键技术

2.2.1 canvas 技术

H1界面采用的前端设计技术与传统前端设计技术相比，采取了增加canvas标签的方式，进行图像的分析处理。这种标签在实际应用过程中，主要是借助2DProgrammatic标准接口程序，付出相对较低的存储空间，完成对图像的分析和处理工作。由于该技术不仅可用于图像的绘制、分析和处理环节，而且还可以通过演示HTML页面中元素定义的方式，提高图像处理效果。所以，该技术的普及和应用，促进了界面前端设计效果的有效提升[2]。

2.2.2 HTML5DeviceAPI 技术

DeviceAPI作为一种访问摄像头、麦克风以及地理位置标准化API接口，在实际应用过程中，主要是通过对本地设备产生的多媒体数据进行在线录制、传输以及保存的方式，帮助用户获取数据当前位置，确保用户可以及时获取符合自身要求的数据信息。

2.2.3 HTML5 表单技术

表单技术是Web应用广泛的技术手段之一，该技术在实际应用过程中，只需要用户通过在电脑终端中运用HTML与javascript技术即可完成用户基本信息的输入工作。针对数据传输过程中，移动应用端无法进行键盘输入操作的问题，设计人员根据用户采用的输入方式对现有输入方案进行了全面优化和完善，比如，通过对表单结构的自由化升级，将传统HTML架构中，表单中的各个元素的标签管理纳入HTML5体系中，不断取消了各种不同限制对表单中各个元素标签使用产生的限制，同时通过对各个元素定位的优化，提高了表单的自由度，满足了用户提出的个性化使用需求。

3 基于HTML5的移动Web前端设计与开发构建

设计人员在进行移动Web前端的设计与开发工作时，应该严格按照以人为本的理念，设计能够满足人们生活、生产需求的前端系统。对此，设计人员在移动Web前端设计过程中，应该充分考虑系统适用人群心理变化的特点，站在人们的需求与使用感受角度上，设计窗户满足人们实际使用需求的个性化系统设计方案。在Web前端流程构建过程中，则应该通过开展用户问卷调查和数据分析工作的方式，准确地了解和掌握人们的个性化使用需求，并在原型设计的基础上，将其他步骤融入其中，加快Web前端开发设计工作的速度。Web前端基本流程可以详细地划分为需求调研分析、原型设计、前端代码开发等几部分内容。设计则进一步细分为低保真设计与高保真设计两部分内容。用户需求主要指的是用户群分析、人物角色分析等内容[3]。用户调研中常用的调研方式主要有问卷调查、可用性测试等几种。所以为了提高Web前端设计的效果，设计人员应该从以下几方面着手做好软件应用开发设计的相关工作。首先，针对代码的分层。将代码层分为结构层、行为层与表现层三部分。Web前端设计主要是从组成、功能、行为等方面开展的，由于各个层面之间都是独立存在的，因此在Web前端设计过程中，各部分彼此之间不会产生任何影响。这几方面所对应的物理层次与文件主要包括了HTML、CSS、javascript等几种，所以设计人员必须充分重视级别划分工作的重要性，保证各个层级代码的独立性与逻辑结构的清晰性，为后续系统维护与测试工作的开展提供依据。设计人员在系统设计过程中，应该通过塑造合理规定的方式，发挥出源代码在系统设计中所发挥的作用，严格按照相关规定和要求，借助先进技术手段完成前端系统的开发设计工作。标准化操作不但减少了权限不明确等原因对彼此之间的交流产生的影响，同时促进了工作速度和效率的有效提升。此外，为了保证Web前端开发设计的质量，设计人员在实施相关技术时，应该以高精度原型设计软件为基础，开展前端系统的开发与设计工作，并在设计过程中利用HTML5、CSS3、javascript等技术手段开展系统的开发设计工作，充分发挥Web前端作为系统设计核心的优势，保证客户端用户界面的流畅性，降低用户使用操作的难度，引导用户使用相关程序，扩大客户前端系统的推广和应用范围[4]。

4 HTML5技术的应用展望

信息技术时代的迅速来临以及Web平台的全面普及和应用，设计人员在开展Web前端开发设计工作时，必须将HTML5技术与Web深度融合在一起，才能满足信息时代发展的需求。设计人员在开展系统开发设计工作时，应该积极探索HTML5技术应用的方式，通过对开发模式的创新和优化，扩大先进技术手段的应用范围。这就要求，相关企业在开发和应用HTML5技术时，必须充分重视HTML5系统对网络应用平台所产生的积极影响，通过打造全新网络体系的方式，推动网络信息技术的发展。我国相关部门在开展移动前端开发与设计工作时，应该借助先进的HTML5信息处理技术，为Web前端服务平台的设计提供技术支持。比如，政府部门在开展县一级信息化网络体系的建设工作时，应该着眼于很多技术发展过程中存在的局限性问题，将提高信息资源处理效率和信息利用率作为首要目标，避免因为对互联网平台发展前景产生误判，影响Web前端的开发、发展和应用。充分发挥Web服务平台的优势，构建信息资源共享平台，扩大Web服务平台的市场空间，利用多元化工作形体，使人们真正地认识到HTML5信息技术在Web资源服务平台开发建设中所发挥的积极作用，借助已有信息技术资源，增强用户的使用体验。将HTML5技术作为Web前端开发设计从的技术职称，深度挖掘移动互联网信息中具有使用价值的信息资源，推动Web服务平台的建设和发展[5]。此外，相关部门在积极运用HTML5技术时，应该深刻认识到HTML5技术与移动网络之间存在的密切联系，通过创新Web网络服务领域开发策略的方式，彻底摆脱人力资源对Web前端开发设计工作的依赖性，扩展技术人员的发展空间，构建创新性技术体系，探索出一条符合网络信息时代发展需求的技术研发和创新道路，为人类社会顺利迈入大数据时代保驾护航。

5 结语

总而言之，网络信息技术的迅速发展加快了智能化技术普及应用的速度。设计人员在开展Web前端设计开发工作时，必须充分重视相关衍生开发技术应有的重要性，充分发挥HTML5技术自身强大的功能优势，加大智能移动端页面开发的力度，才能设计出符合用户个性化需求的移动终端页面，增强用户的使用体验,为HTML5架构下移动Web前端设计开发事业的发展保驾护航。