搜索:
首页 >> 网页设计 >> 前端设计 >> 基于网格的网页设计概念及实际应用案例

基于网格的网页设计概念及实际应用案例

2010-3-30 来源:中国Asp之家 投递文章

一些大型站点都有着非常一流的视觉外观,它们很可能在设计时使用了网格系统。网格可以是页面布局显得紧凑而且稳定,为设计师在设计站点时提供一个逻辑严谨的模板。

但使用网格并不意味着枯燥的设计,一个好的设计师不仅能够合理地应用基于网格布局的规则,而且还能适时地打破这些规则。

"The grid system is an aid, not a guarantee. It permits a number of possible uses and each designer can look for a solution appropriate to his personal style. But one must learn how to use the grid; it is an art that requires practice."

- Josef Müller-Brockmann

网格基础

我们来看一些网格的术语。网格是用竖直或水平分割线将布局进行分块,把边界、空白和栏包括在内,以提供组织内容的框架。

网格常在传统印刷中使用,但对网页设计也是非常合适的。网格设计不能使一个网站的布局看起来像报纸一样,但它的确可以辅助我们设计结构统一的站点。

网格是一个简单的辅助设计工具,而不是什么对设计产生不良影响的东西。

理解并遵循规则

当你开始学习任何一项技能时,都应当遵循它的一些指导原则。从一开始就把基础的东西学好,能使你高效地应用这些规则。

学习网格也不例外。你应当按照网格来设计布局,并让所有设计元素对齐到它们所在的位置。在设计中使用网格能结构化内容并且给你一个设计起点,但这不应当阻止我们的任何创意灵感。

两种途径建立网格模板:

1、自己创建网格系统

对于建立自己的模板系统,尽管有很多不同的理论,但归根结底,还是要选择你手边用起来最顺手的工具。

你可以把一个空文档按照数学原理分割成奇数栏或偶数栏,而且通常要把栏之间的空白考虑在内。

只要你喜欢,你的网格可以很复杂或者很简单。你的网格越复杂,你就拥有越多的自由发挥空间;而网格越简单,留出的空白也越多。这完全取决于你自己的决定。

下面是一些用Photoshop制作的例子,它们可以在Photoshop中用网格来查看。

1   2  3  4 下一页 尾 页
Tags:网格  网页设计  应用 
相关文章
手机版 前端设计 Asp之家 Aspxhome.com
闽ICP备06017341号