大家好，我是彩云。空白和网格是任何设计的基础，一旦掌握并正确使用，网格将帮助您创建可靠且有吸引力的设计解决方案。那么，今天我就来分享一下我在UI设计中掌握的网格设计技巧。文章不长，仔细阅读，一定会有收获。什么是网格设计？网格是任何精心设计的界面的基础，可以被认为是布局的框架。这组框架有助于组织UI元素、指导用户和识别设计的各个部分。常用术语网格（Grid）由网格单元（Gridunit）组成。布局放置在网格上，网格包含一定数量的列，列的左右两侧有边距，每列之间有填充，也称为汇。提示1.正确选择列数虽然12列类似Bootstrap的网格是最流行的选择，但这并不是强制性的。在选择网格时，要根据设计的实际需要确定使用多少列网格，做到不多也不少。（彩注：可以根据自己界面的主要尺寸来定义列数，一般可以设置为4或8的倍数。）Tip2.理解约束。始终使用您正在设计的设备的屏幕作为基准来了解目标用户利用这些约束并学习使用它们进行设计最常见的屏幕分辨率（px）PC：1440×1024平板电脑：768×1024手机：320×640（这里指的是1x图）技巧3、间距保持垂直和水平间距一致，使布局更具吸引力和一致性。技巧4.使用网格基线使用基线网格来安排内容并为文本和布局元素带来视觉上的一致性。（彩色注释：保持文本底部与网格对齐）小贴士——调整字体行高以匹配基线网格。例如：选择4px作为baseline/grid单位并对齐文字，则需要将字体的line-height设置为该单位的倍数，即行高应为4,12,32,64等技巧5、善用边框和颜色将边框作为一种工具，将用户的注意力集中在某个布局部分，在需要的地方增加额外的视觉重量。（ColorfulNote：比如改变卡片的颜色来高亮显示某个数据，在后台界面中比较常见）技巧六、打散格子将某些元素排除在格子之外，利用这个分解技巧来增加值，使某些您设计的某些部分可以脱颖而出并引导用户。（彩注：比如越界设计，或者比较大的尺寸对比）Tip7、动态网格确保你设计的布局能够适配常见的屏幕尺寸，适配多种终端，保持一致的体验。（彩云注：改变布局不改变网格系统，间距仍然可以保持不变）Tip8、灵活使用网格系统没有网格的设计对于小项目来说确实是可以的，但是对于比较大的项目，使用网格是非常必要的，甚至是强制性的。学习使用网格进行设计，但这不是死记硬背，您需要不时观察布局，以找到最符合您需求的创意解决方案。
