网页栅格系统

包括网页栅格系统的必要性、基本概念组成、分类及计算公式、在响应式布局的应用、使用步骤等内容，非常实用的思维导图，需要的自取~

网页栅格系统

• 必要性
  • 更专业
    • 使设计有迹可循，
  • 更高效
  • 布局更方便
    • 特别是是响应式网页
• 基本概念
  • 基本组成
    • 栅格总宽度(W)
    • 列
      • 内容总宽度 通常12列 24列
    • 水槽（i)
      • 列与列之间的宽度 越大越有呼吸管 水槽的宽度不能大于列
    • 外边距（M）
      • 内容之外的留白部分
• 分类及计算公式
  • 有边距的栅格
    • 适合已知要设计的内容宽度 W=(a+i)*n
  • 无边距的栅格
    • 适合已知要适配的网页尺寸，使用最接近网页内容尺寸的栅格系统W=（a+i)*n-i
  • 直接等分的网格
    • 已知要设计的内容宽度和列宽及列的数目
• 在响应式布局的应用
  • 固定网格布局
    • 列宽和水槽宽不会改变，只是改变列的数目，排版布局不会发生任何改变 到断点会发生改变
  • 流动网格布局
    • 内容会随着窗口的缩放而改变，例如图片会缩小，文本会换行
  • 混合布局
    • 固定网格和流动网格的组合形式，常用于后台系统设计，工具界面设计
  • 断点
• 使用步骤
  • 确定内容总宽度（W)
  • 确定栅格数目(n)
  • 确定水槽宽度(i)
  • 在sketch/ps里设置上面的参数即可得到一套栅格系统
    • PS-视图-新建参考线版面
• 一些小技巧
  • 网页中常用100PX栅格，
  • 子主题
  • 子主题
  • 智能生成栅格系统的网站：http://grid.guide/
• 第五次作业
  • 要求：选一个优秀的网站首页，测算出其栅格规律，模仿设计
  • 尺寸：不限，以你找寻的网页尺寸为主
  • 将你找到的网页拉到ps里面，