部落冲突家乡5本最强布阵部落冲突5本最强布阵( 二 ) _生活百科

文章插图
2. 列（Column）列（Column）指的是栅格数量，如12栅格有12个列、24栅格就是24个列，主要用来对齐内容。通过栅格的列数来控制版面的呼吸感及节奏感，列数越多、内容排版越精细，反之列数越少、内容排版就越疏松。

文章插图
3. 水槽（Gutter）水槽（Gutter）是指列与列之间的间距，通过留白以实现界面中的信息元素分割及版式呼吸感。水槽的宽度对设计风格会存在一定影响，水槽越大留白就越多、其呼吸感就越好，反之留白就越少、内容也会变得较为紧凑。

文章插图
4. 边距（Margin）边距（Margin）是指界面内容到屏幕边缘的距离，主要用来控制核心内容的展示边界，所以是禁止放置任何内容的（部分浮窗、返回顶部按钮、右侧吸附边栏除外）。边距值的大小会直接影响到栅格区域空间，这点大家自行理解即可。

文章插图
5. 栅格总宽（Container）栅格总宽（Container）是指所有列加所有水槽再加上两侧边距的总和，即整个栅格系统的总宽度。

文章插图
6. 容器盒子（Col-n）容器盒子（Col-n）是指布局信息的版面区域，通常设计师在设定好基础栅格后，会根据实际情况去定义一块内容需占用几个列的宽度并形成容器，后续在设计过程中，会将文字、图片、按钮等元素约束在限定的容器宽度以内形成复用组件，最终组合拼装成完整的设计方案。

文章插图
三、栅格系统制作流程1. 设计栅格宽度在设计Web端界面时设计师需要先根据实际使用场景确定好布局后，再来设定栅格区域，如下列布局：

文章插图
屏幕宽度并不等于栅格的宽度，大多数情况下，我们会基于1920、1440这两个尺寸来定义设计稿的宽度，但真正放置信息内容的区域并非设计稿尺寸，需要做到多平台、多尺寸显示器的适配，通常会将栅格宽度定义在1024px~1400px之间。
例如：常见的1024px、1200px、1280px、1400px等，可满足绝大多数主流显示器，如果栅格宽度超过1400px，在很多笔记本电脑上浏览页面时，会出现左右滚动条，体验非常不友好。

文章插图
2. 选择栅格列数1）12栅格
【部落冲突家乡5本最强布阵部落冲突5本最强布阵】12列栅格很常见，一些业务信息分组较少的商业网站、门户网站等使用的就是12栅格，它能够被2、3、4、6 整除，很容易满足信息较为复杂的等分布局场景。
另外，针对不对称布局的容器组合也能将信息体现的很和谐，如双栏布局使用4+8、3+9栅格，三栏布局使用2+8+2、3+3+6 栅格等，变化较为灵活。

文章插图
2）24栅格
24列栅格适合信息量大、分组多且多样复杂的使用场景，很多视觉区域较大、需要精细化布局的B端Web设计采用的就是24栅格，相比12栅格，有更多的区域划分空间，其布局的灵活性也更强。
需要注意的是，24栅格因列的数量比较多，很多时候列宽无法被精准整除，不过相差的像素数值极小，往往无法被用户肉眼觉察，无伤大雅。栅格本身的目的就是为了保持视觉效果的协调与统一，并非为了死磕某个像素，特殊情况区别对待即可。

文章插图
3）5栅格
5列栅格一般用在移动端设计中，因设备屏幕的横向空间有限，所以很少使用，例如：针对“金刚区”的5图标（一行）、10图标（两行）的规范化排版。如果想进一步追求后续的灵活性、避免奇数的不便，也可将5列栅格拆分成10列，布局、视觉效果基本能保持一致。
其实在实际设计中，设计师们大多会使用间距来规范界面的排版与布局，相比5列栅格会更灵活、更便捷。

文章插图
3. 定义水槽与边距水槽就是列的间隔，其定义方式可以延用间距系统的制定标准，以8px为最小单位进行推导，如S=8px、M=16px、L=24px、XL=32px、XXL=40px、…等，这样更容易保持视觉的一致性，最终到底使用哪个值没有绝对的要求，这还需要根据产品的调性及设计风格来决定，水槽的数值越大，页面的留白间隙就越多。