HTML5在Web界面设计中的应用

付勋

【摘要】    现行的HTML5是最新的HTML标准，在获得CSS3以及jQuery等技术的共同支持之后，能进一步丰富web开发的界面内容，同时也能为用户提供更加完善的使用体验。HTML5为开发人员提供的技术支持包括web界面的外观设计、交互操作、响应式页面布局等内容，因此围绕HTML5在web界面设计应用的探讨就显得十分必要。

【关键词】    HTML5    Web    界面设计

引言：

互联网+时代的到来使得人们得以进入全新的信息时代，人们能够借助各种不同类型的设备终端从互联网上获取所需的信息支持，这也意味着整个社会的生活、工作、学习方式发生了很大变化。以web获取各类型信息已经成为人们每天都会进行的操作，而作为HTML的最新标准，HTML5在获得CSS3与jQuery的技术支持后为web开发创造了更多可能。仅仅是web界面设计这一角度，HTML5就实现了从外观到用户交互体验多个层面中大量全新技术的应用。

一、HTML5的发展优势

在标签特性及相关功能得到优化之后，HTML5技术在多个方面均展现出独特优势，除了能够应用于OA自动办公系统、web APP的开发之外，也为web开发提供了全新的技术支持，而且由于有效降低了内容消耗与CPU占有率并处理好开发接口的问题之后，web后台的安全性也得到了可靠保障，数据丢失的情况得到有效缓解。除此之外，HTML5在将原始form一部分特点及优势继承下来之后，通过强化后者的表单验证功能使得input元素在种类上变得更加丰富[1]。这些优势的出现使得web的开发变得更加容易，同时开发出的web也能够为用户提供更理想、更人性化的使用体验。结合上述发展优势来看，HTML5显然具有异常广阔的发展前景，而就当前的实际情况来说，HTML5在我国web设计以及移动终端的web前端设计中均得到了非常广泛的应用。

二、HTML5在网页页面结构设计中的应用

HTML5的应用在极大程度上推动了网页页面结构的合理化发展，本身HTML5中就加入了大量全新的页面结构化元素，以

、

、

、

、

以及

等为主要内容的标签的应用，意味着web页面内容的分区处理成为可能。作为web界面设计中的语义化标签，无论web页面上需要加入什么样的媒体内容，只要位于这些元素之内，都可以为之添加独立的概要、标题以及页脚。从另一方面来说，以HTML5为技术支持开发出的web更强调web外观形式上的简明扼要，并体现出使用体验与艺术特征融合的特点与独特的美观性。在CSS3样式设置功能的支持下，无论是图片的圆角设计、应用大图作为网页背景，还是将不同透明度的背景渐变动画应用到web设计中都可以有效实现。这样一来web在界面结构及布局上就有了更多的设计可能，从而解锁了更加丰富的web页面表现力，不仅方便了开发人员的设计开发工作，在web外观、布局上也能够为用户提供更加舒适的使用体验[2]。

三、HTML5设计应用的具体表现

HTML5设计应用最具体的表现在于为用户体验带来的有效提升。在设计web界面的过程中，由于获得了HTML5与CSS3全新技术功能的支持，用户的浏览体验得以获得更进一步的提升。HTML5的应用使得Web页面的设计能够充分考虑到用户的使用习惯及功能性需求，通过对提示内容、布局及方式的巧妙设计，避免了用户在使用过程中出现错误，借助良好的、导向性强的提示帮助用户在最短时间内迅速、精准定位到自己想要获取的内容。这种具体表现主要凸显在以下几方面：

首先是完全全新的表单设计。在借助全新

以及标记对原油表单元素进行修改完善之后，表单中加入了更多全新的属性与更人性化、更符合用户使用习惯的修改，也就是說相比HTML4而言，HTML5在web设计中的应用使得用户能够将更多注意力集中在访问web的过程中，在进行表单相关操作的时候也不会轻易受到web中其他元素的干扰，而在web输入框中设置的提示则为用户完成任务采用的方法提供了指向性参考。在HTML5新特性的支持下，原本只能依靠JavaScript才能完成的验证功能可以直接应用HTML标签执行，而且两者在效果上几乎不存在差别，也就是说web内的代码量因为这一标签的实现得到大幅缩减，可读性也因此而获得大幅增强[3]。在这一过程中涉及到的新标签与新属性包括

标签（用于对数量、功能不同的逻辑块进行划分）、autofocus属性（用于获取焦点）、拥有提示功能的email类型标签（此标签意味着web登录器拥有自动校验邮箱正确性的功能）、拥有提示功能的Url类型标签等。

其次则是以HTML5为技术支持开发出的网页导航。导航在web界面中有着十分重要的功能，能够有效引导用户快速定位自己需要的功能，在用户浏览web不同模块及元素的过程中发挥了指向性的作用。为充分满足用户的使用需求，Web界面中对导航的设计设置需要充分考虑用户使用web的习惯，在不影响用户使用体验的前提下对导航的位置与功能进行合理设计，确保导航链接的作用得到充分发挥。以当前的实际情况来看，基于HTML5设计的web常用导航包括固定导航（通常置于顶部）、用于迅速返回顶部的快捷导航、在拉动页面过程中的固定菜单导航、位于页脚的导航以及响应式web页面的导航等。其中顶部导航往往发挥了web页面主导航的作用，通常采用固定位置的设置方法，这样做是为了方便用户在访问web页面的过程中及时根据自己的需求进行操作，或是继续浏览或是快速转移至其他内容;返回顶部的导航则通常位于页面的右下位置，外观上只是一个明显、简单的小图标，一些web设计中会将之设定为只有快速滚动的时候才会出现，功能也更加简单，帮助用户迅速返回页面顶部;用户滚动页面时通常会弹出固定菜单导航，一般情况下固定菜单导航仅仅出现在只有单个页面的web中，在用户滚动页面的过程中，固定菜单导航会固定在特定位置不发生变化，以免影响到用户使用web的体验，但在用户单击菜单中某一项内容时，web会跳转至该项内容指向的区域（内容区），而如果用户在不操作固定菜单导航滚动至特定内容区域时，导航中对应的选项将会呈现出当前选中状态[4]，也就是说固定菜单导航的功能主要是服务于用户对于不同内容的浏览需求;页脚位置导航在某种程度上可看做是顶部导航的映射及功能补足，其主要功能是当用户浏览至页脚、看完全部内容之后，帮助用户在不需要滚动至web顶部的情况下也能够进行相关的选择，在功能上不及顶部导航那么完善，主要以各种类型的基础性功能为主;响应式网页页面的导航则多出现在小型智能终端设备使用的过程中，如果web呈现环境的屏幕分辨率、屏幕大小较小，则会出现特定图标的折叠导航，在不占用页面空间的前提下，为用户在需要的时候提供展开相关链接的功能支持。

四、页面交互与响应式web设计

4.1页面交互

以HTML5为基础设计的web加入了大量的交互操作，而这些功能的实现除了HTML5之外还需要jQuery的功能支持。这种页面交互在形式上多采用内容折叠的策略，其目的是为了在尽可能提升页面内容容量的同时，使用户的浏览过程达到更加专注、合理的水平。这部分内容通常在用户不需要操作时呈现出折叠状态，而在用户出现实际浏览需求时再随着用户的操作打开[5]。此外，这种交互并不仅限于链接，基于HTML5的web页面设计在图片展示功能中也加入了大量的交互操作，包括但不限于图片悬停后呈现的各种效果，或是焦点图的自动轮播，来使用户在浏览页面的过程中需要进行的操作获得相关提示与选择，进而帮助用户迅速找到需要的内容，进一步提升用户的使用体验。

4.2响应式web设计

网络信息技术的飞速发展带动了终端的发展，时至今日已经使得小微型智能移动终端成为近乎人手必备的设备，这也就意味着网页浏览面临着全新的需求，也就是说web界面设计需要在不同终端设备上都尽可能呈现出完美的表现效果。针对这种情况，HTML5与CSS3通过对布局的调整实现了web中不同元素在不同终端下的对齐与弹性布局，多达八种的布局规则使得其响应式web设计几乎能满足各类型终端的需求。

五、结束语

互联网信息技术的飞速发展使人们的生活产生了颠覆性的变化，也导致登录各种web获取信息成为日常生活学习中的重要组成内容。随着时代的发展，Web除了要继续实现提供信息的功能之外，也需要为用户提供良好的使用体验，借助全新的功能满足用户需求。HTML5扩充的新功能为web开发提供了全新的技术支持，并在有效结合了CSS3及JavaScript的前提下实现了web设计更高层次的改进与增强，相信未来也将面临更加全面的发展。

参  考  文  献

[1]陈梅、苏晨、高斐.HTML5在Web界面设计中的应用[J].电脑知识与技术：学术交流.2018，（5）：214-215.

[2]台雯.HTML5在WEB前端开发中的应用研究[J].天津职业院校联合学报.2016，（8）：70-74.

[3]李桂林.HTML5在WEB前端开发中的应用研究[J].计算机产品与流通.2020，（8）：19.

[4]杨雨佳.移动Web前端开发新技术HTML5探析[J].中国新通信.2019，（3）：19.

[5]于圣彬.基于HTML5技術下移动Web前端设计与开发的研究[J].中国新通信.2018，（4）：52.