栅格:灵活应变


基于内容选择栅格,或是基于栅格调整内容

正确使用栅格给设计师带来的是灵活性,而不是一成不变。正确的栅格还有助于内容的组织,让观众/读者更容易理解内容。 

栅格本身是没有对错的,其实简单的栅格更适合于不同的内容和设计目的。当然,如果你只是盯着一张白纸和标题发呆,那栅格也帮不了你。下面几点可以作为思考的起点,帮助你筹划你的栅格和设计。

内容或页面元素
该出版物主要以文字还是图片为主?是否包含大量的标题、分隔线、插图和引文? 
文本
观察文本的数量及其形态——是很长的文章,还是很多篇短文,或是长短混杂。有多少小标题?你会不会采用诸如页眉、水平线、首字下沉之类的视觉引导? 
图片与插图
插图的类型或图片的尺寸是否存在相似点?图片能否按尺寸或类型来分组?是否有大量的矩形元素或是众多不规则形态的元素? 
复杂度
通常来说,栅格单元数量越大,单元格就越小,设计的可能性也就会越多。然而,过多的可能性可能会破坏栅格设计所提供的那种微妙的统一性。
那么,哪种栅格最适合呢?这里是一些指导方针(记住,我说的是指导方针,不是金科玉律)。

一份包含很多图片的简报、宣传册或是杂志通常需要包含许多小单元格的栅格,这样可以为图片的放置和缩放提供更多可能性。 
简报通常包含许多文本,因此常使用一种分栏式的栅格。
1、2、3栏的栅格很常见。每一栏都可以容纳大量的文本,特别是长篇的文章。 
4栏或更多的分栏为包含文字、照片和其他图形元素及长短不同的文章的出版物提供了更强大的灵活性。
基于偶数的栅格可能会遭遇过于对称的困扰,假如文本和图形总是占据1-2个单元格的话。 
简报不应该受缚于栏框式的栅格。一份简报包含了众多短文,以及“新闻提要”和照片,采用一套6(2x3)、 9(3x3)或是12(3x4)矩形或方形单元格的网格系统会很方便。
栅格不应成为设计的桎梏
栅格有可能让人感觉窒息,但这不是必然结果。

基于栅格的版式设计并非适用于一切案例。
应该让栅格去适应元素的混合,而不是要强制元素去适应栅格。
你无须强制你页面上的元素都限制于单个单元格。在一个5栏的栅格中,5个窄栏的文本恐怕会很难阅读。尝试用两栏文本,每栏占两个单元格,另外一个空栏,用于放置强调语句、照片、或是作为页面的“呼吸空间”,或是连接大写 (参见前文-关于微调首字母大写)

缩放照片以适合2-3个或更多单元格。你也不必总是占满整个单元格。让照片占满2个或1/2单元格,其余的就留作白空间吧

栏空与边距也不是不可跨越的禁区。出血的照片就可以超出页边。你也不需要填满每一个小单元格。在5-7栏的栅格单页中,剩余的奇数栏可以在外部提供额外的“缩略图空间”。有各种方式可以在设计中添加白空间,例如保留一些开放单元格便是途径之一。

一个网格不错,两个也许更好
一些出版物会使用混合栅格。如果某页的内容与其他页面相比发生了巨大的变化,那么就很适合用一种与其他页面不同的网格来表现。甚至在同一个页面内使用多个栅格系统也是可以的。

  • 一份文字为主的简报也许在某个页面上会包含众多的照片或插图。那么可以给文本页面采用一种简单的栅格,而多幅图片的页面则可能会需要更复杂的布局。 
  • 使用两种不同栅格来将边栏或次级项目与文章主体区分开来。 
  • 长短文章在同一出版物中混合出现时可以为它们使用不同的栅格。或是为特别专题和常规内容使用不同的栅格。

不管你用了任何一种栅格,都应该始终如一。让内容来决定你的设计,让栅格成为你的页面布局上的合作伙伴——而不是独裁者。

本系列文章仅仅只是一个概要。如果它有助于你初步了解栅格系统,给你启发,或是激发你去寻找更多的灵感——那正是我所希望的

本文作者:



相关阅读:
自动把纯文本转换成Web页面的php代码
几个bat例子文件
Javascript静态分页(多个资料,静态自动分页)
Javascript设计网页中的下拉菜单
asp.net Request.ServerVariables[] 读解
ajax实例入门代码
Javascript 跨域访问解决方案
Windows系统卸载IE8的各种方法汇总
JS维吉尼亚密码算法实现代码
ASPWebPack 代码 提供下载
用Windows 2008软路由提升上网效率
Windows Server 2008虚拟化功能解析
javascript:google 向上向下滚动特效,兼容IE6,7,8,FF
Dom元素变换效果(工具函数)
快速导航

Copyright © 2016 phpStudy |