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