网页美工—网页色彩与布局设计-第10章-网页布局的技巧课件.ppt

1、Tips for Web Layout 第十章 网页布局 的技巧 网页的平面构成The Layout of The Page Composition1 网页布局的技巧类型The Type of Web Page Layout2网页布局结构案例解析Case Analysis of Website Layout Structure3目 录CONTENTS2 网页的平面构成 网页中点、线、面的运用1PART 构成形式在网页设计中的运用3 网页的平面构成The Layout of The Page Composition10.1.网页的平面构成 页面设计也同样需要平面构成。网页设计风格多种多样，除去一

2、些场景化设计和给力的素材支持，大部分工作依赖于平面构成和排版了。网页独特的信息传播方式和交互特性使网页设计者在平面构成的创意上受到限制和挑战，它与纯艺术的平面构成理论存在差异，故称之为“网页平面构成”。这一概念包含了页面风格、内涵、构图、造型设计等诸多方面。4 网页的平面构成The Layout of The Page Composition10.1.1网页中点、线、面的运用 点构成线，线构成面，这是平面构成中的基本要素，也是所有平面设计的基本要素。点、线、面并不是指单纯的一个点、一根线、一个平面。我们要善于利用文字和图形的排布，为自己的网页增添效果。网页中的每一个文字，每一个点，每一个图形都

3、是这个网页的组成元件，文字可组成图形，图形也可组成文字。5 网页的平面构成The Layout of The Page Composition 1.点构成多用于细碎东西，整合排布和文字排版。集中而规律的排列，从整体上抓住人们的视觉，如图10-1、图10-2所示。图10-1按钮就是最平常不过的点图10-2等大的按钮（点）与流畅的曲线相结合10.1.1网页中点、线、面的运用6 网页的平面构成The Layout of The Page Composition 2.线构成多用于装饰与分割，同时也会有连贯的功能。线条对阅读顺序有着一定的引导作用，如图10-3所示，用一条主线分割画面，线条经过的地方有相

4、应的内容呼应。画面因为这条线而变得生动有趣，也因为它的分割功能，整合规划了不同的内容区域。图10-1按钮就是最平常不过的点图10-2等大的按钮（点）与流畅的曲线相结合10.1.1网页中点、线、面的运用7 网页的平面构成The Layout of The Page Composition 从线的方向感而言可分为水平线与垂直线，在网页设计中二者的运用所产生的效果迥然不同。水平线:黄昏时，水平线和夕阳融合在一起，黎明时，灿烂的朝阳由水平线上升起。水平线给人稳定和平静的感受，无论事物的开始或结束，水平线总是固定的表达静止的时刻。如图10-4所示，水平方向的网页有一种稳定的效果。图10-4水平方向的网页

5、10.1.1网页中点、线、面的运用8 网页的平面构成The Layout of The Page Composition 垂直线:垂直线的活动感，正好和水平线相反，垂直线表示向上伸展的活动力，具有坚硬和理智的意象，使版面显得冷静又鲜明。如果不合理的强调垂直性，就会变得冷漠僵硬，使人难以接近。如图 4-5所示，垂直方向的网页有一种挺拔的效果。图10-4水平方向的网页10.1.1网页中点、线、面的运用9 网页的平面构成The Layout of The Page Composition 3.若点与线的构成大多为细节处理，那么面的构成则直接影响着网页整体风格和布局，与线搭配构成空间透视效果。不同面的

6、形状，呈现出的视觉效果也不同。如图10-7所示，将点、线、面完全融合在一起；图10-8不加任何修饰的自然形态的面同样生动有趣。图10-4水平方向的网页10.1.1网页中点、线、面的运用10 网页的平面构成The Layout of The Page Composition 平面设计在网页设计中占有相当大的比重，而平面设计的重要理论基础则是平面构成，所以说，平面构成也是网页设计的重要理论依据和知识基础。1布局要新颖 所谓布局是指界面的平面分布安排，即将复杂的内容进行条理化、次序化的编辑处理，将其组织成一个结构合理、版块搭配适度的页面。其中新颖的形式感非常重要，要根据不同的内容特点来决定版面的最终

7、形式感。虽不能说牵一发而动全身，但减之一分则少，增之一分则多的版面处理。10.1.2构成形式在网页设计中的运用11 网页的平面构成The Layout of The Page CompositionJUMP 率 在版面设计上，必须根据内容来决定标题的大小。标题和正文大小的比率就称为 Jump 率。Jump 率越大，版面越活泼；Jump 率越小，版面格调越高。依照这种尺度来衡量，就很容易判断版面的效果。标题与文本字体大小决定后，还要考虑双方的比例关系，如何进一步来调整，也是相当大的学问。如图10-9和4-10所示，JUMP率较低与较高的网页对比效果。10.1.2构成形式在网页设计中的运用图10-

8、9 Jump 率较低 图10-10Jump 率较高12 网页的平面构成The Layout of The Page Composition版面率 在设计用纸上，一个文档所使用的排版面积称为版面，而版面和整页面积的比例称为版面率。空白的多寡对版面的印象，有决定性的影响。若设计信息量很丰富的杂志版面时，采用较多的空白，显然就不适合。如图10-11至图10-14就是两类不同版面率的网页。10.1.2构成形式在网页设计中的运用13 网页的平面构成The Layout of The Page Composition版面率 10.1.2构成形式在网页设计中的运用 图10-12不同版面率的网页(2)图10-

9、13不同版面率的网页(3)10-14不同版面率的网页(4)图10-11不同版面率的网页(1)网页的平面构成The Layout of The Page Composition留白量 “留白”并不特指网页中的白色区域。网页中凡是没有前景元素干扰的视觉区域称作“留白”。横向通栏的留白可以让网页拥有一种水平的流动感；纵向的留白可以平衡文字、导航栏等视觉元素在水平方向的作用力；标题区域的大面积留白可以突出公司名称或网页标题信息；正文区域内的大面积留白既可以丰富页面布局的内涵，也可以缓解浏览者在阅读时可能产生的视觉疲劳感。如图10-15、图10-16所示，都有着不同的留白区域量，相信给大家的视觉效果决然

10、不同。10.1.2构成形式在网页设计中的运用15 网页的平面构成The Layout of The Page Composition视觉导线 依眼睛所视或物体所指的方向，使版面产生导引路线，称为视觉导线。每当打开一个新的网页后，人的视线首先会聚集在网页中最引人注意的那一点上我们通常称其为视觉焦点。随后，我们的视觉会受到视觉焦点周边设计元素的形状和分布方式的影响，并在不知不觉中把视线转移到另一个值得停留的地方,视线经过的所有关注点可以连接成一条完整的视觉路径。10.1.2构成形式在网页设计中的运用16 网页的平面构成The Layout of The Page Composition 设计家在制

11、作构图时，常利用导线达到整体画面更引人注目的目的。也就是人们常说的“视觉流程”。如图10-17至图10-20所示，大家可以试着找到合理的视觉流程。10.1.2构成形式在网页设计中的运用图10-17由左上开始的视觉流程 图10-18由左下开始的视觉流程17 网页的平面构成The Layout of The Page Composition 如图10-17至图10-20所示，大家可以试着找到合理的视觉流程。10.1.2构成形式在网页设计中的运用图10-19中心发散的视觉流程 图10-20由上至下的视觉流程18 网页的平面构成The Layout of The Page Composition形态的

12、意象 一般的编排形式，皆以四角型（角版）为标准形，其它的各种形式都属于变形。角版的四角皆成直角，给人很规律，表情少的感觉，其它的变形则呈现形形色色的表情。三角形的编排方式有锐利、鲜明感；近于圆形的编排方式，有温和、柔弱之感。相同的曲线，也有不同的表情，例如规规矩矩和用仪器画出来的圆，有硬质感；徒手画出来的圆就有柔和的圆形曲线之美。如图10-21标准型、图10-22曲线形网页、图10-23、图10-24有手工绘制痕迹的网页对比效果。10.1.2构成形式在网页设计中的运用19 网页的平面构成The Layout of The Page Composition10.1.2构成形式在网页设计中的运用2

13、0 图10-23有手工绘制痕迹的网页(一)图10-24有手工绘制痕迹的网页(二)图10-21标准型 图10-22曲线形网页 网页的平面构成The Layout of The Page Composition阳昼、阴昼 从黑暗的洞窟内，看外面明亮景象时，洞窟内的人物，总是只用轮廓表现，而外面的景色就需小心描画了。正逆光所形成的形象剪影会显出不可思议的空间效果。正常的明暗状态，叫做“阳昼”，相反的情况是“阴昼”。构成版面时，使用这种阳昼和阴昼的明暗关系，可以描画出日常感觉不同的新意象。如图10-25阳昼式的网页形象、图10-26阴昼式的网页形象对比效果。10.1.2构成形式在网页设计中的运用21

14、网页的平面构成The Layout of The Page Composition10.1.2构成形式在网页设计中的运用22图10-25阳昼式的网页 图10-26阴昼式的网页 网页的平面构成The Layout of The Page Composition2.对比 加强页面的对比因素 是吸引人们关注的有效手段，页面上的各种文字、图片在设计时就应构思好相互之间的对比关系。要大小参差变化，疏密衬托有致，轻重感觉均衡，明暗对比适度，设计上别具一格。这些因素对网页设计的成功与失败起着至关重要的作用。10.1.2构成形式在网页设计中的运用23 网页的平面构成The Layout of The Page

15、 Composition小的对比 大小关系为造型要素中最受重视的一项，几乎可以决定意象与调和的关系。大小的差别少，给人的感觉较沉着温和；大小的差别大，给人的感觉较鲜明，而且具有强力感（图10-27）。10.1.2构成形式在网页设计中的运用24图10-27大小的对比 网页的平面构成The Layout of The Page Composition明暗的对比 阴与阳、正与反、昼与夜等等，如此类的对比语句，可使人感觉到日常生活中的明暗关系。初生的婴儿，最初在视觉上只能分出明暗，而牛、狗等动物虽能简单识别黑白，对彩度或色相却无法轻易识别，由此可知，明暗（黑和白）乃是色感中最基本的要素（图10-28）

16、。10.1.2构成形式在网页设计中的运用25图10-28明暗的对比 网页的平面构成The Layout of The Page Composition粗细的对比 字体愈粗，愈富有男性的气概。若代表时尚与女性，则通常以细字表现。细字如果份量增多，粗字就应该减少，这样的搭配看起来比较明快。如图10-29和4-30所示，分别是粗字体和细字体的网页设计表现效果。10.1.2构成形式在网页设计中的运用26图10-29粗字体的网页设计表现 图10-30细字体的网页设计表现 网页的平面构成The Layout of The Page Composition曲线和直线的对比 曲线很富有柔和感、缓和感；直线则富

17、有坚硬感、锐利感，极具男性气概。自然界中，皆由这两者适当混合。平常人们并不注意这种关系，可是，当曲线或直线强调某形状时，人们便有了深刻的印象，同时也产生相对应的情感。所以人们常常为加深曲线印象，而以一些直线来强调，也可以说，少量的直线会使曲线更引人注目。如图10-31和4-32所示，分别是曲线性格为主和直线性格为主的网页设计。10.1.2构成形式在网页设计中的运用27 网页的平面构成The Layout of The Page Composition10.1.2构成形式在网页设计中的运用28图10-31以曲线为主的网页设计 图10-32以直线为主的网页设计 网页的平面构成The Layout

18、of The Page Composition质感的对比 在一般人的日常生活中，也许很少听到质感这句话，但是在美术方面，质感却是很重要的造型要素。譬如松弛感、平滑感、湿润感等等，皆是形容质感。故质感不仅只表现出情感，而且与这种情感融为一体。通常画家的作品，常会注意其色彩与图面的构成，其实，质感才是决定作品风格的主要因素，虽然色彩或对象物会改变，可是，作为基础的质感，是与一位画家之本质有着密切的关系，是不易变更的。若是外行人就容易疏忽这一点，其实，这才是最重要的基础要素，也是对情感最强烈的影响力。如图10-33至图10-36 所示，分别为水墨质感、金属质感、厚朴质感、清新质感的对比。10.1.2

19、构成形式在网页设计中的运用29 网页的平面构成The Layout of The Page Composition10.1.2构成形式在网页设计中的运用30图10-33水墨质感 图10-34金属质感图10-35厚朴质感 图10-36清新质感 网页的平面构成The Layout of The Page Composition位置的对比 在画面两侧放置某种物体，不但可以强调，同时也可产生对比。画面的上下、左右和对角线上的四隅皆有潜在性的力点，而在此力点处配置照片、大标题或标志、记号等等，便可显出隐藏的力量。因此在潜在的对立关系位置上，放置鲜明的造形要素，可显示出对比关系，并产生具有紧凑感的画面。如

20、图10-37至4-40所示，画面主体在“一侧”、“中心”、“上方”、“下方”位置的对比构成。10.1.2构成形式在网页设计中的运用31 网页的平面构成The Layout of The Page Composition10.1.2构成形式在网页设计中的运用32图10-33水墨质感 图10-34金属质感图10-35厚朴质感 图10-36清新质感 网页的平面构成The Layout of The Page Composition主与从的对比 版面设计也和舞台设计一样，主角和配角的关系很清楚时，观众的心理会安定下来。明确表示主从的手法是很正统的构成方法，会让人产生安心感。如果两者的关系模糊，会令人无

21、所适从，相反，主角过强就失去动感，变成庸俗画面。戏剧中的主角，人人一看便知。版面中若也能表现出何者为主角，会使读者更加了解内容。所以主从关系是设计配置的基本条件。如图10-41、图10-42所示画面（文字）主从分明的网页构成。10.1.2构成形式在网页设计中的运用33 网页的平面构成The Layout of The Page Composition10.1.2构成形式在网页设计中的运用34图10-42画面主从分明（二）图10-41画面主从分明（一）网页的平面构成The Layout of The Page Composition 动与静的对比 一个故事都有开端、发展、高潮、转变和结果。一座庭

22、院有假山、池水、草木、瀑布等等的配合。同样的在网页设计配置上也有激烈的动态与静态对比。扩散或流动的形状即为“动”。水平或垂直性的形状则为“静”。把这两者配置于相对之处，而以“动”部分占大面积，“静”部分占小面积，并在周边留出适当的留白以强调其独立性。这样的安排，一般用来配置于画面四隅的重点。因此，“静”部分虽只占小面积，却有很强的存在感。如图10-43至图10-45所示，充满动感的页面、静止的页面、动静结合的页面对比效果。10.1.2构成形式在网页设计中的运用35 网页的平面构成The Layout of The Page Composition10.1.2构成形式在网页设计中的运用36图10

23、-44静止的页面 图10-45动静结合的页面图10-43充满动感的画面 网页的平面构成The Layout of The Page Composition 多重对比 对比还有曲线与直线、垂直与水平、锐角与钝角等种种不同的对比。如果再将前述的各种对比和这些要素加以组合搭配，即能制作富有变化的画面。如图10-46、4-47所示，包含多重构成对比的网页。10.1.2构成形式在网页设计中的运用37图10-47包含多重对比的网页（二）图10-46包含多重对比的网页（一）网页的平面构成The Layout of The Page Composition 色彩对比 强烈的色彩对比也会引起人们的视觉停留，这种

24、对比方式一般多用于对立状态或者有着正反义词组的页面，也有时出现在Q版卡通页面中，如图10-48、4-49所示对比色色彩鲜艳亮丽，反应出孩子的多彩世界。10.1.2构成形式在网页设计中的运用38图10-48色彩对比强烈的网页（一）图10-49色彩对比强烈的网页（二）网页的平面构成The Layout of The Page Composition 3变化又统一 对版面外形的选择应遵守变化统一的设计原则，既不刻意追求外形的变化，使版面分割繁琐凌乱；又不简单划分版面界限，使得页面显得单一刻板。所谓万变不离其宗，反复的比较、精心的安排、整体的权重是设计好网页的基本要求，同时也是网页设计的最终选择。起与

25、受 版面全体的空间因为各种力的关系，而产生动态，进而支配空间。产生动态的形状和接受这种动态的另一形状，互相配合着，使空间变化更生动。10.1.3构成形式在网页设计中的运用39 网页的平面构成The Layout of The Page Composition 建造假山庭园时很注重流水的出口，因为流水的出口是动感的出发点，整个庭园都会因它而被影响。谈到版面构成原理也一样，起点和受点会彼此呼应、协调。两者的距离愈大，效果愈显著，而且可以利用画面的两端。但要特别注意起点和受点的平衡，必须有适当的强弱变化才好，若有一方太软弱无力就不能引起共鸣。如图10-50所示，构成中的起与受的呼应。10.1.3构成

26、形式在网页设计中的运用40图10-50起与受的呼应 网页的平面构成The Layout of The Page Composition图与地 明暗逆转时，图与地的关系就会互相变换。一般印刷物都是白纸印黑字，白纸称为地，黑字称图。相反的，有时会在黑纸上印上反白字的效果，此时黑底为地，白字则为图，这是黑白转换的现象。如图10-51黑底白字的网页,图10-52白底黑字的网页的对比效果。10.1.3构成形式在网页设计中的运用41图10-52白底黑字的网页图10-51黑底白字的网页 网页的平面构成The Layout of The Page Composition平衡 走路踢到障碍物时，身体会因此失去平

27、衡而跌倒，此时很自然地会迅速伸出一只手或脚，以便维持身体平衡。根据这种自然原理，如果人们改变一件好的原作品的各部分的位置，再与原作品比较分析，就能很容易理解平衡感的构成原理。如图10-53、图10-54平衡的网页构成效果。10.1.3构成形式在网页设计中的运用42图10-53平衡的网页构成效果(1)图10-54平衡的网页构成效果(2)网页的平面构成The Layout of The Page Composition对称 以一点为起点，向左右同时展开的形态，称为左右对称形。应用对称的原理即可发展出漩涡形等等复杂状态。如图10-55、图10-56对称的网页构成。日常生活中，常见的对称事物确实不少，

28、例如：佛像的配置或神殿的配置等等，对称会显出高格调、风格化的意象。10.1.3构成形式在网页设计中的运用43图10-53平衡的网页构成效果(1)图10-54平衡的网页构成效果(2)网页的平面构成The Layout of The Page Composition强调 同一格调的版面中，在不影响格调的条件下，加进适当的变化，就会产生强调的效果。强调打破了版面的单调感，使版面变得有朝气、生动而富于变化。例如：版面皆为文字编排，看起来索然无味，如果加上插图或照片，就如一颗石子丢进平静的水面，产生一波一波的涟漪。如图10-57、图10-58起强调作用的图片、文字。10.1.3构成形式在网页设计中的运用

29、44图10-57图片起强调作用 图10-58文字起强调作用 网页的平面构成The Layout of The Page Composition比例 希腊美术的特色为“黄金比”，在设计建筑物的长度、宽度、高度和柱子的型式、位置时，如果能参照“黄金比”来处理，就能产生希腊特有的建筑风格，也能产生稳重和适度紧张的视觉效果。长度比、宽度比、面积比等等比例，能与其它造形要素产生同样的功能，表现极佳的意象，因此，使用适当的比例，是很重要的。黄金比例不仅在大的布局上可以使用，在小的栏目设计中也可以灵活使用。可以细化到很小的设计元素，比如一块图片信息展示区域。10.1.3构成形式在网页设计中的运用45 网页的

30、平面构成The Layout of The Page Composition比例 在页面布局方面，一般都是比较弹性的，因为这样页面可以充满浏览者的屏幕空间，而不管视窗的大小尺寸是多少，这对于那些高分辨率宽屏的用户来说是有意义的。而对于坚持固定像素宽度的设计者来说，1024768px就是王道，摒弃了两端的使用人群。如图10-59至图10-62所示，要为一个950px宽度居中页面来设计栏目，根据黄金比例原则，这样设计的Web布局具有一定的平衡感，整个页面也比较和谐。除此之外还有一些常用的理想比例，如德国标准比例(1:1.41)，中国传统图案比例等。10.1.3构成形式在网页设计中的运用46 网页的

31、平面构成The Layout of The Page Composition10.1.3构成形式在网页设计中的运用47图10-61黄金比例应用效果 图10-62黄金比例应用效果图10-59利用黄金比例分割的页面 图10-60利用黄金比例分割的页面 网页的平面构成The Layout of The Page Composition韵律感 具有共通印象的形状，反复排列时，就会产生韵律感。不一定要用同一形状的东西，只要具有强烈印象就可以了。三次四次的出现就能产生轻松的韵律感。有时候，只反复使用二次具有特征的形状，就会产生韵律感。如图10-63至图10-66所示页面具有轻松的韵律感的表现形式。10.1

32、.3构成形式在网页设计中的运用48图10-57图片起强调作用 图10-58文字起强调作用 网页的平面构成The Layout of The Page Composition左右的重心 在人的自我感觉上，左右有微妙的相差。如果画面的右下角有一处吸引力特别强的地方，则在考虑左右平衡时，如何处理这个地方就成为关键性问题。人的视觉对从左上到右下的流向较为自然。编排文字时，将右下角留空来编排标题与插画，就会产生一种很自然的流向。如果把它逆转就会失去平衡而显得不自然。这种左右方向的平衡感，可能是和人们惯用右手有点关系吧！如图10-67至图10-70所示，分别是重心在不同位置的页面布局效果。10.1.3构成

33、形式在网页设计中的运用49 网页的平面构成The Layout of The Page Composition左右的重心 10.1.3构成形式在网页设计中的运用50图10-67重心在左下角的页面布局效果 图10-68重心在右下角的页面布局效果 网页的平面构成The Layout of The Page Composition左右的重心 10.1.3构成形式在网页设计中的运用51 图10-69重心居中的页面布局效果 图10-70左右相对均衡的页面布局效果 网页的平面构成The Layout of The Page Composition向心与扩散 在人们的情感中，总是会首先意识事物的中心部分。好

34、像只有这样，才有安全感，这就构成了视觉的向心。一般而言，向心型看似温柔，也是设计师一般所喜欢采用的方式，但容易流于平凡。而离心型的排版，可以称为是一种扩散型，它不利于文字的阅读和整体排版，所以一般发射形式多用于背景图片，或者一些小部分细节处理上。图10-71扩散式的网页构成、图10-72集中式的网页构成。10.1.3构成形式在网页设计中的运用52 网页的平面构成The Layout of The Page Composition向心与扩散 图10-71扩散式的网页构成、图10-72集中式的网页构成。10.1.3构成形式在网页设计中的运用53 图10-71扩散式的网页构成 图10-72集中式的网

35、页构成 网页的平面构成The Layout of The Page Composition统一与调和 如果过分强调对比关系，空间预留太多或加上太多造型要素时，容易使画面产生混乱。要调和这种现象，最好添加一些共通的造形要素，使画面产生共通的格调，具有整体统一与调和的感觉。反复使用同形的事物，能使版面产生调和感。若把同形的事物配置在一起，便能产生连续的感觉。两者相互配合运用，能创造出统一与调和的效果。如图10-73至图10-76所示形式统一的网站，图10-75、图10-76所示色调统一的网站。10.1.3构成形式在网页设计中的运用54 网页的平面构成The Layout of The Page C

36、omposition统一与调和 如图10-73至图10-76所示形式统一的网站，图10-75、图10-76所示色调统一的网站。10.1.3构成形式在网页设计中的运用55图10-71扩散式的网页构成 图10-72集中式的网页构成 网页的平面构成The Layout of The Page Composition统一与调和 如图10-75、图10-76所示色调统一的网站。10.1.3构成形式在网页设计中的运用56图10-75色调统一的网站 图10-76色调统一的网站 网页的平面构成The Layout of The Page Composition屏幕上字的大小 多媒体影像通常是在计算机影像显示器

37、（monitor）或在电视机上呈现。根据分析，为了视觉的舒适感，呈现在计算机影像显示器上最小且清晰的中文字型应为 16 pixels（宽）16 pixels（高）点阵字型的细明体（细明体是 Microsoft Windows 中文版内附的中文字型，由华康科技（今名“威锋数位”）所制作。当使用于不能显示中文字型名称的系统时，会显示为MingLiU）。至于呈现在电视机上最小且清晰的中文字型应为 36 pixels（W）36 pixels（H）的点阵字型，这是因为电视机需要从较远的距离观看的缘故。从阅读习惯来看，为了配合人们横向阅读中文的最佳状态是，一行最好不要超过 35 个字。如图10-77、图1

38、0-78所示，都是字体编排合理的网页。10.1.3构成形式在网页设计中的运用57 网页的平面构成The Layout of The Page Composition屏幕上字的大小 10.1.3构成形式在网页设计中的运用58图10-77字体编排合理的网页(1)图10-78字体编排合理的网页(2)网页布局的技巧类型2PART59 当设计者面对紧急的制作催促时，或是灵感匮乏时，有一些巧妙而又便捷的技巧类型能使设计者在短时间内设计出美观而又打动人心的网页界面。6010.2 页面布局的技巧类型 网页布局的技巧类型The Type of Web Page Layout1.黄金分割布局 黄金分割是世界上最美

39、的一条分割线，运用到网页设计上也是相当的实用和巧妙。如图10-79、图10-80就灵巧的运用了这一黄金分割。图10-79中的文字和图片各执一边，但在我们的视觉感触上文字部分稍弱，甚至中间的一部分留白也被不自觉的划分到图片这一边，图片跟留白相加正好与文字形成黄金分割的节点，这样的组合使人舒服而不紧凑。6110.2 页面布局的技巧类型 网页布局的技巧类型The Type of Web Page Layout图10-79图片与数字的黄金分割 日本的网页总是简洁不花哨，如图10-80就是典型的日本风格，白纸黑字，但白字黑字也不是随意写上，按照现代人的视觉习惯尽量的往左边填写，它并没有把短行文字放在正中

40、间，而是运用了黄金分割的原理错落有致的把文字排放的简雅。6210.2 页面布局的技巧类型 网页布局的技巧类型The Type of Web Page Layout图10-80文字间的黄金分割2.左右对齐布局 如图10-81所示页面是相当典型的左右对齐式，黄色与黑色均等的分割了整个页面，然后通过一个箭头相联系，这个网页一张图片也没有，但也并没有觉得枯燥，相反还觉得很独特，因为很少有人敢这样果敢的把页面设计成这样，也是令人印象深刻。6310.2 页面布局的技巧类型 网页布局的技巧类型The Type of Web Page Layout图10-81左右对齐布局3.全景式布局 这种全景式的方式是目前

41、较为流行的布局方法，这种布局方法不仅十分时尚，而且十分大方，有很强的冲击感，多用于宣传企业形象等。如图10-82、图10-83就直接用了一张高清图片作为背景，文字很少甚至第一眼关注不到，相反图片却很引人瞩目。6410.2 页面布局的技巧类型 网页布局的技巧类型The Type of Web Page Layout图10-83全景式布局2图10-82全景式布局14.卫星式布局 某些需要重点标注内容或是方位的网站需要这种卫星式的布局，同时一些图表类较多的网站也会运用这种布局。如图10-84就是这样，需要在地图上标注还要说明，一个小小的页面怎能全部显示出来，设计者就很聪明的运用这种放大标注的方法把该

42、缩小的缩小，该详细的详细，不失为一个好方法。6510.2 页面布局的技巧类型 网页布局的技巧类型The Type of Web Page Layout图10-94卫星式布局 5.照片组合式布局 此类布局多以摄影网站或是需要大量图片说明的网站运用。如图10-85把网站里的摄影作品密密麻麻的拼接在一起，让人眼花缭乱，让人很想去仔细看看每张图片到底是什么，鼠标经过的地方黑白的图片就变成彩色的，点开其中某张图片就转换为二级页面，这也不失为一个好方法。图10-86就没有图10-85那么紧凑，同为摄影网站，图10-86就显得从容些，照片也是错落有致的摆放，使浏览者的眼睛没有那么紧张。6610.2 页面布局

43、的技巧类型 网页布局的技巧类型The Type of Web Page Layout图10-94卫星式布局图10-85紧凑照片组合式布局 6.包围式布局 这种布局运用率较少，但在特殊说明时也不失为好的题材。如图图10-87所示，使用图画的方式，就像在黑板上画画，勾起浏览者的某些记忆，同时也不严肃的表现网站主题，轻松活泼很有意思。6710.2 页面布局的技巧类型 网页布局的技巧类型The Type of Web Page Layout图10-87包围式布局 7.散开式布局 有些网站并不需要大篇幅的说明内容，好的设计才是网站的卖点，所以这种反常规的设计方式也是一种好的选择，散而不乱才是这类网页的精

44、髓所在。如图10-88、图10-89都是用了几个色块就把问题说的清清楚楚，看似零零散散的几个几何图形却有合理的设计在里面，同时颜色都运用的十分贴切，也是很好地设计诉求。6810.2 页面布局的技巧类型 网页布局的技巧类型The Type of Web Page Layout8.单侧齐行式布局在一些个人网站或是3D炫酷网站经常会运用这种方式，轻触鼠标就可以跟网页进行互动，也是很有意思的事情。如图10-90的表单在网页的左侧，右侧的大部分都是装饰的构成，而且鼠标点到之处就会出现不同的动画，十分可爱。如图10-91更是炫酷，虽然表面看起来是简单的环形设置，实则随着鼠标的移动会有不同的画面轮番出现，而

45、且会出现不同的效果，高科技感十足，与以往的传统网页十分不同。6910.2 页面布局的技巧类型 网页布局的技巧类型The Type of Web Page Layout图10-91中齐行式布局图10-90左单侧齐行式布局 9.对称式布局 这种布局方式在页面上平衡的感觉给人以稳定、平和的效果，但并不是左右上下都要对称，只要上下、两侧之间达到一种制衡的关系，就可以达到一种对称的感觉。如图10-92所示不仅是图案，甚至文字也是相当的均匀，这种网页想倾斜一下都觉得很困难。而图10-93虽说没有在图片的均等上下功夫，但两张小图片的相加等同于一张大的图片，这也是一种合适的对称方式。7010.2 页面布局的技

46、巧类型 网页布局的技巧类型The Type of Web Page Layout图10-89几何散开式图10-88几何散开式网页布局结构案例解析3PART71网页布局结构案例解析Case Analysis of Website Layout Structure10.3 网页布局结构案例解析721.悉尼水晶宫场馆网站图10-94所示网页大红色的背景色引人注目，并和页面中的红色形成对比。版式上是简单的横向分割式，但在细节上处理出丰富的层次感。页头部分的Logo和主导航栏、页中和页尾部分略带角度的图片，打破了原有页面的矩形外廓，制造出层次和变化，带给页面更多的灵动。图10-94悉尼水晶宫网页网页布局

47、结构案例解析Case Analysis of Website Layout Structure732.DesignBombs设计网站 图10-95是一个设计网站，页面中的内容较多，但是在版式的设计上却清晰明了，张弛有度。页面布局在分割式的基础上进行了丰富。页面左右分成两大块，一块底色为黑色，一块为灰色。灰色块面积稍大，展示了数量不少的设计案例的图片。黑色块面积稍小，放置着文本形式的导航链接等。图片的绚丽丰富和导航栏的严谨条理相组合，给网页带来层次和秩序。在视觉上很好的引导了浏览者的视觉流程。图10-95 DesignBombs网页10.3 网页布局结构案例解析网页布局结构案例解析Case An

48、alysis of Website Layout Structure3.某基督教会网站 图10-96是一个基督教会的网页，充满热情的红色张扬而温暖。页尾的红色比页头页中的红色略有区别，页头页中的红色中隐约的+字符号等图形给底色带来微妙的变化。黄色和白色的文本在红色的底色上保持了清晰度，并添加了层次感。整个网页的色彩的搭配简洁清爽。版式设计同样是简洁的框架式，页中部分个栏目区域划分清晰。因为色彩的简洁和版式的条理，视觉效果没有因为大面积的红色而感到刺激，感受的是温暖和宽厚。图10-96基督教会的网页7410.3 网页布局结构案例解析网页布局结构案例解析Case Analysis of Websi

49、te Layout Structure754.伊丽莎白雅顿网站 图10-97是伊丽莎白雅顿的官网页面。页头页中部分用纸页的形式展示，页中底部的阴影制造出立体感，页尾部分在灰色的背景色上。这一处细节打破了原本简单的版式，制造出层次和主次。页头部分用醒目的LOGO展示出页面的主题。灰色的导航条把页头和页中部分隔开。页中部分又分成左右两部分，左侧是竖栏的导航。右侧是产品的展示。网页的颜色上使用了品牌色，符合产品风格。图10-97伊丽莎白雅顿的官网10.3 网页布局结构案例解析网页布局结构案例解析Case Analysis of Website Layout Structure5.Citricox网站

50、图10-98所示网页令人过目难忘。网页配色和版式的小细节使网页显得精致。主色调是偏向黄绿，清新的绿色带来生机勃勃的感觉。页中部分的绿色过渡给网页带来小对比大调和的效果。图10-98 Citricox网页7610.3 网页布局结构案例解析网页布局结构案例解析Case Analysis of Website Layout Structure6.M50网站图10-99是M50的网页。第（1）个是M50的导入页面，属于flash 型，页面由富有设计感的黑白灰组成，整个页面效果简洁时尚。页面左侧是游动出现的是flash风格的导航栏；灰色的文本并没有因为灰色的底色而消弱它的视觉识别。右侧的黑色块在充满质感