从0到1,搭建一套完整的产品 “设计语言” !(下篇)
作者:元尧,蚂蚁集团设计师
上篇文章我们介绍了设计语言的基本知识(如需回顾可点击:从0到1,搭建一套完整的产品 “设计语言” !(上篇)),设计语言中包括设计价值观、设计原则和设计范式:
作为设计语言的主要构成部分,设计范式该如何整理和输出呢?我们可以分软件产品和硬件产品两个方面来看:
软件产品
软件是一种逻辑产品,如果你设计的产品或者供职的公司是以软件产品为主,设计范式通常可以从(不限于)以下内容进行构建和思考:
1. 布局
布局是体系化视觉设计的起点,产品界面的布局空间要基于动态、体系化的角度出发展开:

(Fusion Design 设计语言:单位规范示例)

(Material Design 设计语言:响应式栅格布局示例)
(Material Design 设计语言:间距规范示例)
2. 样式
样式是产品通用的基本规则,包括颜色、字体、图标、阴影、模式、动效、音效等方面,从产品功能出发进行规范制定:

(Material Design 设计语言:间距规范示例)


(Ant Design 设计语言:字体行高规范示例)

(图标设计规格示例)

(Material Design 设计语言:阴影规范示例)

(Material Design 设计语言:阴影规范示例)
(Material Design 设计语言:音效的设计原则示例)

(动效的设计规范示例)
3. 组件
组件可以把视觉表达模块化、产品需求场景化,每个组件通过标准的组合方式构建设计方案,从而提升设计效率,并保证产品在各个场景中的一致性。在搭建组件的过程中,要始终遵循设计原则和规范,既要兼顾全局,又要考虑细节。
我曾在之前的文章:阿里巴巴的利器!Fusion Design 你会用么?中介绍过阿里巴巴的一款设计工具 Fusion Design,也可为制作组件提供捷径:
(Fusion Design 组件库搭建)
硬件产品
硬件产品的设计范式与软件产品不同,你可以从以下(不限于)这些角度进行思考与设计范式的搭建:
1. 整体风格
产品的整体风格是一个较为抽象的概念。如果你在设计硬件产品时,遵守设计语言的价值观和设计原则,整体的产品风格就已经基本形成了。整体风格是使用一个或几个词汇就可以概括出来的,使用户提起品牌 / 产品名称就会想到相应的设计理念:
提起无印良品,你可能会立即想到:天然、简洁、素雅等词汇。无印良品以一种趋近于“无”的形式进行产品设计,是禅宗的“空寂”意识的反映,也是产品的设计价值观:
2. CMF
CMF 是每一件硬件产品在设计和生产时都必须要考虑的问题:

3. 细节元素
硬件产品品类繁杂,细节元素远多于软件产品,具体产品要具体分析和总结。这里举几个例子:


设计语言维护与更新
设计语言并不是一成不变的,需要不断的维护与更新,是一个动态进化的过程。这种进化,包括三个方面的内容:
· 设计过程中的灵活应用:设计范式中的组件库可以优化设计工作方法,提升设计效率。灵活应用组件,能够最大限度的保证产品的一致性。
· 产品功能的更新与迭代:随着产品功能的更新和新产品的上市,设计范式和组件库都会不断被添加和完善。
· 设计趋势的发展与变化:设计语言跟随设计流行趋势做出调整,符合当下流行的审美观,做补充和优化。
设计语言不是一蹴而就的,在维护和升级的过程中要做好版本的记录,把整个设计语言作为一个完整的项目进行管理,更有助于设计系统的良性生长与发展。
由于篇幅所限,本文提到的 CMF 相关知识会在日后为大家详解。











































































