几何

网格系统这事,咋们也是谈了多次,它有多重要,我想大家应该清楚。如果对网格运用熟练,会出现页面布局间距混乱,设计文档混乱经常被Diss,你曾经是否有遇到这样的苦恼。

我分享IBM 2x网格,带大家一起学习下他们是如何将网格贯穿于整个设计系统。2x网格是IBM Design所有视觉元素的核心基础。它为整个设计体系提供了指导性意见。

 

迷你单元

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

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

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

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

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

 

2x网格基础

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

间距尺寸

组件设计对齐网格。

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

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

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

 

布局网格

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

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

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

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

 

网格中列的案例

网格中水槽的案例

长宽比

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

在图标上应用

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

 

如何应用到工作中

IBM补充了材料语言没有的一些元素,比如对于物理间距规则。

 

应用思路关键点:

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

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

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

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

 

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

 

原文地址:功夫UX(公众号)

作者:功夫UX

转载请注明:学UI网 » IBM 2x网格,极致运用

登录收藏
 
你可能喜欢的:
注意这些页面设计细节,有效提升使用体验!注意这些页面设计细节,有效提升使用体验!
工作经验|产品的「设计原则」到底有什么用?该怎么用?工作经验|产品的「设计原则」到底有什么用?该怎么用?
APP导航栏设计分析:5种设计样式+4种交互状态APP导航栏设计分析:5种设计样式+4种交互状态
阿里云设计语言:打造云计算设计领域的语言体系阿里云设计语言:打造云计算设计领域的语言体系
设计师要掌握的UI设计技巧(二):排版篇设计师要掌握的UI设计技巧(二):排版篇
基于数据的体验洞察与验证—GSM模型基于数据的体验洞察与验证—GSM模型
设计师要掌握的UI设计技巧(一):标题篇设计师要掌握的UI设计技巧(一):标题篇
设计师应该了解的版式知识设计师应该了解的版式知识
引起舒适!什么是好用的界面引起舒适!什么是好用的界面
你对信息架构设计了解多少?这些原则一定要掌握你对信息架构设计了解多少?这些原则一定要掌握