网页设计栅格系统设计

 

  这是一个信息爆炸的时代,每天人们利用网络、手机等接收数以千万计的信息。伴随着信息量膨胀的现象一个时代性的问题出现了,人们的眼睛无法在着庞大繁杂的信息面前聚焦。视觉信息处理任务中如何让人们方便轻松的看到自己需要信息并能够带来美感变成了关键问题。满足视觉信息的功能性是首要任务,而在单纯满足视觉信息功能性后,视觉信息的美感便会受到影响。仅仅停留在满足功能性的话,所有的网页都会变成单调无趣的报纸,给人廉价、乏味的感觉。而如何使其具有美感,成为了一个难题。直到栅格系统在网页设计中应用并得到了改良。栅格设计使网页中的信息在满足了易于识别、层次分明等功能之外还使网页更具形式美感。


  一、 栅格系统

  (一) 栅格系统的意义

  栅格系统(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的栅格进行部分跨栏的方法,利用这种方法我们可以得到3164种栅格方式。然而这其中包括水平对称或者斜角对称等类似的栅格方式。海报中的892种方式是经过筛选得到的。

  3 x 4网格是最为常见典型的单元格栅格系统,而这种分割方式适用于任何一种栅格形式。这种分割形式也要在不脱离美观性的前提下进行。单元格栅格系统有长度限制,其容纳的信息量较小,所以它更适合于小型网站。

  三、 栅格系统中的审美

  (一)网页设计中栅格系统的严谨性

  网页设计离不开数字,栅格系统更离不开数字。每一个网页设计人员第一次接触到的网页设计时首先要知道的是电子屏幕的尺度不是以现实中的刻度来衡量的,而是以像素(px)为尺寸。而像素的最小单位1px是可视的,所以在网页设计或者制作栅格时严谨是必不可少的。而正是数字的严谨性让栅格系统具有了理性的光辉。

  理性对于栅格系统的功能性是必不可少的条件。在栅格系统中形式必然要依附于功能。所以栅格系统设计的审美属性也是理性的创造。

  (二) 栅格系统中的形式美

  对于美的创造并非是感性使然,理性趋势下的美感会更加纯粹。栅格系统设计需要的就是理性的美感。

  形式美法则是根据人的视觉规律提炼出来的审美规律,它符合人的视知觉并对人的产生影响。这种美正是一种理性的美感,他需要设计者去分析形成美的因素,例如大小、位置、比例等等。

  栅格系统就像是网页设计中的骨骼,控制着这个个页面的节奏韵律。栅格系统的设计需要设计师以形式美法则为依据进行创作。例如,形式美法则中的对称与均衡的应用可以是页面匀称。栅格系统的设计中每个单元格的比例如果运用黄金分割比、斐波那契数列等形式美比例会使画面更具美感。

  总结

  栅格系统的出现与运用是建立在功能性和审美性的基础之上,更脱离不了对数字的计算。虽然严谨但是设计人员也可以在栅格系统中大胆的发挥个性,创造出美的享受。

  网页本身随着科技发展,其载体也在扩展超出了电脑屏幕。跃然于手机、平板电脑等新的电子媒介之上。还有电脑屏幕的改革。这些都影响了网页设计的标准。标准在改变的同时,栅格设计的方法是不会变的。只要是还需要运用理性的形式美,栅格设计便永远都会散发着理性美感的光辉。

时间: 2024-12-22 01:03:33

网页设计栅格系统设计的相关文章

网页的栅格系统设计

栅格系统的形成 1692年,新登基的法国国王路易十四感到法国的印刷水平强差人意,因此命令成立一个管理印刷的皇家特别委员会.他们的首要任务是设计出科学的.合理的, 重视功能性的新字体.委员会由数学家尼古拉斯加宗(Nicolas Jaugeon)担任领导,他们以罗马体为基础,采用方格为设计依据,每个字体方格分为64个基本方各单位,每个方各单位再分成36个小格,这样,一个印 刷版面就有 2304个小格组成,在这个严谨的几何网格网络中设计字体的形状,版面的编排,试验传达功能的效能,这是是世界上最早对字体

网页设计中的栅格系统

栅格系统的形成 1692年,新登基的法国国王路易十四感到法国的印刷水平强差人意,因此命令成立一个管理印刷的皇家特别委员会.他们的首要任务是设计出科学的.合理的, 重视功能性的新字体.委员会由数学家尼古拉斯加宗(Nicolas Jaugeon)担任领导,他们以罗马体为基础,采用方格为设计依据,每个字体方格分为64个基本方各单位,每个方各单位再分成36个小格,这样,一个印 刷版面就有 2304个小格组成,在这个严谨的几何网格网络中设计字体的形状,版面的编排,试验传达功能的效能,这是是世界上最早对字体

网页的栅格设计思考

原文地址:http://andymao.com/andy/post/82.html 网页设计中的脏.乱.差,是我们在设计过程中常会遇到的问题.通常"脏"是由对色彩使用不当所产生的,而色彩使用不当产生的不好效果也分为:"花.灰",花哨.灰头土脸也就是这里所说的"脏".我已经在早前的一些文章中谈过我对设计中运用色彩的看法.有兴趣的朋友可以查阅一下<色彩解释>.而"差" 基本上是由于我们的技法上不够娴熟所产生的.比如细节

响应式网页设计:很全的响应式网页设计教程

文章描述:响应式网页设计考虑到多平台.多种屏幕尺寸的情况,能够优化多种设备的网络浏览体验. 响应式设计现在已经成为网页设计师学习的焦点.网页教学网发现群内有很多相关的讨论了,这说明我们平时接触该类案例越来越多.你会渐渐发现,我们身边越来越多的企业和客户关注到响应式网站,作为勤奋的设计师,我们怎么能不对它进行了解呢? 响应式网页设计考虑到多平台.多种屏幕尺寸的情况,能够优化多种设备的网络浏览体验.当你不知道用户使用什么设备,不知道用户的屏幕尺寸时,若想达到较优布局,可以采用响应式设计.在进行响应式

响应式网页设计和移动互联网

文章简介:响应式网页设计被提出以来,争论就不断,其实核心问题只有两个个:太多的资源请求和有限的终端支持之间的矛盾.响应式的网页设计和移动终端在用户体验和视觉风格上的差异. 个话题最近很火爆,我也一直在关注,响应式网页设计和移动互联网密切相关,并因移动终端的丰富和普及而兴盛,并且是一个颇具争议的话题,我今天将和大家探讨下. 上周写了个简单的ppt在组内大概介绍了下,感兴趣的话可以先看下这个PPT. 移动互联网的现状和未来 在说到这个话题前,我们先看下网页设计和前端开发的现状: 全球有超过53亿手机

网页设计技巧:学习网页设计的网格系统

文章描述:网格系统是一种好的习惯,也是一种格式化的设计工具.有了它,你能更专注于内容呈递,更专注于强调重点. 网格确保了设计结构的组织分明.结构明晰.我们可以通过网格系统更好的打造设计的信息层级,让设计阅读起来更具有韵律感.就跟编码一样,编码需要有机的组织结构,而网页设计的网格系统也是同样的作用. The Grid System 设计师用起来舒服,开发者用起来顺手,当然,网格系统对于用户也是大有裨益的.我一直在强调设计要注重用户体验--毕竟,客户为你的内容消费,因此你要向他们提供有价值的体验.使

PS教程:使用960栅格系统设计网站界面

本教程我们将学习如何使用960栅格系统设计网站界面.该栅格系统会优化网站设计流程.最终效果预览 [1] [2] [3] [4] [5] [6] [7] [8] [9] [10] [11]  下一页

极有可能被低估的三种有趣的网页设计趋势

  设计出不同凡响的网站是许多设计师一直追求的事情,所以大家着迷各种时尚的元素,漂亮的配色,流行的趋势,复古的样式,等等.经过时间验证的经典设计.固定的搭配是不错的选择,而逐步展露头角的新趋势,则能更好的满足这一需求. 一种全新的设计手法,融合了最新的设计技巧,展现和前人不同的气场,用更现代的气质来承载内容,这样的网站无疑会更加吸引用户,让访客难以忘怀.今天要聊的三种设计趋势其实已经出现一阵子了,但是作为一种相对综合的设计手法,他们并没有引起广泛的关注.只需要使用现有的元素.色彩和排版手法,就可

40个优秀的关于我们页面网页设计案例(下)

  沟通是一件重要的事情,这也使得联系我们页面的设计是整个项目中无法忽视,也无法含糊的部分.因为它不仅是要给用户一个交代,而且作为网站的自留地,对于团队自己而言,也必须给出一个"足够漂亮"的交代.设计手法,展现方式,风格走向,这些东西都是页面设计需要注意的地方,但是尤其重要的是,关于我们页面 中"我们"是最重要的元素.有的团队喜欢"官方"一点,有的喜欢个性一点,也有的团队喜欢幽默的呈现手法,也不乏一些手艺高超的设计团队在这个页面当中再炫一下技术和