在这篇文章中，我们将深入研究设计系统的基础：设计语言
设计语言是设计的共通词汇。
– IBM
什么是设计语言？
设计语言是一套标准，用于指导创建一套符合品牌方向的产品。我喜欢将设计语言视为品牌或产品的个性及其相应的视觉设计输出。
设计语言由三个方面组成：
-
设计指南
-
元素
-
组件
你可能会发现设计语言或UI kit中的元素和组件之间没有区别。那我在这里做了区分来说明一些由其他组件（元素）组成的组件。我喜欢称这些组件为复合组件。
设计指南
设计指南是描述如何利用您的设计语言来构建产品的原则。它包括以下内容：
-
可取性
-
品牌
-
字体
-
色彩
-
网格
-
动效
-
图标
元素
元素是可用于构建更复杂组件的基本元素。这些例子包括：
-
按钮
-
展开栏
-
字段输入
-
单选按钮
组件
组件比元素更复杂，实际上它可以由许多元素构建和组合。这些示例包括：
-
模态框口
-
提示工具条
-
导航
-
分页
如何构建设计语言？
如果你从头开始设计一种设计语言，那么你很幸运; 从空白画布开始要容易得多！但实际情况是，大多数公司都在尝试与先前存在的产品一起构建设计语言。
在维护一系列产品的同时构建设计语言的一般流程如下：
-
进行UI审核
-
建立组件优先级
-
巩固您的品牌认知
-
制定指导方针
-
构建UI kit
让我们深入研究以上其中的每一个。
UI审核
UI审核是应用程序所有区域中所有元素的可视化清单。例如，有多少种不同的按钮？他们的悬停状态在整个产品中是否不同？
你只需截取每个组件的屏幕截图并将其添加到Sketch中的画板。假如我们对Airbnb进行UI审核，那它可能看起来像这样：
确定优先级
完成UI审核后，你可以开始优先考虑组件优先级。我们怎样才能做到这一点呢？可以通过在 一致性/频率/可行性/影响 这四个方面去绘制图表确定每个组件所处的位置。
一致性/频率图表是基于组件在整个UI系统中的一致性程度VS组件在整个产品中使用的频率。
正如我们在上面的Airbnb UI审核中看到的那样，按钮非常不一致，但它们在整个产品中被大量使用。相比之下，折叠面板使用场景不算很多（可能在一个或两个地方），因此通常是一致的。
可行性/影响的图表是基于组件如何完成可行性的设计或者开发以及了解组件对产品的整体凝聚力图表上将会表现多大的影响。
回到Airbnb按钮，与折叠面板（有很多移动部件）相比它们很容易设计和开发，其将对产品的一致性产生更大的效果。
一旦产品中的所有组件都绘制在这两个图表上，我们就可以开始创建优先级。
我们可以关注位于两个图表右上象限中的组件：不一致且经常使用的组件，但在设计/开发非常可行，并且具有很高的影响力。这些组件将对整个产品产生最大的回报。
根据我们研究的Airbnb结果，从按钮组件开始将是一个好主意。
一旦设计了右上象限中的组件，你的团队可以决定最佳的继续方式。
你可能希望继续使用那些可行性高，影响较大且在整个UI系统中经常使用的组件，但可能它们需要比其他组件更具有加一致性。
巩固您的品牌识别
在构建设计语言之前，你需要对品牌有强烈的认识。您希望用户在使用产品时感觉如何？这些情绪需要包装到您的系统设计中。
以下是你可能要先问自己的一些问题，以便建立强大的品牌辨识：
-
我们希望用户在使用我们的产品时体验到什么样的情感（即信任，冒险）？
-
我们的使命是什么？
-
为什么我们要做这些事情？
制定设计指南
一旦建立了品牌辨识，就可以开始定义设计语言指南。以下是您要定义的指南示例：
可访问性：你的系统必须满足哪种的W3C合规性级别？我们如何在我们的系统中建立这种合规性（即颜色对比，类型比例）？
品牌：你的品牌辨识是什么？你在上一步中定义了此项。
排版：我们应该使用什么类型的比例和字体系列来强化我们的品牌辨识？
颜色：什么颜色最能唤起我们希望用户感受到的情绪？例如，蓝色表示可信赖度。
动效：我们如何利用产品中的动画和动作来传达我们的品牌调性。
插图：我们在哪里可以使用产品中的插图来传达我们的品牌？什么插画风格符合我们的品牌？
内容：什么语音/角色最能包含我们的品牌辨识？
图标：什么样的图标最适合我们的品牌？
间距：我们想采用什么间距范例来创建一致的UI（即填充，边距）？
构建UI工具包
最后，我们准备开始构建UI kit了。这只是一套视觉设计/原型设计资源，体现了你的设计语言。
这套UI kit允许设计人员在其高保真设计中直接利用您的系统。Sketch软件是用于创建UI kit的流行工具。
为UI kit创建一个强大且有组织的层次结构是非常重要的。你可能希望将不同的组件类型（即通知，表单元素等）分隔到不同的页面中。或者，你可能希望利用符号来确保一致性。
在设计UI kit前，请务必与你的团队建立“工作合同”，以确保在整个组件设计和工作流程方面你们都处于同一流程。
我希望第一部分能够成为设计语言的良好入门读物。第三部分将介绍组件库。同时，请随时告诉我你对设计系统的看法。
最后感谢所有图形提供都是来自unDraw。
本篇文章来源于微信公众号: TripDesign
