基于网格的设计:六个创意专栏形式

8顶
0踩

2008-03-28 13:28 by 正式记者 levis2000 评论(3) 有4681人浏览

互联网

声明：ITeye资讯文章的版权属于ITeye网站所有，严禁任何网站转载本文，否则必将追究法律责任！

网格系统(grid systems)为网站的设计带来了可视结构化的平衡.网格(grid)对于是如何组织和展现信息来说是一个很有用的工具.对于网站设计者来说,它是系统布局和优化的一个科学方法，能为用户带来更好的体验。一个没有网格的网页是噩梦,相反的,一个拥有网格的结构良好的站点是富有生命力且充满活力的。

什么是基于网格的设计?
网格式设计是是一种和谐的可靠的，用来更好展现信息的网页设计方式。它为网站整体布局和设计者与使用者之间的良好对话提供了一种有效的方法。为了更好的构建网站的布局，我们必须知道平衡和对称，如何把重点内容展示给用户。这里给出了一些相关的资源信息:

网格能清晰有效的交流信息.Khoi Vinh的《重新设计一个复杂的新闻网站》证实了这一点。

以下是六个基于网格的网页设计样例,很好的展示了如何利用网格(Grid)来让你的页面更富有创意。

1.非对称
非对称是对称的反义词，不过，这些混沌、随机而嘈杂的元素却能让页面显得更生动。

2.增加变数
访问者往往厌倦看到一些雷同的垂直式设计，不如增加更多的列,在水平方向上能让用户关注更多的信息。

3.倾角的使用
在第四准则:间距是好朋友文中,给出了一个印刷设计的例子,但是在网页设计中却不太适用，因为网页中的文字一般都不是倾斜的。但是，合理的让某些图片文字倾斜，却能让页面看上去更有意思。

4.离逸的边界
网格是很好的，适当的打破格子的边界,模糊的边界也是有效果的。可以参照《思考在边界之外》

拉开注释:

在格子内的注释：

5.图片区域
用一些插图来打破的文字区域间的分割也是一种创造效果的办法。

6.空间的平衡
非对称平衡也是很重要的。下面的效果就显得很平衡，不失重心。

学习好的行列网站设计：

Satsu.co.uk

侧栏成功地重叠，并打破僵化的布局网格，很有视觉趣味。

Edgepoint Church

拥有强大的网格和两栏的布局。头部有一个自由流动的设计，主页上脱颖而出。

8ef5e339-f84a-3f9b-99d3-c0cb00f5dab1

Db65487b-a9d0-3ca6-8bce-e19222d33808

来自: smashingmagazine.com

分享到：

8
顶

0
踩

评论共 3 条请登录后发表评论

3 楼寻找出路的苍蝇 2008-03-29 12:50

不如叫表格。。。
网格的内涵很丰富的，放在这个地方太浪费了。。。

2 楼 yapi 2008-03-28 19:31

good design

1 楼 ShiningRay 2008-03-28 17:11

很容易和grid computing混淆

发表评论

您还没有登录,请您登录后再发表评论

‍ 学生管理系统网页设计、OA管理系统、后台管理模板、智能停车系统、等网站的设计与制作。️HTML网页设计，采用DIV+CSS布局，共有多个页面，排版整洁，内容丰富，主题鲜明，首页使用CSS排版比较丰富，色彩鲜明有...

九个帮你修炼内功的设计师心法口诀

@庫倪Qoli ：万变不离其心，以静制动，以慢打快。在中国的传统武学，除了练形，还要练心。所谓心，即是心法了。...记忆在于形式；保持桌面感觉；云端同步，位置要记。一、行动时，数步骤每天在使用计算机

左耳听风——笔记二：程序员练级攻略

学习面向对象的设计模式时，你不要迷失在那 23 个设计模式中，你一定要明白这两个原则： Program to an ‘interface’, not an 'implementation’ 使用者不需要知道数据类型、结构、算法的细节。使用者不需要知道...

企业2.0的凝固态物理学（软件世界09年专栏文章）

二十年前，父亲和我说过一个比喻，如果一个思想在脑子里想，相当于气态，说出来并交谈，相当于液态，写成文字，著书立说，相当于固态。在藏传佛教里有辩经的制度，某人如果认为自己对佛学的理论可以立世，需要在广场...

网页原型设计工具设计_网页设计工具从下往下

网页原型设计工具设计There are several ways to handle the graphics required for a Website. The first, and easiest, is to simply steal — er, "borrow" — them from other sites. Honest designers and ...

【DL】第 12 章：生成式深度学习

它很好地扩展到创意活动。当我第一次声称在不远的将来，我们消费的大部分文化内容将在人工智能的大力帮助下创造出来时，我完全不相信，即使是长期的机器学习从业者。那是在 2014 年。快进了几年，这种怀疑以令人...

开源素材网_34个用于广告素材的开源工具

开源素材网几年前，我在Red... 这六个应用程序是开源设计工具的主力军。它们是完善的，成熟的项目，具有完整的功能集，稳定的版本和活跃的开发社区。所有六个应用程序都是跨平台的。每个版本都可以在Linux，OS X...

ApacheCN 翻译/校对/笔记整理活动进度公告 2019.9.6

翻译/校对三个文档就可以申请当负责人，我们会把你拉进合伙人群。翻译/校对五个文档的贡献者，可以申请实习证明。请私聊片刻（529815144）、咸鱼（1034616238）、或飞龙（562826179）来领取以上奖励。翻译校对...

疫后新基建：加快从半工业半信息社会到智能社会

在这个发展过程中，人的生活更加便利和泛在，甚至有些产品和终端成为人的“第六感官”；企业从区域小市场到全国大市场，在一个细分的“长尾市场”就可以做的足够大；产业组织发展从大企业的中心化，到平台企业的去...

布客·ApacheCN 翻译校对活动进度公告 2020.5

翻译/校对三个文档就可以申请当负责人，我们会把你拉进合伙人群。翻译/校对五个文档的贡献者，可以申请实习证明。请私聊片刻（529815144）、咸鱼（1034616238）、或飞龙（562826179）来领取以上奖励。可解释的...

2011年50个最佳网站

以下为《时代周刊》评出的2011年50个最佳网站的分类及详细列表： Music &amp; Video （音乐及视频类网站） 1：8tracks8tracks是一个自称“手工制作”的互联网音乐广播网站。允许用户把自己的音乐做成一个音乐...

ApacheCN 翻译/校对/笔记整理活动进度公告 2019.9.13

ApacheCN 活动汇总 2019.8.30

如果你希望在我们的专栏、文档或邮件中投放广告，请准备好各种尺寸的图片和专属链接，联系咸鱼（1034616238）。我们组织了一个开源互助平台，方便开源组织和大 V 互相认识，互相帮助，整合资源。请回复这个帖子并...

布客·ApacheCN 翻译/校对/笔记整理活动进度公告 2020.1

2011年度全球50个最佳网站

Music & Video （音乐及视频类网站） 1.8tracks 8tracks是一个自称“手工制作”的...允许用户把自己的音乐做成一个音乐合辑，通过8tracks上传到网络，方便用户寻找、分享新音乐。 2.HBO GO HBO GO是HBO推出的线上

ApacheCN 翻译/校对/笔记整理活动进度公告 2019.9.20

ApacheCN 翻译/校对/笔记整理活动进度公告 2019.10.11

ApacheCN 翻译/校对/笔记整理活动进度公告 2019.10.4

ApacheCN 翻译/校对/笔记整理活动进度公告 2019.9.27

ApacheCN 翻译/校对/笔记整理活动进度公告 2019.10.18

8顶0踩