谈谈网格设计

网格是基本的设计原则之一,不管你用什么样的工具。网格设计也可以用在很多地方,不管是网站设计还是杂志、海报设计,在我们常用的设计软件Illustrator和Photoshop中同样支持网格设计。

比如我们要设计一个三折页。

然后我们可以通过参考线设置好边距和分栏之间的距离。

再进一步标出版心位置。

最后我们就可以对该版面的进行网格设计了。

当然,我们也可以通过另外一种手段来实现对网格布局的设计。

我想,现在你应该对网格布局有一定的了解了,但是还可以更复杂,当然也会更强大。

比如通过下面的这个小图表也可以发现网格的存在,实际上,这是通过网格计算的出来的列和行的宽度。举例来说,| ~ | ~ | ~ |将是一个三列的网格。

如果我们展开观察,在本例中,文档的页边距和装订线是40个像素,则该图标的宽度为60个像素,该段之间的空间为10个像素,并且列的宽度是未知的,但应当是彼此相等。这可以在像这样的网格符号来表示:

| 40px | 60px | 10px | ~ | 40px | 60px | 10px | ~ | 40px | 60px | 10px | ~ | 40px |

网格加起来有一个明确的值,并减去从可用空间的宽度的命令。然后它将该通配符之间剩余的区域。其结果将是这样的:

我们可以用到更美的数学方式来设计网格。

黄金比率

黄金比例是0.618,黄金比例用百分比表示是38.2%和61.8%。所以,如果输入38.2%的宽度,那么这个分栏就是黄金比例的。

斐波那契序列

后者是前面两个数字之和,并且在100%的斐波值为1%,1%,2%,3%,5%,8%,13%,21%,34%,55%,89 %。虽然这看起来非常简单,我们必须进行调整,以使网格看上去是准确的。通过调整后,斐波那契数网格的比例将是:

| 1% | 1% | 1% | 2% | 3% | 5% | 8% | 13% | 21% | 34% | ( vl )

如果觉得每次设置太麻烦,我们可以存为模板,你可以试试看。

推荐阅读更多精彩内容

  • 笔记参考自《响应式Web设计:HTML5和CSS3实践》,2013年出版内容说不上最新。如下是全书的章的目录:第 ...
    于晓鱼阅读 406评论 0 1
  • 一、静态布局(Static Layout)即传统Web设计,网页上的所有元素的尺寸一律使用px作为单位。1、布局特...
    HowlEagle101Div阅读 5,507评论 0 17
  • 选择qi:是表达式 标签选择器 类选择器 属性选择器 继承属性: color,font,text-align,li...
    love2013阅读 1,266评论 0 11
  • 自由的翅膀飞走了 带走全部的能量 和快乐的本领一起 消失在淡黄色月光背后 你坐在身旁的房间 如此接近却总那么遥远 ...
    巽天阅读 97评论 0 2
  • 眠 空 夏 季 卷 过 的 风 铃 都 自 带 回 忆 青 葱 尝 罢 北 海 的 杏 又 追 南 国 的 风 春...
    知了___阅读 94评论 1 3
  • “马可波罗”与“图兰朵”计划是具有中意政府合作背景的计划项目,其意义是促进中国与意大利之间的学术交流,巩固两国之间...
    cb7e1f14a345阅读 48评论 0 0
  • 小时候做错了事,难免会被父母骂几句,但对于当时正处于叛逆的年纪的我,就算我是做错了,被骂了,我心里也是极不服气的,...
    要命的阿九阅读 126评论 0 1