基于HTML5的Web界面设计模式初探

邓威

摘要：建立在数字化环境下的Web界面设计是以网站为支撑、网页为承载的一种新颖设计。随着HTML5与CSS3等新技术的不断优化，涌现出很多新功能，进而导致Web界面设计模式从设计基础到设计范畴再到交互都有了更新。该文通过对比分析HTML5与CSS3对Web界面设计模式的影响，发现Web界面设计已经超越其原有的视觉设计这一单方面的特色，它逐渐与Web其他相关高科技融合在一起，开创了更多优化功能，使用户体验更加舒适。

关键词：HTML5；Web界面；设计模式；初探

中图分类号：TP393 文献标识码：A 文章编号：1009-3044（2018）33-0184-03

1 引言

随着科学技术的不断发展和网络的普及应用，Web界面设计朝着更加智能并且有趣的方向发展，其页面内容也趋于丰富化。2012年12月，Web网络平台的基石正式被确定为HTML5规范[1]，这种举措不单说明HTML5是传统PC的Web设计，而且表明其他所有的智能终端都有采用，为信息时代下的Web发展与应用提供了极其丰富的开发标准。

2 Web界面设计模式

2.1 Web界面设计基础

Web，全称为全球广域网，缩写为WWAN，同时又称为万维网，是一种跨平台的HTML和HTTP协议的分布式、全局且动态的图形信息系统[2]。Web界面设计是一种基于数字环境、网站和网页的新设计。根据人们对传统美学的一般理解，网页界面设计作为一种视觉表达手段而受到极大的重视。在Web界面设计中，忽略影响技术的种种复杂因素，则其设计中重要且关键的问题就归根于组织和创建网站的内容，比如如何使得页面内容布局新颖、颜色搭配符合大众审美，动画和视频酷炫且合理等。

随着HTML4向HTML5和CSS向CSS3的革新与换代，Web网页的功能已经远远超越内容的展示这一单一功能，它还可以与用户进行交互链接，吸收用户的反馈信息，更好地服务于大众用户，网页设计的新标准可以体现一个企业的成与败。互联网的特殊性使得Web网页界面设计趋于一种跨学科领域的知识综合体。为了给用户提供更美观、更舒适的用户体验效果，满足大众对Web界面的不同需求，有必要将计算机图形学、客户机和服务器技术、用户界面设计、人机交互、心理学以及社会学等融合在一起来设计Web界面[2]。

2.2 Web界面设计范畴

2.2.1 内容

网站的目的在于信息的传播，作用是设计传播途径，核心是如何将信息以用户最容易接收的方式呈现给用户。由于新时代下赋予Web的特殊意义，其内容已经超越我们传统定义的Web内容，它现今的内容更加趋于丰富化，不但有传统的文字、图形和动画，还有新时代下出现的超链接、交互操作、音视频以及网络游戏，甚至一个界面同时出现以上的综合，一个网站要想成功，其内容质量必须达标[3]。Web网页界面设计首先要满足用户对其内容和质量的要求，其次要给用户不同的审美感受，给予他们良好的视觉体验，这样能吸引首次访问该网页的新用户更多地关注站点；另外，当用户停留在某个地方或某个界面的时间较长时，说明用户对此感兴趣，Web界面设计中就要通过对用户浏览数据进行分析，进而给不同的用户自主提供他们感兴趣的内容，一切看起来都顺理成章。网页内容作为界面设计的一大模块，其最主要的要求就是页面显示良好，让用户可以在视觉上很享受，愿意继续通过它索引更多信息，因此，为了让用户用着舒心，Web界面设计时应该大量分析用户的浏览数据，结合有效的方法，利用这些数据更好地组织和規划用户的浏览信息，并为他们提供他们所感兴趣的或有用的推荐。

2.2.2 技术

技术和制度的完善是保障Web功能合理的基础。网络是信息从传统纸质媒体向互联网传播的载体，其媒介发生了深刻的变化。因此，Web技术出发点应该是互联网的基本特征。当下，互联网技术以惊人的速度快速发展，HTML、CSS和Java脚本等也以此为基点在以超乎想象的速度发展，这样的发展趋势迫使Web界面必须及时掌握和应用最新的技术来服务于广大用户[4]。Web界面的设计者应该始终关注技术领域的变化，并高度重视Web前端技术，实时以用户体验为设计动力。

2.2.3 交互

Web界面同样作为人机界面，与其他人机界面在PC操作体统、手机界面以及办公软件界面等都有很多共同之处。诸多科学家和其研究团队的专业人员往往愿意投很多时间和经历来观察和研究人们操作网络的行为，然后统计他们操作的数据，最终通过分析数据来评估用户的体验效果。应用软件、浏览网站或执行任务等人们普遍作用在电脑上的行为都是可以预期的，通常这些行为可以被作如下归纳：1）安全探索：网络的危害方面人人皆知，所以人们对网络也存在芥蒂之心，但是如果一个网站可以给用户安全感，则用户就会频繁使用该网站，并且每一步都会认可它；2）即时满足：人类的本性是追求结果型，总是迫切从开始看到结果，这体现在网页中就是人们喜欢快速从万千信息中找到自己所需要的；3）满意度：当人们看到一个全新的界面时，他们首先注重的往往不是对细节的浏览，而通常以最快的速度浏览整个界面大体内容，并在心里默默选择他们所需的目标元素，尽管有时它可能是一个错误的选择，但是用户的这种行为是确定的；4）习惯：当一个人重复使用一个接口时，一些常见的操作将演变为人类的反射动作。在习惯的支配下，用户在下次使用时就不会对这些操作考虑太多，直接点击使用或浏览；5）空间记忆：这个通常表现在人们使用物品或浏览文件时，无意识中记住他们的摆放位置或储存的文件夹，而不是通过记住他们的名字来找到它们；6）简化重复工作：在很多软件中，用户有时候需要重复某些操作来达到他们的目的。

网页上的功能模块性质的差异性是由于网站、功能和交互模式等的不同造成的，但人们往往没有注意到这些细节，在浏览网页中总会出现相同的浏览操作和交互，导致最终获取的内容信息也都雷同。因此，网页界面在设计中有必要根据页面的不同功能将所有模块分类出现，避免用户的重复操作。良好的设计规则将耦合的设计参数分类为模块并将其划分为任务，模块通过固定的数据接口相互作用。

2.3 Web界面设计模式

在CSS和HTML中，设计模式通常是指多个浏览器和屏幕阅读器的一组通用功能，可以被系统地应用到HTML和CSS页面的设计和开发中，这样的设计模式在软件编程中是非常成功，它们大大提高了网页设计和开发的速率，并在创新方面也得到提升，同时还简化了编写代码的冗长和复杂[5]。设计模式是基础。所有的创造力都来源于它，这就好比循环利用的算法可以通过简单参数的修改或边界条件的调整就可以预期通过系统的修改和组合来生成。设计模式可以显著提高效率和创新，它的单独应用也会快速产生出其不意的效果，更何况它还可以被嵌入其他模块来组合使用，那样结果更是纷繁复杂。针对设计模式的简化会大大丰富整个创作过程，致使创造性的工作宛如塔楼般简单可控，仅仅通过简单的选择适当修改和组合的预定义设计模式就可以得到用户想要的结果。

3 HTML5与Web界面设计模式

Web界面设计不同于传统纸质媒体和影视设计，他是通过HTML、CSS和Java脚本这三个关键技术来实现的，其中HTML作为结构的核心部分起着至关重要的作用。

3.1 HTML5的新特性

随着时代的进步，网络的更新换代速度甚是惊人，创造性的网站日新月异，每天都给用户带来不一样的体验。鉴于HTML边界对网络的影响长达10年之久，HTML4开创者们认为其在Web界面模式设计中扮演着重要角色，因此愿意注入大量的心血和资金不断寻找新的技术来为广大用户提供更为强大的功能，但目前在语言标记和浏览器的不兼容等方面还存在弊端。然而，HTML5引入了一系列的新功能，比如表单控件、应用程序接口（API）、多媒体、结构化和语义等[6]，这些新特性主要体现在新标记、新绘图画布模式、新应用程序接口、新多媒体方式、新文档结构变化与智能表单以及新的HTML单元和属性，HTML5引入的一整套全新的元素使得构建Web界面变得更加轻松可行，大大简化了设计者的负担。

3.2 HTML5对Web界面设计的影响

HTML5对Web界面设计的主要影响之一是HTML语义标注[7]。DIV标签是传统意义上的设计，但HTML5改变了这样的标签，使用大量语义结构的代码标签，这种语义大大减少了传统所用的CSS调用的类和ID属性，对网页质量和语义都带来质的飞跃，为设计的后续工作带来便利。

3.3 CSS3对Web界面设计的影响

HTML5的语义结构对应于CSS3的出现。具有新特点的CSS3为网页设计者们提供了很多优化网页的新思路。因为CSS3具有丰富的动画功能，这就可以为网页的交互模式中增加趣味，伴随着第三方动画图书馆的萌生，Web界面内容更是达到前所未有的极致[8]。基于HTML5和CSS3技术的Web界面设计内容已经不再拘泥于JS操作DOM。

3.4 基于HTML5的Web界面设计模式

基于以上新技术，可以在传统的Web界面设计的模式之上，进一步发挥技术水平，比如提高Web的可用性和提高用户的舒适体验值[9]；利用CSS3动画使网页界面设计更加生动有趣，吸引用户的眼球，使用户在不知不觉中就增加了用户体验，这样可以为后续的优化提供更多可依靠数据；对于站点，HTML5新的语义标注更有助于搜索引擎的使用，通过联想词汇为用户更快的提过所需，以不同的形式来缩短用户的搜索时间，最快达到用户的搜索目标，另外呈现用户的目标可以采用图片视频，也可以采用媒体，总之就是为用户提供最快捷的服务，并具有良好的可移植性[10]。

4 结论

总而言之，HTML5在技术层面为Web界面设计模式增加了新的功能和方法，这一新技术突破了传统Web界面设计的框架，使其设计模式进入了一个全新的领域。网络界面设计的新模式和新思路将在未来一段时期内迅速涌现并且持续很长时间。随着十九大对创新的重视，Web界面设计模式也将更加依赖于技术的创新方面，逐渐用有趣的交互动画取而代之传统的静态界面。Web界面设计模式也将从单一页面的可视化设计向功能模块化的方向转变。目前，基于移动终端的Web应用正在兴起，基于移动终端的Web界面设计模式日趋成熟和稳定，该移动终端具有有限的显示界面和有限的视觉显示效果。传统的基于视觉效果的Web界面设计模式不再适用于当下用户的需求。在设计领域，我们与Web前端技术有更多的技术集成，更注重用户体验。Web界面设计的主要目的是在浏览Web时满足人们良好的交互体验，它是艺术与技术融合的产物。Web界面设计模式将从技术层面上得到更大的提升和发展。

参考文献：

[1] 陈梅，高斐，苏晨.基于HTML5的Web界面设计模式初探[J].电脑知识与技术，2017，13（31）：89 -90+107.

[2] 姬翔，华庆一，李娟妮，等.基于界面设计模式的界面开发工具综述[J].计算机应用研究，2016， 33（10）：2889-2894.

[3] 姚芳，万建成，冯仕红.基于模型的参数化界面设计模式[J].北京工商大学学报（自然科学版）， 2008（2）：70-74.

[4] 罗云飞.人机界面设计方法的模式初探[A].湖北省机械工程学会、中国机械工程学会湖北工业设计研究所、武汉科技大学、湖北科技大学.2005年工业设计国际会议论文集[C].湖北省机械工程学会、中国机械工程学会湖北工业设计研究所、武汉科技大学、湖北科技大学，2005：4.

[5] 蔡奎，卢雷，王帅强，等.基于Web界面设计模式的复杂行为建模及其代码生成方法[J].计算机应用，2009，29（04）：1139-1142.

[6] 黄悦深.基于HTML5的移动Web App开发[J].图书馆杂志，2014，33（7）：72-77.

[7] 刘华星，杨庚.HTML5——下一代Web开发标准研究[J].计算机技术与发展，2011，21（8）：54-58+62.

[8] 李慧云，何震苇，李丽，陆钢.HTML5技术与应用模式研究[J].电信科学，2012，28（5）：24-29.

[9] 馬新强，孙兆，袁哲，迟凤利.Web标准与HTML5的核心技术研究[J].重庆文理学院学报（自然科学版），2010，29（6）：61-64+74.

[10] 刘天寅.HTML5与未来的WEB应用平台[J].阴山学刊（自然科学），2010，24（2）：86-90.

【通联编辑：代影】