网页设计中理性之美――栅格系统设计.docVIP

网页设计中理性之美――栅格系统设计 　　摘 要：栅格系统是网页设计中的一种编排方法，它既能够满足网页设计所需要的功能性，同时还能够突破功能性对审美的局限。使形势与功能完美的结合在一起。栅格系统设计需要依据数理的分析进行创造，其形式美的应用也是如此。所以，栅格系统具有一种理性的美感。　　关键词：网页设计；栅格系统；形式美法则　　引言　　这是一个信息爆炸的时代，每天人们利用网络、手机等接收数以千万计的信息。伴随着信息量膨胀的现象一个时代性的问题出现了，人们的眼睛无法在着庞大繁杂的信息面前聚焦。视觉信息处理任务中如何让人们方便轻松的看到自己需要信息并能够带来美感变成了关键问题。满足视觉信息的功能性是首要任务，而在单纯满足视觉信息功能性后，视觉信息的美感便会受到影响。仅仅停留在满足功能性的话，所有的网页都会变成单调无趣的报纸，给人廉价、乏味的感觉。而如何使其具有美感，成为了一个难题。直到栅格系统在网页设计中应用并得到了改良。栅格设计使网页中的信息在满足了易于识别、层次分明等功能之外还使网页更具形式美感。　　一、 栅格系统　　（一） 栅格系统的意义　　栅格系统（Grid systems）是一种版式编排方法，运用固定的格子设计版面布局，其风格工整简洁，易于反复，严谨又不失美感。①因为这种编排方式是有一定的数理依据，而且在版式中有着以不变应万变的能力，所以人们称它为系统。　　1919年的德国包豪斯设计学院成立后，掀起了理性化、简单化、功能化的设计风潮，栅格系统的应用得以发展。第二次世界大战后栅格系统在德国和瑞士得以完善并逐渐影响到了世界各国，成为了至今依然主流的一种编排设计方法。②　　网页出现之前，栅格设计主要应用于纸质媒体。网络时代使信息传达更具时效性和普遍性。但是，面临网页需要承载的庞大信息量。栅格系统在网页设计中的应用不只是为了简约与功能化的设计，网页设计又赋予了栅格系统新的意义。　　（二） 栅格系统制作原理　　栅格系统的设计是将网页的版面进行区域划分的过程。比如，一个960px X 600px的网页栅格系统的设计，首先要从网页的宽度着手，进行单元格划分。宽度为960px的网页被我们以宽度160px的单元格划分为6个栅格单元。然后再根据网页所需内容调整每个单元格的宽度与间距。这样一个栅格系统就设计完成了。在现实中的栅格系统设计却并非如此简单，而栅格设计的形式也并非只有纵向划分一种。　　二、 网页设计中的栅格系统　　（一） 网页中的信息展示　　网页中的信息主要以文字和图像为主，而网页不像以往的书籍、报刊。一个页面中所拥有的信息量远远大于一张纸所能容纳的信息。电子信息的呈现形式一直都带有局限性。　　一个网页的宽度必然要适合网页载体――电脑屏幕和浏览器的限制。网页的宽度是不能大于浏览器的内容显示区域的。另外，还要在保证适合设计灵活性的前提下寻找一个合适的宽度。对栅格系统的研究和网页制作的经验下，网页设计人员总结出了一个最合适的网页宽度，即“960px”。　　电脑的显像技术色彩图像是以光线形式呈现，所以给人的感觉不如纸质媒体舒服且会对眼睛造成一定的伤害。这就要求网页页面的内容要清晰这样才能够使人轻而易举的接受信息，为视觉减压。多数网页整体版面较长，用户浏览长时间浏览会造成视觉疲劳，所以一定要注意整体页面的节奏感。大量的信息会使信息变得繁杂而没有主次，所以版面设计要有意识地去突出重要内容使页面富有层次感，这样用户在浏览页面时思路也会清晰。　　（二）纵向网页栅格系统　　在网页设计中依据常用宽度960px可以分解出960的26个整数倍来进行栅格设计。这26个整数倍分别为“2, 3, 4, 5, 6, 8, 10, 12, 15, 16, 20, 24, 30, 32, 40, 48, 60, 64, 80, 96, 120, 160, 192, 240, 320, 480”，这就是纵向的网页栅格系统。这种栅格系统适用于文字图像信息庞大的大型的门户网站。如雅虎、网易等。③　　纵向的栅格系统看似是把整个网页的区域等分限制住了，但是在网页设计中设计师经常等分区域进行合并使用。这样在网页设计中就不会失去其个性。更不会失去其美观性和适用性。在进行划分的同时我们要平衡网页中力的平衡、秩序美等形式美法则。　　网页设计永远都是跟随着硬件的变化为发展的，随着近年宽屏浏览器的普及960px也即将退出主流。而设计人员一定还会在栅格系统的研究与网页制作中寻找出更完美的适应新的主流屏幕的栅格系统。　　（三） 单元格栅格系统　　在2006年Drenttel和Helfand根据常见的960*600比例的网页的3x4单元格创作出了含有892种网格形式的栅格系统。由于系统原理与日本的榻榻米分割方法相似，所以又被称为“榻榻米系统”。④　　这种栅格系统是通过3 x 4的栅格进行部分跨