什么是设计系统、设计语言和设计语言系统

  • A+
所属分类:经验思维

本文来源: 公众号 - Nana的设计锦囊, 共 1715 字

不管是晋升答辩还是跳槽面试,甚至是过稿评审,大家一定都会被问到大致这么几个问题:

什么是设计系统、设计语言和设计语言系统

大多数设计师对设计语言或者设计系统已经有了自己的理解,但因为问题太宏观所以并不明确这两个概念的具体含义以及区别,导致阐述的时候模棱两可,拉低面试评价(都是痛,我懂得)。所以本文会重点科普下设计语言与设计系统的概念。

01,设计语言是什么?

ROUND 1

为什么会有设计语言?

拆分来看,先聚焦“语言”。维基百科对语言的解释:就广义而言,是用于沟通的一套方式,有其符号与处理规则,一般称为文法。符号通常称为文字,会以视觉、声音或者触觉方式来进行传递。语言用来传递已知或未知事物的含义。

“语言”一词可以更广义的理解为已知或未知世界的基础构成系统。严格来说,语言是指人类沟通所使用的语言——自然语言。在一个先进的社会中一般人都必须通过学习才能获得语言能力。语言的目的是交流观念、意见、思想等。

我们试着用设计师的视角去理解一下这段文字:设计中的语言作为一种“沟通的方式”,做适当的表达,进行特定的信息传递。这一切显得基础且必要,在上篇文章中有介么一个图大家还记得吧:

什么是设计系统、设计语言和设计语言系统

普适性强且缺乏记忆点的这种设计更像“普通话”,你在接收起来毫无压力,但缺乏个性和故事,当你一直处于这种环境时间久了,一切就变得索然无味。所以这就使得产品的需要在表现层透出来设计语言,这种语言要带有品牌或自己鲜明的个性,才能帮助产品传递品牌价值。

ROUND 2

设计语言承载了什么,ta的载体又是什么?

最近查阅了各大网站对设计语言的描述,基本上是“字体、颜色、图形、网格系统”这几个因子,坦诚的讲,这应该是浅层的语言表现形式。但如果我们拔高维度来思考,设计语言就应该是承上启下的中枢,呈上的是企业(或者产品)的文化价值输出,启下的才是形式载体,用一个图来解释下:

什么是设计系统、设计语言和设计语言系统

再举个列子来帮助理解:

谷歌的MD赖以成名的设计语言是对“纸”的隐喻,ta承载了谷歌庞大生态的各类终端的链接关系,手机/电脑/pad/手表/车载等等,需要这套语言不直接针对某一个渠道的同时又需要有个性化的存在,并且可以容得下复杂的层级关系,在这种纵横交错的期盼中,设计团队从现实中来抽取“纸”的概念赋予这套语言,完美的权衡了生态产品的关系。

而构成语言的因子,比如“floating action button”就是这套语言衍生出来的组件。而规则对应的就是谷歌的设计规范,ta会帮助你在不同场景/模式下正确的使用这些组件。

什么是设计系统、设计语言和设计语言系统

 

02,设计系统又是什么?

ROUND 1

设计系统是什么及其构成

引用《design system》里面的解释,一套成熟的DS包括设计语言中的principle(原则)、guideline(规范)、components(组件)、pattrens(模式)和library(库)等等,

什么是设计系统、设计语言和设计语言系统

同时还有tools(设计工具)/motion(动态设计)等,所以你会发现,设计系统除了包括精神指导,更包含了执行落地方案中的行为指导。

什么是设计系统、设计语言和设计语言系统

图为滴滴的设计系统,更加侧重于落地的指南性质

所以设计系统更侧重宏观的设计品质把控,是在明确的标准指导下,通过组件的重组/组装在一起以构建任意的产品,通俗地说,区别于标准和文档,是有关如何使用子品类的“教程”。

ROUND 2

设计系统的应用场景

设计系统的应用场景几乎覆盖了整个公司的设计产出,线上产品/线上运营/品牌传播/线下物料等等等等。

什么是设计系统、设计语言和设计语言系统

上图为某司的营销视觉设计品类

铁汁们在塑造设计系统的时候可以模糊产品和运营之间的鸿沟,所有的设计都需要在一个体系里被容纳,甚至你可以这么理解“品牌即产品”(branding is product),产品设计变成了品牌的最大输出口。

 

03,区别设计语言/系统的公式

设计系统和设计语言系统之间有关联,但本质上还是不同,语言相对务虚,系统相对务实。用一个公式来概括下ta们:

设计语言=模式/组件库+规则+语义

设计系统=模式/组件库+规则+语义+ 落地执行标准+实施方案

所以设计系统是包含设计语言的。

小结一下:

每个产品都会有不同的用途,都会有不同的价值输出,所以每套语言也不尽相同。理解这2者的概念之后,大家可以再去看看自家产品,试着去完善自己的设计系统,可以让自己的作品在之后的职业生涯中更体系化更加分。



发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: