1、The Method of Web Layout第九章 网页布局 的方法基础布局Basic Layout1艺术化布局Arttic Layout2布局原则 Principles Layout3目 录CONTENTS2 基础布局 纸上布局法1PART3 软件布局法基 础 布 局Basic Layout9.1.1纸上布局法 先在白纸上画出象征浏览器窗口的矩形，这个矩形就是你布局的范围了，如图9-1至图9-3所示。选择一个形状作为整个页面的主题造型，或者增加一些圆形或者其它形状。这样画下来，你会发现很乱。其实，如果你一开始就想设计出一个完美的布局来是比较困难的，而你要在这看似很乱的图形中找出隐藏在其中
2、的特别的造型出来。还要注意一点，不要担心设计的布局是否能够实现。事实上，只要能想到的布局都能靠现今的技术都能实现。4基 础 布 局Basic Layout9.1.1纸上布局法5图9-1步骤(1)图9-2步骤(2)图9-3步骤(3)基 础 布 局Basic Layout9.1.1纸上布局法6图9-4步骤(4)图9-5步骤(5)其次增加页头，增加文本，增加图片，增加页脚，增加一些辅助多媒体工具，但并不是把一个页面完完整整的都画下来，只需要思考出大体的概括与需要增加的东西，做到心中有数，具体的还是要通过电脑工具进行实现，如图9-4、图9-5所示。基 础 布 局Basic Layout9.1.2软件布
3、局法7图9-6步骤(1)图9-7步骤(2)图9-8步骤(3)如果你不喜欢用纸来画出你的布局意图，那么你还可以利用软件来完成这些工作。这个软件就是Photoshop。Photoshop所具有的对图像的编辑功能用到设计网页布局上更得心应手。利用Photoshop可以方便的使用颜色，绘制图形，并且可以利用层的功能设计出用纸张无法实现的布局意念，如图9-6至图9-8所示。艺术化布局 分割布局法 对称布局法2PART8 平衡布局法 随着科技的发展，人们对美的需求越来越高，对浏览者来说也并不满足于单一的浏览形式，设计者也对自己的页面有更高的设计要求。由此，艺术化的布局方法渐渐被更多的设计者吸收采纳，为当今
4、的网页设计增添更多的色彩。9.2 艺术化布局9艺术化布局Arttic Layout 分割布局就是在一个页面中通过线或者面的分割，把一个完整的网页分成不同尺寸或不同的几个部分，每个部分负责一个内容，这样做的原因是设计者希望不因过大的信息量而导致页面杂乱，贴心的设计，同时也兼具美观。如图9-9至图9-11这几页面运用大小不一的色块拼成一个网页，但色块之间模糊的色调与巧妙和谐的视觉冲突不仅增添了页面的时尚感而且有效防止浏览者浏览页面时的疲惫感。10艺术化布局Arttic Layout9.2.1分割布局法图9-9 块面分割11艺术化布局Arttic Layout9.2.1分割布局法图9-10 斜向分割
5、12艺术化布局Arttic Layout9.2.2对称布局法 何为对称布局，顾名思义，就是在页面中两边的分量相等，不偏向任何一方，不偏不倚刚刚好。如图9-12至图9-14所示就是典型的对称布局法，以牛仔为界限，妙趣横生而又简单明了的对称分割了两个不同的功能界面，更增强了浏览者对此页面的印象与好感度。图9-12 中线对称图9-10 斜向分割13艺术化布局Arttic Layout9.2.3平衡布局法 在绘画中，都知道如在画面的右方画上一个大物体，左方一定要画上几个与大物体同等分量的小物体加以平衡。就像跷跷板一样，跷跷板两边的重量相同，才会平衡不倾斜。同样在网页设计中也是如此，平衡的页面才能让浏览
6、者眼睛轻松，心里舒服。如图9-15至图9-17所示三个页面，很好的运用了平衡布局的方法，文字与图片各占网页的两面，为了不使有图片的一面失衡，设计者很好的加粗加大了文字，使文字与图片达到均衡的分量，两种形式各不相同却并不感到冲突与倾斜，相反达到一种和谐与统一，这就是平衡的魅力。14艺术化布局Arttic Layout9.2.2对称布局法图9-16 图片与图片平衡图9-17 内容与内容平衡图9-15 文字与图片平衡2023-1-14 布局原则3PART15 重复与交错 节奏与韵律 对称与均衡 对比与调和 比例与适度 变异与秩序 虚实与留白 变化与统一 1.重复是网页上某一元素重复利用，但并不是随便
7、的重复，如图9-18只是后面的背景重复利用，造成与球赛一样的草地背景，对浏览者产生一种带入感，更增添了真实性。图9-18 重复9.3.1重复与交错布 局 原 则Layout Principles16 2.交错是网页中元素相交叉，可以重复交叉，如图9-19所示其设计元素其实并没有太多，而是将有限的元素充分利用，但这并没有造成网页的杂乱无章，相反合理的使用不仅使枯燥的网站主题变得灵巧，还增添了趣味性和吸引度。图9-19 交错9.3.1重复与交错布 局 原 则Layout Principles17 曲谱有音符的上下跳跃，拍子有缓急节奏，这些音乐上的专业知识拿到网页设计中依然起很大的作用，轻重缓急的节
8、拍大小使得网页布局流畅，也更加充满韵味。如图9-20和图9-21所示，一个是用屏幕大小来表现节奏，一个是用人物的排列组合来表现韵律，整齐但不刻板，错落而不杂乱。9.3.2节奏与韵律布 局 原 则Layout Principles18图9-20 屏幕大小来表现节奏图9-21 人物的排列组合来表现韵律 有时并不一定是相同大小、相同形状的部分才能达到对称与均衡，图片与字体之间就可以做到，如图9-22所示，其中文字与图片的分量就等同，虽是不一样的形式，却是相等的分量。9.3.3对称与均衡布 局 原 则Layout Principles19图9-22分量等同 稳定的三角式也能达到良好的均衡感，我们都知道
9、三角形是最稳定的图形，如图9-23所示，设计者就深谙此道，一个全黑的页面上，除文字之外只有一个三角形，即便如此，这个画面也不单调，而且相当稳定与和谐，说明并不是非要把页面搞得很复杂，简简单单也可以说明问题。9.3.3对称与均衡布 局 原 则Layout Principles20图9-23均衡感 图形与图形之间就是最简单的对称均衡方式了，如图9-24所示页面就很说明问题，两面的火车都是均等的，甚至底下的图标分量也相同，但这个页面点开后枯燥吗？并不是，除了在颜色上下功夫之外，页面上还会有云彩掉下来，造成一种动态的形式，这就使页面丰富有趣多了。9.3.3对称与均衡布 局 原 则Layout Prin
10、ciples21图9-24对称均衡式 通常所说的对比与调和是不可兼容的两个名词，但在网页设计里，对比与调和可以达到微妙的平衡，带给浏览者美的视觉感受。图9-25、图9-26就是这样，图9-25运用了对比色，但并不感觉到刺眼，因为用的面积不同，并且加入白色来中和，使页面绚烂而不刺眼。图9-26就很明确的区分了次重点，次要的背景运用颜色相近的色块来体现丰富的层次感，主要的内容用黑色体现出来，黑底白字格外明显。9.3.4对比与调和布 局 原 则Layout Principles22图9-25 对比色图9-26 层次感 相同色块的大红配大绿会让人觉得俗不可耐，但稍微改变一下色相与色块大小，就能达到一种
11、共生的和谐。不仅仅是红绿相配，在网页设计里元素大小的比例如图9-27、色块冲突的对比如图9-28，也能使页面达到和谐的效果。9.3.5比例与适度布 局 原 则Layout Principles23图9-27 元素大小的比例图9-28 色块冲突的对比 网页设计中色彩的变化是吸引浏览者驻足的重要因素，同时也通过色彩之间的变化与层次的递进反映网站的主题与表达诉求。如图9-29所示页面采用颜色的渐变，如霓虹灯的闪烁，在黑夜里形成一种鬼魅，加上猫的眼睛，更增添了一种神秘感。如图9-30就直接了许多，像是泼墨一般在红色的背景上泼上绿色的颜料，奔放而显眼。9.3.6变异与秩序布 局 原 则Layout Pr
12、inciples24图9-29颜色的渐变图9-30泼墨式 下面的两个网站如图9-31、图9-32所示，很好的诠释了虚实与留白这两个名词，有时并不需要我们的页面上呈现太满的东西，相反留出一些空间、与背后的元素拉开距离，更能凸显主题，吸引眼球。图9-31这种手法仿佛就是使人在远处观赏这个遥远的小岛，给人以悠远凝神之感。图9-32就是虚实递进，层次丰富，但其中还要细线相连，说明虽是散开的布局，但却是紧紧相连的整体。9.3.7虚实与留白布 局 原 则Layout Principles25图9-31 留白图9-32 虚实 图9-33中的人物好像要冲破黄色的页面一样，但仔细观察其实还是统一在黄色的色调当中
13、。图9-34更是如此，每个字母都有不同的变化，但无论怎么变也都还是原本的字母，也没有变成其他，两个页面都是这样，在统一当中寻求变化，却不打破这种统一。9.3.8变化与统一布 局 原 则Layout Principles26图9-33破碎式统一图9-34均匀式统一 除了上述的八个原则，其实在网页设计中，功能与形式、兼容与响应也很重要，但形式要为功能服务，不能考虑到美观就把布局搞得一塌糊涂。虽说浏览者在欣赏网页时，美观对印象的作用较为重要，但实际浏览者重视的是网页中的内容，所以只有功能与形式完美结合，才算一个好的网页设计。同时，当在设计一个网页时，要考虑到能不能与所有的浏览器进行兼容，因为设计者并不确定浏览者使用的是哪种浏览器，所以制作网页时能达到所有浏览器都能够兼容与响应也很重要。总结布 局 原 则Layout Principles27THANK YOU感谢聆听。28
