网页设计中排版与布局基础

发布日期：2017/6/27

有些人始终认为，网页主要是内容，不需要再搞些门面上的东西，还拿出MUD来比 喻。可是，红花还需要绿叶陪衬。想想，若MUD不只是单纯的文本，还有画面出来， 那么，它所吸引的何止现在的这些MUD迷呢？ 那么，我所要说的到底是什么呢？初学者假如能够了解一些设计上的东西，那么， 自己的页面不会显得乱，自己看了也开心，别人看了也开心，何乐而不为呢？ 

我们的主页，说到底，只是一个800*600的画面，那么，我们要怎么对它进行安排 才合理呢？ 首先，也是主要的一点，就是先停下创作，先想好一个主题?quot;设 计，是一种有目的的创造"。若在脱手之前并不了解自己将要做什么及要怎么做， 而只是一味的靠操作PHOTOSHOP的滤镜而达到一种的话，那么，做出来的 东西局部看得觉得挺不错的，但全局就显得太复杂了。 页面上的构成，假如要让别人一眼望去觉得很BEAUTIFUL，这里面现实上是有很大的学问的。 
　　我们先来说说构成，"构成：是将造型按视觉效应、视觉力学和精神力学等原则组成的，具备美好形态的造型"。 构成形式里，有空间构成（平面构成和立体构成） 和时间构成（静和动）。 我们的创作，就是要协调这里面的种种关系，顺应视觉 感受，才能够打动观看者的视觉，得到我们想要的效果。在这些形形式式里，都有 着如下的部件： 点：我们一般认为，点是指圆形的，但这是不准确的。只要在空间里有特别很是少量的 面积，无法形成一个视觉上感觉的图形，都是一个点。无论什么外形都可以。 线：点荟萃在一路就形成线。 面：一个平面。 体：一个物体。一般是指物体占有的空间，有三维外形。 

　　那么，当点、线、面与体集结在一个页面上时，它们的关系要怎么协调呢？它们之间都有什么作用呢？ 

　　点有集中视线、紧缩空间、引起注重的功能。 两个点相距不远而且外形不等时，一般由小向大看。 近距离的点引起面的感觉。 天真运用点，可使你的页面有一些本质上的转变。 当点占有不同的空间时，它所引起的感觉是不同的。 

　　（1） 居中引起视觉集中注重 。 
　　（2） 上引起下跌落感。 
　　（3） 在上左或上右引起不安定感。 
　　（4） 下方中点，产生扎实感。 
　　（5） 左下右下，增添了动感。 

　　为什么会这样呢？因为人的视觉，都是经过对生活的感觉都得来的。 在下方的东西，一般联想到大地。 在上方的东西，一般联想到浮云。线、面、体亦然。 

　　线，又分为直线和曲线。直线：给人以速度，明确而锐利的感觉，具男性感。曲线，则优美轻快，富于旋律。曲线的用法各异，需结合自己的需要。 而直线又分为斜线、水平线及垂直线。水平线代表平稳、安定、广阔，具扎实感。垂直线则有强烈的上升及下落趋势，可增添动感。斜线，一般我没有怎么使用，因为它造成视觉的一种不安定。


　　人们每看到一个东西，都试图用横直来分析，斜、歪是人们所不愿意见到的，但 适当运用这个要靠个人的感觉。 面，指的是二度空间里的形。 面又分为几何形和任意形，我个人比较喜好任意形，因为它往更具人情味。 几何形使人有一些机械感，但是，每一个图形里都会要用到几何形，请看它们各代表什么： 

　　（1） 圆形：运动及协调美 
　　（2） 矩形：单纯而明确，稳定 
　　（3） 平行四边形：有向一方运动的感觉。 
　　（4） 梯形：稳定，令人联想到山。 
　　（5） 正方形：稳定的扩张。 
　　（6） 正三角形：平稳的扩张。 
　　（7） 倒三角形：不安定，动态及扩张、幻想。 

　　我们在日常生活中所看到的东西，都是因为形与形、图与底的相互关 系。图形之间，图底之间，正因为对比产生差异而被我们所感知所接 受。 图与底的视差越大，图形越清晰，对视觉的冲击力越大。 那么，平面上 有那么多的东西，我怎么才能够确定它是否是主要的呢？请看：易于 成为"视觉中间"的条件： 

　　（1） 居于画面中间。 
　　（2） 垂直或水平的比倾斜更易成为中间。 
　　（3） 被围困。 
　　（4） 相对于其它图形较大的。 
　　（5） 色感要素强烈。 
　　（6） 熟悉的图案，假如这件东西我们很熟，则一定会以它为焦点。 

　　可以把自己认为主要的东西做大一点，凸起一点，色彩鲜艳一点，其它的东西小 而且色调不要那么鲜明，以免抢了主题的"风头"。 注重：图与底之间的关系是很主要的。 假如我们确定了背景，再确定主题，在做页面时不注重而将图与底的关系设置为 1：1，那么，我们也许发现，底与图的力场争夺特别很是激烈，即有时底被我们认为是图。它们之间的关系只是相对，而非。一般来说，底要大于图，而图要鲜于底。 

　　一副图，我们怎样才认为它是美的呢？这涉及到形、声、色的有机结合，打动视知 觉，使观者产生美的共鸣。一般来说，有如下几点： （1） 稳定性：我们的视知觉总是试图找一个平衡点，若找不到则产生紊乱。 （2） 对称性：响应的部位等量，易产于同一的秩序感，但比较单调，可采用增添 局部动势的方法，以取得鲜明、生动的效果。 （3） 非对称平衡：可以平衡为基础，调整尺寸形态结构。或者以形态各异的形， 经视觉判断，放置在确定的位置，以得到预想的平衡。这个和个人的审美有关系。 

事实上，通过上述的一些方法，我们主要是为了创造秩序，使相互的东西能够在 没有互相关扰的系统中起作用。 紊乱与秩序之间的对照唤起了我们的视知觉，我们于是通过平衡、比例、节奏、 协调，在迷乱中建立秩序，形成我们自己的风格。 形成自己作品的气质。 而假如注重自己作品的律动性，即旋律性，可通过主要一个基调实现，对于整个 页面应该有画龙点晴之效。 但要清楚的熟悉到，并非所有的节奏都产生律动性，有时候，听到一些音乐时觉 得它是垃圾，原理是一样的。 

　　旋律要有情感因素，富于转变而又同一的节奏和总体的协调。 流动的旋律，活泼、明快、自由、转变、生机勃勃。 也要注重到，反复、周而 复、单纯或渐变重复虽给人以视觉印象，但过于单调会使人委靡并产生厌烦。必须 在反复中寻找动与静的完美结合，追求单纯与复杂、细腻与奔放、定向与不定向之 间的对比，在构成体例上多探索，多借鉴，求新求变。 以下介绍这方面的方法： 

　　（1） 同质要素的同一，这个比较容易，只要自己多摸索就行了。 
　　（2） 类似要素同一，大小类似，色明度类似就可以了。 
　　（3） 不一样的要素的同一，因为形成对比，因此一般会形成对比，造成零散、 不同一的感觉，要令它产生节奏，一般是在要形成强烈焦点时才使用。 总之，我们要记住这一点： 在相同中求转变，在不同中求同一，使大部分相同，使小部分相异，可取得同一 又富有转变的感觉。 但是，也要注重差异的大小问题。差异是对规律进行突破及形成对比，富于变 化。但是，差异过大，易失去总体协调，过小易被规律沉没，就注重把握尺度， 以不失整体观感的适度对比为准。 

　　我们怎样才能够让别人觉得我们的图片很协调呢？方法如下： 

　　（1） 保留一个相近或近似的因素，天然的过渡 
　　（2） 相互渗透 
　　（3） 行使过渡形 

　　在对比方面，必须有周密的编排，具体如下： 

　　（1） 方向对比 在基本有方向的前提下，大部分相同，小部分不同可形成对比 
　　（2） 位置对比 在页面的安排不要太对称，以避免平板单调。应在舛错称中找到 均衡，由此得到疏密对比。 
　　（3） 虚实对比 事实上，虚与实是一律主要的，画黑则白出，造图则底成。应注 意双方平衡。 
　　（4） 隐显对比 图与底比较，明度差大者显示，明度差小者隐藏。显与隐相辅相 成，能造成雄厚的条理感。 

　　在空间感方面，可以以点、线、面的排列，形成不同的空间感。 如以下方法： 

　　（1） 重叠 
　　（2） 大小 
　　（3） 倾侧，旋转，深度 
　　（4） 弯曲 
　　（5） 明度 
　　（6） 投影 
　　（7） 透视