关注Web前端,看好移动网络应用!

五个简单步骤设计栅格系统 Part2 - 比例和复杂栅格系统

[ 2012-5-9视觉设计 丨来源:原创翻译丨阅读3030次 ]

这个页面暂时用于测试各种文字样式

在“简单步骤系列”第一辑中我讲述了怎样用简单的比例,利用你的页面尺寸来创建平衡的栅格来帮助你创作作品。在第二辑中,将涉及其他比例和如何将这些比例结合起来创建更为复杂的栅格系统。

关于栅格系统

我之前提过几次在自己的设计中使用黄金比例来分割栅格。所以,在你继续阅读之前我建议你读一读这篇背景文章和我的文章“Design in Flight”。对于不想花费更多精力在这些文章中的朋友,我大概概括一下好了:

黄金分割的比例(Phi)很显然的贯穿于整个宇宙之中。通过确保页面中的元素符合这个比例可以保证好的设计效果。虽然这个比例是基于数学的,用黄金分割依旧可以确保一种对于正确构图的自然感觉。

这一点很重要,大家对此的争论与辩论维持已久。美学是可以被测量的,更重要的是可以被构造。如果你想让某物变得美观、让人喜爱,你需要做一些步骤来保证它的方向是正确的。现在我没有说“准许这些指导方正你就能创造出美的东西”,我说的是遵循这些指导方针能够创造本质上更美观的平衡的构图。

构图可以让事物变得更实用

这是一个所谓的“美观可用性效果”的理论。我过去写过关于这个的文章,我就觉得这是一个非常有趣的理论。这个理论认为设计得更美观的东西本质上是为了更实用。这个有趣的理论必然能够挑战经常被“丑陋的画笔”玷污的实用性领域。

用这些理论和平衡的比例(比如黄金分割)来组成栅格,反过来又能使设计作品美观、平衡。通过这些理论,使这些高质量的设计更加实用。也许我把论点摆在这里是白费功夫,但是简而言之:

好的栅格设计不但能够保证你的设计是清晰美观的,而且更加使用。

付诸实践

和第一辑一样,我将代入一个场景中来设计栅格。对于主要基于web设计的朋友,不好意思,这将是另一个印刷物的例子,但这也不能说这个理论就不能应用到web中。这当然可以被应用到许多不同的介质中,从建筑和室内设计到产品设计和艺术品,你只是需要将它应用到不同的“画布”罢了。

所以,和“Design in Flight”一文中一样,我们来设计一本书。与本系列的第一篇文章不同的是,我把在一个单一页面中应用栅格引伸到双页,这个“非对称”栅格和上一篇中的对称栅格相反。

塑造页面

在这个栅格中,我们将利用页面的比例来定义主要的文本区域或者内容区域。这是一个非常简单的方法来所见页的大小,确保正确地放置和平衡比例。见下图。

五个简单步骤设计栅格系统 Part2

我们现在有一个区域,用红色显示,可供我们创建栅格。

运用黄金分割

现在您已经阅读其他文章,你会发现应用黄金比例到这个区域显得很直爽。按照Phi比例分割这个区域,我们得到A、B两列。

五个简单步骤设计栅格系统 Part2

创建系统

现在我们有了列,还需要将栅格具体化以便应付不同的内容和页面类型。首先,我们扩展一下内容区域和列的边线。

五个简单步骤设计栅格系统 Part2

我们添加一条穿过内容区域的水平线。我将这种线成为“悬挂线”,不是很确定正确的术语。但是总之,内容通过这些线“悬挂”起来并在我们的书中保持一致。这样能够在同一个地方给读者一条线,保证一页一页地阅读之后眼睛的舒适。

五个简单步骤设计栅格系统 Part2

使用辅助线,我们可以再添加书的路径结构区域——例如页码等。这些区域通常在内容区域之外,周围会有许多空白,以表明是不同“类型”的内容。

五个简单步骤设计栅格系统 Part2

之后我们可以添加各种设计元素到栅格中,并能知道这些独立的设计元素——文字、图片、页码——都能舒服地相互联系以及和书的大小相对应。

栅格系统相关

用这种方式创建栅格系统——使用比例建立关联的辅助线,保证了网格的均衡。

虽然我恐怕得说它不算一门精确的科学。但很多网格设计通过比例来试验,试验空白和内容,如照片和文字等元素。这也关乎惯例。没必要重复发明轮子,可以去研究如建筑到护理等各个专业类杂志惯常使用的网格(不得不说,一些意想不到的专业类杂志有奇妙的网格设计)。

我想说的是,试一试设计栅格吧。不要因为我谈到了比例,分类和模块化,就认为设计栅格是乏味的。专注最终的产品目标,不要太过关心设计网格的过程所花费的时间。

系列目录

这是“简单步骤...”系列的第二期

  1. 分割比例
  2. 比例和复杂栅格系统
  3. 在web页面使用栅格系统:第一辑
  4. 在web页面使用栅格系统:第二辑 固定式
  5. 在web页面使用栅格系统:第三辑 流动式

版权说明

本文由“笑得像吃猫的鱼”译自 MARK BOULTON ,版权归原作者所有

Tag:

博主档案

笑得像吃猫的鱼
      生于1990年冬,生活圈子很小,接触社会太少,喜欢旅行、摄影、写博客,热爱汽车和写网站,单纯专注且狂热... 更多 >

0 个小桔子发表了评论:

我也要做小桔子:

    邮    箱   
    昵    称   
    网    址    以http://开头哦,方便回访
 3位验证码     515
首页| 博客| 专题| 百宝箱| 实验室| 站内搜索| 网站地图| 关于微橙 (赣ICP备11000789号)