浅谈新趋势下的网页艺术设计

陈伟

摘 要：网页艺术设计是随着计算机互联网络发展而形成的独有的视听设计伴生物，是网页设计者以现有所能获取的技术和艺术经验为基础，依照给定的设计目的和要求对网页的构成元素进行艺术规划的创造性思维活动，必然要成为设计艺术的重要组成部分，并随着网络技术的发展而发展。与传统的艺术设计相比，网页艺术设计的门槛更高，它是艺术与技术的完美结合。

关键词：网页；艺术；设计；

1 移动互联网时代，网页艺术设计的新趋向

网页艺术设计是随着计算机互联网络发展而形成的独有的视听设计伴生物，是网页设计者以现有所能获取的技术和艺术经验为基础，依照给定的设计目的和要求对网页的构成元素进行艺术规划的创造性思维活动，必然要成为设计艺术的重要组成部分，并随着网络技术的发展而发展。与传统的艺术设计相比，网页艺术设计的门槛更高，它是艺术与技术的完美结合。

随着互联网和移动终端的高度发展，新时期对网页设计师的技术要求近乎“苛刻”，在考虑配色、设计、交互性和响应速度的同时，还要考虑笔记本、台式电脑、智能手机、平板电脑等客户端设备以及各种各样的浏览器兼容性问题。艺术设计、功能技术、设备环境、浏览平台等诸多问题都对网页设计人员提出更高的要求。随着响应设计、持续联系和虚拟现实等新名词的出现，未来网页设计已经呈现出新的发展趋势

HTML5在国内外越来越受到互联网开发团队的青睐。随着CSS3+HTML5技术的应用范围越来越广，在动画和多媒体技术上的不段完善，CSS3+HTML5技术将会得到更广泛的应用。移动互联网时代来临之际，互联网战略要地从Web 端向Wap端转移，智能手机、iPad和上网本销量的不断攀升，意味着网页设计需要考虑更多移动终端用户。CSS3+HTML5技术迎合移动互联网时代，是Wap端开发必备利器。在使用CSS3的情况下，可以通过修改CSS文件来完成整个网站设计风格的修改，以符合用户使用不同设备浏览网页的需求。采用CSS+Javascript+JQuery 技术，可以实现更多网页特效，例如炫酷的3D旋转轮播图特效、时间轴特效、3D相册、悬浮菜单等。不仅如此，HTML5除了能实现更多的动画效果，还能实现音乐播放器等多媒体应用。此外，触屏设备的普及意味着网页设计师需要重新考虑流体布局和指尖导航的问题，让设计更加灵活，以应付各种挑战。

2 网页设计中的视觉传达设计

2.1 确立网站的设计风格

网站设计风格是一个抽象的概念，指的是网站在整体上给访问者带来的视觉体验，这种体验是通过网页中的内容、文字、色彩、图片、动画、多媒体等元素进行传达的。鲜明而又相对统一的设计风格可有效避免网站设计的过程变成一个单一的信息堆砌过程。不同的主题网站有着不同的设计思路，引起思想、情感、形式等各方面的不同。网站设计首先要对企业、产品、受众信息等进行全面的调研和综合分析，以明确网站合适的整体风格。那么，如何正确地为网站确立恰当的设计风格呢？我们在实际设计中，应事先做好网站策划统筹工作，按以下步骤进行：

首先，先明确网站的行业性质和受众群体，再根据行业性质和群体来选择相应的色彩和表现形式。如建筑行业，可选择金碧辉煌或现代感强烈的色彩以及复古或简明时尚的风格；食品行业，可选择各类鲜明的色彩以及杂志类的风格，以刺激味蕾食欲为目的；医疗行业，可选择蓝绿等環保色彩以及简洁的风格，当然女性专科医院可选择女性色彩；购物网站，可选择暖色调和灰色调搭配的色彩以及时尚大气的风格，刺激购买欲；儿童类站点，可采用糖果色调以及可爱活泼的风格，以亲近儿童、刺激互动为目的；IT行业，可选择蓝色调和灰色调为主基调以及简洁明快的风格；教育培训行业，可以采用明度较低的色调为主以及简明风格，主要需要考虑用户长期使用的疲劳问题……以此类推，不同行业，不同用户群体，所需要采用的设计风格不尽相同。如果企业自身拥有相应的VI系统，那么应以企业VI系统中的相关色彩和风格要求为主。

其次，根据企业的总体经营思路和整体风格，针对内容，依据辑思维进行筛选，合理进行版面规划，好比建筑设计中的平面规划，做到统筹兼顾。在总体布局的时候，应将企业经营思路中的创新策略放在突出显眼的位置上，重点体现。网站的策划应分清主次、逻辑清晰、主次有序，让用户能够顺畅的浏览、便捷的操作，形成良好的用户体验，提升用户的网站粘合度，引导用户成为网站的忠实粉丝。

再次，依据主题与内容的不同，采用恰当的艺术表达方式。例如，企业形象页面或者主题活动页面，可采用平面设计的创意思维，使用视觉冲击力强的色彩及图片，辅以相应的动画效果，使用Html5+Css3+JQuery技术实现用户交互体验。而资讯信息量大的网站，则需要从细节设计入手，在细微处下功夫，除了焦点图区域外，不宜大面积使用视觉冲击力强的色彩及图片，以免用户长时间浏览产生视觉疲劳，损害视力。一个优秀的设计必定是形式对内容的完美表现。正如黑格尔所说：“工艺的美就不在于要求实用品的外部造型、色彩、纹样去摹拟事物，再现现实，而在于使其外部形式传达和表现出一定的情绪、气氛、格调、风尚、趣味，使物质经由象征变成相似于精神生活的有关环境。”

最后，网页设计师应具有创新的意识，有针对性地让访问者通过网页获得不同的视觉体验和心理体验，迎合“小众”心理。在创新方面，设计师要具备善变的潜质。网络的世界日新月异，新的技术会带来新的变革，而且这些变革来得迅猛，这就给设计师提出更高的要求。设计师不仅要关注艺术领域，而且要时刻关注技术领域，通过艺术和技术的完美结合，才能不断推陈出新，改变传统，让自己的设计拥有生命力。

2.2 网页设计中的艺术创新

2.2.1 图形元素

图形元素具有强烈的艺术美感和视觉冲击力，是文字元素之外最早被引入到网页设计中的元素，它在传递信息方面的直观性远胜于文字。因此，将重要信息进行图形化处理，更能在第一时间吸引用户的关注。在进行图形设计过程中，网站的版式布局、色彩搭配、元素构成等都应符合大多数浏览者的审美心理和浏览习惯，以增加用户粘合度。一般而言，大面积的图形元素是用来宣传企业形象或者用来表达该网页所要体现的主题，而其他标题等细节处则宜使用小面积图形元素进行点缀。页面图形元素的运用不是越多越好，也不是冲击力越强越好，其大小搭配需要遵循一定的比例，细节处图形的色彩运用也应多采用灰色系及过渡色阶，这样才能使页面内容主次凸显，让用户能够一目了然地在短时间内浏览到自己所需要的信息，避免产生视觉疲劳。网页和平面中图形设计的一个重要不同点在于其像素和文件大小区别。在网页设计过程中，受到带宽的限制，为了满足用户顺畅浏览的要求，图形文件的分辨率应以72dpi为佳，存储为web和设备所用格式，文件大小应尽可能的压缩。

2.2.2 色彩元素

作为设计中不可或缺的元素，色彩建立在文字图形的基础上，通过眼睛所感觉的视觉冲击力对心理起作用。每一种颜色都有不同的心理暗示。冷色中的蓝色代表镇静和放松，暖色中的红色代表温暖和主动；过多的黑色会引起沮丧和消极情绪，适当的浅色则令人舒缓。不同色彩能够唤起人们的不同感知，同时色彩也是网页中最能够给予访问者视觉冲击力的设计元素，所以在网页艺术创新中，对色彩的运用作出创新是一个重要的突破口。色彩从色调、饱和度、明度三个方面影响着视觉感知，进而影响着网页设计风格。因此，我们可以根据行业性质和受众群体的不同来选择相应的色彩和表现形式。进行网页设计时，可以选择不同的方式进行色彩设计：（1）可通过调整透明度或饱和度来合理搭配单一色彩的应用。这种色彩的运用使页面看起来更统一，主次更分明。（2）适当地运用对比色，加强视觉冲击力。（3）使用同一色系的色彩，如蓝、绿的冷色调或者橙、红的暖色调等等。同色系的页面能令页面色彩更柔和协调。由于目前显示器大都采用RGB颜色标准，因而网页色彩模式一般采取RGB模式。

2.2.3 版面设计

网站设计中的版面设计就是在有限的屏幕空间中遵循视觉设计原则，把网页中各种元素进行合理的组合，个性化地表现理性思维，是同时具有个人风格和艺术特色的一种视听传达方式。版面设计虽然普遍遵循了平面设计的视觉传达方式，但还是有所不同。其中，企业形象宣传或者活动主题的网页设计，其设计方式与平面设计类似，色彩鲜明，追求创意和视觉冲击力，；而信息量大的页面或者用户操作界面则不能完全遵循平面设计的视觉传达方式。例如信息量大的页面中：根据人机心理学研究，人们浏览网页的习惯，是從屏幕中心向四周游动。因此，设计师要将网站所要体现的重要信息布局在注视点高的区域，并着重笔墨进行主题创意设计，主次分明的将网站的精髓理念和信息传达给用户。其他区域则采用小面积的图形元素和饱和度低的色彩与文字内容进行合理组合。

在界面设计中，合理的留白往往能够起到画龙点睛的作用。网页内的空间并不一定要充分地利用，合理的留白有时候也能够让访问者产生更好的浏览体验。通过留白，网页页面在视觉上会更加平衡，并突出虚实、轻重和动静的对比，使得页面生动起来。网页中的适当留白，使整个网页设计排布松弛有度。事实上，在视觉元素的周围留白能够让访问者视觉停顿，从而让访问者对留白部分的内容产生更多的关注度，这对于网页中强调某一重要信息具有很好的效果。

2.2.4 动态元素

网页中动态特效的运用大大丰富了网页艺术设计的表现力。利用多级空间、动态特效技术，在静态中寻求动势，在平面中力求立体。早期的动态元素的实现，网页设计师大多采用的是FLASH 或者GIF动画技术。随着互联网技术的深入发展，网页设计的HTML+CSS语言的发生了日新月异的变化。现在主流的动态特效大多通过Html5+CSS3+Javascript+JQuery技术来实现。如淘宝网的焦点图片切换效果、对联广告效果，TAB标签、动态导航菜单、图片3D翻转特效、表单按钮特效、分页特效、全屏广告、视频音频播放器等。值得一提的是，这一技术目前被大量应用到Wap移动终端网站的开发上。典型案例有淘宝APP，滴滴打车、微信等服务行业网站。

成功的网页应使用户接受并信任它。网页应该力求抓住而不是淹没浏览者的注意力，过多的闪烁、色彩、下拉菜单框、图片等会让访问者无所适从。因此，在网页艺术设计中，动态特效的使用应把握合理的度，恰当的才是最美的。

3 结语

伴随着互联网信息时代的发展，网页艺术设计必然成为一个新兴的艺术设计门类。“互联网+”概念的提出，特别是移动终端的高度发展，网页艺术设计进入越来越多人的视野，越来越多的行业需要通过网页艺术设计来提高企业知名度，推广他们的品牌，推销他们的产品。这给网页艺术设计的发展带来了新的契机，但同时也给网页艺术设计师提出了更高的要求。

参考文献：

[1] 张佳佳.论数字移动新媒体—手机媒体[J].现代装饰： 理论.2012（06）：157-158.

[2] 梁春燕，陈丽丽，许宪玲，等.浅析HTML5和CSS3的新交互特性[J].数字技术与应用.2012（04）：273.

[3] 曹世峰.浅析网页设计中视觉表现的多样性特征[J].美术教育研究.2011（11）：87.

[4] 涂杰.视知觉在网页设计中的表现[J].艺海.2010（02）：74.

[5] 孙晓娟.基于Web标准的网站布局的设计与实现[J].科技信息.2010（01）：44.

[6] 李安斌，曹巨江.新媒体时代的网页设计[J].艺术与设计： 理论.2009（09）：74-76.

[7] 张荣科，崔薇.新媒体与基于公众的科技传播之实践探析[J].科技传播.2009（02）：78-80.

[8] 周洁.网页设计之视觉流程浅析[J].美术大观.2009（01）：111.