为什么要学设计系统

• 了解大公司解决设计问题的方式，团队成员如何高效配合
• 越是处在设计开始阶段，越是要系统性地学习
• 学会⽤理性的⽅式来做设计
• 养成良好的设计习惯

1、设计系统是什么

风格指南/设计规范

静态⽂档：阐释设计如何运作。
包括但不限于: 产品的视觉呈现和使用感受、UI模式的⽤例、正确的颜色和字阶的运用、交互规范说明。

服务对象：设计师

局限性: 无法应对变化

• 技术变化
  
• 团队变化
  
• 市场变化
  

设计师在面对市场的快速响应时，⻛格指南的跟进往往是后置的

从iOS6走向iOS7

从拟物化到扁平化，很多团队花了⼤量的时间去跟上这样的风格变化。

解决⽅案——设计系统

“我们需要一种新的更具包容性和多元化的思路，可以帮助我们将不确定性控制在⼀定范围内，从⽽真正的释放重复劳动，让更多的设计者有机会去触及更更好的产品体验，这就是设计体系”
— 它山

“A design system is a set of interconnected patternsand shared practices coherently organized to servethe purpose of a digital product. ”
—
Alla Kholmatova. “Design Systems.”

什么是设计系统？

“Design language or design systems is more thenjust UI styles guides is also the way the teamworks and what are the team values & principles“—
Marco Lopes

文章来源:https://blog.prototypr.io/design-system-ac88c6740f53

蚂蚁⾦金服的设计系统

设计系统:

• 可供设计团队使⽤用的动态patternlibrary
  
• 可供前端开发使⽤用
  
• 一切设计、开发可参考的设计语言
  
• 实践中不不断反馈总结的模式、经验
  
• 提效⼯具
  

最终承载形式: Living style guideline

包含内容:设计语言、设计资产、工具、设计实践
服务对象:设计师、开发、第三方合作商、任何想使⽤这套系统的⼈或公司

蚂蚁设计系统网站:https://ant.design/index-cn

2、设计系统的来源

这种设计方式的起源:
2013年Brad Frost 发表的 Atomic Design

http://bradfrost.com/blog/post/atomic-web-design/

Atomic design 来源于我们之前学过的化学元表，我们肉眼所看的东西都是由这些原子(atoms)构成的，然后原子再构成分子(Molecures)，分子再组成更复杂的组织(Organisms)。Brad认为界面也是如此，有一个最小元素，一层组合出新的、更大的单元。

很多公司根据Atomic Design建⽴了⾃己的设计系统:

GE’s Predix Design System

https://www.predix-ui.com/#/home

Salesforce’s Lightning Design System

https://www.lightningdesignsystem.com/

IBM’s Carbon Design System

https://www.carbondesignsystem.com/

3、如何建立设计系统

以蚂蚁的设计系统为例例

设计价值观&原则

设计价值观是设计系统的核心

Material design
“synthesizes classic principles of gooddesign with the innovation andpossibility of technology and science”

• Material is the metaphor
  
• Bold, graphic, intentional
  
• Motion provides meaning
  

蚂蚁金服

“确定 自然”

• 设计者可运⽤现有的组件/模板或者⾃行抽象可复⽤的组件/模板，节约无谓的设计且保持系统一致性
  
• 提炼⾃然界中的客观规律并运用到界面设计
  
• 利用行为分析、⼈⼯智能、传感器等一系列方式，辅助用户有效决策、减少用户额外操作
  

通过搭建三维模拟空间的方式，掌握不同颜色在自然光照下对应的 HSB 的变化规律

基础构建/控件库

一个有生命的载体，对外输出的同时，又从外界吸收来不断优化⾃己。
UX power tools:只解决了设计实操的部分，是⼀个资源包。但还远不够，⽆法囊括⼀个团队合作设计、企业级产品所需的所有东西。

它还需要解决:

怎么⽤用?
设计规则是什么?
组件对应的CSS样式是什什么?
适⽤的平台?
动效?
…

这些规范是如何归纳出来的?

1.Applications 应用

公司的各个部门、业务线拥有很多应用 (例子:GE抽象思路)

2.Feature 功能

把应用中相似的功能抽取出来，每个功能由多个⻚面组成，每个可以完成一个⽤户目标。

3.Templates 模板

从不同的功能中抽取出相似的⻚面结构样式，形成模板。

4.Components 组件

界⾯设计中运用到的小的组件，如图表、数据列表、范围选择器等等

5.Basic 元素

界面设计中最小的单位，如按钮、分隔线、勾选框等等。不可能再向下分解的元素。

6.Principle 原则

原则是设计师在创造新的设计模式的时候需要参考的设计规则。
原则可以让你预测未来的设计逻辑。例如原则可以指导你的文字在什么时候需要换行。

这些规范是如何归纳出来的?

设计文档、技术文档

有继承、沟通作用，让新的设计师、开发人员容易上手使⽤设计系统;
对各种专有名词的定义，让所有成员对系统有统一的认知。

统一的工作方式

团队统一使用的工具

团队共享文件的命名

个人文件的管理

团队共享sketch/ps的图层命名

每一个画布、图层、symbol、元素都需要有正规的命名(sketch插件:rename it)

团队共享的网格系统

为什么要用8pt?

https://spec.fm/specifics/8-pt-grid
https://builttoadapt.io/intro-to-the-8-point-grid-system-d2573cde8632

Remember; Building a design system is a longprocess filled with trial and error, Test, learn, Fail…. 建立设计系统不是一蹴而就的，这是一个漫长的过程，并且充满着尝试、错误、测试、学习、失败… —— GE产品设计师 Marco Lopes

https://blog.prototypr.io/design-system-ac88c6740f53

设计系统解决什么问题？

对于⽂文字⼤大⼩小、颜⾊色等⽆无休⽌止的争端
快速应对变化的团队、市场需求、技术需求
减少重复劳动
系统修改先于稿件修改，实现⾼高度统一
…

一个台湾设计师用设计系统达到的设计效果

25.第二十五节：设计系统

参考链接

https://blog.prototypr.io/design-system-ac88c6740f53
https://medium.com/ge-design/ges-predix-design-system-8236d47b0891
https://www.invisionapp.com/blog/atomic-design-principles/
https://medium.com/@lewisplushumphreys/how-were-using-component-based-design-5f9e3176babb
https://medium.freecodecamp.org/how-to-construct-a-design-system-864adbf2a117
https://www.invisionapp.com/blog/guide-to-design-systems/
https://medium.com/ge-design/ges-predix-design-system-8236d47b0891
http://atomicdesign.bradfrost.com/