网页设计版面布局

    本篇论文目录导航：

【题目】如何有效提高网页设计的艺术美探究
【引言 第二章】从认知心理学的角度设计网页
【3.1】网页设计版面布局
【3.2】网页简短标题与提示语(label)
【3.3】网页图形图像的插入技巧
【3.4】认知心理学在网页菜单设计中的应用
【第四章】色彩设计理念在网页中的应用
【结语/参考文献】网页构建中认知心理学与色彩设计应用研究结语与参考文献

　　三、网页设计中认知心理学的具体应用

　　3.1 设计版面布局。

　　设计网页的第一步是设计版面布局就像传统的报刊杂志编辑一样，我们将网页看作一张报纸、一本杂志来进行排版布局。虽然动态网页技术的发展使得我们开始趋向于学习场景编辑，但是固定的网页版面设计基础依然是必须学习和掌握的。它们的基本原理与普通书刊的版式设计原理是相通的，只要领会要点，就能举一反三。

　　在网页设计中也应注意到它们的不同的特点，书刊尺寸是以开本为单位，而网页是以分辨率为尺寸单位的。书刊是纸印刷品，而网页是无纸印刷的电子书刊（即数据流）。设计者具备充分了解网页设计的特点，才能合理安排设计版面布局。

　　布局就是以最适合浏览的方式将文字、图片和动画按照一定的形式美的法则，遵循一定的视觉规律，放在页面的不同地方。除传达信息外，还能给人美的享受，引起浏览者的共鸣。版面布局也有一个创意的问题。那么怎样的创意、怎样的设计、怎样的搭配，网页才能新颖独特、才能吸引人呢？

　　3.1.1 视觉流程 .

　　人们主要是通过视觉与触觉来感受事物的，而人类信息量的80%是通过视觉获取的。浏览网页时，用户一般是通过眼睛接受网页的版面。因此，视觉传达的研究有助于我们掌握人眼认识事物的基本规律，并在设计中自觉地加以运用。对于网页设计来说，情况更是如此。网页是通过视知觉来实现信息内容的传达，为了使网页获得最大的视觉传达功能，使网络真正成为可读性强而又新颖的媒体，网页的设计必须适应人们视觉流向的心理和生理的特点，由此确定各种视觉构成元素之间的关系和秩序。因此，设计时应该研究各种视觉造型元素之间的距离、位置、面积和视觉流程的问题。我们首先从认知心理学的角度，看一看用户浏览网页时的视觉反映。

　　按认知心理学的观点，视觉是一种空间的感觉，我们通常把空间的感觉称为视空间。视空间又分为生理的一次印象和经验的二次印象。人们在观察物体时，视线并不是沿着直线平稳地运动，而是有一系列的跳动和注视。一般来说，物体的转折处，或轮廓发生变化的地方，或者有特殊细节的特征处，视线最易集中。例如三角形的三个角部，就最引人注目。视觉流程的形成是由人类的视觉特性所决定的。因为人眼晶体结构的生理构造，只能产生一个焦点，而不能同时把视线停留在两处或两处以上的地方。人们在阅读一种信息时，视觉总有一种自然的流动习惯，先看什么，后看什么，再看什么。视觉流程往往会体现出比较明显的方向感，它无形中形成一种脉络，似乎有一条线、一股气贯穿其中，使整个版面的运动趋势有一个主旋律。心理学的研究表明，在一个平面上，上半部让人轻松和自在，下半部则让人稳定和压抑。同样，平面的左半部让人轻松和自在，右半部让人稳定和压抑。所以平面的视觉影响力上方强于下方，左侧强于右侧。这样平面的上部和中上部被称为" 最佳视域" ,也就是最优选的地方。在网页设计中一些突出的信息，如主标题、每天更新的内容等通常都放在这个位置。当然视觉流程是一种感觉而非确切的数学公式，只要符合人们认识过程的心理和思维发展的逻辑顺序，就可以更为灵活地运用。

　　在网页设计中，灵活而合理地运用视觉流程和最佳视域，组织好自然流畅的视觉导向，直接影响到传播者传达信息的准确性与有效性。所以在网页的编辑设计中，视觉导向是一个要点，我们可以运用版式设计中的一些元素如。中心、立场、方向、对称、均衡等设计布局形式来体现网页页面的视觉流程和最佳视域。网页的设计是一种创造，首先要立足信息的传达，但又要符合人们较为普遍的思维习惯，做到视觉流程的自然、合理、畅快。成功的视觉流程安排，能使网页上的各种信息要素在一定空间内合理分布，能使页面上各信息要素的位置、间隙、大小保持一定的节奏感和美感。

　　3.1.2 视觉要素。

　　在网页构图中，包括形态要素和构成要素两方面。点、线、面是构成视觉空间的基本元素，是表现设计形象的基本设计语言。任何视觉图形和文字信息，都可以简化获取近于点、线、面的视觉感受。网页版面中的各视觉元素正是以点、线、面的形式相互依存，相互作用，进而组合成各种各样的视觉信息，形成千变万化的视觉空间和视觉感受。因此，只有协调好点、线、面的各视觉元素之间的关系，才能设计出具有最佳视觉效果的网络页面。

　　3.1.2.1 视觉要素的点化处理。

　　从形态设计角度来看，"点"是具有空间位置的视觉单位，是一切形态的基础，任何网页的版式布局中，点同样是最基本的视觉构成单位，在网页版面中起着张力作用，使人们心理上产生一种扩张感。点不仅存在大小的差异，而且还有富含着各种形状所表现出的姿态。在网页中，点是相比较而言的，任何单独细小的形象都可以称之为点： 一枚按钮、一块颜色、一个字符，都表现出点的视觉感受，在版面布局中发挥着占据空间的构图效能。经过编排处理的点可以说是网页设计中一个关键，不仅具有节奏感和韵律感，还可以根据连续、间隔及方向性变化来表现出时间感、距离感。

　　在网页页面设计中将某些视觉形象进行点化处理，并运用恰当的构成法则进行版面编排，不但可以保证画面协调统一，甚至可以起到画龙点睛的作用。一幅网页往往需要有数量不等，形状各异的点化形象来参与构成。点化形象通过对称和平衡、重复和群化、节奏和韵律、变化和统一等多方面的构成处理，都能够给人带来不同的心理感受。

　　在（图 1）所示的网页中，设计师巧妙地运用点的聚散处理手法形成了动静相依的平衡视觉构图。将版面中间规整的视觉形象变化成大小不一的点排列，使可能呆板的画面顿显活泼起来，并且由于排列的不规则性和聚散差异，进而形成了向周围的视觉延伸，既保证了画面的充实丰满，又为视觉浏览起到了一定的指向作用。另外，通过点的色彩和体量变化，构成了极强的动势和神秘趣味，使人迫不及待地点击进入下一级页面。就整个页面设计而言，基本达到了应有的视觉效果。

　　3.1.2.2 视觉要素的线化处理。

　　点的移动形成线。从构成含义讲，线具有位置、长度和一定宽度，是网页设计中刻画形象和版面构成所不可缺少的视觉元素。相对于点而言，线具有更为明显的情感特征。艺术表现中的线可分为徒手画的自由线和依据规矩形成的整齐端正的几何线。不同造型性质的线具有不同的艺术风格和性格展示，并对审美主体产生不同形式的美的感染。比如，水平线会使人有安定、静止、平和、静寂等感觉；垂直线给人严肃、庄重、高尚、强直等感觉；斜线能使人出现运动、向上、飞跃、前进等感受；直线给人坚强、挺拔、敏锐的男性感觉；曲线则会使人有温和、柔软、幽雅等女性感觉；等等。

　　将不同的线运用到页面设计中，会获得不同的视觉效果，若能将图形、文字等视觉信息做恰当的线化处理，则可以更充分地表达所要体现的信息内容。

　　通常情况下，线在网页中主要起分割画面的作用。但通过信息条理化编排，也可以形成一种页面内容线化的视觉构成，既便于浏览，又美化版面。另外，线还可以将各重要信息连接起来，明晰地表达网页内容组织的脉络结构。线化处理后的视觉要素在页面中还可以有方向、位置、长度、宽度、形状等各方面的变化，同时也可以运用恰当的构成法组织出更为丰富的视觉效果。

　　在（图 2） 所示的页面中，线和经过线化处理的视觉元素构成了整个版面的视觉主体。画面多留空白，以不同颜色、不同方向、不同体量的线和线形感觉的字体、色块进行视觉构成的组织，页面内容信息一目了然，视觉感受清新有活力。另外，经过线形感觉处理的文字做统一的水平方向排列，与主体构图中的纵向线条共同形成了强烈的秩序感；同时，水平方向上几条色彩不一的色块，又使画面产生明显的动、静对比，进而打破了水平线群可能造成的单调感，给网页增加了流畅、活泼的气氛。

　　网页视觉构成中的线，除了表达一定情感性格外，还能通过粗细、虚实、渐变、放射等规律法则的运用，产生各种视觉效果的深度空间和广度空间。

　　3.1.2.3 视觉要素的面化处理。

　　视觉构成元素中，面具有明显的长、宽两度空间，是点和线的相对扩大化。网页版面中具有面感觉的元素，可主要概括为图片和色块两类。面在网页设计中主要用于背景渲染、标头塑造，当然也可以作为网页中的按钮和图标。版面形态设计中的面，可以分为直线形面和曲线形面两大类。面的性格表情十分多样，与此关系最为密切的是"面形"的轮廓及其表面质感。比如面形的轮廓有浓淡之分时，就比单纯使用硬边描绘的情况显得更为柔软。面的造型可用于表现各种各样的立体感觉，也可使人产生丰富的情感联想，如韵律、软硬、虚幻，等等。另外，单纯几何面形本身也具有一些表情特征，如正方形的稳健大方，三角形的扎实稳定，椭圆形的亲切感和生命感等。在网页版面设计中充分利用面的表情特征，可以为明确突出网站主题、性质起重要作用，如背景图片、窗口形式的选用，在娱乐、政治等不同性质的站点页面中设计手法也会大相径庭。

　　在（图 3）的网页设计中，运用了较多面的视觉元素构成画面。

　　其中既有具象的自然景观图片，又有不同面积、虚实各异的几何面形或已有面形感觉的文字图片信息。画面中除虚化了的度假村背景，运用了几块肯定规整的几何面形，从而形成了整体网页版面的虚中存实，给人以自然清新的视觉感受。并由此引起浏览者的视觉注意，产生连锁性的视觉引导。

　　3.1.3 文字的视觉构成与选择编排。

　　文字是网页中必不可少的构图元素，也是网页中主要信息的描述要素。因此，在一定时期内，网页中的文字将占据相当面积的版面，文字效果处理的好与坏将直接影响到整幅网页的质量。

　　网页中文字的主要功能是在视觉认知过程中，向大众传达发布者的各种意图和信息，要达到这一目的必须考虑文字的整体诉求效果，给人以清晰悦目的视觉印象。因此，设计中的文字组成应避免繁杂零乱，使人易认、易懂，切忌为了设计而设计，忘记了文字设计的根本目的是为更好、更有效地传达发布者的意图，表达设计的主题和构想意念。另外，在视觉传达设计中，文字作为画面的形象要素之一，具有传达信息、表述情感的功能，因而它必须具有视觉上的美感，能够给人以美的感受。字型设计良好，排布巧妙的文字能使人感到愉快、清爽，并留下美好而牢固的印象。反之，则会使浏览者产生混沌、不快的感觉，甚至会令人拒而不看，更难以产生视觉传达所应有的美感，也势必无法准确传达设计者希望表现的意图和构想。

　　网页版面中文字设计的成功与否，不仅取决于字体、字号、色彩的选择，同时也决定于其排列组合方式是否得当。如果一副网页页面中的文字排列不当，拥挤杂乱，缺乏视线流动的顺序引导，不单会影响字体本身的美感，也不利于读者进行有效的阅读浏览，更难以产生良好的视觉传达效果。要取得良好的版面效果，关键在于找出不同字体之间的内在联系，对可能存在的对立因素予以协调处理，在保持其各自个性特征的同时，取得整体的统一组合。为了构成生动的页面视觉效果，可以从文字的风格、大小、排列方向、明暗色调等方面进行综合考虑，既要形成活泼生动的对比效果，又要达到整体上的组合统一。

　　3.1.4 审美要求。

　　人们对美的追求是不断深入的，网页设计同样如此。网页不光是把各种东西放上去，能看就行，这是远远不够的！要考虑如何使用户能更好地和更有效率地接收网页上的信息。这就需要从审美方面入手，制作出清晰、整体性好的页面。使人浏览起来心情愉快，接收信息也会更加容易。网页设计的审美需求是对平面视觉传达设计美学的一种继承和延伸。两者的表现形式和目的都有一定的相似性，把传统平面设计中美的形式规律同现代的网页设计的具体问题相结合起来，运用一些平面设计中美的基本形式到网页中去，增加网页设计的美感和大众的视觉审美需求。

　　我们经常所说的如变化和统一、条理与反复、对比和调和、均等与平衡等，对网页中文字、图形、色彩的设计都是十分有效的视觉规律。首先，网页的内容与形式的表现必须统一和具有秩序，形式表现必须服从内容要求，网页上的各种构成要素之间的视觉流程，能自然而有序地达到信息诉求的重点位置。在我们把大量的信息塞到网页上去的时候，考虑怎样把它们以合理的、统一的方式来排布，使整体感强同时又要有变化。怎样使它们脉络清楚又富有清晰的视觉效果等等。这样使页面更丰富，更有生气，看起来就不感到枯燥。

　　其次，突出主题要素。必须在众多构成要素中突出一个清楚的主体，它应尽可能地成为阅读时视线流动的起点。如果没有这个主体要素，浏览者的视线将会无所适从，或者导致视线流动偏离设计的初衷。

　　网页设计中各构成要素在组合时，要注意其结构的轻重大小、虚实、多少等对比因素，加强视觉力度，以强化页面的整体吸引力。作为形式美的法则，随着时代的不同而不断发展进步，特别在生活节奏如此快的互联网时代，由于追求目标的变化，人们的审美观念也在不断地变化，但是美的本质是一样的。同时随着技术的发展，很多目前不容易实现的审美形式也逐渐被克服，突破带宽的瓶颈，就会给网页设计的自如发展带来一片新的天地。

　　3.1.5 常用的版面布局形式。

　　3.1.5.1 "T"型布局。

　　所谓"T"结构，就是指页面顶部为横条网站标志式广告条，下方左面为主菜单，右面显示内容的布局、方式。这种布局的优点是页面结构清晰、主次分明，是初学者最容易掌握的布局方法。缺点是较为呆板。

　　3.1.5.2 "口"型布局。

　　这是一个形象的说法，就是指页面上下各有一个广告条，左面是主菜单，右面放置友情连接等，中间接主要内容。这种布局的优点是充分利用版面，信息量大。缺点是页面拥挤、不够灵活。

　　3.1.5.3 "三"型布局。

　　这种布局多用于国外站点，国内用的不多。特点是： 页面上横向的两条色块将页面整体分割为 4 部分，色块中大多放广告条。

　　3.1.5.4 对称对比布局。

　　它是指采取左右或者上下对称的布局，一半深色，一半浅色。

　　一般用于设计型站点。优点是视觉冲击力强，缺点是将两部分有机地结合比较困难。

　　3.1.5.5 POP 布局。

　　POP 引自广告术语，就是指页面布局像一张宣传海报，以一张精美图片作为页面的设计中心。常用于时尚类站点，比如（图 4），优点显而易见。漂亮且吸引人。缺点是速度慢，但作为版面布局还是值得借鉴的。

　　3.1.6 网页留白的艺术。

　　在国画中，有一句描述谋篇布局的话，叫做"计白当黑" .所谓"疏可走马，密不透风" ,就是说空的地方和着墨的地方一样，都是整体的组成部分。网页设计也是如此，网页上的空白部分，同其它页面内容如文本、图片、动画一样，都是设计者在制作网页时要斟酌的。

　　留白既可以给人带来心理上的松弛，也可以给人带来紧张与节奏。这种手段可以向浏览者传达出设计者的诉求。设计者在设计网页时是在和浏览者做交流。好的设计师能够同浏览者进行心理的对话--不仅仅通过文字、图片、动画，同时也借助留白。只有照顾了整个页面空间的分配，留白才能表现出一定的活力。其实，在排版布局中，我们经常在不知不觉地利用着留白。试想，如果页面上充满了图片和文字，一点空隙都不留，那就根本谈不上韵律。利用留白的体量感来使页面布局平衡，在一种不平衡中营造平衡，就会使页面生动起来。我们应该在网页中通过留白的作用，使整个内容排布得松紧有度，给人以跌宕起伏之感。