浅谈网页设计中的网格系统

华中科技大学文华学院毕业设计(论文)华中科技大学文华学院毕业设计（论文）题目： 浅谈网页设计中的网格系统 学 生 姓 名： 曹泓力 学号： 080201011108 学 部 （系）： 城建学部 艺术设计系 专 业 年 级： 08视觉传达1班 指 导 教 师： 张燕 职称或学位： 讲师 20 年 月 日1 华中科技大学文华学院毕业设计(论文) 目 录 摘要1 关键词1 Abstract1 Key words 1 前言1一、 绪论1（一）网页设计的概念1（二） 什么是网格1 1、网格的定义2 2、网格的基本功能2 3、网格在网页设计中的必要性3二、 网页网格系统分析3（一） 网页网格系统的定义3（二） 网页网格系统的特殊性4（三）网格设计的创意规律4三、 网格设计的种类5（一） 对称式网格设计5（二） 不对称式的网格设计5（三） 模块网格设计6（四） 复合网格设计6四、 网格设计的造型手段7（一） 组合网格7（二） 水平（跨页）网格7（三） 垂直网格8（四）成角网格8五、 六栏固定宽度网格布局9六、 960，24X40网格系统9 结束语10 参考文献11附录12 致谢13摘 要网格系统是一种利用规范化的网格来进行网页布局的一种思想，类似于报纸版面排版格式。它是最近两年才出现的，主要原理是将网页页面分成N等分列，然后通过组合相应数量的歼灭完成对页面的布局，并用css+div将所有网格的样式和模块固定，设计师在这些网络的基础上进行网页设计和布局。网格是设计得以成立的基础。从本质上说，它是一件设计作品的骨骼。用网格来组织页面上的内容能提高精确性和连贯性，它为更高程度的创造提供了一个框架；风格在很大程度上方便和简化了我们的排版工作。与印刷媒体不同的是，网页风格的设计要考虑到不同的浏览器、不同的操作系统平台、不同的屏幕大小等可变因素，网页网格系统的设计需要适应这些变化。网格化可以大大提升整个网络的视觉环境。关键词：网页，网格系统，三分法，960AbstractThe grid system is a standardized grid to an idea of page layout, similar to newspapers publishing format. It is the last two years, the main principle is the web page is divided into N disaggregated, and then wiped out by combination of the appropriate number of page layout and grid styles and module css + div fixed, the designer Web page design and layout of the foundation of these networks. The grid is the basis of design to be established. In essence, it is the skeleton of a design work. To organize content on the page with the grid can improve accuracy and coherence, it provides a framework for the creation of a higher degree; style is largely to facilitate and simplify the typesetting. Print media, web-style design to take into account the different browsers, different operating system platforms, different screen size and other variables, the design of the web page grid system needs to adapt to these changes. The grid can greatly enhance the visual environment of the entire network. Key words: Web page, the grid system, rule of thirds, 960 华中科技大学文华学院毕业设计(论文)前 言“印度贤士在奥义书中说，一粒种子内藏一个宇宙。一本书是一颗小小的种子。从整个世界来看，一本书非常渺小，然而这小小的容器却能浓缩整个宇宙。”衫浦康平。我们要尊重一本书，因为书是容纳信息的容器。它所容纳的信息以及信息的延展是无限的。现代媒体网页，也是一粒粒小小的“种子”。现代人对着电脑的时间越来越多，网络是我们生活中不可缺少的一部分。网页的版式是否能让眼睛感觉舒适，是设计师必须面临的问题。与传统阅读相比，读者读书是内容的深思，面对电脑屏幕上的网页，是有价值信息的搜索，网络用户比印刷品的读者更没有耐心。网络时代的设计师们更尊重一个个网页空间。一、绪论（一）网页设计的概念网页设计是在Internet的发展和数字技术的发展中出现的新艺术形式。它是以Internet为载体，以网络技术和数字技术为基础，依照设计目的、遵循艺术设计规律，实现设计目的与功能，强调艺术与科学密切结合的一种艺术创造化视觉传达活动。它是网络视觉艺术的主要表现形式，也是设计艺术的重要组成部分，它具有媒体相关性、数字技术性和设计艺术性三大基本内涵。（二）什么是网格1、网格的定义网格是设计得以成立的基础，它使设计师能将丰富的设计元素有效地安排在一个页面上。从本质上说，它是一件设计作品的骨骼，给设计带来秩序感和结构感。在页面设计中，网格为所有的设计元素提供了一个结构，它使设计创造更加轻松、灵活，也让设计师的决策过程变得更加简单。在安排页面元素时，对网格的使用能提高精确性和连贯性，为更高程度的创造提供一个框架。网格使设计师能做出可靠的决定，并有效地运用自己的时间。它们能为设计注入活力布置那些看上去相当小并且毫无关联的元素。2、网格的基本功能 网格系统在设计流程中非常重要。和“排版”一起，它们决定了信息的“视觉组织形式”。网格的基本功能是组织页面中的信息。在发展的进程中，这种方式变得更加进步、精确从简单的文本到图文混排，再到现代设计软件所提供的更加丰富的多样编排方式。使用网格系统作辅助，可以帮助我们更较轻松地做到：让电脑屏幕界面上的信息更易读，网页更美观，让人眼感觉到舒适以及增加网页的实用性。因为使用网格系统，有科学理论依据以及美学依据做辅助，可以避免我们仅凭感觉做设计，效率低，而且效果往往不能令人满意。在数码媒体中，对网格的运用，让设计师有机会将作品变得新鲜、相关联。3、网格在网页设计中的必要性网格由来已久，网格系统应用的一些基本原则有一些甚至可以追溯到出版业第一次成为大型产业的时期。经过多少代设计师的努力，这些方法、技术已经在几具世纪的发展中变得更加精确、进步和完善，发展到了相当的高度和复杂程度。这个过程仍在继续，新科技带来了以互联网、移动电话位代表的新媒体。网络时代我们面临新的挑战，网页设计中的网格以传统印刷网格为基础，但又不同于传统印刷中的网格，有自己特殊的特点和要求。网而设计师的任务是，让用户更加轻松、快捷地找到有用信息；让页面清晰美观；内容组织合理。没有网格系统作辅助是难以做到的。二、网页网格系统分析（一）网页网格系统的定义网页网格系统可以被定义为：以规则的网格阵列来指导和规范网页中的自版面布局以及信息分布。网页网格系统是从平面网格系统中发展而来。对于网页设计来就，网格系统的使用，不仅可以让网页的信息呈现更加美观易读，更具可用性。而且，对于前端开发来说，网页将更加的灵活与规范。（二）网页网格系统的特殊性印刷媒体经过多年改进，在反复测试中得出了一些版式和规则，用来表现文本和图像信息。经过几代人的改进，这些版式和信息已经适应了读者的阅读和浏览习惯。这种传统已被网络媒体所继承，并引导着设计师创造出具有印刷品感觉的网页版式，使浏览者能更容易地理解页面内容。数码设计的浏览方式意味着更多因素，网页的无限空间；使用固定宽度、可变宽度，哪一种布局能取得最佳效果？很多因素是超出设计师控制的。在印刷媒介中，设计师有一个固定的界面，一张纸或其他材料，它们的尺寸都是固定不变的。但是，在网络中不同的用户会使用不同的浏览器、不同的操作系统平台、不同的屏幕大小，甚至使用掌上电脑、可阅读网页的手机来浏览网页。它们的尺寸大小、分辨率等都是可变的。好的设计师了解，不同用户对同一个网站所需要的视觉效果是不一样的。用户会根据自己的需要，通过浏览器调整网页的视觉效果，使网页的最终显示效果与原来的设计初衷相去甚远。相对于传统媒介来说，网页设计师丧失了一些对版面视觉效果的控制力。（三）网格设计的创意规律1、根据主题要求确定网格设计风格，网格数量的确定与设计的主题和媒介的特点有着密切的关系。严肃的主题需要理性的版面形式，娱乐性的主题需要活跃的版面形式。2、根据版面宽幅确定网格的数量，通栏的大小和变化在西方有着较严格的约定，一般每栏中的字母在50个左右，汉字太多会加深读者的头部的左右摆动，网格数量过多，画面会显得混乱杂碎，网格数量过少、画面会显得呆板单调。三、网格设计的种类(一)对称式网格设计就内容而言，可表现哲学、政治、科技、理论、地理、历史、长篇小说等，版面设计采用左、右两页，两栏或三栏结构，每栏的网格都排满，左、右两页的外页边的留白尺寸相同，页眉和页码的位置对称，左右两页的结构互为镜像，给读者一种条理分明、严谨、理性之感。页面中有图的话、一样是按分栏位置放入的，可跨栏但不能出栏线，图形一般是偶数值、左页放一幅，右页放一幅。与传统的版式不一样之处是，对齐式不是居中式，标题、图像、文本等一般采用的是：左对齐、右对齐、上对齐或下对齐式。这样，版面中就具有不平衡的因素。（二）不对称式网格设计一般娱乐性的题材如诗歌、散文、体育、旅游、儿童、女性、音乐等，其内容决定了这种版式的不平衡性。不对称的空白是一个遐想的空间，是建筑的墙体、是动物活动的空间、是女人的香水味等。中国画留白如同此理。前人总结了“奇数法”，就是单页中放入奇数的网格块，如放入3、5、7、9幅图。“三分法”用来制造不平衡的热点。（三）模块网格设计模块式的使用最早见于杂志编辑。20世纪五六十年代欧洲和北美的一些杂志已开始采用这种形式。这种版式后来逐渐影响了网页。首先，模块设计大大方便了组版工人。70年代后，欧美报纸普遍采用照相排版机，文字、标题、图片均须预先拍好照相正片，再由工人剪贴成大样。工人只需将一个个模块像七巧板似的拼在一起即可、省事又省时。就内容而言是页面中内容杂乱，形成碎小的信息文本，过多的图片，大量的信息表格，大量的注释、注释所引起，或是设计师有意突出网格的作用而引起。（四）复合风格复合网格设计，就是将对称式网格、不对称式网格以及模块网格设计的综合使用。如梦露、周杰伦、影片花絮同时出现在杂志的对面上，我们会将对称式给梦露，体现她的经典之美；将不对称给周杰伦，体现他的现代动感，将模块给影片花絮，这就是复合网格构成。四、网格设计的造型手段（一）组合网格页面中经常会出现毫无关系文本、图像、表格等，为了版面的条理，设计师有意地进行组合，进行了整理、修剪或对齐，给人一种网格无处不在的感觉。（二）水平（跨页）网格设计为内容的需要,将双页的文本、图像、线条、色块都进行水平线的流向处理，产生水平运动的趋势，并可打破订口，让图像、线条、色块进行跨页式的设计，产生水平、平静、宽阔的感觉。（三）垂直网格垂直网格有崇高神秘之感。由于大陆人的阅读习惯，影响了竖排版的使用量。（四）成角网格45度的设计为多，适合表现动感十足的汽车、武器、马匹等。这个构成中存在动态感、方向感。由于网格系统倾斜放置在方形版面中，需要将构成要素的尺寸缩小若干，构成要素在版面中既可以安排成导向一致，具有协调感，也可以安排为导向冲突。给人冲突的构成，增加视觉冲击力。五、六栏固定宽度网格布局六栏固定宽度网格建立在黄金分割的简化用法“三分法”基础之上，是一种简单而且美观的网格系统。网页内容实际显示总宽度，被分成相等的三等份。导航区为总宽度的1/3，内容区为总宽度的2/3，内容区被再次分为相等的两栏。如图，BBC的主题网站是一个关于英国社会、种族、人权等问题的网站。主页中，严格地按照六栏、三分法、固定网格来组织内容。网页单栏宽为125px，双倍栏宽为250px，三分之二页面宽度为500px，栏间约有7px宽的间距。去掉网格线时，内容元素自然对齐成一条轴线。网格很轻松地让文字、图片、flash等多种信息，形成调理清晰的系统。整个版式显示出一种秩序感的美。用网格的方法来组织网页上的内容，大大简化和优化了我们的排版工作。六、960，24X40网格系统如图：Yahoo是以信息展示为主的门户型网站，使用的是著名的960网格系统。960px宽度对于信息的阅读比较友善：定宽度布局比自适应宽度布局更容易控制，具有良好的可维护性和可扩展性。Yahoo在Alexa全球网站排行榜中，排名第三，像这样的大型网站。每天的浏览量，信息量都很巨大，功能繁多，很容易产生杂乱感。网络用户本来就缺乏耐心，不合理的版式更容易增加他们的烦躁心理。如果，在几秒钟的忍耐限度之内找不到所需信息，用户会毫不犹豫地跳出网站，点击其他网页。考虑到以上这些因素，Yahoo最后选择了960定宽度网格布局。使用的是标准的24X40网格系统，它比16X60、12X80网格系统产生的变化更多，可以满足Yahoo各类繁多的信息组织需要，让各种信息层级清晰，布局合理美观。页面布局方案选择的正确性，也是Yahoo能长期排名Alexa前三的重要原因。结语网格系统是网页设计中不得不考虑的重要问题。只有在符合视觉科学规律的基础上再创造，设计师才有可能在更大程度上发挥自己的创造力，设计出更具独特性、艺术性的网页作品。越来越多的大型网站通过网格化来打造和规范自己的网页，这是一种潮流和趋势。更多的中小型网站，也需要使用网格系统来提升自己的页面视觉效果，共同来营造一个更美观、更舒适、更高效的网络视觉环境是设计师的责任参考文献1 （英）加文安布罗斯，网格设计T.北京：外文出版社，2008.62 李爱贞，字体设计指南M.北京：人民美术出版社，2009.033 王建龙，完美网页设计艺术M，北京：清华大学出版社，2008.094 王焕校，Web设计创新思维M.北京：科学出版社，2006.65 张凯，网页艺术设计M.江苏：中国环境科学出版社，2006.106 张晶.设计简史M.重庆：重庆大学出版社，2004.9附录：致谢致 谢在毕业设计和论文撰写期间，从选题、方法和思路、确定到布局到完成老师都进行了认真的指导，审查和修改。但是本人由于工作限制原因，并没能全心全力的去完成我大学最后的一份作品，我个感觉非常遗憾。现在毕业设计能得顺利地完成，完全是因为老师倾注了心血与关心。所以我必须要感谢在我学习和生活上给过我帮助的老师和同学们，他们都在我的学业中给予了莫大的支持和帮助。有幸认识你们是我的莫大幸运。最后，还要感谢我的父母，他们多年的默默支持一直是我学习和生活的最大动力。不论我遇到多大的困难和挫折，他的默默支持一直是我学习和生活的最大动力。不论我遇到多大的困难和挫折，他们始终陪伴着我，并且坚定支持和鼓励我。衷心地感谢所有曾经帮助过我的人！91