网页栅格系统模板For Axure

尹广磊 · 发表于 2009-1-16 14:33:37

网页栅格系统是从平面栅格系统中发展而来。对于网页设计来说，栅格系统的使用，可以让网页的信息呈现更加美观易读，更具可用性。并且，对于前端开发来说，网页将更加的灵活与规范。（摘自TaobaoUED）

原理：

在网页设计中，我们把宽度为“W”的页面分割成n个网格单元“a”，每个单元与单元之间的间隙设为“i”,此时我们把“a+i”定义“A”。他们之间的关系如下：
W =（a×n）+（n-1）i
由于a+i=A，
可得：(A×n) - i = W
这个公式表述了网页的布局与网页“背后”的栅格系统之间的某种关系。

实例：
Yahoo首页横向版式设计采用的栅格系统为：（40×n）- 10 = W

被栅格后的效果图

模板使用与下载：
用Axure RP制作产品原型时，只需要将模板源文件相应的栅格系统复制一份到自己的Axure文件做背景。调整好位置，即可辅助你做出符合栅格系统的页面布局。
模板下载地址：

Grid by axure.org.rar (1.32 MB, 下载次数: 1273)

模板介绍：
要采用栅格系统考虑网页布局时要先放下对整个网页宽度的界定，而首先考虑根据设计风格确定一下各区块之间的间距及选用栅格单元块的大小。这两项确定之后，让栅格从0-1000px铺开，在900-1000之间选择栅格的最后边界来确定最后的页面整体宽度。以下是一个区块间距的建议：

枪毙自己 · 发表于 2009-1-16 14:51:25

:lol 960也很好用，只不过没有纵向的比例约束，要自己调。

尹广磊 · 发表于 2009-1-16 16:03:24

我提供的模板中40-20和60-20那个就是960的。
而且也划了纵向对齐线。

:handshake

尹广磊 · 发表于 2009-3-19 15:02:34

一个外国人做的栅格模板For Axure RP

960 Grid System.rp (239.5 KB, 下载次数: 840)

赵野 · 发表于 2009-7-10 15:25:33

谢谢楼主了，你发的所有东西都要读！！:lol

流沙 · 发表于 2009-7-25 14:53:07

尹兄研究的够细

freebirdman · 发表于 2009-9-22 11:35:11

非常感谢前辈的经验。。。

张亮 · 发表于 2009-10-15 15:48:43

:victory: 不错不错

天天向上 · 发表于 2010-1-28 11:56:00

谢谢，收藏了！

aber · 发表于 2010-2-23 09:50:49

高经验老道啊！

杜佳 · 发表于 2010-3-3 21:26:17

960也很好用，只不过没有纵向的比例约束，要自己调。

lingling2008 · 发表于 2010-3-13 12:40:00

收藏了

西游 · 发表于 2010-4-5 15:51:24

的确是经验老到啊，值得好好学习！

gl56770978 · 发表于 2010-7-23 11:19:14

求模板制作教程

王萌 · 发表于 2010-10-19 17:15:22

很不错，对排版很有用！

yll23 · 发表于 2010-10-30 23:36:00

再次学习了收获大嘛以前不懂960网页栅格系统，后来在这边认真学习了。

席振军 · 发表于 2010-11-1 13:03:46

关于这个，我以前看过一篇文章，博主主推8的倍数，960刚好是8的120被，同时间隙距离也是以8的倍数计算的，不知道现在设计上还是不是这样做，总是我是比较推崇这样的方法。

hyglory · 发表于 2014-4-8 12:32:24

感谢楼主的分享，研究下先

wade0663 · 发表于 2014-6-23 11:12:47

谢谢，好东西。

[产品文献] 网页栅格系统模板For Axure

我都是在用960 gird

回复 2# 枪毙自己的帖子

960 Grid System For Axure RP

[产品文献] 网页栅格系统模板For Axure

我都是在用960 gird

回复 2# 枪毙自己 的帖子

960 Grid System For Axure RP

回复 2# 枪毙自己的帖子