想要用好网格系统，这8个小技巧你必须掌握！

Hi，我是彩云。空白和网格是任何设计的基础。一旦你真正掌握并正确使用它们，网格将帮助你设计一个可靠和有吸引力的设计解决方案。所以，今天我要和大家分享 UI 设计中掌握的网格设计技巧，文章不长，仔细阅读，一定会有收获。

最近网格设计的干货：

什么是网格设计？

网格是设计任何界面的基础，可以理解为布局框架。这个框架有助于组织 UI 要素，引导用户，确定设计的各个部分。

常用术语

网格（Grid）由网格单元（Grid unit）组成。布局放在网格上，它包含一定数量的列，列的左右两侧都有外部距离（Margin），每列之间都有内部距离(Padding)，也叫水槽。

技巧 1.正确选择列数

虽然 12 列 Bootstrap 类似的网格是最受欢迎的选择，但它不是强制性的。在选择网格时，根据设计的真实需要确定网格的列数，以确定不多。（彩云注：列数可根据界面的主要尺寸定义，常见列数可根据 4 的倍数或者 8 设置倍数)

技巧 2.了解限制

始终以您正在设计的设备屏幕为基准，了解目标用户的使用习惯， 利用这些限制，学会使用它们进行设计

屏幕分辨率最常见 (px)

PC: 1440x1024平板电脑： 768x1024手机:320x640(这是指 1x 图）

技巧 三、间距保持一致

统一垂直和水平间距，使布局更具吸引力和一致性。

技巧 四、充分利用网格基线

使用基线网格来排列内容，并为文本和布局元素带来视觉一致性。（彩云注：保持文本底部对齐网格）

附加提示-调整字体行高以匹配基线网格。

例如：如果选择 4px 对齐文本作为基线/网格单元，需要字体 line-height 设置为单位倍数，即行高应为 4、12、32、64 等

技巧 5.充分利用框架和颜色

以框架为工具，将用户的注意力集中在一定的布局部分， 在需要的地方增加额外的视觉重量。(彩云注:例如，在制作背景界面时，更改卡片颜色以突出数据更为常见)

技巧 6，打破网格

将某些元素排除在网格之外，使用这种分解技术来增加价值，并使您设计的某些部分脱颖而出，引导用户。（彩云注：例如，边界设计，或大小对比较大）

技巧 7，动态网格

确保您设计的布局能够适应常见的屏幕尺寸，并适应多终端，以保持一致的体验。（彩云注：改变布局不会改变网格系统，间距仍然可以保持不变）

技巧 8.网格系统的灵活使用

对于小项目来说，没有网格的设计确实是可以的，但对于相对较大的项目，使用网格是非常必要的，甚至是强制性的。

学会使用网格进行设计，但也不是生搬硬套，你需要时不时地观察布局，为你的需求找到最有创意的解决方案。

一些有价值的设计资源和插件

资源：

google 网格设计规范 https://material.io/develop/web/supporting/layout-grid;Apple 网格设计规范 https://developer.apple.com/design/human-interface-guidelinesFlexbox 网格设计规范 https://www.w3schools.com/css/css3_flexbox_container.aspBootstrap 网格设计系统规范 https://getbootstrap.com/docs/5.0/layout/grid

插件：

Figma 可视化插件的网格设计 https://www.figma.com/community/pluginGrid generator 网格设计插件 https://www.figma.com/community/plugin

欢迎关注作者微信微信官方账号:「彩云译设计」