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

五个简单步骤设计栅格系统 Part1 - 分割比例

[ 2012-4-27视觉设计 丨来源:原创翻译丨阅读4823次 ]

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

“五个简单步骤”系列的第一部分作为引言,讨论一些知识点并将其付诸实践。

比例是任何优秀的栅格系统的核心。这些比例有时是有理数,例如1:2或是2:3,有时则是无理数,例如1:1.414(A4纸的比例)。第一步将讲述怎样结合这些比例来创造简单、平衡的栅格来帮助你创作协调的作品。

从一块空白画布开始

将教程放在某种真实世界的场景例子中总能比较好理解。所以我举个例子。你需要为一个画廊展览做个节目单。你知道你想要的大小是A4,需要有大小不同的照片和文本。现在,你有自己的空白画布了。

分割比率

我们将要设计的栅格系统是一个简单的对称网格,根据纸的大小按1:1.414的比例做除法。这样我们能够保持整个网格的比例,这将让我们的设计元素通过网格和纸的大小联系起来。

这是一个最简单的方法来创建一个平衡的网格。通过使用纸的尺寸比例做基准我们能够分割网格,你能看到这样的做法贯穿下面的图1~6,我们从简单的分层开始逐渐的通过除法来创建网格。

五个简单步骤设计栅格系统 插图1

五个简单步骤设计栅格系统 插图2

图由Michael Spence友情更新

获得创意

很多人说栅格系统会扼杀创意,我不同意这个观点。通过提供一个框架,栅格系统能够促进创意,并且能回答一些设计师会问的比如“页码该在放哪儿”“尺寸该多宽”之类的问题。一个好的栅格设计将通过某些方式来回答这些问题或者更多。

所以,我们有自己的网格了。我们能够开始尝试添加文字区域、图形和段落。我们能够探索文字和图片怎样在我们将有的出版物所包含的不同类型的纸张上和谐的在一起。

五个简单步骤设计栅格系统 插图3

图7显示文本区域以及第一层元素的访问结构——标题头和页码。图8、9显示网格是如何适应各种不同的设计方案的。

简短但是美味

通过一个简单的步骤我们有了个开始。之后我们将接触到更复杂的比率,比如黄金分割以及通过交叉摆放而不是单个页面来结合多种比例的设计。

系列目录

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

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

版权说明

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

Tag: 微橙博客

博主档案

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

0 个小桔子发表了评论:

我也要做小桔子:

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