960grid 实践
DESCRIPTION
This slide is a hands-on tutorial of how to use grid layout for designer.TRANSCRIPT
![Page 1: 960Grid 实践](https://reader034.vdocuments.mx/reader034/viewer/2022052121/559a7d181a28abac648b46df/html5/thumbnails/1.jpg)
960Grid 实践
Cloud2011/8/25
![Page 2: 960Grid 实践](https://reader034.vdocuments.mx/reader034/viewer/2022052121/559a7d181a28abac648b46df/html5/thumbnails/2.jpg)
为什么需要 Grid
• 无规矩不成方圆
• 对网页设计布局 (Layout) 做了约定(Convention)
• 降低了设计人员与编码人员的沟通成本
• 不再需要为布局丈量宽度 , 降低编码成本
• 统一的布局格式下 , 调整布局对编码的成本也随之降低
![Page 3: 960Grid 实践](https://reader034.vdocuments.mx/reader034/viewer/2022052121/559a7d181a28abac648b46df/html5/thumbnails/3.jpg)
Hands-on
• 针对设计师
• 针对编码人员
![Page 5: 960Grid 实践](https://reader034.vdocuments.mx/reader034/viewer/2022052121/559a7d181a28abac648b46df/html5/thumbnails/5.jpg)
针对设计师
1
![Page 6: 960Grid 实践](https://reader034.vdocuments.mx/reader034/viewer/2022052121/559a7d181a28abac648b46df/html5/thumbnails/6.jpg)
针对设计师
2
• 设计师关注 3 个目录
• -photoshop• -illustrator• -balsamiq
![Page 7: 960Grid 实践](https://reader034.vdocuments.mx/reader034/viewer/2022052121/559a7d181a28abac648b46df/html5/thumbnails/7.jpg)
针对设计师
• 设计师关注 3 个目录
-photoshop-illustrator-balsamiq
![Page 8: 960Grid 实践](https://reader034.vdocuments.mx/reader034/viewer/2022052121/559a7d181a28abac648b46df/html5/thumbnails/8.jpg)
针对设计师
• 以 photoshop 为例– 以 960_grid_12_col.psd 为设计时的最底层
Layer
![Page 9: 960Grid 实践](https://reader034.vdocuments.mx/reader034/viewer/2022052121/559a7d181a28abac648b46df/html5/thumbnails/9.jpg)
针对设计师
• 看一个 960Grid 12Cols 的例子
![Page 10: 960Grid 实践](https://reader034.vdocuments.mx/reader034/viewer/2022052121/559a7d181a28abac648b46df/html5/thumbnails/10.jpg)
针对设计师
• Drupal 首页采用一个标准的 12Grid 布局
![Page 11: 960Grid 实践](https://reader034.vdocuments.mx/reader034/viewer/2022052121/559a7d181a28abac648b46df/html5/thumbnails/11.jpg)
针对设计师
• 通过 12 Grids 形成不同的组合– 三栏 ( 左 / 中 / 右 ) 布局
– 两栏 ( 左右 ) 布局
![Page 12: 960Grid 实践](https://reader034.vdocuments.mx/reader034/viewer/2022052121/559a7d181a28abac648b46df/html5/thumbnails/12.jpg)
针对设计师
• 但是 , 为了减少对设计和内容的影响– 可以在一个页面中混合使用不同的 Grid粒度
• 12 Grid• 16 Grid• 24 Grid
– Grid是建立在栏式布局之上的• 就是说 : 你设计中的某一个部分并不是内容为主 , 完全可以不被 Grid 束缚
• Grid 是用来排列内容的 , 不是排列特殊效果的
![Page 13: 960Grid 实践](https://reader034.vdocuments.mx/reader034/viewer/2022052121/559a7d181a28abac648b46df/html5/thumbnails/13.jpg)
针对设计师
• 多看别人的 Grid 案例会有更好的理解– 怎么查看其他网站的 Grid 方案
• Firefox 的插件 GridFox– https://addons.mozilla.org/en-US/firefox/addon/gridfox/– 进入你想分析的网页
– 按 Ctrl + Alt + g 启动 GridFox
![Page 14: 960Grid 实践](https://reader034.vdocuments.mx/reader034/viewer/2022052121/559a7d181a28abac648b46df/html5/thumbnails/14.jpg)
• GridFox 的一些 QA– 它并不能 100% 正确匹配网页的 Grid 方案
– 可以通过右下角的左右箭头切换方案
– 也可以对当前网页自定义 / 调整方案
针对设计师
![Page 15: 960Grid 实践](https://reader034.vdocuments.mx/reader034/viewer/2022052121/559a7d181a28abac648b46df/html5/thumbnails/15.jpg)
Hands-on
• 针对设计师
• 针对编码人员
![Page 16: 960Grid 实践](https://reader034.vdocuments.mx/reader034/viewer/2022052121/559a7d181a28abac648b46df/html5/thumbnails/16.jpg)
针对编码人员
• 制作页面布局时 , 只需要控制 Grid 的数量就可以实现布局– <div class="grid_5">
<p> 380 </p></div> <div class="grid_7"> <p> 540 </p></div>
![Page 17: 960Grid 实践](https://reader034.vdocuments.mx/reader034/viewer/2022052121/559a7d181a28abac648b46df/html5/thumbnails/17.jpg)
针对编码人员
• 编码人员的测量成本显著降低
• 开发速度提高
• 更早得看到成品
![Page 18: 960Grid 实践](https://reader034.vdocuments.mx/reader034/viewer/2022052121/559a7d181a28abac648b46df/html5/thumbnails/18.jpg)
Q&A
• 针对设计– 960 的几个模板在设计时使用起来
• 针对 PM– 960 同样附带 balsamiq 版本的模板 , 可以试用
• 针对编码– 960gs 中有现成的 CSS 代码可用 , 不必自己重写 !
![Page 19: 960Grid 实践](https://reader034.vdocuments.mx/reader034/viewer/2022052121/559a7d181a28abac648b46df/html5/thumbnails/19.jpg)
额外内容
• 网页设计之始
![Page 20: 960Grid 实践](https://reader034.vdocuments.mx/reader034/viewer/2022052121/559a7d181a28abac648b46df/html5/thumbnails/20.jpg)
网页设计之始
• 从最基本内容开始– 或许你不一定清楚最基本内容包含哪些 ?
• Twitter bootstrap 给了我们一个好榜样– http://twitter.github.com/bootstrap/– PM 和设计注意 :
浏览它并阅读理解一下它 , 看看能不能产生共鸣 !