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

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

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

"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中用网格来查看。

2、下载现成的网格模板

相比制作自己的网格,从网上下载一些标准的网格同样可以用来辅助网页设计,并且还省了你自己制作网格的很多时间。

当前最流行的网格可能就是960 grid system了。它是nathan smith制作的,允许你制作12、16、和24栏的布局。

这个项目是Smith

smith在谈到960grid system时说:”我只是简单地把这个网格系统分享给大家,如果有人从中获益,那再好不过了。”

这个下载包括了CSS ,HTML,Photoshop,Illustrator,InDesign等等文件。设计文档包括了很多有用的文档,它们用来建立整齐而且清爽的站点。

打破规则

在介绍了网格的基础知识之后,我们现在来打破这些规则。网格是把元素对齐的一非常好的方法,它让你的设计显得干净、整洁,而且用户友好。

然而,正如前面提到的,我们不能让网格禁锢了我们的灵感和创新。要勇敢地向网格以外的地方冒险,要创造一个基于网格的作品,不意味着任何东西都要对齐。

越出网格边界的元素会让作品看起来更加。。和流畅,而不是像表格那样死板和枯燥。

看看下面的例子,它们是应用960 grid system制作的,展示了网格可以是漂亮而不古板的。

基于网格系统的设计实例

下面是一些应用了网格系统的设计作品,它们非常整齐而且界面友好。其中一些是严格按照网格布局的,另一些则打破了网格的某些边界。所有这些都说明,应用网格系统并不意味着枯燥的外观设计。

Help Your Habitat

Digital Podge 2009

Vegas Uncork’d

Anton Peck

Brite Revolution

Kiki and Bree

Arvorecer

Simon Collison

使用网格进行设计的一些工具

下面是一些用来设计基于网格布局的工具。

Grid Designer

A fun tool to help set up a grid.

Grid System Generator

Just as the name of the tool says: it helps generate a grid for you.

Grid Calculator

Another fun tool to help set up grids.

jQuery Masonry

A jQuery tool that arranges items vertically and horizontally according to a grid.

结语:

网格并不是一切设计问题的解决方案,也不一定适用于所有人。但网格的确为那些需要结构感和平衡感,而且需要稳定和清爽设计的站点提供了很好的切入点。在你的作品中尝试网格吧,你一定能体会到网格结构给你带来漂亮而且独特的设计。

时间: 2024-10-01 05:23:35

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

网页设计的含意和原则:响应网页设计

文章描述:响应网页设计目前在网页设计中无疑是一个热门话题.从某种程度上来说,响应网页设计概念的普及是非常应该的,因为用户以越来越多样化的方式访问网站.iPad,iPhone,Android移动设备,桌面,笔记本--现在我们的网页设计必须在众多方式下使用. 响应网页设计目前在网页设计中无疑是一个热门话题.从某种程度上来说,响应网页设计概念的普及是非常应该的,因为用户以越来越多样化的方式访问网站.iPad,iPhone,Android移动设备,桌面,笔记本--现在我们的网页设计必须在众多方式下使用.

理解响应网页设计元素

响应网页设计目前在网页设计中无疑是一个热门话题.从某种程度上来说,响应网页设计概念的普及是非常应该的,因为用户以越来越多样化的方式访问网站.iPad,iPhone,Android移动设备,桌面,笔记本--现在我们的网页设计必须在众多方式下使用. 让我们来了解响应网页设计的含意和原则. 响应网页设计的关键特征 认为网页设计是"响应"的,需要有三个关键牲.网页设计师和开发者Ethan Marcotte--提出响应网页设计的人--将这些特征描述如下: 网站必须以灵活的网格为基础构建.设计中包

《众妙之门——网页设计专业之道》——1.3 传统印刷设计的影响

1.3 传统印刷设计的影响 虽说令人愉悦的设计主要是通过意想不到并且有趣的风格给访客留下深刻的印象,然而现代的网页设计师往往更进一步,对他们工作的底层细节进行试验,从而创造出更多创新和独特的布局.事实上,即使不是专家,也能看到网页设计对传统印刷设计日益扩大的影响力.它们往往表现在所谓的"art-direct"风格博客文章上,每篇博文都展现了其独特和精心的制作.这些网站的布局通常类似于一些传统杂志和海报,有着醒目的头条.多列文本.突出的标点.缩进文本,并且支持意象.旁注和脚注.设计风格通

优秀网页设计作品:卓越设计遵循的原则

导读:优秀设计和卓越设计之间的区别是比较小的.一般人可能无法解释说明卓越的设计的具体差别,但他们可以找到自己喜欢的网页设计作品.通过对照一下几个优秀作品,我总结了一下作为卓越设计的几个细节差别. 内容摘要1.合理使用渐变2.留白3.网格布局4.提高字体应用5.明确而有效的导航6.设计漂亮.有用的页脚介绍优秀设计和卓越设计之间的区别是比较小的.一般人可能无法解释说明卓越的设计的具体差别,但他们可以找到自己喜欢的网页设计作品.通过对照一下几个优秀作品,我总结了一下作为卓越设计的几个细节差别.前不久,

解析基于栅格的网站设计案例分析

如今,Grid-based(基于栅格的)网页设计已相当普遍,这意味着网页布局混乱的日子就要终结.尽管还无法用肉眼分辨,但我们的确是步入了有序和结构化的时代.栅格布局整体趋于匀称,通常会使网页更加整洁美观.同时,栅格框架已经成为现代所有网站功能实现的基础,这都要归功于它为终端用户提供了完美不失真的设计体验. 一般来说,栅格仅仅是水平线和垂直线隔出来的特定空间,它似乎很难承载任何设计元素,所以大部分设计师会根据路径描绘出几何特性.我们已然看惯画廊.博客.以及新闻相关网站中那些干净利落的栅格,但其实只

09年业界第一波-《网页设计解析》即将出版

基本信息 书名:网页设计解析  丛书名:Web开发路线图 作者:周陟 编著           ISBN  978-7-302-19523-8  责编:栾大成                          定价:62 出版日期:2009年3月           版次:2009年3月第1次印刷  编目分类:                               读者定位: 本书适合于打算进入网页设计行业工作,并对网页设计有着极大热情的读者朋友,无论你是初学者还是已经开始你的职业生涯,这

网页设计配色剖析之绿色

  每个人都有自己最喜欢的颜色,在工作以及生活中,当购买产品或进行艺术创作的时候,他们会选择自己喜欢的颜色.对于设计师来说也是同理.设计师偏好在设计中重复使用他们最喜欢的色系.虽然命题是无限的,但是他们还是喜欢遵循自己的审美感觉. 推广成功.运营优秀的网站,往往让用户感觉到页面和谐感强.视觉效果符合本能审美.元素具有图像象征且与产品服务紧密联系,这归功于网页设计. 绿色的定义 绿,是一种颜色,绿色处于光谱中间,波长较短,大约为500-570nm.在减色法中,绿色不是主色,但是可以由黄色和蓝色.或

缩略图在网页设计中应用的35个优秀案例

这篇文章向大家推荐35个缩略图在网页设计中应用的优秀案例,希望下面这些网页设计实例能够帮助大家制作出更加优秀的网页作品. Shropshire Screen Arnaud Beelen Two Fish Illustration & Design twoto Kokokaka Brave Nu Digital F O U N D E D Idea Exhibit astronaut design Marc Kremers Purpose Tastespotting Amate Rejane Da

CSS基线之道:网页设计布局之垂直网格设计

网页设计布局中一直比较流行网格对齐,但只是针对水平的对齐,很少或者没有涉及垂直对齐,这篇文章很详细的讲解了垂直网格,乃至基线对其的相关,而css3中的多列布局的也使其显得更为重要,因此还是很有必要去了解学习,至少也是一种思路. 这或许是因为缺少基线网格的理解和欣赏,更或者是因为基线网格是出了名的难以实现, 迄今为止还没有人拿着蓝图让它成功实现. 有些人甚至认为基线在网络上是多余的,基线作为一种排版术语和网络上的行为,在网络上遵循的规则有别于用于印刷的,line-height和真正的行距之 间令人