网页设计是意义深远的新兴设计领域。网页设计吸收了其他设计学科的设计方法,以及非设计学科的技术特征,形成一种以图形用户界面设计和交互设计为特点的设计系统。
1990年,欧洲核物理研究中心的英国物理学家和互联网先驱T.伯纳斯-李[注]创建了世界上第一个网络浏览器,称之为World Wide Web。该浏览器也是一个简单的所见即所得的网页编辑器。后来为了避免与万维网(WWW)混淆,将浏览器更名为Nexus。
以图形用户界面设计和交互设计为特点所制定的方案方法。
网页设计是意义深远的新兴设计领域。网页设计吸收了其他设计学科的设计方法,以及非设计学科的技术特征,形成一种以图形用户界面设计和交互设计为特点的设计系统。
1990年,欧洲核物理研究中心的英国物理学家和互联网先驱T.伯纳斯-李[注]创建了世界上第一个网络浏览器,称之为World Wide Web。该浏览器也是一个简单的所见即所得的网页编辑器。后来为了避免与万维网(WWW)混淆,将浏览器更名为Nexus。
1991年,伯纳斯-李创建了世界上第一个网站http://info.cern.ch/hypertext/WWW/TheProject.html,网页上只有垂直结构的文本以及带有蓝色下划线的链接,几乎没有图片。1993年,伊利诺伊大学的学生M.安德森[注]等人开发了Mosaic(全名NCSA Mosaic)浏览器,它可以在Windows等平台上工作,这是第一个允许开发人员将图像添加到其网页的网页浏览器。1994年,伯纳斯-李建立了国际组织万维网联盟(World Wide Web Consortium; W3C),其主要目标是为开发网站制定标准,例如,该组织为HTML、XHML、XML或CSS标记语言设置了开发标准。20世纪90年代中期,网页设计使用框架、表格以及图像,开始变得复杂。JavaScript的出现帮助设计人员克服了静态HTML的局限性,使网页设计进入交互设计时代。90年代后期Macromedia Flash 5.0和ActionScript 1.0的出现使设计人员可以自由地将音乐、视频和动画融合到网站中,创建复杂的网络应用程序或更复杂的动画,从而为用户提供更加动态的视听交互体验。与此同时,层叠样式表的诞生将内容与前端呈现分开,外观和格式由CSS定义,而内容在HTML中设置。这给设计师带来了前所未有的灵活性,他们可以自由控制网站并对外观进行设计。1997年,专业术语动态HTML(DHTML)随着Internet Explorer 4.0的发布被引入,它是指将HTML、CSS和JavaScript技术组合以增强网站的交互性和动态。1998年开始W3C开发的可伸缩矢量图形是基于XML标记语言的图形矢量文件格式,自2001年成为网页上矢量图形的基本开放格式,目前所有主要浏览器都完全支持SVG格式。
21世纪初,更好的网络传输速度、更快的处理器、更高的屏幕分辨率,为设计人员带来了新的机遇,高分辨率图形和动画在网页上越来越普及。随着苹果iPhone的发布彻底改变了人们进入互联网的方式,移动端网站的可访问性成为设计师的首要任务,响应式网页设计随之出现。2010年网页设计师E.马科特[注]发表了题为《响应式网页设计》的文章,介绍了一种样式化HTML文档的新方法,该方法可以根据不同显示屏幕的分辨率或大小优化网站内容,以最适合的视觉呈现显示在不同设备屏幕上。基本的响应式网页设计技术包括流体网格,灵活的图像和CSS3模块媒体查询。2012年W3C发布了有关媒体查询规范的官方建议,它允许根据诸如屏幕分辨率或大小等各种因素进行自适应的网页渲染。
一个网站并非固定的实体,作为用户交互的载体,网页依据用户操作媒介的变化而不断变动。设计良好的网页可以吸引用户的兴趣,易于阅读,并以清晰、有条理的方式展示其内容,网页设计的重要性毋庸置疑。最早的网页内容主要是研究人员撰写的文章,重要的是内容和链接,不是特别注重图形用户界面的设计。随着20世纪90年代中期商业网站的广泛使用,专业设计师加入网页设计工作,早期网页多为连续性文本内容,这种阅读体验给读者带来了负担,设计师关注网站的可读性和吸引力:将网页内容分成更多页面,页面包括用于导航的菜单;通过图片发挥重要作用,采用列表和表格有效组织信息;开始使用动画元素,包括早期的GIF图像和完全建立在Flash上的网站。总之,21世纪初开始的网页创建不仅涉及网页开发技术,还涉及视觉设计方面的专业知识。例如自1998年开始的CSS2,它采用将网页外观和内容分离的设计原理,使页面创建者可以更好地控制每个元素的位置和外观。
在设计风格方面拟物化设计(Skeuomorphic Design)、扁平化设计(Flat Design)以及材料设计(Material Design)三类风格一起成为网页设计的主要视觉趋势。21世纪10年代初期设计风格以拟物化设计为主,这是将对象的物理视觉特征整合到数字设计中的做法,通过模拟真实世界物体的纹理、灯光和颜色等,为用户创建一种熟悉感。2010年微软推出的扁平化设计强调了抽象、极简和符号化,设计视觉上表现为鲜艳的色彩,清晰的边缘和二维插图,从而让“信息”本身作为核心被凸显出来。2014年谷歌公司推出材料设计图形样式,谷歌将其定义为一种“将优秀设计的经典原理与创新以及技术和科学的可能性综合在一起的视觉语言”。
在网页设计概念方面出现的相关理论大致如下。1999年网站设计和网站可用性专家J.尼尔森[注]发表了《设计网站可用性:简单实践》,这本书成为网站可用性和用户体验设计领域的基本手册之一。1999年D.迪尼奇[注]发表了题为《碎片化的未来》的文章,首次引入术语Web 2.0,意指网站的内容主要由用户自己创建和共享。典型的Web 2.0示例包括社交网站,Web论坛,互联网百科全书或照片与视频共享门户。2004年,T.奥莱利[注]和D.多尔蒂[注]举行了首届Web 2.0会议。2000年用户体验设计师和信息架构师S.克鲁格[注]出版了《别让我思考》,该书涉及网络可用性和人机交互的跨学科领域。克鲁格提出网站应该让用户以尽可能简单的方式执行其预期任务,而不必费心思考如何执行。2002年美国著名交互设计专家J.J.加瑞特[注]在《用户体验的要素》中阐述了用户体验五要素的经典模型,分别是战略层、范围层、结构层、框架层与表现层。其中战略层是根据调研设定用户需求和产品目标;范围层是根据战略层的结果,明确网站的内容需求和功能规格;结构层、框架层就是信息构架与交互设计,体现为信息设计和界面设计,这与网站的可用性、易用性等相关的规范化设计密切相关;表现层核心是基于视觉心理学的图形用户界面设计,也是用户最终所见的视觉内容。用户体验每一层级之间不是封闭的单向因果关系,而是将内容、功能和美学汇集完成产生网站整体设计。2003年,网页设计师J.费尔德曼[注]出版了《使用Web标准进行设计》,指出网页设计人员正确使用网页设计标准有利于创建访问性与用户友好的网站,并确保网站在各种浏览器中均可正常运行。
互联网已经渗透到我们生活中的各个层面。网站内容既丰富又全面,满足了不同需求的用户。当网络作为第四媒体逐渐走向成熟和完善的时候,网页设计行业已逐步脱离了传统设计的范畴,形成特殊而独立的体系。它改变了设计师与观众的关系,扩展了对平面设计原有的定义,大大扩展了设计创作和展示空间,丰富了设计的手段,让平面设计从传统的静态式、单向式、平面式的表现形态跨越为动态的、多向的、立体交互式的全新视觉形态。同时这一现象也表明,我们对网页的视觉审美以及网站功能应用等多个方面的认知达到了新的高度。
技术变化和设计师经验的积累推动了网页设计的进步,前端和后端之间的间隙逐渐缩小,网页设计受到的技术限制越来越少。网页设计的未来不再是可以做什么,而是应该做什么。当前越来越多的网页设计师倾向关注移动设备上的网页设计,交互设计元素满足移动端的触屏交互。同时,由于全屏视频背景,动画和交互式导航的日益普及,浏览网站已成为一种多感官的体验,作为设计师要考虑如何满足当前的用户需求,设计出能够为用户带来深度体验、让用户积极参与的网站。