Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Grid Page Layout
Search
kaiye
January 06, 2011
Design
3
140
Grid Page Layout
栅格化设计及其解决方案的分享PPT
kaiye
January 06, 2011
Tweet
Share
More Decks by kaiye
See All by kaiye
大话前端黑客
kaiye
4
300
前端七年之路
kaiye
8
390
拍拍首页2012版前端技术应用
kaiye
2
270
后IE6时代
kaiye
1
1.4k
CSS3/JS/Flash版动画角标的实现与比较
kaiye
0
130
GDD 2011 in Guangzhou
kaiye
0
1.8k
拍首2011前端技术分享
kaiye
1
170
Notification 3
kaiye
0
85
前端开发眼中的组件库
kaiye
3
340
Other Decks in Design
See All in Design
プロジェクトを成功に導く、デザイナーの仕事
akaneyoshikawa
1
400
スマートバンクのプロダクトデザイン
putchomsmartbank
6
2.4k
デザイナー向け会社紹介資料(採用資料)
dreamarts
0
300
0-1に挑むデザイナーが 知っておきたい2つの前提
swaaan
3
990
私の困りごとと解決案 / My issues and proposed solutions
kubosho
1
260
Осязаемый потребительский опыт. Ловим его за хвост с Картой процесса-опыта
ashapiro
2
130
デザインスプリントを活かすチームの在り方
mixi_design
PRO
1
730
Первая беседа о Карте реализации историй
ashapiro
0
230
RIDLEY JONES - Ridley's Christmas Carol
serenascipio
1
160
Arborea Art Book
thebogheart
0
110
PdMというキャリアがUXデザイナーの頭によぎったとき スポットライトをどう当て、 どうシステムを見つめるか
muture
1
600
root COMPANY DECK / We are hiring!
root_recruit
1
13k
Featured
See All Featured
Visualization
eitanlees
143
15k
Atom: Resistance is Futile
akmur
261
25k
10 Git Anti Patterns You Should be Aware of
lemiorhan
653
59k
Learning to Love Humans: Emotional Interface Design
aarron
272
40k
Creatively Recalculating Your Daily Design Routine
revolveconf
217
12k
Art, The Web, and Tiny UX
lynnandtonic
296
20k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
48k
Agile that works and the tools we love
rasmusluckow
327
21k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
105
48k
Statistics for Hackers
jakevdp
796
220k
The Invisible Customer
myddelton
119
13k
The Power of CSS Pseudo Elements
geoffreycrofte
71
5.3k
Transcript
Grid Page Layout 基于栅格的拍拍网信息架构布局设计 by Kaiye @ 电子商务页面重构组
What? 什么是 栅格
Grid 格子
burberry 苏格兰经典 格子 英伦
burberry 苏格兰经典 格子 英伦
burberry 苏格兰经典 格子 英伦
burberry 苏格兰经典 格子 英伦
None
None
None
None
None
None
None
秦代(公元前221年-公元前206年)官私印开始 用“田字格”,字与字之间有界格,文字趋于规整,但不失 自然美。西汉初期文字更规整,“田字格”仍然保留。
1629年,法王路易十四命 令成立一个管理印刷的皇家特别委 员会,由数学家尼古拉斯·加宗 (Nicolas Jaugeon)担任领导。委员 会提出了新字体设计建议:以罗马 体为基础,采用方格为设计 依据,每个字体方格分为64个基 本方格单位,每个方格单位再分成 36小格,这样,一个印刷版面就由
2304个小格组成。这是世上最早对 字体和版面进行科学实验的活 动。也是栅格系统的雏形。
20世纪50年代,栅格设计系统终于在前西德与瑞士得到完善。通 过瑞士平面设计杂志的宣传,将瑞士苏黎士和巴塞尔两个城市的设计 家从20世纪40年代探索的成果全面展示,并影响世界各国,因此也被 称为“瑞士平面设计风格”(Swiss Design)。由于这种风格 简单明确,传达功能准确,因而很快得到世界范围内的普遍认可,成 为战后影响最大的一种平面设计风格,也是国际最流行的风格,因此 又被称为“国际主义平面设计风格”(International Typographic Style)。
尤尼马克设计公司的设计思想基本是国际主义的:强调平面设计 上的标准化,采用方格网络为设计依据,目的是良好的视觉 传达功能。
None
-221 文字排版:秦代田字格
-221 文字排版:秦代田字格 1629 版面设计:法国方格字体栅格系统雏形
-221 文字排版:秦代田字格 1629 版面设计:法国方格字体栅格系统雏形 1940 平面设计:瑞士平面设计风格
-221 文字排版:秦代田字格 1629 版面设计:法国方格字体栅格系统雏形 1940 平面设计:瑞士平面设计风格
2006 网页设计:YUI 0.12.0 Release reset-fonts-grids.css
Why? 为什么要用 栅格
None
艺术品
None
设计品
“一般在举办美术展或出版写真集的时候,出于对展品或作者的 顾及和尊重,有时不得不使自己做些让步。如果换作年轻的时 候,为了保持所谓自己的作品风格的完整性,会凭着一股轻率的冒 险心气及倔强的韧劲,踢开画家或摄影家亦在所不辞。而随着年龄 的增长,一种沿着主题深入思考的成人般的思考模式得以确立,设计 开始变得无趣起来。” ──田中一光《设计的觉醒》
“一般在举办美术展或出版写真集的时候,出于对展品或作者的 顾及和尊重,有时不得不使自己做些让步。如果换作年轻的时 候,为了保持所谓自己的作品风格的完整性,会凭着一股轻率的冒险 心气及倔强的韧劲,踢开画家或摄影家亦在所不辞。而随着年龄的增 长,一种沿着主题深入思考的成人般的思考模式得以确立, 设计开始变得无趣起来。” ──田中一光《设计的觉醒》
设计模式是一套被反复使用、多数人知晓的、经过分类编目 的、代码设计经验的总结。使用设计模式是为了可重用代码、让代码 更容易被他人理解、保证代码可靠性。 毫无疑问,设计模式于己于他人于系统都是多赢的,设计模式使 代码编制真正工程化,设计模式是软件工程的基石,如同大厦的一块 块砖石一样。 http://baike.baidu.com/view/66964.htm
http://book.douban.com/subject/1052241/
栅格设计的目的
栅格设计的目的 可靠性
栅格设计的目的 可重用 可靠性
栅格设计的目的 可重用 可靠性 被他人理解的设计
栅格设计的目的 可重用 可靠性 被他人理解的设计 工业化
栅格设计的目的 可重用 可靠性 被他人理解的设计 工业化 提升站点相似度
栅格设计的目的 可重用 模块化 可靠性 被他人理解的设计 工业化 提升站点相似度
栅格设计的目的 可重用 模块化 共赢 可靠性 被他人理解的设计 工业化 提升站点相似度
• 在栅格化系统下,视觉设计师与前端开发遵循相同的标准规范, 有利于减少页面开发和维护成本; • 基于栅格设计,使得页面布局一致,相似度高,有利于提升站点 的统一性,从而提升用户体验; • 设计师灵活运用栅格系统,能做出更多优秀和独特的设计。
How? 如何进行 栅格设计
None
None
None
grid
grid grid
grid grid grid
grid grid grid grid
grid grid grid grid
grid grid col grid grid
grid grid col col grid grid
grid grid col grid grid
Column gutter
(Column + Gutter)*N - Gutter = Page
(30 + 10)*24 - 10 = 950
960 Grid System 960网页栅格系统
None
960 = 2^6 * 3 * 5 960 = N(7*2*2-2)=N(26)
None
None
None
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
80 * 12 = 960
60 * 16 = 960
40 * 24 = 960
None
190px
190px 470px
190px 470px 270px
n = 5 n = 12 n = 7
n = 5 n = 12 n = 7 ʁ
黄金分割比
x = (sqrt(5) - 1) / 2 ~= 0.618 http://baike.baidu.com/view/1816.htm
对于 24 x 40 的情景,最接近黄金分割的两栏布局是 350 : 590, 栏数比例为 9
: 15。但实际使用时,因为窄栏经常用来做导航或放辅 助信息,并不需要350px这么宽。实际情况下经常被采用的布局是: http://www.cdc.com/cri/v_cri/20081201-85.html
高度上的栅格设计: N(560) = N(2^4 * 7 * 5) = 18
grid960.psd
>960 Grid System 更大的网页栅格系统
None
None
960 < Width < 1004
None
None
None
None
None
None
1000px
Width > 1004 ?
None
None
流体布局:1140.css http://cssgrid.net/
YUI百分比栅格 http://developer.yahoo.com/yui/examples/grids/index.html
宽度不是问题
Do! 栅格设计的实现
None
None
整体布局: 统一的width,统一的横纵gutter
整体布局: 统一的width,统一的横纵gutter 模块结构: 统一的padding(内间距),line-height(行高)
整体布局: 统一的width,统一的横纵gutter 模块结构: 统一的padding(内间距),line-height(行高) 设计均衡: 大规范下的微个性
CSS Grids framework http://yekai.net/demo/cssgrids/pcg.html http://yekai.net/demo/cssgrids/css-generator.html
Question?
Thanks @kaiye