Grid Page Layout

栅格化设计及其解决方案的分享PPT

Transcript

1. Grid Page Layout 基于栅格的拍拍网信息架构布局设计 by Kaiye @ 电子商务页面重构组
2. What? 什么是 栅格
3. Grid 格子
4. burberry 苏格兰经典 格子 英伦
5. burberry 苏格兰经典 格子 英伦
6. burberry 苏格兰经典 格子 英伦
7. burberry 苏格兰经典 格子 英伦
15. 秦代（公元前221年－公元前206年）官私印开始 用“田字格”，字与字之间有界格，文字趋于规整，但不失 自然美。西汉初期文字更规整，“田字格”仍然保留。
16. 1629年，法王路易十四命 令成立一个管理印刷的皇家特别委 员会，由数学家尼古拉斯·加宗 （Nicolas Jaugeon）担任领导。委员 会提出了新字体设计建议：以罗马 体为基础，采用方格为设计 依据，每个字体方格分为64个基 本方格单位，每个方格单位再分成 36小格，这样，一个印刷版面就由 2304个小格组成。这是世上最早对 字体和版面进行科学实验的活 动。也是栅格系统的雏形。
17. 20世纪50年代，栅格设计系统终于在前西德与瑞士得到完善。通 过瑞士平面设计杂志的宣传，将瑞士苏黎士和巴塞尔两个城市的设计 家从20世纪40年代探索的成果全面展示，并影响世界各国，因此也被 称为“瑞士平面设计风格”（Swiss Design）。由于这种风格 简单明确，传达功能准确，因而很快得到世界范围内的普遍认可，成 为战后影响最大的一种平面设计风格，也是国际最流行的风格，因此 又被称为“国际主义平面设计风格”（International Typographic Style）。 尤尼马克设计公司的设计思想基本是国际主义的：强调平面设计 上的标准化，采用方格网络为设计依据，目的是良好的视觉 传达功能。
19.  -221 文字排版：秦代田字格
20.  -221 文字排版：秦代田字格  1629 版面设计：法国方格字体栅格系统雏形
21.  -221 文字排版：秦代田字格  1629 版面设计：法国方格字体栅格系统雏形  1940 平面设计：瑞士平面设计风格
22.  -221 文字排版：秦代田字格  1629 版面设计：法国方格字体栅格系统雏形  1940 平面设计：瑞士平面设计风格  2006 网页设计：YUI 0.12.0 Release reset-fonts-grids.css
23. Why? 为什么要用 栅格
25. 艺术品
27. 设计品
28. “一般在举办美术展或出版写真集的时候，出于对展品或作者的 顾及和尊重，有时不得不使自己做些让步。如果换作年轻的时 候，为了保持所谓自己的作品风格的完整性，会凭着一股轻率的冒 险心气及倔强的韧劲，踢开画家或摄影家亦在所不辞。而随着年龄 的增长，一种沿着主题深入思考的成人般的思考模式得以确立，设计 开始变得无趣起来。” ──田中一光《设计的觉醒》
29. “一般在举办美术展或出版写真集的时候，出于对展品或作者的 顾及和尊重，有时不得不使自己做些让步。如果换作年轻的时 候，为了保持所谓自己的作品风格的完整性，会凭着一股轻率的冒险 心气及倔强的韧劲，踢开画家或摄影家亦在所不辞。而随着年龄的增 长，一种沿着主题深入思考的成人般的思考模式得以确立， 设计开始变得无趣起来。” ──田中一光《设计的觉醒》
30. 设计模式是一套被反复使用、多数人知晓的、经过分类编目 的、代码设计经验的总结。使用设计模式是为了可重用代码、让代码 更容易被他人理解、保证代码可靠性。 毫无疑问，设计模式于己于他人于系统都是多赢的，设计模式使 代码编制真正工程化，设计模式是软件工程的基石，如同大厦的一块 块砖石一样。 http://baike.baidu.com/view/66964.htm
31. http://book.douban.com/subject/1052241/
32. 栅格设计的目的
33. 栅格设计的目的 可靠性
34. 栅格设计的目的 可重用 可靠性
35. 栅格设计的目的 可重用 可靠性 被他人理解的设计
36. 栅格设计的目的 可重用 可靠性 被他人理解的设计 工业化
37. 栅格设计的目的 可重用 可靠性 被他人理解的设计 工业化 提升站点相似度
38. 栅格设计的目的 可重用 模块化 可靠性 被他人理解的设计 工业化 提升站点相似度
39. 栅格设计的目的 可重用 模块化 共赢 可靠性 被他人理解的设计 工业化 提升站点相似度
40. • 在栅格化系统下，视觉设计师与前端开发遵循相同的标准规范， 有利于减少页面开发和维护成本； • 基于栅格设计，使得页面布局一致，相似度高，有利于提升站点 的统一性，从而提升用户体验； • 设计师灵活运用栅格系统，能做出更多优秀和独特的设计。
41. How? 如何进行 栅格设计
45. grid
46. grid grid
47. grid grid grid
48. grid grid grid grid
49. grid grid grid grid
50. grid grid col grid grid
51. grid grid col col grid grid
52. grid grid col grid grid
53. Column gutter
54. (Column + Gutter)*N - Gutter = Page
55. (30 + 10)*24 - 10 = 950
56. 960 Grid System 960网页栅格系统
58. 960 = 2^6 * 3 * 5 960 = N(7*2*2-2)=N(26)
62. N(560) = N(2^4 * 7 * 5) = 18 N(720) = N(2^4 * 3^2 * 5) = 28 N(750) = N(2 * 3 * 5^3) = 14 N(800) = N(2^5 * 5^2) = 16 N(960) = N(2^6 * 3 * 5) = 26 N(1000) = N(2^3 * 5^3) = 14 N(1024) = N(2^10) = 9 N(1440) = N(2^6 * 3^2 * 5) = 34 N(1920) = N(2^7 * 3 * 5) = 30
63. 80 * 12 = 960
64. 60 * 16 = 960
65. 40 * 24 = 960
67. 190px
68. 190px 470px
69. 190px 470px 270px
70. n = 5 n = 12 n = 7
71. n = 5 n = 12 n = 7 ʁ
72. 黄金分割比
73. x = (sqrt(5) - 1) / 2 ~= 0.618 http://baike.baidu.com/view/1816.htm
74. 对于 24 x 40 的情景，最接近黄金分割的两栏布局是 350 : 590, 栏数比例为 9 : 15。但实际使用时，因为窄栏经常用来做导航或放辅 助信息，并不需要350px这么宽。实际情况下经常被采用的布局是： http://www.cdc.com/cri/v_cri/20081201-85.html
75. 高度上的栅格设计： N(560) = N(2^4 * 7 * 5) = 18
76. grid960.psd
77. >960 Grid System 更大的网页栅格系统
80. 960 < Width < 1004
87. 1000px
88. Width > 1004 ?
91. 流体布局：1140.css http://cssgrid.net/
92. YUI百分比栅格 http://developer.yahoo.com/yui/examples/grids/index.html
93. 宽度不是问题
94. Do! 栅格设计的实现
97.  整体布局： 统一的width，统一的横纵gutter
98.  整体布局： 统一的width，统一的横纵gutter  模块结构： 统一的padding（内间距），line-height（行高）
99.  整体布局： 统一的width，统一的横纵gutter  模块结构： 统一的padding（内间距），line-height（行高）  设计均衡： 大规范下的微个性
100. CSS Grids framework http://yekai.net/demo/cssgrids/pcg.html http://yekai.net/demo/cssgrids/css-generator.html
101. Question?
102. Thanks @kaiye