网页设计 » 视觉设计 » IBM 2x 网格系统,不仅是一种排版工具

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

发表于: 视觉设计. 评论
Sponsor

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

IBM 2x 网络系统,不仅是一种排版工具

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

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

迷你单元

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

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

IBM 2x 网络系统,不仅是一种排版工具

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

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

IBM 2x 网络系统,不仅是一种排版工具

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

2x网格基础

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

间距尺寸

IBM 2x 网络系统,不仅是一种排版工具

组件设计对齐网格。

IBM 2x 网络系统,不仅是一种排版工具

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

IBM 2x 网络系统,不仅是一种排版工具

IBM 2x 网络系统,不仅是一种排版工具

IBM 2x 网络系统,不仅是一种排版工具

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

IBM 2x 网络系统,不仅是一种排版工具

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

布局网格

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

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

IBM 2x 网络系统,不仅是一种排版工具

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

IBM 2x 网络系统,不仅是一种排版工具

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

IBM 2x 网络系统,不仅是一种排版工具

IBM 2x 网络系统,不仅是一种排版工具

网格中列的案例

IBM 2x 网络系统,不仅是一种排版工具

网格中水槽的案例

IBM 2x 网络系统,不仅是一种排版工具

长宽比

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

IBM 2x 网络系统,不仅是一种排版工具

在图标上应用

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

IBM 2x 网络系统,不仅是一种排版工具

IBM 2x 网络系统,不仅是一种排版工具

IBM 2x 网络系统,不仅是一种排版工具

如何应用到工作中

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

应用思路关键点:

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

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

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

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

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

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

作者 | 功夫UX来源 | 功夫UX(id:UX-Talk)

推荐:查看最受欢迎的 301 个设计网站 → http://hao.shejidaren.com
交流:结交更多有才华的设计师?请加入UI设计QQ群,与50000名设计师交流设计。
赞助商链接
赞助商链接
设计达人微信交流社区:shejidaren888
喜欢这篇文章吗?欢迎分享到你的微博、QQ群,并关注我们的微博,谢谢支持。
版权:除非注明,本站文章均为原创文章,转载请联系我们授权,否则禁止转载。

{ 发表评论 }