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

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

设计系统的团队

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

最后,考虑确保一个执行发起人(来自领导层)来协调设计系统的工作。虽然缺少赞助者不会成为一个障碍,但赞助者可以确保资金和资源,同时也向组织的其他部分传达设计系统的战略重要性。

如何探讨设计系统的采用

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

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

各有利弊,但一般来说,设计系统解决方案的定制度越高,执行所需的时间和金钱就越多。因此,使用现有的设计系统是成本最低的方法,并且需要最少的时间来实现。(游戏邦注:这仍然需要更多时间,因为你需要替换或更新一些UI元素,并达成一个标准)。

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

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

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

结论

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