Grid Page Layout - Speaker Deck

Slide 1

Slide 1 text

Grid Page Layout 基于栅格的拍拍网信息架构布局设计 by Kaiye @ 电子商务页面重构组

Slide 2

Slide 2 text

What? 什么是栅格

Slide 3

Slide 3 text

Grid 格子

Slide 4

Slide 4 text

burberry 苏格兰经典格子英伦

Slide 5

Slide 5 text

burberry 苏格兰经典格子英伦

Slide 6

Slide 6 text

burberry 苏格兰经典格子英伦

Slide 7

Slide 7 text

burberry 苏格兰经典格子英伦

Slide 8

Slide 8 text

No content

Slide 9

Slide 9 text

No content

Slide 10

Slide 10 text

No content

Slide 11

Slide 11 text

No content

Slide 12

Slide 12 text

No content

Slide 13

Slide 13 text

No content

Slide 14

Slide 14 text

No content

Slide 15

Slide 15 text

秦代（公元前221年－公元前206年）官私印开始用“田字格”，字与字之间有界格，文字趋于规整，但不失自然美。西汉初期文字更规整，“田字格”仍然保留。

Slide 16

Slide 16 text

1629年，法王路易十四命令成立一个管理印刷的皇家特别委员会，由数学家尼古拉斯·加宗（Nicolas Jaugeon）担任领导。委员会提出了新字体设计建议：以罗马体为基础，采用方格为设计依据，每个字体方格分为64个基本方格单位，每个方格单位再分成 36小格，这样，一个印刷版面就由 2304个小格组成。这是世上最早对字体和版面进行科学实验的活动。也是栅格系统的雏形。

Slide 17

Slide 17 text

20世纪50年代，栅格设计系统终于在前西德与瑞士得到完善。通过瑞士平面设计杂志的宣传，将瑞士苏黎士和巴塞尔两个城市的设计家从20世纪40年代探索的成果全面展示，并影响世界各国，因此也被称为“瑞士平面设计风格”（Swiss Design）。由于这种风格简单明确，传达功能准确，因而很快得到世界范围内的普遍认可，成为战后影响最大的一种平面设计风格，也是国际最流行的风格，因此又被称为“国际主义平面设计风格”（International Typographic Style）。尤尼马克设计公司的设计思想基本是国际主义的：强调平面设计上的标准化，采用方格网络为设计依据，目的是良好的视觉传达功能。

Slide 18

Slide 18 text

No content

Slide 19

Slide 19 text

 -221 文字排版：秦代田字格

Slide 20

Slide 20 text

 -221 文字排版：秦代田字格  1629 版面设计：法国方格字体栅格系统雏形

Slide 21

Slide 21 text

 -221 文字排版：秦代田字格  1629 版面设计：法国方格字体栅格系统雏形  1940 平面设计：瑞士平面设计风格

Slide 22

Slide 22 text

 -221 文字排版：秦代田字格  1629 版面设计：法国方格字体栅格系统雏形  1940 平面设计：瑞士平面设计风格  2006 网页设计：YUI 0.12.0 Release reset-fonts-grids.css

Slide 23

Slide 23 text

Why? 为什么要用栅格

Slide 24

Slide 24 text

No content

Slide 25

Slide 25 text

艺术品

Slide 26

Slide 26 text

No content

Slide 27

Slide 27 text

设计品

Slide 28

Slide 28 text

“一般在举办美术展或出版写真集的时候，出于对展品或作者的顾及和尊重，有时不得不使自己做些让步。如果换作年轻的时候，为了保持所谓自己的作品风格的完整性，会凭着一股轻率的冒险心气及倔强的韧劲，踢开画家或摄影家亦在所不辞。而随着年龄的增长，一种沿着主题深入思考的成人般的思考模式得以确立，设计开始变得无趣起来。” ──田中一光《设计的觉醒》

Slide 29

Slide 29 text

Slide 30

Slide 30 text

设计模式是一套被反复使用、多数人知晓的、经过分类编目的、代码设计经验的总结。使用设计模式是为了可重用代码、让代码更容易被他人理解、保证代码可靠性。毫无疑问，设计模式于己于他人于系统都是多赢的，设计模式使代码编制真正工程化，设计模式是软件工程的基石，如同大厦的一块块砖石一样。 http://baike.baidu.com/view/66964.htm

Slide 31

Slide 31 text

http://book.douban.com/subject/1052241/

Slide 32

Slide 32 text

栅格设计的目的

Slide 33

Slide 33 text

栅格设计的目的可靠性

Slide 34

Slide 34 text

栅格设计的目的可重用可靠性

Slide 35

Slide 35 text

栅格设计的目的可重用可靠性被他人理解的设计

Slide 36

Slide 36 text

栅格设计的目的可重用可靠性被他人理解的设计工业化

Slide 37

Slide 37 text

栅格设计的目的可重用可靠性被他人理解的设计工业化提升站点相似度

Slide 38

Slide 38 text

栅格设计的目的可重用模块化可靠性被他人理解的设计工业化提升站点相似度

Slide 39

Slide 39 text

栅格设计的目的可重用模块化共赢可靠性被他人理解的设计工业化提升站点相似度

Slide 40

Slide 40 text

• 在栅格化系统下，视觉设计师与前端开发遵循相同的标准规范，有利于减少页面开发和维护成本； • 基于栅格设计，使得页面布局一致，相似度高，有利于提升站点的统一性，从而提升用户体验； • 设计师灵活运用栅格系统，能做出更多优秀和独特的设计。

Slide 41

Slide 41 text

How? 如何进行栅格设计

Slide 42

Slide 42 text

No content

Slide 43

Slide 43 text

No content

Slide 44

Slide 44 text

No content

Slide 45

Slide 45 text

grid

Slide 46

Slide 46 text

grid grid

Slide 47

Slide 47 text

grid grid grid

Slide 48

Slide 48 text

grid grid grid grid

Slide 49

Slide 49 text

grid grid grid grid

Slide 50

Slide 50 text

grid grid col grid grid

Slide 51

Slide 51 text

grid grid col col grid grid

Slide 52

Slide 52 text

grid grid col grid grid

Slide 53

Slide 53 text

Column gutter

Slide 54

Slide 54 text

(Column + Gutter)*N - Gutter = Page

Slide 55

Slide 55 text

(30 + 10)*24 - 10 = 950

Slide 56

Slide 56 text

960 Grid System 960网页栅格系统

Slide 57

Slide 57 text

No content

Slide 58

Slide 58 text

960 = 2^6 * 3 * 5 960 = N(7*2*2-2)=N(26)

Slide 59

Slide 59 text

No content

Slide 60

Slide 60 text

No content

Slide 61

Slide 61 text

No content

Slide 62

Slide 62 text

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

Slide 63

Slide 63 text

80 * 12 = 960

Slide 64

Slide 64 text

60 * 16 = 960

Slide 65

Slide 65 text

40 * 24 = 960

Slide 66

Slide 66 text

No content

Slide 67

Slide 67 text

190px

Slide 68

Slide 68 text

190px 470px

Slide 69

Slide 69 text

190px 470px 270px

Slide 70

Slide 70 text

n = 5 n = 12 n = 7

Slide 71

Slide 71 text

n = 5 n = 12 n = 7 ʁ

Slide 72

Slide 72 text

黄金分割比

Slide 73

Slide 73 text

x = (sqrt(5) - 1) / 2 ~= 0.618 http://baike.baidu.com/view/1816.htm

Slide 74

Slide 74 text

对于 24 x 40 的情景，最接近黄金分割的两栏布局是 350 : 590, 栏数比例为 9 : 15。但实际使用时，因为窄栏经常用来做导航或放辅助信息，并不需要350px这么宽。实际情况下经常被采用的布局是： http://www.cdc.com/cri/v_cri/20081201-85.html

Slide 75

Slide 75 text

高度上的栅格设计： N(560) = N(2^4 * 7 * 5) = 18

Slide 76

Slide 76 text

grid960.psd

Slide 77

Slide 77 text

>960 Grid System 更大的网页栅格系统

Slide 78

Slide 78 text

No content

Slide 79

Slide 79 text

No content

Slide 80

Slide 80 text

960 < Width < 1004

Slide 81

Slide 81 text

No content

Slide 82

Slide 82 text

No content

Slide 83

Slide 83 text

No content

Slide 84

Slide 84 text

No content

Slide 85

Slide 85 text

No content

Slide 86

Slide 86 text

No content

Slide 87

Slide 87 text

1000px

Slide 88

Slide 88 text

Width > 1004 ?

Slide 89

Slide 89 text

No content

Slide 90

Slide 90 text

No content

Slide 91

Slide 91 text

流体布局：1140.css http://cssgrid.net/

Slide 92

Slide 92 text

YUI百分比栅格 http://developer.yahoo.com/yui/examples/grids/index.html

Slide 93

Slide 93 text

宽度不是问题

Slide 94

Slide 94 text

Do! 栅格设计的实现

Slide 95

Slide 95 text

No content

Slide 96

Slide 96 text

No content

Slide 97

Slide 97 text

 整体布局：统一的width，统一的横纵gutter

Slide 98

Slide 98 text

 整体布局：统一的width，统一的横纵gutter  模块结构：统一的padding（内间距），line-height（行高）

Slide 99

Slide 99 text

 整体布局：统一的width，统一的横纵gutter  模块结构：统一的padding（内间距），line-height（行高）  设计均衡：大规范下的微个性

Slide 100

Slide 100 text

CSS Grids framework http://yekai.net/demo/cssgrids/pcg.html http://yekai.net/demo/cssgrids/css-generator.html