您的位置: 首页 > 艺术设计 > 设计理论 > 网页的栅格系统设计
光的轨迹 回到列表 阿里中秋logo设计过程记录 Ⅰ
 网页的栅格系统设计

作者:青云 时间: 2008-09-19 文档类型:转载 来自:Taobao.com UED Team

第 1 页 网页的栅格系统设计 [1]
第 2 页 网页的栅格系统设计 [2]

栅格系统的形成

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

栅格系统英文为“grid systems”,也有人翻译为“网格系统”,其实是一回事。不过从定义上说,栅格更为准确些,从维基百科查到栅格的定义为:栅格设计系统(又称网格设计系统、标准尺寸系统、程序版面设计、瑞士平面设计风格、国际主义平面设计风格),是一种平面设计的方法与风格。运用固定的格子设计版面布局,其风格工整简洁,在二战后大受欢迎,已成为今日出版物设计的主流风格之一。

网页设计中的栅格系统

我给网页栅格系统下的定义为:以规则的网格阵列来指导和规范网页中的版面布局以及信息分布。
网页栅格系统是从平面栅格系统中发展而来。对于网页设计来说,栅格系统的使用,不仅可以让网页的信息呈现更加美观易读,更具可用性。而且,对于前端开发来说,网页将更加的灵活与规范。

栅格系统在现在的网页设计中应用越来越多,从网络上搜罗了一篇关于栅格系统应用的文章:30个最顶尖的基于栅格系统的博客网站设计

出处:Taobao.com UED Team
责任编辑:moby

上一页 下一页 网页的栅格系统设计 [2]

相关文章 更多相关链接
阿里中秋logo设计过程记录 Ⅰ
界面设计测试规范
利用三维图像让您的设计更出彩
献给刚刚出学门的设计同胞
对设计/设计师/设计行业的感受
作者文章
设计细节不能丢
习惯必须延续,必要可以延伸
网站信息的可用性设计
用好的设计替代不好的
热门搜索:CSS Fireworks 设计比赛 网页制作 web标准 用户体验 UE photoshop Dreamweaver Studio8 Flash 手绘 CG
站点最新 站点最新列表
悟道web标准:前端性能优化
纯中文域名".中国"今日提交申请
世界之窗3.0皮肤设计大赛结果公布
使用jQuery制作滑动动画效果的层
如何设计网页横幅
Plump 图标设计
Subrat Nayak图标设计
百度知道推出文档分享服务
CSS Sprites(CSS雪碧):要还是不要?
UIRSS三周年纪念日推出V2公测版
栏目最新 栏目最新列表
成为一个顶级设计师的第二准则
一起回味经典老体育宣传画
你是真正的用户体验设计者吗? Ⅲ
菜菜贺年动画
网页效果图设计之色彩索引
Google的产品设计指导思想
Siggi Eggertsson 几何魅力
令人惊叹的"手绘"
再见吧,创意
创意的生产方式
>> 分页 首页 前页 后页 尾页 页次:1/21个记录/页 转到 页 共2个记录

蓝色理想版权申明:除部分特别声明不要转载,或者授权我站独家播发的文章外,大家可以自由转载我站点的原创文章,但原作者和来自我站的链接必须保留(非我站原创的,按照原来自一节,自行链接)。文章版权归我站和作者共有。

转载要求:转载之图片、文件,链接请不要盗链到本站,且不准打上各自站点的水印,亦不能抹去我站点水印。

特别注意:本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有,文章若有侵犯作者版权,请与我们联系,我们将立即删除修改。

本文总共有 12 条评论,现在显示最新的 5 条。评分:- llllllllllllllllllll + 评分人数: 2 ,平均分: 5.00


dandan304 Publish at 2009-1-30 22:13:36
上帝啊!救救我吧!~ 它到底是用在设计网页之前还是之后计算呢?
totoert Publish at 2008-9-29 0:27:08
其实就是一个比例~为你所有栏目的宽度做一个约束,这样页面整体看起来端庄一些~大家之前排版也肯定会遇到类似"这一栏要多宽才好看捏?加一两个像素看看~哎呀~还是减一两个看看吧....."这一类的问题吧?现在知道这个设计系统以后要不就一个A要不就三个A就行了~反正看起来不会杂~
howlking Publish at 2008-9-27 10:13:15
我觉得古人设计字母的时候将其栅格是为了一个标准,如前所述(每个字体方格分为64个基本方各单位,每个方各单位再分成36个小格),其中的36应该是6×6正好是一个正方型。对吧?
但是这样的字是有棱角的,如果,每个方各单位分成100个小格,也就是10×10,这样棱角是不是小点儿了,文字是不是又清晰了呀?呵呵:)那么何不把他分成10000×10000呢,这样不是更好?
如果我没猜错古人也是想这么做的,但是技术没达到那一步也只好先做个6×6了,那么我们现在的技术就可以随意的分了吗?当然也是不行的。物质永远是物质的,无限是意识的,用物质是很难表达的,呵呵,这又回到最原始的哲学了。
其实我们现在所最常用到的像素图,或叫距阵图,就是一个栅格,大家应该记得PS里有一个栅格化的功能也就是说的这个。
那么PS的栅格是什么原理呢,和写文章的朋友讲的一样:(A×n)-i=W,只不过,这里的i=0,A=a=1px,所以大家看一下,最小单位是1px这样我们就可以灵活的设计了(组件中间的间距也可以看成是一个组件,其实它本来就是)。如果不是0那我们设计图片的时候可想是什么样子了吧。
既然我们用计算机技术能够达到比古人更好的效果和更快的速度的,也就没必要再返里去了,呵呵。
如果说这样可以规范化组件的尺寸,这我是认可的,不过也只能说这是规范化组件的尺寸的方法之一,而且还有很多更直接的方法。比如写一个通知:yahoo首页广告宽度必需为20或40或80。呵呵。
能和大家讨论问题真好,我的QQ303551651,欢迎加我交朋友。
denghua84 Publish at 2008-9-23 10:01:25
而且 这个比例 比较牵强
denghua84 Publish at 2008-9-23 10:00:37
那么可得:
(A×N)-10 =950
(A×N1)-10 =150
(A×N2)-10 =430
(A×N3)-10 =340

由上面的方程组可推导出:
N=N1+N2+N3
N:N1:N2:N3=24:4:11:9(此时这个比例为N值都是正整数)

所以,N值为24. A值为40.
---------------------------------------------------------------------------------
(A×N3)-10 =340

这个应该是 =350

查看全部评论

您的评论
用户名:  口令:
说明:输入正确的用户名和密码才能参与评论。如果您不是本站会员,你可以注册 为本站会员。
注意:文章中的链接、内容等需要修改的错误,请用报告错误,以利文档及时修改。
不评分 1 2 3 4 5
注意:请不要在评论中含与内容无关的广告链接,违者封ID
请您注意:
·不良评论请用报告管理员,以利管理员及时删除。
·尊重网上道德,遵守中华人民共和国的各项有关法律法规
·承担一切因您的行为而直接或间接导致的民事或刑事法律责任
·本站评论管理人员有权保留或删除其管辖评论中的任意内容
·您在本站发表的作品,本站有权在网站内转载或引用
·参与本评论即表明您已经阅读并接受上述条款
推荐文档 | 打印文档 | 评论文档 | 报告错误  
专业书推荐 更多内容
《Web标准设计》
闪魂-FlashCS4完美入门与案例精粹
Waver_h's华丽世界
Illustrator CS3质感绘画表现技法
《Flash短片轻松学》
《用户体验要素》
《JavaScript语言精粹》
作品集 更多内容

09年整理 昨天弄的个小专题 给AFD做的网站首页 昨天弄的个小专题 品牌形象 2010beta1 Coming-soon of Icon 2010beta1