960grid 实践
Post on 06-Jul-2015
862 Views
Preview:
DESCRIPTION
TRANSCRIPT
960Grid 实践
Cloud2011/8/25
为什么需要 Grid
• 无规矩不成方圆
• 对网页设计布局 (Layout) 做了约定(Convention)
• 降低了设计人员与编码人员的沟通成本
• 不再需要为布局丈量宽度 , 降低编码成本
• 统一的布局格式下 , 调整布局对编码的成本也随之降低
Hands-on
• 针对设计师
• 针对编码人员
针对设计师
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 和设计注意 :
浏览它并阅读理解一下它 , 看看能不能产生共鸣 !
top related