随着UI设计在过去几年的发展,UI屏幕的创建规模和速度也在增加。不仅有数百万的应用程序和数十亿的网站(每年都有更多的创建),而且这些应用程序和网站可能都有成百上千的页面(或屏幕)。随着这种急剧的扩张,组织迫切需要简化设计工作。因此,许多设计团队利用健壮的设计系统来大规模管理设计。
定义:一个设计系统是否有一套完整的标准来管理大规模的设计使用可重用组件和模式。
为什么要使用设计系统?
设计系统,如果执行得好,可以为设计团队提供很多好处:
- 设计(和开发)工作可以快速、大规模地创建和复制。
设计系统的主要好处在于,它们能够利用预先制作好的UI组件和元素快速复制设计。团队可以继续不断地使用相同的元素,减少了重新发明轮子的需要,从而冒着不一致的风险。 - 它减轻了专注于更大、更复杂问题的设计资源的压力。
由于已经创建了更简单的UI元素并可重用,设计资源可以更少地关注于调整视觉外观,而更多地关注于更复杂的问题(如信息优先级、工作流优化和旅程管理)。当你只创造少量屏幕时,这种回报可能看起来很小,但当你必须协调数十个团队和数千个屏幕时,它就变得非常重要。 - 它在跨职能团队内部和团队之间创建了一种统一的语言。
特别是当设计责任转移或团队在地理上分散时,统一的语言可以减少因沟通错误而浪费的设计或开发时间。例如,功能或外观下拉菜单是没有争议的,因为这个术语是为设计系统中特定定义的元素保留的。 - 它创造了跨产品、渠道和(潜在的竖井)部门的视觉一致性。
特别是当团队工作在“竖井”中,即每个产品或渠道独立于其他产品或渠道运行时,缺乏一个组织范围内的设计系统可能会导致不一致的视觉外观和体验,看起来似乎支离破碎或与品牌无关。设计系统提供了组件、模式和样式的单一来源,并将不相关的体验统一起来,使它们在视觉上具有内聚性,似乎是同一生态系统的一部分。作为额外的好处,任何主要的视觉重塑或重新设计都可以通过设计系统进行大规模管理。 - 它可以作为初级设计师和内容贡献者的教育工具和参考.
明确的使用指南和风格指南可以帮助那些刚开始接触UI设计或内容创建的贡献者,同时也可以提醒其他贡献者。
为什么不使用设计系统?
有一些潜在的障碍和限制可能会阻止设计团队使用设计系统:
- 创建和维护一个设计系统是一项耗时的活动,需要一个专门的团队。不幸的是,设计系统不是一种一次性的解决方案。在最好的情况下,它们会随着团队从使用它们的人那里收集反馈而不断发展。
- 教别人如何使用设计系统需要时间。任何设计系统,即使是从现有的系统中改编而来的,也需要使用说明——否则就存在跨屏幕或跨团队应用不一致或不正确的风险。
- 人们可能会认为项目是静态的、一次性的创建,通常不需要可重用的组件。无论正确与否,这种看法可能意味着缺乏跨项目的统一战略,并错失了提高效率的机会。
设计系统的要素
设计系统有两个重要部分:
- 设计存储库
- 的人谁管理
设计系统存储库
设计存储库可以采用多种形式,但它们通常包含风格指南,一个组件库和一个模式库.
风格指南
风格指南包含特定的实现指南、可视化参考和设计原则用于创建接口或其他设计可交付成果。最常见的样式指南倾向于关注品牌(颜色、排版、商标、标识和印刷媒体),但样式指南也提供内容指导(例如的语气以及语言建议)和视觉和交互设计标准(也称为前端风格指南).这些指导方针有时也被合并到组件库中,以在上下文中提供相关指导。
组件库
组件库(也称为设计库)是许多人与设计系统联系在一起的东西:这些彻底的库包含了预先确定的、可重用的UI元素,为设计师和开发人员提供了学习和实现特定UI元素的一站式商店。创建这些库需要大量的时间和资源。除了组件的可视化示例外,它们还包括:
- 组件名称:一个特定且唯一的UI组件名称,以避免设计人员和开发人员之间的误解
- 描述:明确说明这个元素是什么,以及它的典型用法,偶尔还会附上上下文和澄清的注意事项
- 属性:变量或调整,可以定制或调整组件以满足特定需求(例如,颜色,大小,形状,复制)
- 状态:推荐的默认值和随后的外观更改
- 代码片段:元素的实际代码摘录(一些设计系统甚至共享多个示例,并提供一个“沙箱”环境来尝试不同的组件定制)
- 前端和后端框架实现库(如果适用),以避免痛苦和不必要的调试
模式库
有时,术语“组件库”和“模式库”被当作同义词使用;但是,这两种类型的库之间有区别。组件库指定单独的UI元素模式库ui元素组或布局的特性集合。与组件库相比,模式库通常被认为不那么健壮,但它们可以根据需要完全或高级。它们通常以内容结构、布局和/或模板为特色。与组件非常相似,模式也可以重用和调整。
设计系统的团队
设计系统的有效性取决于管理它的团队。无论是创建还是修改,设计系统都需要持续的维护和监督,以确保它们不会过时、过时,或因冗余的作品或提交而过度拥挤。这个团队的大小可以改变,因为设计系统本身可以有不同的大小和程度的定制,但是,至少,团队应该包括1交互设计师、视觉设计师,和1个开发人员,每个旨在帮助编写交互设计指南,创造视觉的例子,并分别为每个元素提供代码片段和实现规范。理想情况下,团队还应该包括兼职研究员、兼职架构师和内容作者,如果这些角色在您的组织中明确确定的话。
最后,考虑确保一个执行发起人(来自领导层)来协调设计系统的工作。虽然缺少赞助者不会成为一个障碍,但赞助者可以确保资金和资源,同时也向组织的其他部分传达设计系统的战略重要性。
如何探讨设计系统的采用
使用设计系统通常有三种方法:
- 采用现有的设计系统
- 适应现有的设计系统
- 创建自己的专有或定制的设计系统
各有利弊,但一般来说,设计系统解决方案的定制度越高,执行所需的时间和金钱就越多。因此,使用现有的设计系统是成本最低的方法,并且需要最少的时间来实现。(游戏邦注:这仍然需要更多时间,因为你需要替换或更新一些UI元素,并达成一个标准)。
如果组织有开源设计系统无法满足的特殊需求,那么在定制设计系统上的投资是值得的。随着对设计系统的定制和调整的增加,您从使用现有设计系统中节省的成本将会减少,并且,从长远来看,无论如何,您最好还是创建自己的设计系统。在开始设计系统并评估权衡之前,确保您知道您的组织需要什么。
最后,对于概念验证或可能发生变化的初始原型,创建一个成熟的设计系统可能不会产生理想的结果ROI在短期内。毕竟,好处是设计的可复制性,这是未来的事。尽管从一开始就建立这些可能很诱人,但请记住,设计系统不应该被视为工作的组合,而应该被视为设计人员和开发人员更快工作的功能工具包或资源。也就是说,如果你怀疑一个设计系统的有用性,你可能需要考虑你将用来评估你的设计工作的时间尺度。设计系统是最好的,当公司预见多年的未来,可复制的设计工作。
结论
设计系统由许多组件、模式、样式和指导方针组成,这些可以帮助操作化和优化设计工作。然而,它们是由人设计、管理和实现的。在创建设计系统时需要考虑的主要因素是项目的规模和可复制性,以及可用的资源和时间。当糟糕的实现和维护时,设计系统可能变成笨拙的组件和代码集合;但是,如果执行得好,它们可以教育团队成员,简化工作,并使设计师能够解决复杂的UX问题。
分享这篇文章: