960Grid 实践

Cloud2011/8/25

为什么需要 Grid

• 无规矩不成方圆

• 对网页设计布局 (Layout) 做了约定(Convention)

• 降低了设计人员与编码人员的沟通成本

• 不再需要为布局丈量宽度 , 降低编码成本

• 统一的布局格式下 , 调整布局对编码的成本也随之降低

Hands-on

• 针对设计师

• 针对编码人员

针对设计师

• 访问 http://960.gs

• 点击 Big DOWNLOAD button

针对设计师

1

针对设计师

2

• 设计师关注 3 个目录

• -photoshop• -illustrator• -balsamiq

针对设计师

• 设计师关注 3 个目录

-photoshop-illustrator-balsamiq

针对设计师

• 以 photoshop 为例– 以 960_grid_12_col.psd 为设计时的最底层

Layer

针对设计师

• 看一个 960Grid 12Cols 的例子

针对设计师

• Drupal 首页采用一个标准的 12Grid 布局

针对设计师

• 通过 12 Grids 形成不同的组合– 三栏 ( 左 / 中 / 右 ) 布局

– 两栏 ( 左右 ) 布局

针对设计师

• 但是 , 为了减少对设计和内容的影响– 可以在一个页面中混合使用不同的 Grid粒度

• 12 Grid• 16 Grid• 24 Grid

– Grid是建立在栏式布局之上的• 就是说 : 你设计中的某一个部分并不是内容为主 , 完全可以不被 Grid 束缚

• Grid 是用来排列内容的 , 不是排列特殊效果的

针对设计师

• 多看别人的 Grid 案例会有更好的理解– 怎么查看其他网站的 Grid 方案

• Firefox 的插件 GridFox– https://addons.mozilla.org/en-US/firefox/addon/gridfox/– 进入你想分析的网页

– 按 Ctrl + Alt + g 启动 GridFox

• GridFox 的一些 QA– 它并不能 100% 正确匹配网页的 Grid 方案

– 可以通过右下角的左右箭头切换方案

– 也可以对当前网页自定义 / 调整方案

针对设计师

Hands-on

• 针对设计师

• 针对编码人员

针对编码人员

• 制作页面布局时 , 只需要控制 Grid 的数量就可以实现布局– <div class="grid_5">

<p> 380 </p></div> <div class="grid_7"> <p> 540 </p></div>

针对编码人员

• 编码人员的测量成本显著降低

• 开发速度提高

• 更早得看到成品

Q&A

• 针对设计– 960 的几个模板在设计时使用起来

• 针对 PM– 960 同样附带 balsamiq 版本的模板 , 可以试用

• 针对编码– 960gs 中有现成的 CSS 代码可用 , 不必自己重写 !

额外内容

• 网页设计之始

网页设计之始

• 从最基本内容开始– 或许你不一定清楚最基本内容包含哪些 ?

• Twitter bootstrap 给了我们一个好榜样– http://twitter.github.com/bootstrap/– PM 和设计注意 :

浏览它并阅读理解一下它 , 看看能不能产生共鸣 !