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

2017-12-11 10:42陈梅高斐苏晨

电脑知识与技术 2017年31期

陈梅　高斐　苏晨

摘要：Web界面设计，是建立在数字化环境下，以网站为依托，以网页为载体的一种新型设计。随着HTML5与CSS3新技术新功能的扩充，Web界面设计模式从内容到交互都有了更多的改变，该文从HTML5与CSS3新技术的角度分析探讨新技术对Web界面设计模式的影响与改善，指出Web界面设计已从原来视觉设计这一领域，与Web前端技术进行了更多的技术融合，更多的关注用户体验。

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

中图分类号：TP393 文献标识码：A 文章编号：1009-3044（2017）31-0089-02

1 Web界面设计模式

1.1 Web界面设计

Web即全球广域网，也称为万维网，它是一种HTML和HTTP协议的、全球性的、动态交互的、跨平台的分布式图形信息系统。Web界面设计，是建立在数字化环境下，以网站为依托，以网页为载体的一种新型设计。根据人们对传统美学普遍认识，Web界面设计一直被强调为视觉上的表现手段，如果不计算技术的因素，Web界面设计中重要的问题往往是如何组织和创建Web站点的内容。例如，新颖的布局，靓丽的色彩，炫酷的动画等。

随着HTML4进化到HTML5、CSS进化到CSS3，网页不再仅仅是内容的展示，同样还承载着与用户沟通交流得到互动环节，是否带来商业方面的成功也成为衡量Web设计作用的标准。因为互联网的特殊性，Web界面设计变成了跨学科，跨领域知识的综合体。为了实现更好的Web界面设计，需要运用计算机图形学、程序设计、客户机/服务器技术、用户界面设计、人机互动关系、心理学、社会学等诸多方面的知识，为用户提供更加便捷与美观的网页界面。

1.2 Web界面设计涉及范围

1.2.1 内容

网站的本质在于信息的传播以及如何传播，问题集中在怎样引导用户。由于Web的特殊性，内容已经脱离我们传统的定义，它可以包括：文字，图形，超链接，交互操作，动画，视频，音频，在线游戏甚至更多的混合型的组织形式，拥有高质量的内容是网站成功的关键。Web界面设计一方面为了满足视觉体验，带给客户不同以往的美学感受，可以吸引第一次访问的客户更加关注站点，另一方面当用户在某个地方停留下来后，用户感兴趣的就是信息。内容，作为界面设计的一部分，既要良好的展现，又要方便用户快速获取。因此，Web界面设计的最基本原则是通过有效的方法更好的组织和规划用户所能浏览到的信息，为用户提供方便阅读的浏览页面，获得用户的好感。

1.2.2 技术

技术的完善与系统是保证合理功能的基础。Web是由传统纸媒进化到互联网的信息载体，其传播媒介已经发生了彻底的变化，因此要从互联网的根本特性出发进行设计。目前互联网技术的更新迭代非常迅速，HTML，CSS，JavaScript等都在以超乎想象的速度发展。因此优秀的Web界面一定是及时把握并应用最新的技术，设计师作为Web界面的设计者，应该时常关注技术领域的变化，保持对Web前端技术较高的关注度。

1.2.3 交互

Web界面作为人机交互界面，与其他的人机交互界面如PC操作系統界面、手机界面、办公软件界面等有很多相似的地方，但也有其独有的一些特点。认知科学家和其他研究人员，花费了数百小时，对人们操作网站的行为，进行了仔细观察和认真研究，以及他们自己怎样评估自己的行为，通过这些研究发现，人们在使用软件、操作网站或执行其他任何希望在新软件中支持的动作时，用户的行为是可以预期的。这些行为包括：

第一，安全探索：如果一个人觉得他可以在一个界面上进行探索而不会产生可怕的后果，他会对这个界面更加肯定。第二，即时满足：人们喜欢立刻从他们的行为看到结果，这是人类的天性。第三，满意即可：当人们看到一个新的界面时，他们不会仔细审视每个细节，而是会快速扫描这个界面，挑选他预期会达到目的元素进行操作，尽管有时可能是个错误的选择。第四，习惯：当一个人重复使用某个界面时，一些常用的操作将演变成为人的反射性动作。用户不需要对这些操作进行过多的思考，他们已经养成了习惯。第五，空间记忆：当人们使用东西或文档时，他们经常通过回忆它们的位置来再次找到它们，而不是它们的名字。第六，简化重复工作：在很多软件中，用户有时候需要重复某些操作。

不同的网站，功能不同，交互方式不同，页面上的功能模块也不尽相同，人们在浏览类型相似的网站，通常对网站的操作流程与交互习惯也会按照一定模式来进行。因此可以根据页面的功能，在网站制作之初，根据功能，制定一个设计规则，所有的模块都在这个规则下进行设计。良好的设计规则，会把耦合密集的设计参数进行归类作为一个模块，并以此划分工作任务。而模块之间彼此通过一个固定的数据接口进行交互。

1.3 Web界面设计模式

设计模式已经在软件编程中得到了非常成功的应用，在CSS和HTML中，设计模式是指一组适用于多种浏览器和屏幕阅读器的常用功能，利用它可以系统地应用到HTML和CSS网页设计和开发中。它们提高了网页设计和开发的生产力、创造性和效率，并且大大降低了代码的复杂性。

设计模式是所有创意的基础，它们类似于可重用的算法，可以通过系统地修改和相互组合来产生预期结果。设计模式能够显著提升创造力和生产力。它可以单独使用，快速产生一些结果；也可以与其他模式相结合，产生一些复杂结果。设计模式简化和丰富了创造过程。它们将创造性工作变得像塔积木一样容易。选择一些预定义的设计模式，进行适当的修改和组合，就可以得到符合要求的结果。

2 HTML5与Web界面设计模式

Web界面设计，不同与传统纸媒、影视的设计，Web界面的是通过HTML、CSS、JavaScript这三项关键技术来实现的，其中，HTML作为结构部分，起到了至关重要的作用。

2.1 HTML5对Web界面设计的影响

HTML5对Web界面设计的影响主要表现之一是HTML语义化标签，HTML5 可以让很多更语义化的结构化代码标签代替大量的无意义的 div 标签。这种语义化的特性不仅提升了网页的质量和语义，并且减少了以前用于CSS调用的class和id 属性。

HTML5常用结构标签：

< figure>