网页布局理念.docx

1、网页布局理念网页布局理念网站制作流程：站点定位 策划方案 资料收集 站点框架设定 站点流程定义 各级栏目页面的框架草图 各级栏目页面的样图 制作页面模板 静态页面制作/后台程序开发（可同时进行） 页面整合 局域网调试 发布（上传/服务器配置/数据库配置） WWW调试 正式发布 永不止境的维护工作（直到网站倒闭为止）。网页可以说是网站构成的基本元素。当我们轻点鼠标，在网海中遨游，一副副精彩的网页会呈现在我们面前，那么，网页的精彩与否的因素是什么呢？色彩的搭配、文字的变化、图片的处理等，这些当然是不可忽略的因素，除了这些，还有一个非常重要的因素网页的布局。下面，我们就有关网页布局谈论一下。 网页布

2、局类型 网页布局大致可分为“国”字型、拐角型、标题正文型、左右框架型、上下框架型、综合框架型、封面型、Flash型、变化型，下面分别论述。 1、“国”字型：也可以称为“同”字型，是一些大型网站所喜欢的类型，即最上面是网站的标题以及横幅广告条，接下来就是网站的主要内容，左右分列一些两小条内容，中间是主要部分，与左右一起罗列到底，最下面是网站的一些基本信息、联系方式、版权声明等。这种结构是我们在网上见到的差不多最多的一种结构类型。 2、拐角型：这种结构与上一种其实只是形式上的区别，其实是很相近的，上面是标题及广告横幅，接下来的左侧是一窄列链接等，右列是很宽的正文，下面也是一些网站的辅助信息。在这种

3、类型中，一种很常见的类型是最上面是标题及广告，左侧是导航链接 3、标题正文型：这种类型即最上面是标题或类似的一些东西，下面是正文，比如一些文章页面或注册页面等就是这种类。 4、左右框架型：这是一种左右为分别两页的框架结构，一般左面是导航链接，有时最上面会有一个小的标题或标致，右面是正文。我们见到的大部分的大型论坛都是这种结构的，有一些企业网站也喜欢采用。这种类型结构非常清晰，一目了然。 5、上下框架型：与上面类似，区别仅仅在于是一种上下分为两页的框架。 6、综合框架型：上页两种结构的结合，相对复杂的一种框架结构，较为常见的是类似于“拐角型”结构的，只是采用了框架结构。 7、封面型：这种类型基本

4、上是出现在一些网站的首页，大部分为一些精美的平面设计结合一些小的动画，放上几个简单的链接或者仅是一个“进入”的链接甚至直接在首页的图片上做链接而没有任何提示。这种类型大部分出现在企业网站和个人主页，如果说处理的好，会给人带来赏心悦目的感觉。 8、Flash型：其实这与封面型结构是类似的，只是这种类型采用了目前非常游戏行的Flash，与封面型不同的是，由于Flash强大的功能，页面所表达的信息更丰富，其视觉效果及听觉效果如果处理得当，绝不差于传统的多媒体。 9、变化型：即上面几种类型的结合与变化，比如本站在视觉上是很接近拐角型的，但所实现的功能的实质是那种上、左、右结构的综合框架型。 关于第一屏

5、 所谓第一屏，是指我们到达一个网站在不拖动滚动条时能够看到的部分。那么第一屏有多“大”呢？其实这是未知的。一般来讲，在800*600的屏幕显示模式(这也是最常用的)下，在IE安装后默认的状态(即工具栏地址栏等没有改变)下，IE窗口内能看到的部分为778px*435px，一般来讲，我们以这个大小为标准就行了，毕竟，在无法适合所有人的情况下，我们只能为大多数考虑了。 说了那么多，无非是一个标准的问题，其实接下来不用我说大家也能想到，第一屏当然要放最主要的内容，关键要知道的是，我们要对第一屏能显示的面积要有个估计，而不要仅仅以自己的机器为准。其实网页制作的一个很麻烦的地方就是浏览者的机器是未知的。

6、有关导航栏的位置 导航栏能让我们在浏览时容易的到达不同的页面，是网页元素非常重要的部分，所以导航栏一定要清晰、醒目，一般来讲，导航栏要在“第一屏”能显示出来，但是有时第一屏可能会小于上面所说的435px，积于这点考虑，那种横向放置的导航栏要优于纵向的导航栏考虑，原因很简单：如果浏览者的第一屏很矮，横向的仍能全部看到，而纵向的就很难说了，因为窗口的宽度一般是不会受浏览器设置影响的，而纵向的则不确定性要大的多。 什么样的布局是最好的 这是初学者可能会问的问题。其实这要具体情况具体分析的：比如如果内容非常多，就要考虑用“国字型”或拐角型；而如果内容不算太多而一些说明性的东西比较多，则可以考虑标题正文

7、型；那几种框架结构的一个共同特点就是浏览方便，速度快，但结构变化不灵活；而如果是一个企业网站想展示一下企业形象或个人主页想展示个人风采，封面性是首选；Flash型更灵活一些，好的Flash大大丰富了网页，但是它不能表达过多的文字信息。还没有提到的就是变化型了，我只是想把这个留给读者了，因为，只有不断的变化才会提高，才会不断丰富我们的网页！ 大致就这些了，希望您有所启发。 (文章来自)网页设计中排版与布局有些人始终认为，网页最主要是内容，不需要再搞些门面上的东西，还拿出MUD来比喻。可是，红花还需要绿叶陪衬。想想，若MUD不只是单纯的文本，还有画面出来，那么，它所吸引的何止现在的这些MUD迷呢？

8、那么，我所要说的到底是什么呢？初学者如果能够了解一些设计上的东西，那么，自己的页面不会显得乱，自己看了也开心，别人看了也开心，何乐而不为呢？ 我们的主页，说到底，只是一个800*600的画面，那么，我们要怎么对它进行安排才合理呢？首先，也是最重要的一点，就是先停下创作，先想好一个主题?quot;设计，是一种有目的的创造。若在动手之前并不了解自己将要做什么及要怎么做，而只是一味的靠操作PHOTOSHOP的滤镜而达到一种特效的话，那么，最终做出来的东西最多局部看得觉得挺不错的，但全局就显得太复杂了。页面上的构成，如果要让别人一眼望去觉得很BEAUTIFUL，这里面实际上是有很大的学问的。 我们先来

9、说说构成，构成：是将造型按视觉效应、视觉力学和精神力学等原则组成的，具备美好形态的造型。构成形式里，有空间构成（平面构成和立体构成）和时间构成（静和动）。我们的创作，就是要协调这里面的种种关系，顺应视觉感受，才能够打动观看者的视觉，得到我们想要的效果。在这些形形式式里，都有着如下的部件：点：我们一般认为，点是指圆形的，但这是不正确的。只要在空间里有非常少量的面积，无法形成一个视觉上感觉的图形，都是一个点。无论什么形状都可以。线：点集合在一起就形成线。面：一个平面。体：一个物体。一般是指物体占据的空间，有三维形状。 那么，当点、线、面与体集结在一个页面上时，它们的关系要怎么协调呢？它们之间都有什

10、么作用呢？ 点有集中视线、紧缩空间、引起注意的功能。两个点相距不远而且形状不等时，一般由小向大看。近距离的点引起面的感觉。灵活运用点，可使你的页面有一些本质上的变化。当点占据不同的空间时，它所引起的感觉是不同的。 （1）居中引起视觉集中注意。 （2）上引起下跌落感。 （3）在上左或上右引起不安定感。 （4）下方中点，产生踏实感。 （5）左下右下，增加了动感。 为什么会这样呢？因为人的视觉，都是经过对生活的感觉都得来的。在下方的东西，一般联想到大地。在上方的东西，一般联想到浮云。线、面、体亦然。 线，又分为直线和曲线。直线：给人以速度，明确而锐利的感觉，具男性感。曲线，则优美轻快，富于旋律。曲线

11、的用法各异，需结合自己的需要。而直线又分为斜线、水平线及垂直线。水平线代表平稳、安定、广阔，具踏实感。垂直线则有强烈的上升及下落趋势，可增加动感。斜线，一般我没有怎么使用，因为它造成视觉的一种不安定。 人们每看到一个东西，都试图用横直来分析，斜、歪是人们所不愿意见到的，但适当运用这个要靠个人的感觉。面，指的是二度空间里的形。面又分为几何形和任意形，我个人比较喜欢任意形，因为它往更具人情味。几何形使人有一些机械感，但是，每一个图形里都会要用到几何形，请看它们各代表什么： （1）圆形：运动及和谐美 （2）矩形：单纯而明确，稳定 （3）平行四边形：有向一方运动的感觉。 （4）梯形：最稳定，令人联想到

12、山。 （5）正方形：稳定的扩张。 （6）正三角形：平稳的扩张。 （7）倒三角形：不安定，动态及扩张、幻想。 我们在日常生活中所看到的东西，都是由于形与形、图与底的相互关系。图形之间，图底之间，正由于对比产生差异而被我们所感知所接受。图与底的视差越大，图形越清晰，对视觉的冲击力越大。那么，平面上有那么多的东西，我怎么才能够确定它是否是最主要的呢？请看：易于成为视觉中心的条件： （1）居于画面中心。 （2）垂直或水平的比倾斜更易成为中心。 （3）被包围。 （4）相对于其它图形较大的。 （5）色感要素强烈。 （6）熟悉的图案，如果这件东西我们很熟，则一定会以它为焦点。网页布局的位置重心网页的布局也许

13、是大家最不放在眼里的地方，其实布局地位如同文字的排版一样，随便可布，布即随便。但是看过我上篇网页设计技巧系列 之文本排版的朋友也许就会清楚，文字排版是一种不起眼但却非常重要的细节。做好了会让作品更为精细漂亮，做不好也许就成为作品失败的重要原因。 布局也是一样，需要我们足够的重视。下面我要讲的不是网页布置成“左中右”、“左右”、“上中下”之类的问题，而是位置的重心与位置之间的对比关系。黄金分割率的概念大家都知道。下面我引用一段非常专业的解释：“黄金分割最早见于古希腊和古埃及。黄金分割又称黄金率、中外比，即把一根线段分为长短不等的a、b两段，使其中长线段的比(即a+b)等于短线段b对长线段a的比，

14、列式即为a:(a+b)=b:a，其比值为0.6180339这种比例在造型上比较悦目，因此，0.618又被称为黄金分割率。”大家也看清楚了什么叫黄金分割。我们中国也有一种类似于这样的概念叫九宫格。这个也许就有一些朋友不清楚了，这是一种用以临写碑帖的一种界格纸。基本形是一个长方形等分九格。在这个九宫格中中间部分就产生了四个交叉点，这四个交叉点就是视觉中心点。图示:九宫格我们为什么要讲这两个概念呢?是因为这两个概念是设计的决窍之所在。我们很多时间喜欢把重要的东西放在正中心，表示重视想吸引目光注意。但是我要告诉大家。正中心属于盲点区。也就是说按人的视觉习惯来讲正中心是常常被忽视的。并且放在正中心也不会

15、引起视觉刺激。用句玩笑话来侃一下:两眼中间是看不清楚的。不信拿你的手指指着鼻尖看你的手。那什么地方是视觉中心点呢，这就要用到上面的概念了。不过什么a:(a+b)=b:a都太麻烦了谁会那么细致的去算呢。这里用中国的九宫格原理就清楚得多了。四个视觉中心点很显然大家也清楚是什么位置了。那么在实际应用中我们要怎么用呢。这点很重要，实战意义要比空谈概念重要得多。下面我们就来说一下实战中的应用，这里虽说是“网页设计技巧”，同样可以应用在平面设计与摄影或是其它的设计中，但是必竟是讲网页设计，所以主要还是举网页例。我们先从大布局来谈，然后再讲小布局，最后讲设计图片的布局。大布局基本上网页的布局分为，上中下、左

16、中右、左右、上下、与上下左右之混合几类。同时我们还要思考的是分辨率与网页大小的关系。现在大部分的机器都是1024 以上的分辨率了，那我们的宽度是不是一定也要顺应变得宽一点呢。个人观点是大可不必。因为网页本身也会与浏览器产生视觉对比。如果塞得太满势必也不是很好看。如果留下空隙网面与留出来的空白也可形成一定的对比，其比例也较接近黄金分割率。所以我觉得还是不要塞满浏览器为好，给网页一个可以呼吸的空间。那网页自身的上下左右布局呢?同样的，如只是上下或是左右结构我们不能把上下或是左右平分，而是最好采用黄金分割比来进行划分。如果是上中下或是左中右呢。我们同样不能平分，我们我们要注意三者之间的关系，比如上中

17、下结构，我们很清楚中间是主要内容需要大一点的空间，那么中空间的部分会尽量的点有大比例，一般来讲我们会让中间占大约百分之六十。而上面占百分之三十，下面占百分之十。那也就是说，下面是上面的三分之一，上面是中间的三分一。这样的分割就会比平面看起来要舒服很多。但是左中右的结构就不能这么分了。因为百分之十的宽度会很难放得下什么内容。一般左中右结构会有另一种分法:左占百分之四十，中右各占百分之三十。或是左右占百份之三十，中间占百分之四十。也可以进行532、622、442、的分配。也就是说大布局上要尽量避免平分的局面。小布局也可以说是细节上的布局。我们可以把网页看成是由很多个小块组合而成的。通常要注意的就是

18、标题与内容的关系以及这些块放置的位置。比如最核心的内容不要放在最顶、最后、或是最中间。而是顶部与中间的中部位置，有些人喜欢排位，并且会把最重要的放在最上面，其实不然啊，放在最上面的未必是最核心的位置。比如我们看一下各大门户网站的头条新闻的位置，是不是没有放在最顶部的?当然由于分辨率的问题目，这些头条可能位置也会有所变化。在800下头条是偏下的，而1024是居中一点，1600就偏上一点。但是从浏览器的大角度来看，这些头条也都是处于视觉中心点的。我们在处理图片的时候也会用到布局，比如我们的文字放在什么地方，标志放在什么地方这些都是布局的范畴。这里也要应用上述的概念，重要的要核心不要放在正中或是过于

19、偏向角落。当然也会遇到重心的东西很大，基本上都占满了画面，下面让大家来看一张招贴画。大家看上面这张图，画面重点是那个MP4，但是这个对象很大。没关系，把这个MP4的图做得有透视性，左右的重量就不一样了。这样向左去一点，那么重心就向左去了，再加上MP4偏上，这个MP4就正好在视觉中心点上了。而主要的信息文字同样也处在视觉中心的位置上。而一些不重要的文字都放在了角度去冷落他。改进网站设计提供的有意的建议在网络设计领域关于Eye-Tracking的研究十分火爆，但是如何把这些研究结果转变为具体可行的设计来运作依旧是个难点。以下就是一些来自于Eye-Tracking研究结果的窍门，可以为改进你的网站设

20、计提供些意见： 1.对比图像，文字更具吸引力 与你所认为的相反，在浏览一个网站的时候，能够直接吸引用户目光的并不是图像。大多数通过偶然点击进入你的网站的用户，他们是来寻觅信息的而不是图像。因此，保证你的网站设计凸现出最重要的信息板块，这才是设计的首要原则。 2.眼球的第一运动聚焦于网页的左上角 用户浏览网页的这一习惯应该在意料之中，毕竟左上部为主要操作中心这一点为大多数重要的计算机应用程序的设计所采用。在你构建网站考虑网站设计时，应该尽量保持这一格式。要知道，如果你希望保持个人特色，搭建一个成功的网站，你就必须尊重用户们的习惯。 3.用户浏览网页时，首先观察网页的左上部和上层部分，之后再往下阅

21、读，浏览右边的内容 用户普遍的浏览方式呈现出“F”的形状 。保证网站内容的重要要素集中于这些关键区域，以此确保读者的参与。在此放置头条，副题，热点以及重要文章，这样可以吸引到读者进行阅读。 4.读者会忽视横幅广告 研究表明，读者常忽视大部分的横幅广告尽管你以此维持网站生计视线往往只停留几分之一秒。如果你想通过广告挣钱，那么必须创新你的广告位以及合理配置网站广告形式。 5.花哨的字体和格式被忽视 为什么呢？那是因为用户会认为这些是广告，并非他们所需要的信息。事实上，研究表明用户很难在充满大量颜色的花哨字体格式里寻找到所需的信息，因为视觉线索告诉他们把这些忽略吧。保持网站的清爽，不要因为华而不实的

22、表面，让重要的信息被忽略。 6.用数词来代替数字 如果使用数词取代数字的罗列，读者会发现在你的网站可以很容易地发现真实的资料。要知道，你是写给那些将第一次浏览你的网站的读者，所以，让他们容易发现他们所需的信息，让他们感兴趣。 7.字体大小影响浏览行为 想改变人们对你的网页的看法吗？改变网页字体的大小。大的字体刺激浏览，而小一些的字体则提高焦点阅读量。根据你的需要，合理配置两者的比例。 8.遇到感兴趣的内容，用户仅会多看一眼副标题 不要过分坚持副标题固定的格式保证他们的相关性和兴趣。你也可以让副标题包含关键词，这样可以有效利用搜索引擎，让它带来读者。 9.人们大都只浏览网页的小部分内容 如果在用

23、户浏览的时候提供信息使他们尽快锁定目标，就可以把这一点发展成为你的优势。突出某些部分或者创建项目列表使网页信息容易找到和阅读。 10.简短的段落相对于长段落来说有更好的表现力 网页信息是为大多数强调快速浏览的无联网用户提供的。除非上下文的衔接要求，保持信息由简短的段落和句式组成，例如 这个电子商务网站 的产品介绍。 11.根据视觉锁定，一栏格式比多栏格式拥有更好的表现力 别让过多的信息把网站来访者淹没。大多数情况下，简洁更具力量。多栏内容容易被用户忽视，我们需要消除这些干扰。 12.网页顶部和左边的广告更能吸引眼球 如需要在网站植入广告，试图使他们融入网页的左上部，这样他们才能吸引到最大的视觉

24、注意力。当然，用户仅仅会注意到这些广告，这并不意味着他们会用鼠标点击。所以不要为了提高广告的注意力而牺牲原有的网站设计。在网络设计领域关于Eye-Tracking的研究十分火爆，但是如何把这些研究结果转变为具体可行的设计来运作依旧是个难点。以下就是一些来自于Eye-Tracking研究结果的窍门，可以为改进你的网站设计提供些意见： 1.对比图像，文字更具吸引力 与你所认为的相反，在浏览一个网站的时候，能够直接吸引用户目光的并不是图像。大多数通过偶然点击进入你的网站的用户，他们是来寻觅信息的而不是图像。因此，保证你的网站设计凸现出最重要的信息板块，这才是设计的首要原则。 2.眼球的第一运动聚焦于

25、网页的左上角 用户浏览网页的这一习惯应该在意料之中，毕竟左上部为主要操作中心这一点为大多数重要的计算机应用程序的设计所采用。在你构建网站考虑网站设计时，应该尽量保持这一格式。要知道，如果你希望保持个人特色，搭建一个成功的网站，你就必须尊重用户们的习惯。 3.用户浏览网页时，首先观察网页的左上部和上层部分，之后再往下阅读，浏览右边的内容 用户普遍的浏览方式呈现出“F”的形状 。保证网站内容的重要要素集中于这些关键区域，以此确保读者的参与。在此放置头条，副题，热点以及重要文章，这样可以吸引到读者进行阅读。 4.读者会忽视横幅广告 研究表明，读者常忽视大部分的横幅广告尽管你以此维持网站生计视线往往只

26、停留几分之一秒。如果你想通过广告挣钱，那么必须创新你的广告位以及合理配置网站广告形式。 5.花哨的字体和格式被忽视 为什么呢？那是因为用户会认为这些是广告，并非他们所需要的信息。事实上，研究表明用户很难在充满大量颜色的花哨字体格式里寻找到所需的信息，因为视觉线索告诉他们把这些忽略吧。保持网站的清爽，不要因为华而不实的表面，让重要的信息被忽略。 6.用数词来代替数字 如果使用数词取代数字的罗列，读者会发现在你的网站可以很容易地发现真实的资料。要知道，你是写给那些将第一次浏览你的网站的读者，所以，让他们容易发现他们所需的信息，让他们感兴趣。 7.字体大小影响浏览行为 想改变人们对你的网页的看法吗？

27、改变网页字体的大小。大的字体刺激浏览，而小一些的字体则提高焦点阅读量。根据你的需要，合理配置两者的比例。 8.遇到感兴趣的内容，用户仅会多看一眼副标题 不要过分坚持副标题固定的格式保证他们的相关性和兴趣。你也可以让副标题包含关键词，这样可以有效利用搜索引擎，让它带来读者。 9.人们大都只浏览网页的小部分内容 如果在用户浏览的时候提供信息使他们尽快锁定目标，就可以把这一点发展成为你的优势。突出某些部分或者创建项目列表使网页信息容易找到和阅读。 10.简短的段落相对于长段落来说有更好的表现力 网页信息是为大多数强调快速浏览的无联网用户提供的。除非上下文的衔接要求，保持信息由简短的段落和句式组成，例如 这个电子商务网站 的产品介绍。 11.根据视觉锁定，一栏格式比多栏格式拥有更好的表现力 别让过多的信息把网站来访者淹没。大多数情况下，简洁更具力量。多栏内容容易被用户忽视，我们需要消除这些干扰。 12.网页顶部和左边的广告更能吸引眼球 如需要在网站植入广告，试图使他们融入网页的左上部，这样他们才能吸引到最大的视觉注意力。当然，用户仅仅会注意到这些广告，这并不意味着他们会用鼠标点击。所以不要为了提高广告的注意力而牺牲原有的网站设计。