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

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

为什么使用设计系统?

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

  • 可以快速地创建和复制设计(和开发)工作。
    设计系统的主要好处是它们通过利用Premade UI组件和元素来快速复制设计。团队可以继续使用相同的元素,减少需要重新设计车轮,从而冒着意外不一致的风险。
  • 它减轻了设计资源的压力,专注于更大,更复杂的问题。
    由于已经创建了更简单的UI元素并可重用,因此设计资源可以减少调整视觉外观和更多关于更复杂的问题(如信息优先级,工作流优化和旅程管理)。虽然只有少数屏幕创建少数屏幕,但这种回报可能似乎很小,但是当您必须协调数十名团队和数千名屏幕的努力时,它变得很大。
  • 它在跨官能团队之间和之间创造了统一的语言。
    特别是当设计职责转移或团队在地理上分散时,统一的语言可以减少浪费的设计或误解的发展时间。例如,功能或外观落下菜单不会争论,因为该术语是在设计系统中专门定义的元素保留的。
  • 它跨产品,渠道和(潜在偏离)部门的视觉一致性。
    特别是当团队在孤岛上工作时,每个产品或渠道独立于其他产品,缺乏组织范围的设计系统可能导致似乎不一致的视觉外观和似乎与品牌无关的经验。设计系统提供组件,模式和样式的单一来源,统一脱节体验,以便它们具有视觉凝聚力,似乎是相同生态系统的一部分。作为一个额外的奖励,可以通过设计系统按比例管理任何主要的视觉复原或重新设计。
  • 它可以作为教育工具和初级设计师和内容贡献者的参考
    明确的使用指南和风格指南可以帮助那些刚开始接触UI设计或内容创建的贡献者,同时也可以提醒其他贡献者。

为什么不使用设计系统?

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

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

设计系统的元素

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

  • 该设计存储库
  • 谁管理

设计 - 系统存储库

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

时尚指南

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

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

组件库

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

  • 组件名称:特定和唯一的UI组件名称,以避免设计师和开发人员之间的错误通信
  • 描述:对于此元素的清晰解释以及通常使用的内容,偶尔会伴随到愿意和不用于背景和澄清
  • 属性:变量或调整,可以定制或调整组件以满足特定需求(例如,颜色,大小,形状,复制)
  • 状态:建议的默认值和后续更改外观
  • 代码片段:元素的实际代码摘录(一些设计系统甚至共享多个示例,并提供一个“沙箱”环境来尝试不同的组件定制)
  • 前端和后端框架实现库(如果适用),以避免痛苦和不必要的调试
谷歌的材料设计组件库,其中包含具有指南和代码的单选按钮的示例。
谷歌的 材料设计系统 具有组件库,包括用于特定操作系统和框架的实现指南和代码片段(如上所示),以及具有可用性的彻底设计指南,并在单独的选项卡中进行。
IBM的碳设计系统,该系统具有指南,视觉示例以及用于代码测试的“沙箱”。
IBM的碳设计系统 功能使用,样式和代码指南,以及设计人员和开发人员的可访问性考虑和代码沙箱,以便在实施之前可视化任何自定义。

模式库

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

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

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

设计制度团队

设计系统仅作为管理它的团队有效。无论是创建还是调整,设计系统都需要持续维护和监督,以确保它们没有过时,过时或过度拥挤,冗余条目或提交。鉴于设计系统本身可以采用不同的尺寸和定制水平,但是,该团队的规模可能会有所不同,但该团队应包括1个交互设计师,1个视觉设计师和1个开发人员,每个人都意味着帮助写入交互设计指南,创建视觉示例,并分别为每个元素提供代码片段和实现规范。理想情况下,如果在组织中明确确定这些角色,该团队还应包括兼职研究员,兼职架构师和内容作家。

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

如何探讨设计系统的采用

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

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

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

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

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

最后,对于概念证明或可能改变的初始原型,创建一个完整的设计系统可能不会产生理想的ROI.在近期。毕竟,福利是设计的可复制性,这是未来的。虽然从一开始就可能很诱人,但请记住,设计系统不应被视为作为工作组合,而是作为设计者和开发人员的功能性工具包或资源更快地工作。也就是说,如果您正在怀疑设计系统的有用性,可能值得考虑您将用于评估您的设计工作的时间表。设计系统是最好的,当公司预计未来多年来,可复制的设计工作。

结论

设计系统由许多组件,模式,样式和指南制成,可以帮助操作和优化您的设计工作。但是,他们被人们设计,管理和实施。创建设计系统时需要考虑的主要因素是您的项目的规模和可复制性,以及可用的资源和时间。当实施和维护不足时,设计系统可以成为组件和代码的笨重集合;但是,当实施井时,他们可以教育团队成员,简化工作,使设计人员能够解决复杂的UX问题。