IBM 2x 网格系统，不仅是一种排版工具

Sponsor

前言：在平面设计中，正确熟练的运用网格可以提高我们设计排版的效率。网格的作用不仅在于可以对齐我们的设计，而是平面设计理论中关于版式设计的经验总结。今天要提到IBM的2x网格是IBM Design所有视觉元素的核心基础。接下来我们一起学习IBM 2x 网络系统是如何将网格贯穿于整个设计系统。

先来看下2x网格案例演示视频，便于有个基本了解。

https://v.qq.com/txp/iframe/player.html?vid=e3164gzwxgu

迷你单元

之前有提到过，定义8x网格也是需要基于原子单元去开始，那么对于IBM设计体系，他们同样提出了“迷你单元”概念。

这里2x网格几何的基本单位是8px的正方形迷你单位。迷你单元的倍数组成了列，行，框的尺寸以及它们的边距和水槽。迷你单元可适应任何内容，同时保持一致的视觉节奏。

迷你单元的尺寸可能会因媒介而异。在为您的应用选择合适的单位时，请考虑观察距离。

下面的卡片中的每个微型单元都有一个数据配对，并根据选取易读性较好的间距。

这种一般应用在平面打印、户外广告、装置展览等设计中居多。

2x网格基础

2x网格的核心概念是除以2或乘以2，形成视觉节奏（这不是类似8X网格吗，所以懂了一个原理，其他都类似思路）。

间距尺寸

组件设计对齐网格。

下面是垂直节奏案例演示。

基于定义的间距，在垂直布局节奏上的体现。

对于文字在网格上排版，一定要注文字行高值，行高一般可以使用文字大小的1.5倍。如果你觉得没把握，那么可以使用绝对高度，文字大小等于行高值，进行设计也是可以的。

布局网格

网格的每个应用程序可能需要不同的网格结构。创建网格时，请记住这些不同类型的网格，并选择最适合您需要的网格。

布局网格一般应用于页面级别的布局和设计，一般最后一种在UI设计中运用较为广泛。

2x 有边距网格应用案例。

2x 无间距网格应用案例。

网格中列的案例

网格中水槽的案例

长宽比

IBM规定，请尽可能将尺寸限制为以下所示的纵横比之一。这样做会增强产品之间的统一感。

在图标上应用

对于图标一致性和品牌性，IBM同样依旧沿用2X网格，以此来定义全局的统一性。

如何应用到工作中

不管是IBM 2x Gird还是Materials Design 8px Gird 他们应用原理基本一致。从今天案例可以看出IBM补充了材料语言没有的一些元素，比如对于物理间距规则。

应用思路关键点：

第一步：我们首先同样需要定义基础原子单位，可以继续沿用2px，当然你可以从4或者8开始。

第二步：基于原子单位，乘以或者除以2来得到一系列间距梯度值。

第三步：定义布局网格，也是基于2x原理，网格列，边距，水槽。

第四步：图标网格基于2x的倍数进行设计，这样整个规则都是基于2x倍数，那么就更统一了。

网格的定义思路适用于绝大部分产品设计，只是应用的间距节奏根据你想要传达的产品性格来使用，比如大留白或者小留白。其他没有多少本质边变化，所以你掌握了原理，能应对任何布局。

所以网格不仅是一种排版工具，也是一种技巧、技能、思维。

作者 | 功夫UX来源 | 功夫UX（id：UX-Talk）

赞助商链接

喜欢这篇文章吗？欢迎分享到你的微博、QQ群，并关注我们的微博，谢谢支持。
版权：除非注明，本站文章均为原创文章，转载请联系我们授权，否则禁止转载。