[精品]网站建设布局设计

《[精品]网站建设布局设计》由会员上传分享，免费在线阅读，更多相关内容在工程资料-天天文库。

1、网站建设布局设计：（栅格设计）网页设计中（特别是网站首页）的脏、乱、差，是我们在设计过程屮常会遇到的问题。通常“脏”是由于对色彩的使川不当所产生•的，而色彩使用不当产主的不好的效果可分为：“花、灰”，花哨、灰头灰脸也就是我们常说的“脏”。而“差”基木上是由于技术上不够熟练所产生的。比如细节上处理的不到位，某个局部的效果制作得粗糙等等。这都可称Z为“差”，特别是在处理帯有2D效果设计吋，这科赭•况经常会出现（在这里我也不得不承认我也犯过这样的错误）。但是我这里所要讲的是“乱”。什么是乱？这里的乱不是指用色乱，也不是指内容乱，主要的是指布局乱。以前我也接触了一些平面设

2、计，从中也学到了很多平面设计上的-些知识与技法。其屮“栅格设计”就是平面设计中用于处理布局的一种，到口前为止我还在硏究栅格设计，因为口前我也不知道用什么语言來解释这个词，只能通过不断的实践去理解它，所以很多时候我都无法去讲述。但是在设计小，这个栅格却能帮助我们完成更好作品的一个非常好用的利器。对于栅格设计我也不能说是认识深刻，我只是依据我对于栅格设计的理解，将之用于网页布局设计中，希望能给同学们多一点的启示，或许能打开一些同学的思路。单纯的文字是没办法让像我这样的设计师耐心看下去的，所以还是用示图例來作为讲解。这里所使用的网页是微软、IBM、ASTRO三个公司网站

3、，通过分解这三个公司的网站的布局设计，能把我所理解的栅格设计传达岀来。废话少说——看图：Downloads,news,andinoreAlft>cix>softSitesviri»-ill・“・,iHan•f弋C」七S^zk：5d:cv.rkedsD.Trials>ttily«tihmT-crtxS.Ev2Tts^-WcrtMiidMiuIFirst-ew*errechargeahlebacklitkeyboardHkhllqhts►7ictOfficeU-Uire-crhelpfulhimsrdupcstM*--C3：efpacal仝Fe：U*vhhthe□•^

4、stUfificssJariccvojritmilN汗廿"vlry看到上图微软公司的网站在布局设计中并没冇用什么明丛的线左区隔不同的区块，但用实线把每个部分都画出来的时候，我们町以发现网站其实是处在一个栅格阵列中。这个阵列中的内容已经很明显了，并H•我们从中发现了很多区块在页面中的位置居然是那么的冇条理，还有一些并不在一起的区块也显得有一定的规律。（不过有人可能会说，都川线画出来了当然显得有条理整齐了。）问题就在于网站布局都可以用纵横线区分开的，但是一些设计得不好的网站的纵横线可能数量非常的多，纵横线的数量过多就显得拥挤，这就说明网站的布局显得太乱，或者是过于条理

5、化使布局非常的平均，没冇对比性、缺乏美感。其实只要用这样的方法去分析一下我们自己的布局设计，从中也许就能看出问题的所在。再来看•下IBM网站的分解图:我们看到IBM的栅格与微软的有很大的不同，IBM中还出现了一些差不多大的栅格，不过这里要注意的其实这些栅格都是由底部几个很小的区块所产生的，并几这几个区块还可看作是一个横向的区块，从图中可以看岀IBM的布局设计是对称的。但这种对称是在纵横线上不容易注意到的，这确实是个很高明的手法。再來看看ASTR0公司的网诂，这个比起上血两个公司的网诂更娱乐化，更有趣。PROGAMINGEQUIPMENTA40AUDIOSYSTEM

6、>IC从这三个网站中可以看出三种不同风格的栅格设计，虽然布局都有所不同，但我们了依然可以发现三者都会尽可能的把最重要的信息放在视觉的中心点上，不论是放在左边还是右边或是屮间，他们都得到了最人的栅格区，得到了足够的重视！所以我们的视觉屮心也自然盯在上面了！注：借鉴了一些网诂建设及平面设计的一•些相关的知识，希望在工作中对大家了解布局设计和网站设计中有所帮助和启示！谢谢！