构建设计语言系统
一套全面的设计系统，从设计原则到字体排版，从交互到文案，从动效到样式，从组件到设计工具提供了各种解决方法和指导，设计师和工程师可以快速找到相关的指导内容，有效地帮助完善工作并且提高效率。
设计系统语言 —— 一套提高数字生态系统和谐程度的规则或指南。
什么是数字生态系统呢？它是相互依存的企业、人或是事物共享的一个互惠互利的标准化数字平台。为了使这个生态系统保持和谐，我们需要了解它所涉及的不同群体的要求和期望，以建立一个可扩展且高效的设计系统。我们作为这个系统里的一员需要做的是：
1）互相协作以建立好的设计语言系统
2）在提高内部效率的同时，提供良好的用户体验。
设计语言系统就像给房子打地基，它将会让建造时间更短，效率更高。
下面我们谈谈怎么构建设计语言系统
如何对已搭建好的平台进行设计规范整理
如果对已搭建好的平台进行UI设计规范整理，要做的就是截取所有的元件和组件进行归类整理：从文本到按钮，从折叠面板到tab标签的等。
从0开始构建的设计语言系统
尽量列举出所有要用到的元素
在纸张上列举出所有重要元素，然后按其用法对所有元素进行分组。例如：样式组为颜色和字体。组件组包括按钮、卡片、对话框等。
开始设计基础样式
颜色
从最明显的样式属性——颜色开始，先定义主要品牌色，在这里我们用#17B1F7蓝色。
除了主色外的场景色，需要在不同的场景中使用（例如危险色：表示危险的操作）
最后，再加一些中性色用于文本、背景和边框颜色。运用不同的中性色来表现不同的层次结构。
浅灰色：用在边框、线条或分割线。
中灰色：副标题
深灰色：主标题、正文或背景。
当然你还可以自己定义更多层次的灰色。以便运用到所有场景中。
阴影
阴影是一种常用的样式属性。
四个足以覆盖系统中组件的设置阴影样式：
1）A subtle shadow 可以运用在最基础的组件，如：按钮。
2）A more pronounced shadow 适合运用在悬停效果上。
3）A strong shadow 更适合下拉菜单和气泡卡片等相似组件。
4）A distant shadow 适合模态组件。
字体大小
为了在每个屏幕上创建适当的可视化层次结构，我们需要定义许多不同的字体大小。
如：超大标题、大标题、副标题、正文、小标题等，都需要定义不同的字体大小。通常我们有一些用在正文文本的默认字体大小：14px , 在此基础上我们再定义其他类型的字体大小。
行高
行高可以理解为一个包裹在字体外面的无形的框，字体距框的上下空隙为半行距。
建议的主要字体为 14，与之对应的行高为 22。其余的字阶的选择可根据具体情况进行自由的定义。
圆角
小圆角：用于复选框、tag标签和label标签等小组件
中圆角：用户输入框和按钮等类似组件
大圆角：用于卡片和模态等其他大组件
构建组件库
按钮
构建常用的基础按钮
一些特殊尺寸的大按钮
更多组件
当我们构建了一些基础组件时，接下来可以开始组合多个组件来创建更复杂的组件。例如：输入框、下拉组件。
使用这种方法我们可以举一反三，设计出一个更完整的组件库，运用到所有的场景下。
在设计语言的驱动下，设计师能够从重复的劳动中获得解脱，工程师能够对设计理念有更深刻的理解，同时指导设计师提供明确的样式定义，加强工程师与设计师的沟通，有效地帮助完善工作并且提高效率。
结尾彩蛋（一些非常成熟的设计系统链接）：
Polaris — Shopify’s Design System
Airbnb’s Design Language System
Fluent — Microsoft’s Design Language System
Nachos — Trello’s Design Language System
Lightning Design System — Salesforce
Apple’s Design Language System
参考：https://uxplanet.org/design-language-system-d438f4aa30e0
https://medium.freecodecamp.org/how-to-construct-a-design-system-864adbf2a117
https://uxdesign.cc/how-to-get-a-head-start-on-design-system-8a217676c1f9
作者：Ever
相关文章推荐：
