本文通过将品牌、系统和产品三个要素视觉化,来表现设计系统的功能输出、设计准则、采用状态等架构形式,同时辅以示例进行说明,并在文末提供整个系统架构图的Sketch文件下载。

符号

本文中的设计系统架构图将使用符号(菱形,圆形和正方形)来表示对象(系统,产品和品牌标识)。

菱形表示系统

每个菱形代表一个显式或隐式设计系统功能集,包括但不限于应用于一个或多个作为设计和(或)代码资产提供的UI组件定义的视觉样式。

标题和描述标签作为可选项以45度旋转角度显示在右上方。尽管可以随着图表的出现而调整标签的位置,但事实证明,这种默认设置与对象和连接器发生冲突的可能性最小。

半菱形表示系统工具:设计资产(Design Assets)和代码(Code)

每个系统都提供设计资产(例如Sketch,Figma或Invision Studio)、代码库或两者都包括。因此,将代表系统的菱形一分为二,以表示它是否向客户提供设计资产(菱形符号左侧的红色D),代码(菱形符号右侧的蓝色C)或两者同时都提供。

设计准则(Design Guidelines)和代码参考(Code Reference)作为菱形背景

大多数设计系统会直观地记录示例,并在可能的情况下提供用于生成结果的代码。但是,并非所有设计系统都提供更深入的设计准则代码参考。两者通常都通过设计良好的基于Web的网站进行传达。因此,系统菱形左侧和右侧的黄色背景分别表示设计准则和代码参考的可用性。

例如,IBM CarbonShopify PolarisMorningstarREI Cedar都提供了详细的设计准则和代码参考资料。因此,每个「D」和「C」后面都将包含一个完整的黄色菱形。

另一方面,Financial Times’s Origami只提供了代码参考而没有设计准则。Google Material Design 长期以来都只提供没有代码的设计准则,不过最近开始发生一些变化,提供应用在不同平台上的设计准则代码

Salesforce Lightning设计系统提供相当有限的设计准则,并混合到了以代码为中心的组件文档中。这样的网站缺乏详细的设计指南很不友好。

圆形代表产品

绘制设计系统与其客户之间的连接至关重要。有些人可能不认为自己的工作是“产品”。不过没关系,圆形代表团队可能选择采用系统的任何数字体验产品(或其一部分)。

例如,一个电子商务网站或应用的产品体验可能包括很多组成:主页、搜索结果、着陆和分类页面、产品页面、购物车、结帐、订单状态和退货以及客户资料等。每个组成部分都将在图中以圆形清楚地表示。

徽章表示产品数量

对于具有多种产品的生态系统,请合并为一个代表多种产品的符号,并使用徽章表示数量。

使用颜色表示产品采用系统代码的状态

产品是否采用系统代码并不统一。因此,使用颜色来区分采用状态,黑色表示使用了系统代码,灰色表示将系统设计嵌入产品的定制代码,白色表示没有采用系统代码。

这些也可以使用徽章进行数量合并。

自上而下的连接器

垂直且自上而下的连接器用于连接依赖于系统的产品。

正方形代表品牌识别

当提醒制作设计系统的专业人员他们的系统不在金字塔顶部的时候,他们多少都会有些震惊。设计系统通常需要从品牌或营销团队管理的一个或多个品牌标识中继承视觉要素(颜色、排版、插图)和其他属性。此处使用方形代表品牌。

多个品牌作为一套系统的父级

显示多个品牌对于描述单个系统所支持的多种标识非常有用。例如,万豪的设计系统就并入了针对不同酒店属性的规则(例如万怡酒店,万丽酒店和JW万豪酒店等)。

使用组织边界作为列

如果没有表明所服务的每个组织单元的话,整个企业的设计系统架构是不完整的。这些组织单元可能采取领域、部门或小组的形式。也许是业务线。也许是客户旅程的细分。无论你的公司如何划分工作和团队,也无论规模大小,都会有部门的存在。

这里采用比连接节点的线更粗的紫色虚线作为边界。此外,以图表基线为基准的一级或二级紫色标签可以清楚地标记每个区域。

示例

以下通过一系列由描述性故事支持的示例来从视觉上理解系统图,并设置了上下文以及揭示相关系统所面临的高级挑战。

示例1:需要转换的中央系统

这种设计系统架构意味着所有数字产品都依赖于公认的单一系统。有些产品直接采用该系统。其他一些产品,则由提供其原始HTML和CSS库的基于React和Vue的JavaScript团队将其转换为设计系统。

设计系统团队认识到架构的冗余性和复杂性,从而在下一代系统中通过提供Web组件来减轻对上述转换的需求。

示例2:小型银行和保险公司

随着从线下销售渠道转向线上营销渠道来吸引客户、完善客户管理交易的服务体验(如索赔和汇款),许多保险公司和银行都会组织一支数字产品团队。这可能导致至少需要两个设计系统,区分线上和线下服务,如果不止于此的话,还会出现第三个系统用于在两者之间吸引客户。

示例3:软件即服务SaaS(教育类)

试想一下母公司旗下的软件产品组合。他们的系统是通过重新设计其旗舰产品而产生的:以内容和互动媒体作为课程。

旗舰产品推出后,团队将系统应用于交叉产品工具(身份验证、主页、仪表板、搜索和帐户管理)以及管理人员用来管理学生数据和访问权限的管理控制台。随着产品的不断成功,他们开始将目光投向兄弟部门,该部门为客户生产定制的、标有白色标签(前述没有采用系统代码的白色圆圈)的网站。

示例4:按客户类型划分的业务部门

一家公司将数字团队组织成产品开发部门,分别为消费者、雇主及其员工以及各自领域的大型机构提供服务。因此,每个单元都出现了不同的系统。

系统团队共享实践和工具,但仍保持自主性,以最佳方式为不同的客户提供服务。这有助于避免挑战,例如过早地融合尚未被优先考虑的设计语言。

示例5:软件即服务SaaS(企业类)

一家软件公司建立了强大的集中式系统,并在所有旗舰产品和辅助产品中均采用了该系统。也就是说,除了通用编码组件之外,它还保留了单独的设计文档。一些关键产品扩展了该系统,无论是管理Sketch库的产品A和B的设计人员,还是维护团队代码的工程师。此外,潜在的购置活动还将引发有关产品、系统和品牌层面整合的讨论。

△ 设计系统架构图Sketch文件下载:

下载地址:https://pan.baidu.com/s/1nuIP6ED5tLyDK9rMLuG5cQ 提取码:yvbe