网络编程
位置:首页>> 网络编程>> 网页设计>> 栅格:一以贯之

栅格:一以贯之

作者:snlchina 来源:蓝色理想 发布时间:2008-07-22 12:19:00 

标签:栅格,视觉,设计

上文:栅格:从混乱到秩序

Jacci Howard Bear 的英文原文:

http://desktoppub.about.com/od/grids/l/aa_gridsunity.htm

人往往喜欢有条理的视觉信息

简报、杂志、宣传册、年报、以及书籍等通常包含诸多视觉元素:分栏文本、大标题、照片、插图、引文等等。栅格会帮助设计师在文档中建立页面之间的一致性。 读者会期待页码出现在每一页上的相同位置。一篇文章中的全部文字,即便它覆盖于多个页面,也一样有一致的外观,例如说相同的栏宽,这样可以提升可读性。同样的,读者还往往会期待边栏,说明性的文字,以及其他重复出现的元素出现在页面上的相同位置。

在一个多页文档的全部页面中使用一致的栅格,让设计师更易于提供读者们通常会期待的一致性外观。一个精心设置的栅格系统同样可以引入变化,而不会牺牲可读性和一致性。它同样会加快排版的进程,因为在放置各页面元素的时候,你不必再小心翼翼的“试探”以及“回头看看前面是怎样做的”。

下面的页面范例,显示了如何在一个7列的垂直栅格中进行一份新闻简报的图文混排。注意图一和图二有着一致的版式(但是左右反转了)。文本栏占两个单元格宽度。一个单元格有更多的栏空,用于把正文和边栏分隔开来。页3(图二中的右页)的版式和前面两页好像没多少共同点,但假如你看看隐藏在页面背后的栅格系统(图三),你会看到这三页采用的都是同一个栅格系统。

图 1: 左边是7单元栅格的简报

图二:7单元栅格的对开页简报

图三: 隐藏于这两个对开页简报之下的7单元栅格

0
投稿

猜你喜欢

手机版 网络编程 asp之家 www.aspxhome.com