- 1、本文档共8页,可阅读全部内容。
- 2、有哪些信誉好的足球投注网站(book118)网站文档一经付费(服务费),不意味着购买了该文档的版权,仅供个人/单位学习、研究之用,不得用于商业用途,未经授权,严禁复制、发行、汇编、翻译或者网络传播等,侵权必究。
- 3、本站所有内容均由合作方或网友上传,本站不对文档的完整性、权威性及其观点立场正确性做任何保证或承诺!文档内容仅供研究参考,付费前请自行鉴别。如您付费,意味着您自己接受本站规则且自行承担风险,本站不退款、不进行额外附加服务;查看《如何避免下载的几个坑》。如果您已付费下载过本站文档,您可以点击 这里二次下载。
- 4、如文档侵犯商业秘密、侵犯著作权、侵犯人身权等,请点击“版权申诉”(推荐),也可以打举报电话:400-050-0827(电话支持时间:9:00-18:30)。
查看更多
[基于网格的网页设计概念及实际应用案例
基于网格的网页设计概念及实际应用案例
网格基础
我们来看一些网格的术语。网格是用竖直或水平分割线将布局进行分块,把边界、空白和栏包括在内,以提供组织内容的框架。网格常在传统印刷中使用,但对网页设计也是非常合适的。网格设计不能使一个网站的布局看起来像报纸一样,但它的确可以辅助我们设计结构统一的站点。网格是一个简单的辅助设计工具,而不是什么对设计产生不良影响的东西。
理解并遵循规则当你开始学习任何一项技能时,都应当遵循它的一些指导原则。从一开始就把基础的东西学好,能使你高效地应用这些规则。学习网格也不例外。你应当按照网格来设计布局,并让所有设计元素对齐到它们所在的位置。在设计中使用网格能结构化内容并且给你一个设计起点,但这不应当阻止我们的任何创意灵感。
两种途径建立网格模板:
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.
结语:
网格并不是一切设计问题的解决方案,也不一定适用于所有人。但网格的确为那些需要结构感和平衡感,而且需要稳定和清爽设计的站点提供了很好的切入点。在你的作品中尝试网格吧,你一定能体会到网格结构给你带来漂亮而且独特的设计。
文档评论(0)