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
150
Grid Page Layout
栅格化设计及其解决方案的分享PPT
kaiye
January 06, 2011
Tweet
Share
More Decks by kaiye
See All by kaiye
大话前端黑客
kaiye
4
310
前端七年之路
kaiye
8
400
拍拍首页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
180
Notification 3
kaiye
0
89
前端开发眼中的组件库
kaiye
3
380
Other Decks in Design
See All in Design
Yahoo Newsletter Clicker Template
xuechunwu
0
300
FANCL×CA流アプリリニューアルPJ 成功の秘訣とそのプロセス / dx-fancl-renewal
cyberagentdevelopers
PRO
2
500
202409_会社概要資料_Englishver.pdf
zakkerooni
0
220
Night Shift (beginning sequence)
cpineda57
0
940
Personal Story Sequence - Vendetta(WIP)
elrns88
0
340
ABEMAの進化 – 複雑化したコンテンツ構造とUI改善への道 – / abema-ui-improve
cyberagentdevelopers
PRO
2
480
Figma Code Connect を使ってエンジニアの新しい体験をデリバリする
junkifurukawa
0
460
The One
chinweanimation
0
100
Lightning Talk: Beautiful Slides for Beginners
inesmontani
PRO
1
180
志ある事業の種を社会に開花させるための挑戦/ Designship2024_Nishimura
root_recruit
0
210
ENEOS社事例|アプリ事業を加速させるデザイナーの取り組み / dx-eneos-design
cyberagentdevelopers
PRO
1
550
Bridging the Design Gap: How Collaborative Modelling removes blockers to flow between stakeholders and teams @FastFlow conf
baasie
0
180
Featured
See All Featured
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
45
2.2k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.3k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
28
4.4k
How to Ace a Technical Interview
jacobian
276
23k
Typedesign – Prime Four
hannesfritz
40
2.4k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
2
290
Six Lessons from altMBA
skipperchong
27
3.5k
Measuring & Analyzing Core Web Vitals
bluesmoon
4
180
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
8
1.2k
Git: the NoSQL Database
bkeepers
PRO
427
64k
Building a Modern Day E-commerce SEO Strategy
aleyda
38
7k
A designer walks into a library…
pauljervisheath
205
24k
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