网页栅格化计学习.pptVIP

  1. 1、本文档共15页,可阅读全部内容。
  2. 2、原创力文档(book118)网站文档一经付费(服务费),不意味着购买了该文档的版权,仅供个人/单位学习、研究之用,不得用于商业用途,未经授权,严禁复制、发行、汇编、翻译或者网络传播等,侵权必究。
  3. 3、本站所有内容均由合作方或网友上传,本站不对文档的完整性、权威性及其观点立场正确性做任何保证或承诺!文档内容仅供研究参考,付费前请自行鉴别。如您付费,意味着您自己接受本站规则且自行承担风险,本站不退款、不进行额外附加服务;查看《如何避免下载的几个坑》。如果您已付费下载过本站文档,您可以点击 这里二次下载
  4. 4、如文档侵犯商业秘密、侵犯著作权、侵犯人身权等,请点击“版权申诉”(推荐),也可以打举报电话:400-050-0827(电话支持时间:9:00-18:30)。
  5. 5、该文档为VIP文档,如果想要下载,成为VIP会员后,下载免费。
  6. 6、成为VIP后,下载本文档将扣除1次下载权益。下载后,不支持退款、换文档。如有疑问请联系我们
  7. 7、成为VIP后,您将拥有八大权益,权益包括:VIP文档下载权益、阅读免打扰、文档格式转换、高级专利检索、专属身份标志、高级客服、多端互通、版权登记。
  8. 8、VIP文档为合作方或网友上传,每下载1次, 网站将根据用户上传文档的质量评分、类型等,对文档贡献者给予高额补贴、流量扶持。如果你也想贡献VIP文档。上传文档
查看更多
网页栅格化计学习

网页设计栅格化布局 2012.10.18 一、栅格化概念 二、栅格化的优点、缺点 三、栅格化原理与运用(公式、方法) 一、网页设计栅格化系统 栅格系统英文为“grid systems”,开始是从平面栅格系统中发展而来,以规则的网格阵列来指导和规范网页中的版面布局以及信息分布?。 通俗点讲是一种平面设计的方法与风格,运用固定的格子设计版面布局,其风格工整简洁。 对于网页设计来说,栅格系统的使用,不仅可以让网页的信息呈现更加美观易读,更具可用性。而且,对于前端开发来说,网页将更加的灵活与规范。 ??????????????? 二、栅格系统的优势 能大大提高网页的规范性。在栅格系统下,页面中所有组件的尺寸都是有规律的。这对于大型网站的开发和维护来说,能节约不少成本。 基于栅格进行设计,可以让整个网站各个页面的布局保持一致。这能增加页面的相似度,提升用户体验。 栅格系统更多的是一种布局思想。对于设计师们来说,灵活地运用栅格系统,能做出很多优秀和独特的设计。 三、栅格系统的设计原理及应用 在网页设计中,我们把宽度为“W”的页面分割成n个网格单元“a”,每个单元与单元之间的间隙设为“i”,此时我们把“a+i”定义“A”。他们之间的关系如下: W =(a×n)+(n-1)i 由于a+i=A, 可得:(A×n) – i = W 三、栅格系统的设计原理及应用 Yahoo的网站页面宽度为W=950px每个区块与区块的间隔为i=10px 如果应用上面的公式,可以推出A=40px,既Yahoo首页横向版式设计采用的栅格系统为: (40×n)- 10 = W Yahoo首页的布局完全是按照栅格系统进行设计的,每个区块的宽度对应的n值分别为:4,11,9。 只要保证一个横向维度的各个区块的n值相加等于24,则即可保证页面的宽度一定是950px。然而,950px的宽度也恰好就是当n=24的时候,W的宽度值。 三、栅格系统的设计原理及应用 三、栅格系统的设计原理及应用 页面结构较复杂,门户型网站 首页宽度为950px/960px Yahoo! 24 x 40 淘宝商城 大的两栏布局 24 x 40 主体部分使用740的栅格划分 网易 16 x 60 三、栅格系统的设计原理及应用 三、栅格系统的设计原理及应用 黄金分割 黄金分割可以归结为数学问题:对于长度为1的线段,将其分成两部分 x 和 1 – x, 使得: x / 1 = (1 - x) / x 化为简单的二次方程: x^2 + x - 1 = 0 正数解为: x = (sqrt(5) - 1) / 2 ~= 0.618 这就是黄金分割。 这个比例不仅仅出现在诸如绘画、雕塑、音乐、建筑等艺术领域,在管理、工程设计等方面也有着不可忽视的作用。 (这是个自然界的魔数,类似的还有真空光速、普朗克常数、精细结构等等) 在平面设计领域,黄金分割点被广泛采用。比如下面这种图: 三、栅格系统的设计原理及应用 960栅格,实际宽度是950. 对于 24 x 40 的情景, 最接近黄金分割的两栏布局是 350 : 590, 栏数比例为 9 : 15 宽度方向上的栅格 但实际使用时,因为窄栏经常用来做导航或放辅助信息,并不需要350px这么宽。 三、栅格系统的设计原理及应用 高度方向上的栅格 高度值560 可以让高宽比接近黄金分割。 针对560, 我们采用 14 x 40 栅格 很多大型网站并没有运用栅格系统,那它的用处在哪? 我认为栅格系统应是一种能适应自身业务的规范,能在实际工作中帮助我们提高公司产品的质量和效率。而在我们的活动和专题需求中,如果有合理的栅格,我相信能节约一部分花在思考原型的时间,也能让专题布局更加规范。 结构和表现、内容的分离能更易于后期的扩展和维护,尤其在专题中经常出现结构改动小,视觉表现变换大的情况。 Thank you!

文档评论(0)

mojintianshi + 关注
实名认证
文档贡献者

该用户很懒,什么也没介绍

1亿VIP精品文档

相关文档