设计语言这个词，近来比较火，越来越多的设计团队都会构建一套属于自己产品的设计语言系统。关于可参考的案例也很多，最出名的就是苹果公司的苹果和谷歌材料设计，也是设计语言的鼻祖。那么你真的了解设计语言吗？又如何去科学的建立一套设计语言呢？接下来我将对设计语言是什么？包括什么？如何构建一套设计语言，进行拆解，帮助大家掌握这项技能。

  什么是设计语言  

语言：广义而言，就使用与沟通的一套方式，有其符号与处理规则。语言用来传递已知或未知事物的含义。“语言”一词可以更广义理解为已知或未知世界的基础构成系统,目的是交流观念、意见、思想等。

那么在设计角度来看，设计语言是一种能够被解读的“表达”。体现在产品中，设计语言在无形中传递给用户既定成熟的操作方式和视觉形象。

  为什么要用设计语言  

对内

你是否也遇到过这种情况：一个项目,从V1.0一直升级到2.0、3.0,即使同一位设计师在不同版本里做出的东西也可能会因为版本久远，记不清而不小心导致视觉风格不统一;之前设计的页面组件，每次都要重新标注一遍给开发...

so

对于团队内部，设计语言的意义在于通过系统化的设计规则，来控制产品长期迭代的熵值，以及提升团队协同的效率，同时设计师有机会从重复的劳动中解救出来，投入更多的精力到探讨问题本质实现价值创新。就好像在石器时代，祖先们记录事件或表达情感的混乱程度，远远高于现代人，关键在于是否拥有一套成熟的语言系统。

对外

对于外部用户，设计语言系统可以让产品在不同终端、不同场景中的表现保持一致性，也有机会通过植入品牌基因的方式形成视觉锤，提升产品的识别度以及消费者对品牌的认知。统一的颜色和产品交互形式帮助用户加深对产品的熟悉感和信任感，好的设计语言可以在体验上为产品加分。就像，我们可以通过「猪鼻」车头识别出那是宝马，通过「青蛙眼」车灯知道那是保时捷，是因为这些汽车品牌通过长期保持某个「一致性」的表现，形成一套高识别度的设计语言来表达「这就是我」。

  设计语言解决什么问题  

一致性

整个平台创造一致性，包括颜色、按钮、字体、品牌等的一致性，产品体验的一致性，给用户安全感，熟悉感，同时解决设计师因个人特征导致界面不统一的问题。

明确设计原则

设计师更清楚的思考设计理念，以及产品形象的传播。如我们产品需要传递给用户的设计特征是什么，以及整个平台的约束是什么。比如产品传达的是科技感、数据化，那我们对应的设计就不能是可爱的图形，不能和整个设计原则违背。

效率

更好的提升效率，减少重复性工作。比如对于我们经常用到的组件、颜色、字体、表单等，如果能提前统一规范，能大大减少重复性设计，能让设计师更专注于设计品质和设计细节。

多平台统一

我们现在处于一个各种设备百花齐放的社会，各种屏幕尺寸，各种系统设备，我们的产品需要在这些设备上运行，就必须保证设计的统一性。

  如何做  

前边啰嗦了这么多，我们了解了什么是设计语言，设计语言的重要性和意义，那我们应该如何做建立呢？让我们来看一下设计语言都包括什么。

  设计语言包括什么  

1、设计原则—核心

设计原则，可以理解为设计语言中的语法，是构建设计语言系统的起点，用于传达品牌主张或设计理念，它将指引业务设计执行的方向。制定设计原则时，首先研究用户特性，聚焦产品核心价值，然后通过脑暴等形式选择有特点的维度，结合用户体验与品牌属性将其视觉化，最后用简要的语言归纳出来。

Airbnb的设计原则简单归纳为几点：

• 统一性：每一块设计，都是更大整体中的一部分，因此必须站在更大范围的角度上，给予系统积极正面的贡献。设计功能不应该是孤立的，也不能是离群的。
• 普遍性：Airbnb在全世界使用，用户更是一个全球性的社区。产品和可视化语言应该受到用户欢迎，同时也要易于访问。
• 标志性：专注于设计和功能，因此在这两方面，要即大胆又清晰。
• 对话性：呼吸对生命如此重要，把同样的设计理念融入到产品里面，通过更容易理解的方式与用户进行交流、沟通。

蚂蚁金服体验技术部在打造Ant Design设计体系 时，基于自然、确定性、意义感、生长性四大价值观，通过模块化的解决方案，降低冗余的生产成本，让设计者专注于更好的用户体验。

iOS 的人机规范指南，保持了苹果一贯的风格。虽然没有 Material Design 规范那么细致全面，但是核心的设计原则在每个组件的设计说明中都有渗透。作为 iOS 系统的设计基础，建议每个设计师都需要仔细研究。

苹果的设计规范：完整性、一致性、直接操作、反馈、隐喻、用户控制等几个原则。

2、色彩系统

设计中的三大元素，色彩、字体，图形，第一步我们在建立一个系统的时候，色彩是很重要的一部分，我们需要定义好整个系统的是框架体系，色彩体系一旦建立好，后面我们的设计都将围绕这些这些色彩进行设计，色彩包括，品牌色，辅助色，字体颜色，不可用色，超链接，提示颜色等等。

定义与应用

3、图形

图形，设计中很重要的元素之一，图标、背景图形、插画都属于图形的一部分。

插画的规范设计，包括故事情节、颜色运用、人物特征等

图标的规范

4、栅格

栅格系统可以说是整个页面的骨架，它将页面中所有的设计元素高效有序地组织起来，从而让整个 APP 的设计具有高度的一致性和规律性，提高设计师工作效率，避免凭感觉做设计。

列

网格中列越多，灵活性越大，但是并不是越多越好

行

行是网格的水平部分，也是横向部分，它们通常在网页设计中被省略，具有行和列的网格称为模块化网格，移动端行间距用的比较少可以忽略，一般在UI设计中就是横向的间距。

水槽

列和行由水槽分割，水槽越小，视觉张力就越大，如果你希望界面间距大点，水槽就可以留大，相反水槽越小，视觉越紧凑，水槽里面尽量不要放内容。

5、字体

界面中出现最多的内容就是字体，字体除了传统意义上大小之外、字间距、行间距、字重，还有字体颜色等等。

6、投影

在设计系统中我们需要定义好投影关系，投影需要定义不同的强度大小、角度等，以满足页面中需求，一般通过透明度，以及投影远近来定义。

7、图文关系

图片和文字在界面中如何处理，多色调如何运用，都需要我们去详细定义。

  总结  

设计完成一个系统是一个很复杂的过程，前期一般需要做好充分的准备，设计完成后，对于颜色、字体、等基础元素最好不要随意改动，成本会比较高。

Powered by Froala Editor