交互规范-栅格规范思维导图

栅格就是网格，就是有规律的格子

栅格最早是应用于平面设计中，产生于二十世纪初的西欧，完善于五十年代的瑞士，通过有规律的网格来指导版面布局

栅格设计的在屏幕端的应用也十分广泛，不光为设计服务，对响应式开发也起到了很大的作用

网格是构成页面栅格系统的最小单位

为什么用8

栏（Columns）是呈放内容区域

PC端通常有12栅格或24栅格，意思就是纵向有12栏或24栏

PC端通常有12栅格或24栅格，意思就是纵向有12栏或24栏

假设是栅格宽度是W、栏的宽度是C、槽的宽度是G。有N个栏，就有N-1个槽，则可以推断出算出W=N*C+（N-1）G

12栏和24栏都是PC端较常用的，移动端用4栏的居多，分的越细可变化的内容越丰富

12或24栏可以被2等分、3等分、4等分、6等分、12等分，还能按 1:2:1 、 1:3:2 、 1:2:2:1……等比例分割，提供了足够丰富的变化

京东首页的截图，是采用了12栅格，并且分别采用了2等分、四等分、六等分、2:6:2:2 、 2:10

栅格宽度外的边距，通常做自适应的距离

栅格宽度是需要栅格设计区域的宽度，不是显示器宽度

子主题 1内容必须落在栏上，不能落在水槽中

父元素需对齐栅格，子元素可再做栅格

尽量按栅格做等分，平分成5等份也是可以的，前端工程师就需要改底层结构了

使设计更有规律和逻辑基于栅格设计，按一定的规律把文字和图片排列在页面之中，使版面不光具有视觉感官的美感，也具有严谨的逻辑和一定韵律

设计团队之间沟通成本就大大降低，同时也能提高团队作业的一致性

不能为单一的设备来设计，怎么动态的构建我们的设计、响应不同尺寸的设备，是设计师在起初就应该考虑的