0
960Grid 实践 Cloud 2011/8/25
为什么需要 Grid <ul><li>无规矩不成方圆 </li></ul><ul><li>对网页设计布局 (Layout) 做了约定 (Convention) </li></ul><ul><li>降低了设计人员与编码人员的沟通成本 </li><...
Hands-on <ul><li>针对设计师 </li></ul><ul><li>针对编码人员 </li></ul>
针对设计师 <ul><li>访问  http://960.gs </li></ul><ul><li>点击  Big DOWNLOAD button </li></ul>
针对设计师 1
针对设计师 <ul><li>设计师关注 3 个目录 </li></ul><ul><li>-photoshop </li></ul><ul><li>-illustrator </li></ul><ul><li>-balsamiq </li></u...
针对设计师 <ul><li>设计师关注 3 个目录 </li></ul><ul><li>-photoshop </li></ul><ul><li>-illustrator </li></ul><ul><li>-balsamiq </li></ul>
针对设计师 <ul><li>以 photoshop 为例 </li></ul><ul><ul><li>以 960_grid_12_col.psd 为设计时的最底层 Layer </li></ul></ul>
针对设计师 <ul><li>看一个  960Grid 12Cols  的例子 </li></ul>
针对设计师 <ul><li>Drupal 首页采用一个标准的 12Grid 布局 </li></ul>
针对设计师 <ul><li>通过 12 Grids 形成不同的组合 </li></ul><ul><ul><li>三栏 ( 左 / 中 / 右 ) 布局 </li></ul></ul><ul><ul><li>两栏 ( 左右 ) 布局 </li><...
针对设计师 <ul><li>但是 ,  为了减少对设计和内容的影响 </li></ul><ul><ul><li>可以在一个页面中混合使用不同的 Grid 粒度 </li></ul></ul><ul><ul><ul><li>12 Grid </l...
针对设计师 <ul><li>多看别人的 Grid 案例会有更好的理解 </li></ul><ul><ul><li>怎么查看其他网站的 Grid 方案 </li></ul></ul><ul><ul><ul><li>Firefox 的插件 Grid...
<ul><li>GridFox 的一些 QA </li></ul><ul><ul><li>它并不能 100% 正确匹配网页的 Grid 方案 </li></ul></ul><ul><ul><li>可以通过右下角的左右箭头切换方案 </li></...
Hands-on <ul><li>针对设计师 </li></ul><ul><li>针对编码人员 </li></ul>
针对编码人员 <ul><li>制作页面布局时 ,  只需要控制 Grid 的数量就可以实现布局 </li></ul><ul><ul><li><div class=&quot;grid_5&quot;> <p> 380 </p> </div>  ...
针对编码人员 <ul><li>编码人员的测量成本显著降低 </li></ul><ul><li>开发速度提高 </li></ul><ul><li>更早得看到成品 </li></ul>
Q&A <ul><li>针对设计 </li></ul><ul><ul><li>960 的几个模板在设计时使用起来 </li></ul></ul><ul><li>针对 PM </li></ul><ul><ul><li>960 同样附带 balsa...
额外内容 <ul><li>网页设计之始 </li></ul>
网页设计之始 <ul><li>从最基本内容开始 </li></ul><ul><ul><li>或许你不一定清楚最基本内容包含哪些 ? </li></ul></ul><ul><ul><ul><li>Twitter bootstrap  给了我们一个...
Upcoming SlideShare
Loading in...5
×

960Grid 实践

781

Published on

This slide is a hands-on tutorial of how to use grid layout for designer.

Published in: Self Improvement
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
781
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
3
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "960Grid 实践"

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

    Clipping is a handy way to collect important slides you want to go back to later.

×