网页艺术设计

1、网页艺术设计第一章 网页艺术设计概论一、网页设计的发展趋势网络已经不断演进并成为现代社会不可缺少的一部分，尽管网页设计会以人们意想不到的方式发生变化，可是我们有理由相信，人们对网页的视觉追求永无止境，这正是推动网页设计向前发展的主要因素。从发展趋势来看，网页设计会更加注重网页的创意和个性化。1、网页创意网页设计中的创意主要体现在设计观念、设计方法、设计元素等方面。创意是通过形象转换、元素转换、空间转换等方法构造新的视觉形式，并由此产生不同的意境。2、网页的图形网页中的图形创意分抽象类和具象类两种。抽象类图形是通过点、线、面等视觉元素在一定的版面空间范围内有间隔地反复组合形成图形。它以连续、渐变

2、、大小、长短、明暗、高低等变化手法来构成。同一视觉元素的反复出现，可构成视觉认知中虚实、强弱的对比，形成轻、重、缓、急的趋势，从而使人感觉到节奏的存在。3、个性化网页网页设计特别需要具有个性，不能忍受雷同。设计风格的形成不是偶然的，它是知识和智慧的必然结晶，也是设计本身的需要。设计风格的形成离不开设计元素、设计方法、设计个性。每一次设计的新“变化”都源于设计师对设计元素与设计方法的新发现或新理解。网页个性化已成为当今网页设计的新标准。在网页设计中倡导网页设计风格，有利于网页的差异识别。优秀主页具备的六个条件满足6个条件就会给人留下好印象让人赏心悦目的优秀主页要具备6个条件。满足这些条件并不困难

3、，任何人都能做到。具备了这些条件，就能做出令人满意的优秀主页。其中，4个是必要条什，2个是附加条件。4个必要条件使人产生信赖感以下4个条件是最基本的必要条件。虽然我们认为每一个条件都必不可少，但在实际应用中，所有条件都完备的主页是很少见的。然而在这4个条件中，缺少任何一个都会使访问者对网页的印象一落千丈，使得初次访问者不愿再次光临。条件1明示标题对于初次访问网站的读者来说，首要目的就是确认标题。那些晦涩难懂的标题会使难得光临的访问者感到不知所措。虽然我们以美观和与众不同为设计日标，但如果吸引不了访问者，这个网页的设计和建设也是没有意义的。过于个性化的表现，会使网站内容的公开性受到质疑。条件2明

4、示信息让访问者第一眼就明了表达的内容的网页才是最优秀的。如果访问者对信息的种类、是趣味性的网页还是商业性的，以及行业类型等问题能够一目了然的话，他才能安心地继续访问，对网页的好感也会逐步增强。所以我们运用排版样式、图像、文字的造型以及配色类型等元素来准确传递信息。条件4整理目录信息对于网页来说，最重要的就是信息内容。信息的品质与数量决定了人们对这个网页的评价高低。但首先要做到的是，怎样将读者顺利地引向信息内容。明确划分信息群，不让读者产生迷惑，使之迅速找到所需要的信息，是目录设计最重要的任务。目录的整理决定了网页的可读性。条件5传达信任感4个必要条件之中，最难掌握的就是条件。但如果我们站在访问

5、者的立场上，就很容易理解它了。举个例子：如果配色强烈的航空公司主页上排列着许多模糊不清的百货公司的照片，它自然不会拥有许多观众。因为画面的造型性太低会使整个主页失去信任感。2个附加条件增强效果在4个必要条件之外，还有2个附加条件。表现欢迎态度：传达欢迎的心情，给人感觉良好。加强说服力：给访问者留下深刻、强烈的印象。加上这两个条件，就能设计出更有竞争力的网页，但请注意，这两个条件不是绝对的。必要条件占优先地位有时过于强调附加条件，反而使必要条件失去作用。例如，为了强化说服力而使用强烈的配色，虽然加深了印象，却削弱了标题和信息性，对条件和条件产生了负面作用。第一部分 首页的三个构成空间画面空间空间

6、的作用1、标题空间 明示标题（标题如同商店引人注目的招牌，要清楚，明确的表示出来，让访问者毫不犹豫、放心大胆的进入）2、欢迎空间 明示信息、表现欢迎态度（是被标题吸引进来的人在进入目录信息之前歇歇脚、休息一下的地方，相当于网页的玄关。在确认主页内容的同时，希望能够传达欢迎态度。）3、目录信息空间 整理目录信息（访问者希望能够总揽主页的全部信息，所以对大量信息的整理归纳、发掘共同点等为使网页更加引人入胜而下的工夫都是十分必要的。当然，最重要的是要让访问者感觉到这是你为他着想而做的整理。）4、画面整体 传达信任感、加强说服力检索型首页这是典型的关于国际新闻的新闻检索型页面。刚劲有力的标题传达出强烈

7、的可信度。舒服的对称式这是与上图相对的印象主体型主页。对目录信息进行控制的同时扩大欢迎空间，传递出欢乐和亲切的感觉。I、标题空间（必要条件1明示标题）标题就是商店的招牌和住宅的门牌。如同门牌的位置要固定一样，标题也有一定的位置。为了使初次访问者不会产生迷惑，它通常位于页面的上端或中央。写在哪、怎么写以及对题目本身的探讨暂且不论，为了使访问者安心，标题一定要清楚明确地表示出来。1、标题应有的强度与其他文字相比，标题的字号大一些、粗一点为宜。再加上鲜艳的色彩，标题就具有了适当的强度，画面整体的安定感也随之产生，访问者也能够放心查看了。2、与网页风格相和谐的标题优秀的设计使人第一眼就关注到标题。但是

8、如果过度放大标题也是一种失败，应该选择与主页风格相和谐的字号、粗细及配色。A、大小、粗细要与标题相称1、 越大、越粗、越有力量若要明确的表示标题，就要将标题文字放大、加粗，使其更醒目。在大小相同的情况下，加粗文字也能产生强化效果。作出几种大小、粗细不同的样例，看看哪一种文字最有吸引力，以找到完美的型号。2、 检查一下标题字号是否太小小巧的字体显得格凋高雅，所以在以创建高品位网站为目标的主页设计过程中，标题常常有缩小的倾向。字体缩小的程度是否合适，还需重新验证标题大小是否与最初的想法一致，再次确认不会使初次访问者产生困惑。3、 大小合适是最重要的标题对页面整体的平衡效果非常重要。无视周围内容而将

9、标题一味放大，就会显得庸俗；页面周围空间全部用白色填充的话，就会给人一种信息量少的印象；在希望突出格调的页面上，字型过大，就会显得过于活跃而内敛不足。所以应该选择与页面风格最相匹配的字号。即使是同样大小的字，粗细的变化也会在很大程度上改变印象。B、通过高色价明示标题1、 鲜艳的色彩能够强化标题需要强化标题的时候，鲜艳的色彩不可或缺。同样大小、粗细的文字，若换成鲜艳的颜色，强度马上就会增加。当基于特定风格的要求而不得不将文字缩小时，鲜艳的彩色能够有效的保持文字的强度，使标题得到强化，效果清晰，引人注目。2、 强调主体性将标题加上鲜艳的颜色，视线就会集中在那里。正如舞台上突出主角能够使观众感到安心

10、一样，将标题作为主体进行适当的强化，能够保持页面的稳定感；反之，如果辅助部分，如按钮或下划线的颜色过于鲜艳，以至强过标题部分，就会使整体画面显的松散混乱。3、 所谓高色阶，是指鲜艳和耀眼的颜色色彩越鲜艳、纯度越高，色阶就越高。相对的，与白色及黑色越接近纯度越低色阶也越低。另一方面，如果几种低纯度颜色之间的对比较强烈，色阶也会提高。例如黑和白的组合，虽然两方纯度都为0，但由于明度差最大，色阶也高。C、通过宽阔的领地衬托标题1、 宽阔的领地起到强化标题的作用标题周围如果有大面积空白，标题的印象就会显得更加强烈。将文字和图像等视觉要素从标题周围移开，代之以空白，这块地方就叫做标题的领地。在标题的大小

11、和配色都不变的情况下，仅仅通过扩展领地，也能达到强化标题印象的作用。2、 通过扩展领地来强化弱效的标题标题的领地是指将标题周围的图像和文字移远而得到的空白部分。空白的部分为标题的支配空间，也就是我们所说的领地。领地越广阔，标题越醒目，主体性也就越强。表现都市、女性形象时，不便于使用效果强烈和色彩鲜艳的文字，这个时候就要开拓足够的领地，使小而弱的标题文字也能具有强烈且醒目的效果。用广阔的领地传递优雅风格的同时，小字也与标题相搭配。II、欢迎空间必要条件2明示信息标题与目录信息之间的部分是欢迎空间。这个空间是访问者被标题吸引进来后，看到目录信息前喘口气的休息场所。以餐厅为例，这里就是客人开门进来之

12、后、被带到餐桌之前等候的地方。欢迎空间的两个作用：1、标明信息进入欢迎空间的人，会查明这里是否有与标题相同的信息。访问者会在欢迎空间再次确认自己先前从标题中得到的主页的大体印象。如果与预想的相反，访问者就会变得不安而急于返回了。欢迎空间是再次确认信息和获得安心感的地方。2、表达欢迎的态度欢迎空间是在信息再确认的同时，进入目录信息前，能够得到放松的地方。这里应该是欢迎访问者，使他们感觉良好、心情愉快的地方。表达欢迎的方法多种多样，选择一个与主页特性相符的类型是最重要的。另一方面，在以检索为主体的页面中，有限度的表现欢迎是较为合适的。A、利用排版样式传递信息1、 排版样式是不说话的口信即使图像与信

13、息内容完全相同，排版样式的改变也会创造出两个完全不同的主页。如下图，版式采取对称型或是检索型所传递出来的信息是完全不同的：采用对称样式进行排版，页面格调高雅；采用检索型的左右对齐样式则给人带来信息丰富、热门的印象。版式对主页的影响不同于图片或标语，它的效果是平静的，安稳的，但不知不觉中准确的传递了信息。2、 慎重选择排版样式如果选择了与主页形象大相径庭的版式，那么有可能在一瞬间失去访问者。例如，本页中的三组图样是两两内容相同的主页，但是产生的印象却是截然不同的。这个差别就是排版样式的作用。当希望得到更多信息的人看到左图时，恐怕要失望而回了；而想见到轻松画面的人看到右图，也会希望落空。无论多么优

14、秀的内容，若选错了版式，都会使整体努力落空。B、利用图片传递信息1、 图片具有强烈的信息性能在一瞬间让人了解访问的主页是否与印象相同的就是图片。而其中又以能直接表现标题或主页信息的插图和照片最有说服力，它能够使访问者直接确认信息。传递信息的视觉要素包括文字、色彩、形状和版式等等。其中图像的作用是决定性的。在打开主页一瞬间，图像几乎与标题文字同时映入眼帘，观众对主页的印象也就被确定下来。2、看图的一瞬间，信息就被确定下来寻找最合适的主题：下面介绍的cat world的照片，单看起来猫的照片效果很一般，但是当它被放在画面中心的时候，就不可思议的变得栩栩如生，光彩照人，这就是标题与内容的互动造成的效

15、果。如果选择了与标题相配的主题，整个主页就生动起来。C、利用配色传递信息1、 色调与色相决定整体印象配色决定整体印象。在配色中最基本的要素是色调和色相请参看下图的饭店主页，比较一下配色效果。绿色庭院的美丽和安静展现了饭店环境的高雅格调。主页中最引人注目的是上端的9幅插图，使用了华丽多彩的表现手法。这种配色的特征就是“明色调”和“全色相型”。利用这种组合，充分表现出随意、自由的情趣。如果选错了色调或选错了色相，这种乐趣就无法表现出来了。2、 错误的色调选择会破坏一切色调对主页具有绝对性影响。灰色调配色产生素雅的印象；鲜艳的色调配色产生健康活泼的印象。无论色相如何改变，这种基本印象是不会改变的。选

16、择了与主页内容不相和谐的色调，会传递错误的信息，造成混乱。辅助条件3表示欢迎态度进入西餐厅时，如果没有人来招呼，客人就会默默离开。主页的设计也是一样。对初次来访的观众，要立即表示欢迎态度，用这种感情来填补观众由于不知道网页的内容而产生的瞬间的迷惑。另一方面，欢迎的形式本身也是多种多样的，既有那种大声喊着“欢迎欢迎”的热烈场面，也有那种不言不语、只是微笑的温情的表示。但如果在区政府或是蛋糕房的门口大声喊“欢迎光临”就会让人摸不着头脑了，所以要选择与想传达的内容相称的欢迎样式。用图片表示欢迎态度（花束和可爱的卡通人物是欢迎的象征）欢迎过度，适得其反由于与主页的类型不符，过于强烈的欢迎反而起到负面效

17、果。为了表示欢迎使用大量的图片，而减少标题和信息文字是本末倒置的行为。主页的必要条件是标题的明了、欢迎空间中的信息确认以及目录信息查找的方便，并不一定要有欢迎的表示。在以商业信息为中心的检索型主页中出现欢迎标记反而会有负面的效果。A、通过色彩、形状和语言来表现1、 明色调表现欢迎的情绪如果要用颜色来传递欢迎心情的话，就要有效的使用色相和色调的属性。鲜艳的红色给人以活力；柔和的色调让人平静；明色调则使人心情愉悦。2、吉祥图案是欢迎态度的证明龙、凤、鹤、龟等吉祥图案表现了喜庆的气氛，让人联想起新年、丰收、长寿的形象；现代的花环、桃心等是众人皆知的符号，便于传达欢迎的态度。用色彩和形象来表现，明亮的

18、颜色，快乐的形象传递了欢迎态度。选用表示节日气氛的形象，在新春和生日庆祝时登场的喜庆形象也能表现欢迎态度。心形符号、驯鹿、星座、缎带等图形能让观者的情绪变得平和。3、 语言表示欢迎语言的视觉说服力比较低，与图像和色彩相比效果有限，但它可以传达确切的意思，所以适合用于需要保持身份、不愿进行视觉冒险的政府部门和研究机构的主页。4、 计数器同样是欢迎的象征统计访问人数的计数器，同样是一种表示欢迎的形式。计数器上的数字不仅是单纯的数据，还传递了这样一个信息：这个主页是重视访问者的。III、目录信息空间必要条件4整理目录信息首页所承载的文字信息有以下几类内容。无论网页的主题是什么，首页终归是菜单或表格之

19、类的内容一览表。为了便于查询，应该采用最为通用的表现形式。1、 选择形式，要重视联想与习惯人们在交流信息的过程中不知不觉养成了某些固定习惯。例如在文件夹背后贴索引、在重点语句下添加下划线等，如果忽略这一切而去制作主页菜单，就会给查询造成障碍。参考大量的主页，找到与自己的信息相适合并利于查询的形式是很重要的。2、 选择与内容相称的形式内容是主页的生命，所以应该尽最多登载一些新信息，但问题在于整理方法。我们希望能引导看到标题之后的访问者，将他们从混乱和迷惑中带出，直接接触真正的信息。因此，菜单和表格设置的清晰程度是非常重要的。张弛有致的分组将使网页变得更加亲切易懂。首页的表示形式1、 丛中型到简易

20、型的多种形式在首页中，主页的所有信息通过菜单展示出来。基本信息用门牌型或索引型表示比较合适，而每天更新的新闻用简单的下划线来表示能给人以最新的热门消息的印象。这里介绍l1种表现形式，但不要受其局限。2、 视觉要素的种类与菜单相关的视觉要素有照片、插图、绘画性的图标等等。另外，各种记号和下划线也能增强视觉性。3、 将个人数据输入表格在订购商品、占卜等类型的网页中，访问者输入自己的数据信息的形式可分为选择型和键入型两种。4、 其他表现形式到现在为止介绍的菜单和表格都是构成主页的核心要素。这些网页除了招牌兼做门牌的情况以外，还要尽可能去掉可以省略的要素。熟练运用这些要素，就可以增强欢迎气氛，做出更易

21、于查看的网页。利用留白和划线进行分组1、 分组在检索中心的主页上，应该尽可能多地安排文字信息。但是，内容过多又会显得十分杂乱，造成查询困难。因此，在信息的安排整理上要格外注意。为了使大量的信息便于查询，采用分组(群化)的手段十分有效。让我们用通过利用空白和划线以及上色块进行分组吧。2、 用空白进行分组最基本的分组方法就是制造空白。空白减少，字群就变成同一组；空白增加，就变成了若干组。然后再与划线一起运用，就能创造出更有效的分组。利用色块进行分组1、 版面空间不够时用色块分组最合适用空白和画线进行分组时，如同其字面意义：有“空白空间"是必要条件。但是用色块进行区分就不必占用空间，它在完

22、全没有空白的版面上，也可以达到分组的效果。将留白和色块一起使用进行分组，效果最佳。色块产生的印象：色块对于分组十分有效，同时其自身也传达出某种信息。有节制的色调给人的印象也是有节制的，而华丽的色调则生成华丽的印象。使用色块进行分组时，对网页整体的色彩印象也要有所规划。色调的选择方法：分组用的色块大致分为两种色调：对色彩有所控制，不改变整体的色调配色效果强烈，传达出积极的信息。其中产生典雅感和稳重感，产生活力标题的大小与行距1、 标题的大小样本的正文是在苹果机上使用IE时的标准字体Osaka，所有字的大小都是一样的。与正文相配合的标题应该多大多粗才好呢?在漂亮的样本中寻找吧。2、 选择合适的行间

23、距如果没有特别的指定，行间距一般是125，即将正文设为100，两行字之间的空白是25。下面的样本行间距为125、130，后面的以10递增。选择让人感觉舒服并且利于阅读的合适行距。IV、画面整体必要条件5传达信任感信息内容相同，但为什么有些页面让人无法信服呢?原因就在于设计的完成度。主页给人的信任性虽然取决于信息的质量和数量，但同时它也被设计的成功与否左右着。造型的完成度增强时，产生信任感；降低时，则会丧失信任感。追求高度的造型性时，向设计师寻求帮助是个好办法。但实际上即使没有经过特殊训练的人，只要遵守基本原则，也可以保证一定的水准。这要比完全依赖设计师、拘泥于造型性而忽略必要条件，更能得到良好

24、的综合效果。漂亮的排版遵循的原则：下图是以排版样式中的检索型(参照P.56)为基础，采用留白，降低文字的跳跃率(参照P90)制成的。利用明确表示了商业信息；利用表现出高雅的格调。因此可知，漂亮的排版不是糊里糊涂就产生的，是严格遵循一定的原理和原则而被设计出来的。漂亮的照片提升信任感1、 照片的质量产生信任程度的差别快照谁都能拍。照相机和胶卷的方便使用使生手也能拍出生动的、给人以深刻印象的照片。但我们不能原封不动使用这些不经意之中拍下来的照片。如果随意登载了下图所示的有缺陷的照片，就会造成主页整体信任感的丧失。因此，在选用照片之前，一定要做充分的检查。2、 合适的采光拍出精彩的照片即使是初学者，

25、如果遵守基本原则，也能够拍出让人喜爱的照片。而这个原则就是，绝对不要使用带有下表所示缺陷的照片。拍出优秀照片的关键是采光。从斜前方射来的光线，即顺光状态是最合适的。初学者应该避免正面光和逆光状态。通过配色和版式产生信任感1、 人的眼睛十分敏锐即使不是设计专家，也能一眼看出主页的排版不平衡，从而对它失去信任，因为不安定的画面传达了不安定的情绪。打破整齐的版式能产生动感，增强随意性的乐趣。但是过度的破坏平衡，反而会使排版变得粗糙而混乱。因此要注意：不统一的排版会导致可信度的急剧下降。在打破版式平衡的基础上如果配色不当，就会变成俗气的网页，引起观者的不快。辅助条件6加强说服力有两种方法可以提高网页的

26、说服力：一种是增强故事性，另一种是提高造型性的紧张感。“故事性”就是插图照片的信息性。它使得网页即使不运用强烈的色彩也能增强说服力；即使是静止的画面，也能让人印象深刻。另外，将主题放在动物和人身上时说服力最强，故事性也最强。例如，蓝色的天空上飘着白云。在云上加上风吹的图画，就能增强信息性，使观者对后面的景像和意义产生种种联想。这就是故事性的效果。1、 通过造型的紧张感加深印象用巨大的文字、强烈的色彩创作出来的画面能够提高说服力。造型的紧张感提高了，也可以说是网页变得更加显眼、有影响力了。但是，由于主页性质不同，所以造型的说服力也不见得是越强越好。与其草率地运用，以至于损害信任感，还不如有所节制

27、的灵活选择。2、 过强的说服力会产生负面影响对于格调高雅的主页来说，说服力过强反而会起到负面效果。例如，将静逸的美术馆网页上添加漫画人物的插图，亲近感和活力感会增强，而宁静感会降低：反之，对于想避免冷淡和生硬、传达活力感的企业网站来说，那样的插图会更有效。我们并不是总要追求强大的说服力，而是要选择与目标信息相适应的强度。第二部分 排版样式在第1部分中，我们明确了主页的六个条件，即一个优秀的主页应该具备何种条件。下面将进入到正式的排版工作当中。排版工作的顺序从A、B中选出与目标形象最吻合的类型和样式，大方向就确定下来。已选定的骨架为基础，按照C、D、E，然后是第3、4部分的顺序逐步添加内容。A信

28、息量的5种类型目标信息量，是5个阶段中的哪个B排版的8种样式选择最适合目标主页的排版样式C空白空间（版面率）的确定留出大量空白的主页显得非常典雅D选择文字的型号字体、粗细、大小E提高造型的完整度隔开辅助造型，端正形状，制作动态第3部 图像、照片的作用第4部 配色的效果A信息量的5种类型选择出这5个阶段中的任何一种类型，主页风格的大方向就被确定下来。分析这5种类型的特点，研究目标主页属于哪一种类型：目标样式是在和之间呢，还是在和之间，在这个阶段要明确下来。第一步很重要如果在这里做出了正确的选择，那么后面作业中的困扰将被降到最低限度；如果在这个阶段尚处于模棱两可的状态，就匆匆进入下一个阶段，混乱就

29、会大大增强，等到发现时，主页已经与设想的目标大相径庭了。随后的版式选择、配色计划和插图选择也要被这里的类型左右着。检索型1、以文字信息为主体，图片少于5，这种检索型是只由文字信息构成的类型。图片极少，有按钮和图标就可以了。最大限度的登载了文字信息，如果想要突出内容，并使之便于查询，使用这种独特的样式是十分奏效的。它类似于报纸上热门消息的组织结构。2、将表示欢迎的信号控制在最低限度给人以商业性、不浪费空间、清晰明了的印象是这种类型的特征。将欢迎态度的表示控制在最低限度，强调出理性和商业性。不仅把图画缩得很小，在配色方面也十分讲究。以白底为主体的亮丽色调有效地传达了冷静的印象。3、白表现自由感和高

30、贵感将空白减少、文字信息增多，会增强新闻性。相反的，增加空白会产生宽裕感和自由感。空白量也叫做版面率。我们日常接触的印刷品中，报纸的版面率是最高的。与之相反，诗集和随笔集等书籍的版面率是比较低的。通过版面率去控制印象。准检索型1、 略微增强欢迎态度的准检索型与前一页相比，稍微增加了一些图形要素，构成了文字与图像比例为2：l的排版类型。通过增加欢迎空间可以增强网页的开放感，给人以轻松、自由选择的印象。另一方面，它的检索性与相比也没有太大的变化，是最容易获得平衡的类型。2、色彩和图片的增加是主页气氛更开放这个阶段适合使用多种颜色。广泛运用色彩，能够创作出欢乐的画面。在白底上不仅使用蓝色和黑色等禁欲

31、主义印象的颜色，还广泛使用多种其他颜色，旨在不破坏信息丰富的同时，提高乐趣。在图像的运用上，不仅限于图标，同时也可以使用更加自由的插图和照片等形式。均衡型1、 最平衡的55欢迎空间与目录信息各占一半，与、型相比显得更加开放。、型专业性较强，局外人进入比较困难，而这种类型则可以让人轻松愉快的加入进来，它既有文字信息又有相对更强的视觉性，是便于应用的类型。2、 与任何排版样式都可以进行自由的组合第种类型在保持主页的信息量同时，还有足够的自由空间来选择排版和配色。它可以与排版样式中的8种版式中的任何一种进行组合，是自由灵活的类型。印象主体型1、 以图片为主体，传达了优雅、自由的气氛将图片作为主体而减

32、少文字信息，能产生画面的宽裕感，而具有格调。由于减少了商业性强的文字信息，从而远离常性和实用性，产生安静、自我的感觉。给人以高级商品和典雅、沉静具有高格调的企业印象。2、 表现只有朋友的世界将文字信息减少也就是远离商业性形象，适合于充满友好气息的空间。这种场合的配色以同系色为基调，有节制的使用对比色，色调起伏较小。目录省略型1、文字信息最少的样式几乎没有文字信息，最大限度的表现网页印象的样式。把前一页的类型发展到极至，就成为这种类型。要将除标题之外的文字情报限制在12行内。空白以及图像的空间成为主体，画面的视觉性最强，由图画、颜色和空白发出的信息此时变得十分重要。2、造型性是表现优美效果的关键

33、这是文字信息几乎为0的特殊类型，如同电视电影中没有声音只有画面的场面。像晚霞映照着山脉，这是一个既没有台词又没有声音的寂静空间。因此，在这种场合下，画面的品质极为重要。如果是有台词的画面，即使完成度低一点也能忍受；而对于这种类型来说，那就成为了致命伤，所以专家的帮助不可或缺。B排版的8种样式主页的排版样式主要有以下列举的8种，它们与前面介绍的5种信息类型也密切相关。例如，检索型、与左右对齐式比较相配；若与散开式或对称式组合起来就不太合适，这是由于信息量大的检索型与自由度高的散开式和对称式不相称的缘故。样式决定页面印象的主体骨架8种样式各自创建出不同的网页风格，因为排版样式不仅仅是一个形式，还同

34、时具有信息性。即使信息内容完全相同，采用左右对齐式来表现和采用对称式来表现，也会产生完全不同的印象。在这8种样式中选择的同时，页面印象的主体骨架也被决定下来。左右对齐式1、 没有浪费的空间，表现商业性形象从整体上来看，这种样式将访问者的注意力向四方形的中部收拢集中，它能够充分利用每一寸空间。如果主页以这种形式构成，商业性基调将被延续下去，这种满载着文字信息、没有浪费空间的热门印象，是最适合传递商业性信息的样式。但同时，以这种组合方式为基调的页面很难传递趣味性强和富有诗意的信息。排版的基本样式这些样式是排版方式中最为典型的。报纸、书和杂志几乎都是以左右对齐为基准来排版的。全景式1、 用趣味性吸引

35、观看者分散排列的多张图片，看起来就像在瞭望台上看到的全景画。小图片被均一间隔地排列着的样式就是全景式。因为无论视线从哪个角度都可以进入页面，所以产生了开放的轻松气氛。全景式中图片的位置是重点全景式展示与滚轴式展示平铺与分架陈列全景与卷轴的差别，就如同书店和超市的差别一样。全景式展示类似于将商品并排放在台子上，很容易取出的展示方法(平铺式)；卷轴式类似于在架子上满满放着一堆商品(分架陈列)。入口附近用全景式陈列，观者进店之后，再从容地用卷轴式提供信息。全景式的展示让人产生轻松参与的情绪。卫星式1、 以太阳为中心的卫星环绕型这种类型的特征就是中间有一个太阳，太阳的面积不一定越大越好，在其周围留出空

36、白也可以强调中心性。另一方面，各个卫星以全景式展开，让访问者沉浸在可以自由参与的开放感之中。作为核心的太阳带来坚定不移的安定感和卫星带来的开放感并存，传递出家庭的印象。围着太阳均匀散开的卫星照片组合式1、新世界以全景式自由的展现出来一张照片通过组合，获得了新的意义。单独看来无趣的照片，在组合之后却产生了新的情趣，显现出全景式的效果。多幅照片与全景式共同创造出一种自发的、来去自由的轻松气氛。少量的文字信息也可以具有轻松自由感这种样式是全景式的变形，具有开放感。即使选用了文字信息极少的目录省略型，也不会产生冷漠感，而是保持适当的轻松和自由。这是全景式的效果。将同样大小的照片组合起来图像蒙太奇包围式

37、1、限定范围的效果将页面四周用色块或图案围起来，便产生了一个被限定的世界，它是一个受“墙壁"保护的、朋友之间的、可以放心的世界。如果那里的“墙壁"结实而有力，那就表示这个范围是一个拒绝他人侵入的特别的“领地”，如果用温柔的色调围起来，就表现出那是一个柔和的世界。边框的种类边框的类型也可以表现包围的效果体现商业信息本来商业信息的公开性比较强，并不适合这种包围式。但是采取相反的方式把它框起来，就会产生意想不到的效果。散开式1、山水画般的自由和优雅散开式表现出不受限制的优雅与自由。以日本的石庭作为例子，石头的排列乍看之下没什么规律，但实际上以院子中的一点作为源头，像水流从小溪不断

38、的流向大海一样来合理的配置石头和树木。这不是法国和意大利庭院的那种规则的排列，而是自由的再现自然配置方法。各个国家主页设计上的区别欧式散开式：美国、欧洲见到的散开式主页与日本相比，给人印象更加端正整齐。它严格遵守左右平衡关系，又不破坏左右对称性，对留白比例的控制比日本式更强。中式散开式：配色采用很华丽的色调。在日本，选择散开型多以寻求自由感、典雅感为目的；而在中国，则更重视艳丽感。与日本型的画面相比，不是将背景原封不动的留白，而是加上较浅的花纹。这一点比较引人注目。与日本型中禁欲主义的配色和空间使用方法相比，中国的画面更加鲜艳且带有诉说性。单侧齐行式1、理性与自由共存的版面设计以左右对齐式为基

39、调，将右侧散开，只将左侧对齐，就成这种样式结构。在追求理智与自由感适当的平衡场合，这种样式最为有效。不留取一定的空间，右边的流动效果就无法表现，结果就是生成空白较多的典雅主页，这最适合于在暗示格调的同时，突出传达自由的气氛。优雅的单侧齐行式并不适合信息丰富的主题印象在登载大量文字信息和图片信息的场合，这种类型并不合适。刊登的信息太多时，会像左右对齐式一般压迫空白空间。一面坡式所特有的美丽自由感也会随之消失。广播电视局主页上自由与开放的两个方向同样是广播电视台的主页，由于受众群的不同，排版样式也有很大的不同。对称式1、以中心线为基准，左右对称放置图片和文字时，先在画面中央引一条垂线；然后以此为轴

40、进行左右对称的配置，这就是对称式。人的身体、汽车、照相机等等，很多形状都是对称构成的，对称性也被称为最终的稳定型。页面版式即将失去平衡时，在左右对称的位置上放置一张有分量的照片或标志，平衡就恢复了，而且还保持了整体效果。2、格调高雅的安定型华丽或休闲的图片在进行对称配置后，就会产生一种可信赖的、让人放心的感觉。如同宇治平等院一样，寺院内的大建筑物以对称式进行排列，从而产生了与寺院相称的格调，这也是对称式带来的效果。另一方面，同样是传统型的建筑物，桂离宫就采用了的散开式进行配置。较之于高雅的格调，它更表现出与别墅相称的自由气氛。对称式是与散开式正好相反的样式。3、充分留白想要产生对称的效果，空白

41、空间是必不可少的。空白太少，对称型就不能清楚漂亮地显现出来。如果空白全被文字和图片添满的话，对称式的典雅感就会减弱。空白是高雅的对称样式中不可或缺的因素。另一方面，减少对称式中的空白，在造成高贵、典雅感欠缺的同时，却维持了高格调和安定感。在页面即将失去平衡感的时候，这样做是有效的。C空白空间（版面率）的确定增加空白空间，画面显得高雅；减少空白空间，增加文字和图片的数空间，画面就越活跃。无论何种类型和样式，只要改变了空白空间，原来的印象就会变成相反的印象。空白空间也可以用版面率来表示。版面率就是为了配置文字而假想的范围：版面率越大空白越少，反之空白越多。什么是版面率？在活版印刷中，为了配置文字而

42、设定的范围就叫做版面。像移植到版面里一样配置活字，然后印刷，框子消失了只有文字被印了下来。版面越大，纸面的空白越小；相反，则空白越大。也就是说，空白量和版面率在结果上的效果是相同的。1、商业信息空白较少，让人感觉比较热门表现以热门而引人注目的商业信息，要尽量减少空白空间。平常的印刷品中，空白空间最少的就是报纸。每天早上，连最微小的空白都不放过，满载着文字和图片被送到我们手中。主页中与报纸最接近的就是中检索型的商业信息。检索型空白量少比较合适。如果加大空白，就会像下图那样失去热门的印象，同时还会降低可信度。空白大小与排版样式组合的例子根据信息的内容，可以在5种信息量类型和8种排版样式中选择，然后

43、再配置上合适的空白空间。这种关系如同下表所示：趣味性强的信息与较大的空白空间搭配比较合适。D选择文字的号型平时使用的文字各有历史，满载着信息。如果不注意字型与印象的关系，随意地使用，就会带来巨大的负面效应。例如，中国饭店的招牌上如果选用哥特体书写的话，就无法吸引顾客进入。因为哥特体带有的理智信息而与中国饭店的印象不相符。宋体中庸、黑体理性平时经常见到的字体中，最有代表性的就是宋体与黑体。标题使用宋体给人稳健、传统的印象；使用黑体给人以合理、理智的印象。宋体由书法体发展而来，最便于阅读。另一方面，黑体的横竖线条一样粗，合理而没有浪费空间，传递了理智的印象。宋体·罗马体是传统的、平衡性强

44、的字体。粗宋体饱满而具有稳定感，变细的话就会十分优美。字母表文字中相当于宋体的字体叫做罗马体。黑体·世纪体它的横竖线条粗细相同，结构非常合理。将线的开头和结尾变圆，就成为圆黑体，可以缓和冷漠、坚硬的感觉，传递温柔的印象。字体传达的印象文字的粗细1、细的优美，粗的有力量将标题文字变细，就会显得十分优美。宋体也好、黑体也罢，哪一种字体变细都会产生优美的意味。将文字变粗，效果增强。大而细的宋体与城市的印象最为吻合；反之，粗字则传递了强而有力的印象。2、细字不适合做报纸标题报纸的大标题要用粗字来表示，如果用细字，看起来就像无聊的、没有什么价值的新闻。粗字热情而细字冷静，因此，热门的新闻与细字

45、不相称。粗字给人有精神、有力量的印象，最适合于强调戏剧性信息与富有活力感的主页。正文不要应用粗细变化粗细效果对于正文中的小字是一样的。但是如果极端运用粗细变化，就会造成可读性的降低。调整字体粗细要把握好度。特别应注意的是，主页的设计未必能够同制作者所指定的设计完全相同，考虑到这个差距的存在性，还是使用标准式样比较稳妥。文字的大小（跳跃率）什么是跳跃率？正文和最大的文字标题之比叫做跳跃率。(排版基础讲座视觉设计研究所)报纸活字也叫倍数活字。以正文作为1倍，标题的大小用它的倍数来表示。第一面的大标题用大约78倍，号外新闻级别的则超过了10倍。体育新闻的标题经常使用10倍以上来构成。像这个例子一样，

46、跳跃率的高低既表现了报道的重要等级，也是表现了热门的程度。1、文字的大小决定了页面形象标题的大小控制了画面的形象。放大标题会给人有力量、活跃、自信的印象；缩小则表现出纤细和缜密的印象。另外，文字大小的对比也会左右印象。标题文字的大小与正文之比叫做跳动率。跳动率越大，画面越活跃；反之，越稳重2、 粗细印象优先将标题的文字变大，粗细效果会加倍。例如，大而粗的文字最有精神，大而细的文字都市性印象最强。另一方面，将文字变小，粗细效果会减弱。虽然细而小的文字有优美的感觉，但如果使用细而大的文字，效果会更加明显。总之，文字越大，越能强化粗细的印象。E提高造型的完整度隔开辅助造型对大小l两张图片进行排版时，

47、将小张放置在远离主要图片的地方，这样主角就会变得突出有力，引人注目，远离的配角也会栩栩如生，画面就产生了动感。扩大空间，动感增强将两张图片从左右方向分开，空间就被拓展开来；从对角线上分开，动态空间就会沿对角线方向扩展。随着图片的分开，空间得到了扩展，产生了强烈的动态，从而给画面带来了生气，一个活的主页就诞生了。水平方向是安静的、对角线方向是有生气的端正形状，制作动态1、 通过对齐、同化处理来端正形状没有计划的插入许多图片，会导致画面的混乱。为了端正画面，图片的整理是必要的。在上下左右的任一边上设置一条参考线，然后以其为基准线进行对齐，形状就端正了。将轮廓复杂的形状放在画线的框子里，再在大小上与

48、其他内容进行同化，混乱的局面就被控制住了。2、 对比越强，动感越强在形状上，存在着大与小、左与右、圆与尖等对比关系。若想将混乱的局面整理清楚，就要弱化对比、进行同化；反之，若想取得富有生气的画面，就要强化对比。对比会产生紧张感，从而使整体变得有生气。第二章 网页艺术设计中图像的运用第一部分 插图、照片的作用美丽的图片震颤心灵，容易被忽视的设计要素大体上可以分为两部分。1、 故事性图片（照片、插图）带来的效果2、 造型性排版样式、形状、色彩、文字等带来的效果选择得当的图片能让故事潜移默化、刻骨铭心地打动观者。并且，选用的照片和插图的水准越高，故事性效果的发挥就越充分；反之，如果插图和照片很少，其

49、故事性和信任度就会降低，打动心灵的效果也随即消失。故事性和造型的完成度是整体合一的关系。什么是图片的故事性?所谓的故事性，就是图片所传递的情绪、意思和内容。例如，观者看到布玩具熊一只手高举着的画面，无论是插图也好、照片也罢，无论是红色的熊还是白色的熊，都会觉得这是可爱的欢迎象征。图片自身所带有的故事性超越了照片或插图的颜色和笔法等造型性，直接传达信息给我们。A图片的作用图片的故事性具有压倒性的说服力，能够牢牢吸引观者的视线，它具备配色和版式效果所不具有的宁静的、决定性的力量。这一页中去掉图片后，再看看它的效果。这样，在今后的主页制作中，你就可以理解图片为什么那样重要了。没有图片，就难以让观者投

50、入感情图片直接表现了主题，并且凭借故事性，使观者产生共鸣。缺少了图片而只有色彩和文字的主页，给人的印象是一个没有信息性的空虚画面。去掉图片，它所引导的感情通道也会随之关闭，这就需要观看的人自己费很大力量投入到画面中去。1、 直接表现内容时，图片是最好的选择图像直接传达内容仅仅通过观看图片，就能了解网页的主题。图像是最亲切最有力量的表现形式。而阅读标题和正文之前，如果能对内容有一个大概的了解，访问者就可以放心地深入到正文之中了。图像引起共鸣看到了版画风格的面包房景像，访问者的脑海中大概会浮现出刚刚烤出来的面包的样子，一边想着“真不错"，一边将目光移向正文。访问者在阅读内容之前已经与网页

51、的内容产生了共鸣，这种差异是巨大的，也是十分重要的。探寻主题的背景将与商品和服务直接相关的画面，用能给人留下美好印象的形态表示出来，是十分重要的。仅仅画出苹果和摩托车远远不够，只有当访问者能从完美的视角看到重型摩托车的力量造型和苹果引人喜爱的样子时，才能引起共鸣。此外，图片的造型水准越低，说服力就越弱；造型水准越高，与观者产生共鸣的能力就越强。2、 故事性深入人心具象的画面再现故事无论何时，在我们的记忆深处都会残留着一些画面。当插图和照片背后的故事与我们脑海中的记忆产生共鸣时，那幅图片就在记忆中燃烧起来。故事性不同于抽象的色彩和形状，它依照具体的情景，能够更直接地刻在我们的记忆之中。这是因为与

52、自己的某种兴趣或从前的记忆有共鸣的主题能够唤醒心中的故事。故事的强化是从方向性开始的单纯描绘具体形状不能强化故事性。只有当画中形象朝某个方向倾斜或二者之间发生关系时，故事性才会加强。例如，画面上仅有海豚和人的照片并没有什么很强的故事性，但如果海豚和人友好的面对面，故事就展现出来。狗从对面走来的相片虽然有其自身的故事性，但如果狗摆个姿势或者朝向光源，故事性就变得更强。3、 说服力的强弱人物的瞳孔具有最强的说服力看照片和插图的时候，我们有时会被强烈地吸引住，并且印象深刻。这是主题自身散发出的引力的缘故。例如，同时看到花束和人物的时候，人的目光首先会投向人物，他的表情也会深刻的留在记忆中。花和人物的

53、不同在于说服力的不同。说服力最强的是人、人的表情，而在表情之中又以瞳孔为最强。风景、建筑物的说服力较低主题与人的瞳孔距离越远，说服力越低。天空和大海之类的风景距离最远，说服力最低。同样的咖啡杯，与放在架子上的咖啡杯相比，拿在人手里的、离人稍稍近一点的咖啡杯的说服力就强一些。同样的人物，如果面朝后或者面朝侧面，目光的强度就会消失，说服力也就降低；而从正面朝着你、看着你的人物说服力就增强。走进一步提高说服力同一个建筑物，如果离得近了，心情也会更为贴近。作为风景中的一部分建筑物，走近了，就可以看见门口的台阶和招牌，连人的脚步声也能听见了。对于一个物品进行长时间观察可以做到客观，而近距离的观察则可以使

54、人产生共鸣。就人物来讲，道理也一样。工作着的人从后面看来，同桌子、椅子和显示器一样，也是静物的一部分；反之，从正面看的话，说服力就会一下子变强；如果再走近一步看的话，说服力将会是最大的。人物·动物 各种主题中说服力最高的是人的视线和动物的视线身边的物品 和人的生活关系越密切，说服力越强树花·植物 植物是人性化的隐蔽的、静态的存在。它在温和地欢迎着你风景·建筑 将建筑物作为远景进行观察，那么建筑物就和风景成为一体，说服力也就减弱了我们并不是总在追求说服力强的主题。与主页相称的强弱程度是最重要的。不必要的强度只会使主页的信赖程度受到损害。例如，想要表现高雅格调的大学和

55、银行时，使用说服力弱的风景、建筑等就足够了。近距离的脸和强烈的视线说服力过强，反而会让人敬而远之。B照片的轮廓画面上标准的照片是四边形的，它也叫做“角版”。根据主题的形状自由变化的照片类型叫剪切版"，将周边部分进行淡化处理的叫“模糊版"。三种版式不仅在类型上有所区别，在视觉效果上也存在着很大差异。由于它们对观看者的影响非同小可，所以要在理解其含义的基础上正确使用。角版和模糊版相对如果每天早上送来的报纸上的照片都是模糊版，那将会造成一种奇妙的氛围。模糊版表现出朦胧与优雅，如下图中的比较图例所示，并不适合新闻的严谨性。热门的新闻与不浪费空间的角版相协调。角版的形状横平竖直，与其

56、它相片和文字可以很好进行组合。角版是客观的、模糊版是情绪化的同一人物，同一风景，用角版来表现和用模糊版来表现，造成的印象全然不同。角版有客观和中庸的印象，与新闻比较相配。另一方面，模糊版传达出的情绪和情调，与趣味性或偏好性较强的信息最为吻合。剪下版是非正式的，传达了轻松愉快的印象。1、角版、剪切版、模糊版C插图的效果插图与照片或文字相比，更能直接地传达信息。插图中人物拿的是什么、为什么选用这幅图片等问题与观者并没有什么关系，但在观看插图的一瞬间，喜欢或是不喜欢、继续前进还是返回这些决定就做出了。是否继续仔细欣赏照片和文字，是由插图的优劣决定的。1、 强有力的使者2、 温暖而亲切插图具有温暖的效

57、果用照片表现的画面客观性强却欠缺说服力，但是不会像插图一样，有可能遭到强烈的厌恶而导致失败。另一方面，插图的手绘性使得它能够表现温暖和亲切的氛围。而且，细致描绘的插图在保持与照片相同的客观性的同时，还能制造一种恳切的气氛。3、 低品位会导致信赖感的丧失低品位会带来负面效果虽然插图的说服力最强，但是一旦运用不当，其产生的破坏力也是相当大的。如果插图的品位很低，那么无论在排版和文章上怎么下工夫，也很难重新获得观者的信赖。很遗憾的是，现在的主页上出现低品位插图的情况非常频繁，这严重损害了观看者的信任度。一般我们认为，插图的好坏对于外行来说是很难判断的。但实际上，如果客观的站在访问者的角度上观察，任何人都能够判断插图的优劣。在没有成见的情况下让不同的人进行判