随着UI设计多年来的发展,UI屏幕必须创建的规模和速度也在增加。不仅有数百万的应用程序和数十亿的网站(每年都有更多的应用程序和网站),而且这些应用程序和网站可能有成百上千的页面(或屏幕)。随着这种急剧的扩张,组织迫切需要简化设计工作。因此,许多设计团队利用健壮的设计系统来管理大规模的设计。

定义:A.设计系统是一套完整的标准,旨在管理规模设计使用可重用的组件和模式。

为什么使用设计系统?

设计系统,如果执行得好,可以为设计团队带来很多好处:

  • 设计(和开发)工作可以快速且规模化地创建和复制。
    设计系统的主要好处是它们通过利用Premade UI组件和元素来快速复制设计。团队可以继续使用相同的元素,减少需要重新设计车轮,从而冒着意外不一致的风险。
  • 它减轻了设计资源的压力,专注于更大,更复杂的问题。
    由于已经创建了更简单的UI元素并可重用,所以设计资源可以较少地关注调整视觉外观,而更多地关注更复杂的问题(如信息优先级、工作流优化和行程管理)。虽然当你只创建少量屏幕时,这种回报似乎很小,但当你必须协调数十个团队和数千个屏幕的努力时,这一回报就变得非常重要。
  • 它在跨职能团队内部和之间创建了一种统一的语言。
    特别是当设计职责转移或团队在地理上分散时,统一的语言可以减少浪费的设计或误解的发展时间。例如,功能或外观下拉列表菜单不会被讨论,因为这个术语是为设计系统中的特定定义元素保留的。
  • 它创建了产品、渠道和(可能是孤立的)部门之间的视觉一致性。
    特别是当团队在各个产品或渠道独立于其他产品或渠道运作的筒仓中工作时,缺乏全组织的设计系统会导致视觉外观和体验不一致,这些外观和体验似乎是分散的或与品牌无关的。设计系统提供了组件、模式和样式的单一来源,并统一了不相交的体验,使它们具有视觉上的凝聚力,并似乎是同一生态系统的一部分。作为额外的奖励,任何主要的视觉重新品牌或重新设计都可以通过设计系统进行规模管理。
  • 它可以作为初级设计师和内容贡献者的教育工具和参考.
    明确编写的使用指南和样式指南可以帮助那些对UI设计或内容创建不熟悉的贡献者,也可以作为对其他贡献者的提醒。

为什么不使用设计系统?

有一些潜在的障碍和限制可能会阻止设计团队使用设计系统:

  1. 创建和维护设计系统是一项时间密集型活动,需要一个专门的团队。遗憾的是,设计系统不是一个完成的解决方案。尽其所能,随着团队收集来自使用它们的人的反馈,他们不断发展。
  2. 教别人如何使用设计系统是需要时间的。任何设计系统,即使是从现有的设计系统中进行了调整,也需要使用说明——否则,可能会在屏幕上或团队之间不一致或错误地应用它。
  3. 可能存在静态,一次性创作的看法,这通常不需要可重用的组件。无论是否真实,这种感知都可能发出跨项目缺乏统一的策略,并错过了提高效率的机会。

设计系统的要素

设计系统有两个重要部分:

  • 设计存储库
  • 这个谁来管理

设计 - 系统存储库

设计存储库可以采用多种形式,但它们通常包含时尚指南,一个组件库,和模式库.

风格指南

样式参考线包含特定的实现指南、可视化引用和设计原则用于创建接口或其他设计交付物。最常见的样式指南往往侧重于品牌(颜色、排版、商标、徽标和印刷媒体),但样式指南也提供内容(例如语调和语言建议)以及视觉和交互设计标准(也称为前端样式导向)。这些指南有时也将其纳入组件库,在上下文中提供相关的指导。

美国航天局1976年的风格指南,包括标牌排版指南,以确保高可见度。
1976年NASA图形标准手册(NHB 1430.2)是彻底品牌风格指南的示例。它提供了很多的现代视觉示例:颜色配对准则,以提高可见性和可读性,显式设计原则,如“标志应该被看作是一个大型标题;因此,语言应该清晰明了。为了快速地沟通,特别是与车辆驾驶员进行沟通,需要简洁。”
MailChimp的内容风格指南,其中提供了合法拷贝的指导
Mailchimp的内容风格指南包含了关于如何编写不同类型内容的强大指南,以便它们与Mailchimp的公司价值观和公司语调保持一致。

组件库

组件库(也称为设计图书馆)很多人都与设计系统相关联:这些综合图书馆房屋预定,可重复使用的UI元素,并作为设计师和开发人员的一站式商店,以便了解并实现特定的UI元素。创建这些库需要很大的时间和资源。除了组件的视觉示例之外,它们还包括:

  • 组件名称:特定且唯一的UI组件名称,以避免设计者和开发人员之间的通信错误
  • 说明:对这个元素是什么以及它是如何被使用的一个明确的解释,偶尔伴随do和don来进行上下文和澄清
  • 属性:可用于定制或调整组件以满足特定需求的变量或调整(即颜色、大小、形状、副本)
  • 状态:推荐的默认值和外观的后续更改
  • 代码片段:元素的实际代码摘录(一些设计系统甚至共享多个示例,并提供“沙盒”环境来尝试不同的组件定制)
  • 前端和后端框架实现库(如果适用),以避免痛苦和不必要的调试
谷歌的材料设计组件库,它以一个带有指导方针和代码的单选按钮为例。
谷歌的 材料设计系统 具有组件库,包括用于特定操作系统和框架的实现指南和代码片段(如上所示),以及具有可用性的彻底设计指南,并在单独的选项卡中进行。
IBM的碳设计系统,它具有指导方针、可视化示例以及代码测试的“沙盒”。
IBM的碳设计系统 功能使用、样式和代码指南,以及可访问性考虑因素,以及一个代码沙盒,供设计者和开发人员在实现之前可视化任何自定义。

模式库

有时,术语“组件库”和“模式库”被用作同义词;然而,这两种类型的库之间有一个区别。组件库指定单个UI元素,而模式图书馆UI元素分组或布局的功能集合。与组件库相比,模式库通常被认为不那么健壮,但它们可以是完全的,也可以是所需的高级的。它们通常具有内容结构、布局和/或模板。与组件非常相似,这些模式意味着可以重用和调整。

Atlassian的模式库,演示了页面头模式(以及组成它的组件)
这个 亚特兰西设计系统 标识许多可重用的模式,包括页眉模板。它不仅展示了一个可视化的例子,而且还突出了设计者应该利用的确切组件,并解释了每个组件应该如何使用。

美国Web设计系统(usws)提供了一个认证页面模板和一个带有占位符文本的可视化示例
尽管许多公共部门网站还有很长的路要走,但 美国网页设计系统(USWDS) 是一个很好的起点,统一许多不同的部门和机构,有明确的指导方针。USDWS指定页面模板(如上图所示),以及设计原则,组件和编码规范。

设计系统团队

设计系统只与管理它的团队一样有效。无论是创建还是修改,设计系统都需要持续的维护和监督,以确保它们不会过时、过时或过度拥挤,并有冗余条目或提交。由于设计系统本身可以承担不同的定制规模和级别,因此团队的规模可能会有所不同,但至少,团队应包括1个交互设计器、1个可视化设计器和1个开发人员,每个人员都旨在帮助编写交互设计指南,创建可视化示例,并分别为每个元素提供代码片段和实现规范。理想情况下,如果这些角色在组织中明确确定,团队还应该包括兼职研究员、兼职架构师和内容编写器。

最后,考虑巩固执行赞助商(从领导级别)来协调设计制定制度努力。虽然缺乏赞助商不会成为展示者,但赞助商可以确保资金和资源,同时也将设计系统的战略重要性传达给本组织的其余部分。

如何接近设计系统的采用

一般有三种方法可以使用设计系统:

  • 采用现有的设计系统
  • 适应现有的设计系统
  • 创建自己的专有或定制设计系统

每种方法都有优缺点,但一般来说,设计系统解决方案的自定义程度越高,执行它所需的时间和金钱就越多。因此,使用现有的设计系统是成本最低的方法,并且需要最少的时间来实现。(但是,这仍然需要更多的时间,因为你必须替换或更新一些UI元素,并同意一个标准)。

如果组织有开放源码设计系统无法满足的特殊需求,那么对定制设计系统的投资将是值得的。随着对设计系统的自定义和调整的增加,您从使用现有设计系统中获得的成本节约将会减少,而且从长远来看,您最好还是创建自己的设计系统。在开始设计系统和评估权衡之前,确保您知道您的组织需要什么。

实现设计系统的3种方法,从低到高控制、成本和品牌差异化:采用、适应和创造
根据预算和需求,公司可以选择三种方法中的一个来设计系统:通过其整体采用现有系统,使现有系统适应公司的需求,或创建完全新的系统。

最后,对于可能会发生变化的概念验证或初始原型,创造一个成熟的设计系统可能不会产生理想的结果ROI在短期内。毕竟,它的好处是设计的可复制性,这是在未来。尽管从一开始就建立这些系统可能很有诱惑力,但请记住,设计系统不应被视为一个工作组合,而应被视为一个功能工具包或资源,以便设计师和开发人员更快地工作。也就是说,如果你怀疑一个设计系统的有用性,那么考虑一下你用来评估你的设计工作的时间尺度可能是值得的。设计系统是最好的,当公司预见未来数年,可复制的设计工作。

结论

设计系统由许多组件、模式、样式和指导原则组成,这些都可以帮助您的设计工作操作和优化。然而,它们是由人设计、管理和实现的。创建设计系统时要考虑的主要因素是项目的规模和可复制性,以及可用的资源和时间。当执行和维护不好时,设计系统可能会成为组件和代码的难以收集的集合;但是,如果实现得好,他们可以教育团队成员,简化工作,并使设计者能够解决复杂的UX问题。