网页美工—网页色彩与布局设计 第10章 网页布局的技巧

图10-4水平方向的网页
8
网页的平面构成
The Layout of The Page Composition
10.1.1网页中点、线、面的运用
⑵垂直线:垂直线的活动感，正好和水平线相反，垂直线表示向上伸展的活动力， 具有坚硬和理智的意象，使版面显得冷静又鲜明。如果不合理的强调垂直性，就会变 得冷漠僵硬，使人难以接近。如图 4-5所示，垂直方向的网页有一种挺拔的效果。
2
1
PART
网页的平面构成
• 网页中点、线、面的运用 • 构成形式在网页设计中的运用
3
10.1. 网页的平面构成
网页的平面构成
The Layout of The Page Composition
页面设计也同样需要平面构成。 网页设计风格多种多样，除去一些场景化设计和给力的素材支持，大部分工作依赖于平 面构成和排版了。 网页独特的信息传播方式和交互特性使网页设计者在平面构成的创意上受到限制和挑战， 它与纯艺术的平面构成理论存在差异，故称之为“网页平面构成”。这一概念包含了页面 风格、内涵、构图、造型设计等诸多方面。
图10-2等大的按钮（点）与流畅的曲线相结合
6
网页的平面构成
The Layout of The Page Composition
10.1.1网页中点、线、面的运用
2.线构成多用于装饰与分割，同时也 会有连贯的功能。
线条对阅读顺序有着一定的引导作用， 如图10-3所示，用一条主线分割画面，线 条经过的地方有相应的内容呼应。画面因 为这条线而变得生动有趣，也因为它的分 割功能，整合规划了不同的内容区域。
图10-4水平方向的网页
10
网页的平面构成
The Layout of The Page Composition
10..1.2构成形式在网页设计中的运用
平面设计在网页设计中占有相当大的比重，而平面设计的重要理论基础则是平面 构成，所以说，平面构成也是网页设计的重要理论依据和知识基础。
1．布局要新颖 所谓布局是指界面的平面分布安排，即将复杂的内容进行条理化、次序化的编辑处理， 将其组织成一个结构合理、版块搭配适度的页面。其中新颖的形式感非常重要，要根 据不同的内容特点来决定版面的最终形式感。虽不能说牵一发而动全身，但减之一分 则少，增之一分则多的版面处理。
5
网页的平面构成
The Layout of The Page Composition
10.1.1网页中点、线、面的运用
1. 点 构 成 多 用 于细碎东西，整合 排布和文字排版。 集中而规律的排列， 从整体上抓住人们 的 视 觉 ， 如 图 10-1 、 图10-2所示。
图10-1按钮就是最平常不过的点
网页的平面构成
第十章 网页布局
Tips for Web Layout
的技巧
目录
CONTENTS
1
网页的平面构成
The Layout of The Page Composition
2 网页布局的技巧类型 The Type of Web Page 来自百度文库ayout
3 网页布局结构案例解析 Case Analysis of Website Layout Structure
至图10-14就是两类不同版面率的网页。
13
网页的平面构成
The Layout of The Page Composition
10..1.2构成形式在网页设计中的运用
⑵版面率
图10-13不同版面率的网页(3)
图10-11不同版面率的网页(1)
图10-12不同版面率的网页(2)
10-14不同版面率的网页(4)
4
网页的平面构成
The Layout of The Page Composition
10.1.1网页中点、线、面的运用
点构成线，线构成面，这是平面构成中的基本要素，也是所有平面设计的基本要素。 点、线、面并不是指单纯的一个点、一根线、一个平面。我们要善于利用文字和图形的 排布，为自己的网页增添效果。网页中的每一个文字，每一个点，每一个图形都是这个网 页的组成元件，文字可组成图形，图形也可组成文字。
图10-9 Jump 率较低
图10-10Jump 率较高
12
网页的平面构成
The Layout of The Page Composition
10..1.2构成形式在网页设计中的运用
⑵版面率 在设计用纸上，一个文档所使用的排版面积称为版面，而版面和整页面积的比例
称为版面率。空白的多寡对版面的印象，有决定性的影响。 若设计信息量很丰富的杂志版面时，采用较多的空白，显然就不适合。如图10-11
图10-4水平方向的网页
9
网页的平面构成
The Layout of The Page Composition
10.1.1网页中点、线、面的运用
3.若点与线的构成大多为细节处理，那么面的构成则直接影响着网页整体风格和 布局，与线搭配构成空间透视效果。不同面的形状，呈现出的视觉效果也不同。如图 10-7所示，将点、线、面完全融合在一起；图10-8不加任何修饰的自然形态的面同样 生动有趣。
图10-1按钮就是最平常不过的点
图10-2等大的按钮（点）与流畅的曲线相结合
7
网页的平面构成
The Layout of The Page Composition
10.1.1网页中点、线、面的运用
从线的方向感而言可分为水平线与垂直线，在网页设计中二者的运用所产生的效 果迥然不同。
⑴水平线:黄昏时，水平线和夕阳融合在一起，黎明时，灿烂的朝阳由水平线上升 起。水平线给人稳定和平静的感受，无论事物的开始或结束，水平线总是固定的表达 静止的时刻。如图10-4所示，水平方向的网页有一种稳定的效果。
11
网页的平面构成
The Layout of The Page Composition
10..1.2构成形式在网页设计中的运用
⑴JUMP 率 在版面设计上，必须根据内容来决定标题的大小。标题和正文大小的比率就称为
Jump 率。Jump 率越大，版面越活泼；Jump 率越小，版面格调越高。依照这种尺度 来衡量，就很容易判断版面的效果。标题与文本字体大小决定后，还要考虑双方的比 例关系，如何进一步来调整，也是相当大的学问。如图10-9和4-10所示， JUMP率较 低与较高的网页对比效果。