随着UI设计在多年来的发展中,必须创建UI屏幕的比例和速度也增加了。不仅有数百万个应用程序和数十亿的网站(每年创建更多),而且每个应用程序和网站都可能有数百或数千页(或屏幕)。随着这种激烈的扩张,可以对组织进行急需简化设计工作。因此,许多设计团队利用强大的设计系统来规模管理设计。

定义:一个设计系统是否有一套完整的标准来管理大规模的设计使用可重用组件和模式。

为什么要使用设计系统?

设计系统在实现时,可以为设计团队提供大量的好处:

  • 可以快速地创建和复制设计(和开发)工作。
    设计系统的主要优点是能够利用预先制作的UI组件和元素快速复制设计。团队可以继续反复使用相同的元素,减少重新发明轮子的需要,从而避免出现意外的不一致。
  • 它减轻了设计资源的压力,可以专注于更大、更复杂的问题。
    由于已经创建了更简单的UI元素并可重用,设计资源可以更少地关注于调整视觉外观,而更多地关注于更复杂的问题(如信息优先级、工作流优化和旅程管理)。当你只创造少量屏幕时,这种回报可能看起来很小,但当你必须协调数十个团队和数千个屏幕时,它就变得非常重要。
  • 它在跨官能团队之间和之间创造了统一的语言。
    特别是当设计职责转移或团队地理位置分散时,统一的语言可以减少因错误沟通而浪费的设计或开发时间。例如,系统的功能或外观下拉菜单是没有争议的,因为这个术语是为设计系统中特定定义的元素保留的。
  • 它跨产品,渠道和(潜在偏离)部门的视觉一致性。
    特别是当团队工作在“竖井”中,即每个产品或渠道独立于其他产品或渠道运行时,缺乏一个组织范围内的设计系统可能会导致不一致的视觉外观和体验,看起来似乎支离破碎或与品牌无关。设计系统提供了组件、模式和样式的单一来源,并将不相关的体验统一起来,使它们在视觉上具有内聚性,似乎是同一生态系统的一部分。作为额外的好处,任何主要的视觉重塑或重新设计都可以通过设计系统进行大规模管理。
  • 它可以作为初级设计师和内容贡献者的教育工具和参考
    明确的使用指南和风格指南可以帮助那些刚开始接触UI设计或内容创建的贡献者,同时也可以提醒其他贡献者。

为什么不使用设计系统?

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

  1. 创建和维护一个设计系统是一项耗时的活动,需要一个专门的团队。不幸的是,设计系统并不是一个一劳永逸的解决方案。在最佳状态下,随着团队从使用它们的人那里收集反馈,它们不断发展。
  2. 教别人如何使用设计系统需要时间。任何设计系统,即使是从现有的系统中改编而来的,也需要使用说明——否则就存在跨屏幕或跨团队应用不一致或不正确的风险。
  3. 人们可能认为项目是静态的、一次性的创建,通常不需要可重用的组件。不管是真是假,这种看法可能表明项目之间缺乏统一的战略,错过了提高效率的机会。

设计系统的要素

设计系统有两个重要零件:

  • 设计存储库
  • 谁管理

设计系统存储库

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

时尚指南

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

美国宇航局的风格指南从1976年,以指导标识的排版,以确保高能见度。
1976年NASA图形标准手册(NHB 1430.2)是彻底品牌风格指南的示例。它提供了很多的现代视觉示例:颜色配对准则,以提高可见性和可读性,显式设计原则,如“标识应该被视为一个大标题;因此,语言应该清晰简洁。为了快速沟通,简洁是可取的,尤其是对车辆司机。”
MailChimp的内容样式指南,该指南具有法律副本的指导
Mailchimp的内容风格指南包含了关于如何编写不同类型内容的健壮指南,以使它们与Mailchimp的公司价值观和公司语气一致。

组件库

组件库(也称为设计)是许多人与设计系统联系在一起的东西:这些完整的库包含预先确定的、可重用的UI元素,为设计师和开发人员提供了一站式服务,让他们了解并实现特定的UI元素。创建这些库需要大量的时间和资源。除了组件的可视示例外,还包括:

  • 组件名称:一个特定且唯一的UI组件名称,以避免设计人员和开发人员之间的误解
  • 描述:明确说明这个元素是什么,以及它的典型用法,偶尔还会附上上下文和澄清的注意事项
  • 属性:变量或调整,可以定制或调整组件以满足特定需求(例如,颜色,大小,形状,复制)
  • 状态:建议的默认值和后续更改外观
  • 代码片段:元素的实际代码摘录(一些设计系统甚至共享多个示例,并提供一个“沙箱”环境来尝试不同的组件定制)
  • 前端和后端框架实现库(如果适用),以避免痛苦和不必要的调试
谷歌的Material Design组件库,它提供了一个带有指南和代码的单选按钮示例。
谷歌的 材料设计系统 具有一个组件库,其中包括针对特定操作系统和框架的实现指南和代码片段(如上所示),以及完整的设计指南,在单独的选项卡中包含可用性注意事项。
IBM的Carbon Design System,其特点是指导方针、可视化示例以及用于代码测试的“沙箱”。
IBM的Carbon设计系统 特性使用、风格和代码指导方针,以及可访问性考虑事项和代码沙箱,供设计人员和开发人员在实现之前可视化任何定制。

模式库

有时,术语“组件库”和“模式库”同义使用;然而,这两种类型的文库之间存在区别。组件库指定单个UI元素,而模式库ui元素组或布局的特性集合。与组件库相比,模式库通常被认为不那么健壮,但它们可以根据需要完全或高级。它们通常以内容结构、布局和/或模板为特色。与组件非常相似,模式也可以重用和调整。

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

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

设计系统的团队

设计系统的有效性取决于管理它的团队。无论是创建还是修改,设计系统都需要持续的维护和监督,以确保它们不会过时、过时,或因冗余的作品或提交而过度拥挤。这个团队的大小可以改变,因为设计系统本身可以有不同的大小和程度的定制,但是,至少,团队应该包括1交互设计师、视觉设计师,和1个开发人员,每个旨在帮助编写交互设计指南,创造视觉的例子,并分别为每个元素提供代码片段和实现规范。理想情况下,团队还应该包括兼职研究员、兼职架构师和内容作者,如果这些角色在您的组织中明确确定的话。

最后,考虑确保一个执行赞助商(来自领导层)来协调设计系统的努力。虽然缺少赞助商不会阻碍演出,但赞助商可以获得资金和资源,同时也向组织的其他成员传达设计系统的战略重要性。

如何探讨设计系统的采用

使用设计系统通常有三种方法:

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

每个人都有利弊,但一般来说,您的设计系统解决方案越多,需要执行的时间和金钱。因此,使用现有的设计系统是最低成本的方法,并且需要至少时间实现。(但是,它仍然需要更多的时间,而不是如果您继续像往常继续设计,那么您必须替换或更新一些UI元素并同意标准)。

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

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

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

结论

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