IBM设计语言:极致,何需多言

释放双眼,带上耳机,听听看~!

不知道你有没有发现,当中大部分都是围绕视频和插画案例分享,反而设计的部分并不多,是因为他们的设计项目不那么出彩吗?

IBM设计语言:极致,何需多言

然鹅,事实正好相反。

在昨天的编辑过程中我就发现了这个宝藏设计项目,并且认为值得用一整篇文章来分享:由Buck与IBM设计团队合作完成的——IBM Design Language(IBM设计语言)。

IBM设计语言

IBM设计语言虽然不像苹果、安卓和微软等平台设计语言那般被人们所熟知, 但这一严谨的设计系统,几乎涵盖了所有设计场景 ,仍然非常值得我们学习。

IBM设计语言:极致,何需多言

设计是我们建立联系的方式。

如今,设计的技能、技术、思维和应用工具正变得越来越丰富,甚至任何人都可以使用。

但矛盾的是,设计决策却越来越分散、经验沉淀也越来越少。在追求快的时代,也间接导致了对个性和创新的即时性和渐进主义的缺失。

在这个时候,拥有属于品牌特有的精神风尚将变得异常重要,在彰显品牌价值的同时,将在做的每一件事中,都融入即时可辨的品牌基因。

IBM设计语言:极致,何需多言

和而不同

「公司应该像一幅画,所有可见的视觉元素都应有助于正确的整体表达。」  ——Eliot Noyes

IBM设计语言:极致,何需多言

IBM设计语言:极致,何需多言

IBM设计语言:极致,何需多言

IBM设计语言:极致,何需多言

IBM设计语言:极致,何需多言

IBM设计语言:极致,何需多言

IBM设计语言:极致,何需多言

IBM设计语言:极致,何需多言

IBM设计语言:极致,何需多言

IBM设计语言:极致,何需多言

IBM设计语言:极致,何需多言

IBM设计语言:极致,何需多言

IBM设计语言:极致,何需多言

IBM设计语言:极致,何需多言

IBM设计语言:极致,何需多言

IBM设计语言:极致,何需多言

IBM设计语言:极致,何需多言

IBM设计语言:极致,何需多言

IBM设计语言:极致,何需多言

IBM这一套设计语言,涵盖的范围相当全面,本文将着重提取其中最具代表性的:2x网格系统、定制字体、色彩体系和图标系统等四大部分。 每一个部分都有着严谨的理论支撑与完整的设计落地,堪称典范。

2x网格(2x Grid)

IBM的2x网格是所有视觉元素和版式的基本框架,是IBM设计语言的核心。无论应用于哪种设备或媒介,网格都可以提供充分的结构性指导,让任何设计都可以具体到精确的数值。

二分法(Divisions of two)

2x网格的核心概念是采用二分法,通过除以2或乘以2形成视觉节奏并以此作为基础。

IBM设计语言:极致,何需多言

可以应用于大多数界面、3D对象和建筑,利用二分法可以将空间分为2列、4列、8列、16列、32列甚至64列,帮助我们高效且系统地制定设计决策和组织内容

IBM设计语言:极致,何需多言

IBM设计语言:极致,何需多言

IBM设计语言:极致,何需多言

如何构建2X网格(Constructing the 2x Grid)

不同的应用场景往往需要不同的网格结构,当我们在构建网格时,请记住以下这3种不同类型的网格,并选择最适合你的网格。

IBM设计语言:极致,何需多言

页边距(Margins)

当我们需要将内容与页面四周的空白区域进行适当的分隔时,则需要在页面中添加页边距。

IBM设计语言:极致,何需多言

IBM设计语言:极致,何需多言

列和行(Columns and rows)

在网格中,列与行尤为重要,它们为布局提供了系统性的结构。你可以在1格、2格、4格、8格和16格之间进行选择。

IBM设计语言:极致,何需多言

IBM设计语言:极致,何需多言

仅列

IBM设计语言:极致,何需多言

左:仅行,右:列和行

IBM设计语言:极致,何需多言

始终划分活动区域,以确保列和行的宽度相等。

间距(Gutters)

当需要额外的空间来分隔内容时,请在列和行之间添加间距。使用间距时,请始终与行对齐,列和行必须始终保持相等。

IBM设计语言:极致,何需多言

IBM设计语言:极致,何需多言

有间距

IBM设计语言:极致,何需多言

没有间距

基本单位(Base unit)

如果你的设计是基于2x网格结构,则基本单位可以使它们更有精准度。使用基本单位将在网格比例、版式、形状尺寸和元素间距之间建立关系。你可以选择迷你单位或基准单位来建立网格和空间关系。

IBM设计语言:极致,何需多言

迷你单位(The mini unit)

迷你单位的尺寸可能会因媒体而异,在为应用选择合适单位时,请考虑用户实际观看的距离(视距)。下表中每个迷你单位都有一个类型刻度与之配对,并由远距离的易读性确定。

IBM设计语言:极致,何需多言

根据观看距离的最小单位尺寸:

IBM设计语言:极致,何需多言

IBM设计语言:极致,何需多言

基准单位(Baseline unit)

基准单位可用于构建所有网格比例,或者你可以采用混合方法,即使用迷你单位创建网格并使用基线网格来指导内容。

IBM设计语言:极致,何需多言

基准单位网格

IBM设计语言:极致,何需多言

基准单位和迷你单位混合网格

空间关系(Spatial relationships)

元素之间的所有间距都可以通过基本单位进行定义,可以通过基本单位的1x、2x、3x、4x、6x、8x、10x、12x等倍数来构建布局。间隔的一致和重复使用可保持所有内容之间的节奏感。

IBM设计语言:极致,何需多言

IBM设计语言:极致,何需多言

左:迷你单位,右:基准单位

方面关系(Aspect relationships)

对于图像和容器,请使用常见的宽高比,例如16:9、4:3、3:2、2:1和1:1等。始终测量列宽,让高度自适应。

IBM设计语言:极致,何需多言

定制字体:IBM Plex

IBM定制字体IBM Plex经过精心设计,可以满足IBM作为一家全球化科技公司的应用需求,并反映出IBM的品牌精神风貌、信念和设计原则。

IBM设计语言:极致,何需多言

IBM设计语言:极致,何需多言

IBM设计语言:极致,何需多言

IBM品牌定制字体共有4个子系列,分别包含8种字重和2种字体样式(常规和斜体)。

IBM设计语言:极致,何需多言

IBM设计语言:极致,何需多言

IBM设计语言:极致,何需多言

IBM Plex的等宽版本(Mono)将每个字符宽度都保持统一的宽度,这一特征最早可追溯到打字机时代。

IBM设计语言:极致,何需多言

IBM设计语言:极致,何需多言

对了,到这里额外插播一则福利,因为IBM Plex属于开源字体,所以是支持免费商用的。如果你感兴趣,文末有下载地址。

IBM设计语言:极致,何需多言

以蓝色为核心的色彩体系

标准色彩体系是IBM品牌独特审美的延伸,这些色彩平衡了人文与科技,代表了当下和不断前进的IBM。

IBM设计语言:极致,何需多言

IBM设计语言:极致,何需多言

IBM设计语言:极致,何需多言

IBM设计语言:极致,何需多言

IBM设计语言:极致,何需多言

 

一目了然的图标系统

作为可视化视觉符号,IBM用户界面图标是灵感、目标和行动的代表。它们可以让信息一目了然地呈现,并通过适当的交互对重要信息起强调作用。

基础结构(The foundation)

正方形网格是所有IBM图标的基础结构,并用作确定整个图标系统的线宽、比例、形状和位置的基础。

IBM设计语言:极致,何需多言

风格(Style)

IBM图标的风格与定制字体IBM Plex一脉相承,每个图标都经过精心设计,并通过提炼字符中独特的细节特征使之和谐相配。

IBM设计语言:极致,何需多言

IBM设计语言:极致,何需多言

拐角(Corners)

通常使用与2px一致拐角的半径,必要时可将2px半径增加两倍,以使图标的含义易于理解或明确定义对象的形状。

IBM设计语言:极致,何需多言

角度(Angles)

使用45°角进行均匀抗锯齿,尽可能以15°角的增量用于其他角度,以最好地描绘图标形状。

IBM设计语言:极致,何需多言

IBM设计语言:极致,何需多言

除了以上四大部分之外,IBM设计语言还有影像学、摄影、布局、动效等部分。因时间有限,在这里就不一一列举,感兴趣的朋友可以通过(ibm.com/design/language)查看。如果你喜欢,别忘了转发和更多人一起分享。

人已赞赏
产品设计

APP产品改版笔记:图形设计

2020-3-12 23:46:48

产品设计

设计战“疫”,工业设计师抗疫类产品设计作品精选

2020-3-17 22:45:13

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索