解密 Design System

简介

设计系统的产生是为了某领域内产品在不一样平台和设备上都保持设计和交互风格的统一。既然是一个系统 ，那必须具备相应的完整性。它为产品设计，产品内容等方面提供相应的指导。整体来看，整个设计系统由Design Principle, Design Language, Code Library 和一些相关的Tools组成。从如下的图能够更直观的看到它的组成部分。

主流风格

目前业界普遍使用的visual language包括Material Design, Metro Design 等等。能够想象有一个数轴，数轴一端是扁平风格，另外一端是拟物风格。目前大部分的设计风格都分布在这条数轴之间。

Material Design

Google的Material Design是一个使用普遍的视觉语言(visual language). 统一了google系产品的视觉风格，而且能对其进行必定程度的客制化。

Material Design is inspired by the physical world and its textures, including how they reflect light and cast shadows. Material surfaces reimagine the mediums of paper and ink.

与Apple先前的拟物化设计不一样，Material Design 把设计风格从拟物化的一端往扁平化的方向拉了拉，但却不是彻底的扁平。它保持了物理世界的一些特质和纹理，并从X轴、Y轴、Z轴 三个维度描述一个物体. 在Z轴上的投影模拟了光的照射和基于此造成的阴影, 从而使设计元素有了立体的感受。譬如Button的设计即是在底部利用shadow使按钮有略微上浮的感受从而造成立体感。Card设计也是相似，利用border和shadow使整个Card从屏幕中上浮出来通常。

Material is the metaphor

Materail是一种隐喻。纸张和油墨先于电子屏出如今人们的生活中。中国汉代发明了造纸术，纸张做为书写材料得以普及，北宋的活字印刷术把文字低成本的放到了纸上，纸张上的信息得以较为普遍的传播。现在大量的信息从物理世界的纸张转移到了电子屏幕上。Materail Design 借用了纸张的隐喻并从传统的印刷方案中获得启发，元素具备纹理、质感、阴影、折叠等纸张的特性而且拥有排版、颜色、字体上的规则。点击元素触发的水波纹犹如魔法棒施加魔法的过程，等待着水波纹褪去后的惊喜，这大概即是链接虚拟世界和现实世界的魔法。

Design language

Design language较为重要的组成部分即是Design Principle, Design Pattern和Design Components这三部分。 Design Principle给出了高级别的抽象，是整个Design language的精神指导，就像某种文化通常，贯穿在设计与开发的全部环节。Design Pattern则是组合Design Components来解决现实中一类问题的规则。交互设计师和产品经理均可以利用这些规则来进行相应的交互和产品上的设计。

Design Principle

Design Principle描述了某个领域内业务形态或者操做形态的一系列规则。它体现的是某种精神，你的产品设计，UX/UI设计等都须要围绕着这些精神。不一样的公司甚至不一样的团队都会有不一样的Principle，可是也可能具备相同的Principle。google提出的Meteral Design, 便许多公司都听从着这套方案，可是也会根据本身的业务作必定的修改，从而造成本身独有的精神。 例如某通信公司的Design Principle是：

• High Efficiency（高效）
• Communicating Authentic（沟通真实）
• Build Trust（可信）
• Stay Stable（稳定）

在产品及UX设计过程当中，都须要去遵循这些原则。一个行为交互是否能应用在产品上，首先要考虑是否符合这些原则。譬如一款通信软件，右侧列表里是否须要对单聊与群聊分为两个不一样的类别，对于服务于企业的通信软件，在企业内部合做过程当中，常常会对某个项目或者问题创建一个讨论组或者项目组，因此或许对两个类别进行分类会更高效。这里的考虑即是是否遵照了High Efficiency。

Design Pattern

Design Pattern是对某一类问题解决方案的抽象。用GUI程序开发的角度去看的话，它应该是对应于业务组件。既然是业务组件，那么就是针对了某一类具体业务的解决方案。一个具体的交互场景是用户利用表单来提交数据。用户的操做无非是：

• 输入数据
• 提交数据

可是用户在进行这两个步骤时，会出现数据校验，包含校验规则，校验失败和成功的提示, 提交数据前的确认对话框，提交数据后的反馈（成功或者失败提示）。这些共同构成了表单数据提交场景下的Pattern。简而言之，Design Pattern就是利用基础组件解决某一类问题的方案。

Design Components

Design Components是一系列的基础原件。就web领域来讲，它多是浏览器上的输入框，按钮，复选框，弹出框等一系列的不带有具体业务的基础组件。而对于一个组件来讲，须要定义它在不一样交互操做时的不一样表现的规范。拿最多见的组件Button(按钮)来讲，它在点击(active)， 鼠标移到它的上方(hover)， 禁用(disabled)时的具体表现，包括颜色变化，动画效果等都须要在Design Components里进行详细的定义，这样才能说一个Design Component是完整的和可用的。

Code Library

Code Libray的基本组成即是Components。 理想状态下，代码中库Components是实现了Design Language中的大部分的Design Components和Design Pattern，固然在现实状况下会视状况而定。在开发基于某个Design Language的代码库时，须要针对该Design Language创建基本的Foundation, Design token， 最后才在此基础上开发相应的Components

Foundation

在创建代码库时，首要的即是先要创建Foundation，这便须要与交互设计师进行反复沟通，肯定基本的布局，颜色，字体字号等。一旦肯定后，以后组件的开发都会利用Foundation里定义好的规范来进行。在代码实操中，Foundation主要会包含Theme和相应的辅助函数。

Design token

Design token是设计尺度的固化，它描述了在这个设计系统中的颜色，字体，边框等一系列设计规格的全部可能取值。Design token与计算机语言里的枚举的概念有些相似，在用代码实现的一套组件的过程当中，能够将Design token 分为名称和值两部分。名称一旦定下来，便不可改变，值则能够根据须要进行配置。譬如能够用以下代码描述一个字体的Design token

// 定义名字
interface FontSize {
  small: string;
  medium: sting;
  large: string;
  xlarge: string;
}
// 定义值
const fontSize: FontSize = {
  small: '12px';
  medium: '14px';
  large: '16px';
  xlarge: '18px';
}

在上面的定义中，咱们规定了在一个设计系统中字体大小的取值只有四种: small, medium, large, xlarge, 在用代码来实现的组件库中，字体的大小只能取这四个类型，每一个类型对应于一个特定的值。值的可配置化是设计系统客制化的重要组成部分。得益于这些token的创建，各个角色对遵循于此设计系统的产品在设计上能达到必定程度的共识。

Theme

Theme定义了一个设计系统的主题调，它包含全部的Design token以及一些相应的计算规则。譬如Button的圆角，颜色，大小会利用Design token进行组合，而且当鼠标悬浮至一个button上时，背景色会根据button原有的色值按照必定的规则进行计算。

interface Palette {
  ...
  primary: #ffffff;
  action: {
    hover: Function;
  }
}

const palette: Palette = {
  action: {
    // 将透明度变为0.8
    hover: (color) => color.setAlpha(0.8);
  }
}

这里定义了primary的颜色，并且定义了一个hover的规则，当鼠标悬浮到一个button上时，button的色值的透明度便会变成0.8;

Components

Components主要是组成一个界面的最基础元素以及相应的Design Pattern。在代码层面，须要高度的还原Design Language中定义的组件，以及须要符合软件开发的规范。譬如灵活性，鲁棒性等。就最经常使用的Button来讲，以下是一种定义组件的方法:

interface BtnProps {
  variant: 'round' | 'plain';
  size: 'small' | 'medium' | 'large';
  color: 'primiry' | 'secondary';
  loading?: boolean;
  children: any;
}

class Button extends Component <BtnProps> {
  .....
}

export default Button

这里主要定义了Button组件的variant,size,color,loading四种属性，在使用过程当中，经过控制这四种属性来即可以控制组件的形态。

这即是一个Design System的主要组成部分。固然在实际开发过程当中，可能会遇到不少跨角色沟通，跨team合做等沟通合做的问题，也会遇到不少软件质量和设计上的问题，这些都是在构建一个Design System时须要解决和考虑的。