网页艺术设计初探

周礼 湖南省株洲市职业技术学院信息工程系 412000

网页艺术设计初探

周礼 湖南省株洲市职业技术学院信息工程系 412000

从网页艺术设计中的原则、基础元素、版式设计和优秀网页具备的条件四个方面，对网页艺术设计领域进行初步的归纳总结和理论探讨。

网页艺术;网页元素;版式

随着Internet的不断发展，网络已经成为现代社会必不可少的重要组成部分，而网页作为信息发布的载体，人们关注的不仅仅是它的内容，网页的美观、生动、活泼、个性等艺术性方面逐渐成为了关注的焦点。人们对网页的视觉追求的永无止境，也正是推动网页设计向前发展的主要因素。

从发展趋势来看，网页设计会更加注重创意、个性和内容的高度统一。

一、网页艺术设计的原则

网页的艺术设计，是技术与艺术的结合，内容与形式的统一。网页作为传播信息的一种载体，由于表现形式、运行方式和社会功能的不同，网页设计有其自身的特殊规律，它要求设计者必须掌握以下三个主要原则：

1、主题鲜明

视觉设计表达的是一定的意图和要求，有明确的主题，并按照视觉心理规律和形式将主题主动地传达给观赏者。根据认知心理学的理论，较小而分立的信息要比较长而不分立的信息更为有效和容易浏览。这个规律蕴含在人们寻找信息和使用信息的实践活动中，它要求视觉设计者的设计活动必须自觉地掌握和遵从。

2、形式与内容统一

一方面，网页设计所追求的形式美，必须适合主题的需要，只讲花哨的表现形式以及过于强调“独特的设计风格”而脱离内容，或者只求内容而缺乏艺术的表现，网页设计都会变得空洞而无力。另一方面，要确保网页上的每一个元素都有存在的必要性，不要为了炫耀而使用冗余的技术。只有通过认真设计和充分的考虑来实现全面的功能并体现美感才能实现形式与内容的统一。

3、强调整体

在设计网页时，强调页面各组成部分的共性因素或者使诸部分共同含有某种形式特征，是求得整体的常用方法。这主要从版式、色彩、风格等方面入手。例如：在版式上，将页面中各视觉要素作通盘考虑，以周密的组织和精确的定位来获得页面的秩序感，即使运用“散”的结构，也是经过深思熟虑之后的决定；一个站点通常只使用两到三种标准色，并注意色彩搭配的和谐；对于分屏的长页面，不可设计完第一屏再考虑下一屏。同样，整个网页内部的页面，都应统一规划，统一风格，让浏览者体会到设计者完整的设计思想。

二、网页艺术设计的基础元素

组成网页信息的基础元素比较多，总结包括主要如下：文本、背景、按钮、图标、图像、表格、颜色、LOGO、音乐、影像等。目前如何将这些元素应用到网页供人们使用已经成为了简单操作，但是各种元素如何合理的搭配，才能使网页最具感染力和表现力，就成为了网页设计的重点和人们关注网页的首选，对网页的艺术设计提出了更高的要求。

1、颜色的设置

色调对网页具有绝对性影响。灰色调配色产生素雅的印象；鲜艳的色调配色产生健康活泼的印象；鲜艳的红色给人以活力；柔和的色调让人平静；明色调则使人心情愉悦。无论色相如何改变，这种基本印象是不会改变的。选择了与页面内容不相和谐的色调，会传递错误的信息，造成混乱。

2、图片的设置

最合适的主题图片具有强烈的信息性，能在一瞬间让人了解访问的网页是否与印象相同的就是图片。而其中又以能直接表现标题或网页信息的插图和照片最有说服力，它能够使访问者直接确认信息。例如龙、凤、鹤、龟等吉祥图片表现了喜庆的气氛，让人联想起新年、丰收、长寿的形象；现代的花环、桃心等是众人皆知的符号，便于传达欢迎的态度。在打开网页一瞬间，图像几乎与标题文字同时映入眼帘，观众对网页的印象也就被确定下来。

3、文字的设置

中文为了保证“方正”的造型，通常仅使用双数字号，比如最常用的12px和14px（少数字体的13px效果还行），因为这两种字号看起来最自然、协调。再往上16px,18px,20px也还行，但13px,17px类似的单数字号，可以看到效果明显的锯齿和失重感。文字大小的对比也会左右印象。标题文字的大小与正文之比叫做跳动率。以正文作为1倍，标题的大小用它的倍数来表示。第一面的大标题用大约7～8倍，号外新闻级别的则超过了10倍。体育新闻的标题经常使用10倍以上来构成。像这个例子一样，跳跃率的高低既表现了报道的重要等级，也是表现了热门的程度。跳动率越大，画面越活跃；反之，越稳重。

将标题的文字变大，粗细效果会加倍。例如，大而粗的文字最有精神。另一方面，将文字变小，粗细效果会减弱。虽然细而小的文字有优美的感觉，但如果使用细而大的文字，效果会更加明显。总之，文字越大，越能强化粗细的印象。

三、网页艺术设计的版式设计

所谓网页的版式设计，是在有限的屏幕空间上将视听多媒体元素进行有机的排列组合，将理性思维个性化的表现出来，是一种具有个人风格和艺术特色的视听传达方式。

网页版式的基本类型主要有骨骼型、满版型、分割型、中轴型、曲线型、倾斜型、对称型、焦点型、三角形、自由型十种。

1、骨骼型

网页版式的骨骼型是一种规范的、理性的分割方法，类似于报刊的版式。常见的骨骼有竖向通栏、双栏、三栏、四栏和横向的通栏、双栏、三栏和四栏等。这种版式给人以和谐、理性的美。

2、满版型

页面以图像充满整版。主要以图像为诉求点，也可将部分文字压置于图像之上。视觉传达效果直观而强烈。满版型给人以舒展、大方的感觉。

3、分割型

把整个页面分成上下或左右两部分，分别安排图片和文案。两个部分形成对比：有图片的部分感性而具活力，文案部分则理性而平静。倘若通过文字或图片将分割线虚化处理，就会产生自然和谐的效果。

4、中轴型

沿浏览器窗口的中轴将图片或文字作水平或垂直方向的排列。水平排列的页面给人稳定、平静、含蓄的感觉。垂直排列的页面给人以舒畅的感觉。

5、曲线型

图片、文字在页面上作曲线的分割或编排构成，产生韵律与节奏。

6、倾斜型

页面主题形象或多幅图片、文字作倾斜编排，形成不稳定感或强烈的动感，引人注目。

7、对称型

对称的页面给人稳定、严谨、庄重、理性的感受。对称分为绝对对称和相对对称。一般采用相对对称的手法，以避免呆板。

8、焦点型

焦点型的网页版式通过对视线的诱导，使页面具有强烈的视觉效果。焦点型分三种情况：

（1）中心：以对比强烈的图片或文字置于页面的视觉中心。

（2）向心：视觉元素引导浏览者视线向页面中心聚拢，就形成了一个向心的版式。向心版式是集中的、稳定的，是一种传统的手法。

（3）离心：视觉元素引导浏览者视线向外辐射，则形成一个离心的网页版式。离心版式是外向的、活泼的，更具现代感，运用时应注意避免凌乱。

9、三角形

网页各视觉元素呈三角形排列。正三角形（金字塔形）最具稳定性，倒三角形则产生动感。侧三角形构成一种均衡版式，既安定又有动感。

10、自由型

自由型的页面具有活泼、轻快的风格。

目前网页的布局设计越来越简单，“简单就是美”在一定程度上凸显，人们的眼睛不用在页面上转来转去拼命寻找想要的东西，同时在浏览过程中它也提供更加平和、稳定的浏览体验。内容在网页中心定位，尽可能在“一屏”以内显示更多的信息似乎是一直以来的至理名言。更多的留白和行高也越来越多人应用。

四、优秀网页具备的条件

给人留下好印象，让人赏心悦目的优秀网页一般具备6个条件。缺少任何一个都会使访问者对网页的印象一落千丈，使得初次访问者不愿再次光临。

1、标题明确

对于初次访问网站的读者来说，首要目的就是确认标题。那些晦涩难懂的标题会使难得光临的访问者感到不知所措。虽然我们以美观和与众不同为设计日标，但如果吸引不了访问者，这个网页的设计和建设也是没有意义的。过于个性化的表现，会使网站内容的公开性受到质疑。

2、内容与主题统一

让访问者第一眼就明了表达的内容的网页才是最优秀的。如果访问者对信息的种类、是趣味性的网页还是商业性的，以及行业类型等问题能够一目了然的话，他才能安心地继续访问，对网页的好感也会逐步增强。所以我们运用排版样式、图像、文字的造型以及配色类型等元素来准确传递信息。

3、导航清晰、准确

对于网页来说，最重要的就是信息内容。信息的品质与数量决定了人们对这个网页的评价高低。但首先要做到的是，怎样将读者顺利地引向信息内容。明确划分信息群，不让读者产生迷惑，使之迅速找到所需要的信息，是目录设计最重要的任务。目录的整理决定了网页的可读性。

4、 风格统一，整体性好

目前很多页面做得很花哨，但是非常不实用，例如采用很深的带有花哨图案的图片作为背景，严重干扰了浏览，获取信息很困难。同时有些还采用了颜色各异，风格不同的图片、文字、动画，使页面五彩缤纷。没有整体感觉，尽管有些页面内容不多，但是浏览起来仍然特别困难。

5、 创新性的视觉特色

网页设计中的误区就是千篇一律，缺乏自己的特色，当我们打开电脑，上网一看，好像哪个网站都是一样的。从标题的放置，按钮的编排到动画的采用都是如此。应该根据网站的定位，善于做创新性的视觉设计，让你的设计在同类网站中脱颖而出，让用户更喜欢。

6、 色彩协调

色彩给人心的心里感觉很直接，所以色彩使用要合理且大胆，突显网站主题与品调。

时代在进步，技术在更新，人们的审美观念也在不断变化，作为艺术与技术高度统一的网页设计将会对设计人员提出更高的要求与挑战，网页艺术设计也将更加具有魅力与多彩。

[1]刘肖冰.浅谈网页艺术设计.安阳师范学院学报.2005年05期

[2]傅晶.网站设计的艺术性与可用性[A]. 2004年工业设计国际会议论文集[C].2004年

[3]朱洪艳.浅谈网页艺术设计.中国校外教育.理论.2008年12期

10.3969/j.issn.1001-8972.2010.12.057

周礼 学历：本科 职称：助讲 研究方向：计算机。