了解设计系统和模式

本文概述

• 设计语言是整体的
• “设计”系统思维的常见问题
• 相同的工作, 不同的心态

尽管这似乎是一种处理数字工作流程的新方法, 但设计系统的概念对于创意产业而言并不是”新的”。任何设计系统的核心都是设计模式语言, 可以解决设计人员可能面临的常见问题。

模式语言的思想起源于40年前的建筑和城市设计, 几乎可以应用于任何设计学科。

设计系统是当今数字产品世界中的一个流行话题, 但是使用系统化的可重复设计解决方案集并不是一个新主意。

像Material Design这样的设计系统是一个热门话题, 然而几十年来, 系统的设计方法已成为杂志出版商不可或缺的一部分。在翻阅任何主要杂志的页面时, 很容易看到每个部分都被定义为具有通用布局, 字体, 颜色等的模板。

用于页面部分的设计模式可以使文本和图像以与出版物的创意视野相辅相成的方式始终有效地进行排列。

在查看竞争对手杂志时, 很容易看到一种设计语言与另一种设计语言相比。

数十年来, 杂志行业一直依靠设计系统来快速格式化书写和视觉内容, 并使之保持一致。

如果还没有, 那么来自各个行业的设计师将很快将设计语言和模板纳入他们的工作流程中。对于数字产品设计师来说, 这个主题正在不断发展, 许多人第一次学习从复杂系统中的模式库进行设计(甚至帮助定义它们)。

在将软件设计模式与前端代码库对齐时, 会增加复杂性, 这会使学习设计语言感到不知所措。

设计语言是整体的

与任何语言一样, 设计语言是复杂的, 并且包含一些细微差别, 这些细微差别一开始可能看起来难以理解。这就是为什么将设计语言视为一个复杂的系统的原因, 该系统”由可能相互交互的许多组件组成”。

要了解复杂的系统, 重要的是要全面考虑设计语言：

• 从鸟瞰设计如何影响品牌或业务开始。
• 然后, 与跨职能团队和其他设计师一起考虑设计的角色。
• 最后, 考虑设计在特定时刻如何影响产品和用户。

这种整体观点强调了系统地思考设计工作流程的方式, 并且允许在解决特定问题时轻松应用设计语言。

在实践中, 设计语言是一种资源, 可用于帮助减少冗余并提高设计人员处理常见设计问题的方式的连续性。例如, 产品设计师面临的一个常见问题是：”我需要发出号召性用语, 以便用户点击。”

设计系统在解决重复出现的产品设计问题方面特别有效, 例如需要号召性用语按钮。

这是以前已经解决的问题, 因此, 设计语言无需重新设计轮子(或按钮), 而是使用预设属性(例如颜色和形状)以及最佳实践准则来定义可重复使用的按钮”设计模式”。

数字产品设计语言通常是一种跨功能的资源, 其目标是提高工作流效率和团队协作。

在某些情况下, 该语言被扩展到实时模式库, 该模式库直接连接到前端代码库和模式的度量分析。这种类型的复杂系统具有各种依赖性, 因此非常有必要采用整体方法来解决问题。

根据产品, 团队和资源的不同, 设计系统的详细程度和复杂性也会有所不同。

关于学习设计语言的很棒的事情是, 团队成员通常对用于定义产品的界面和交互非常感兴趣。学习一种新语言通常是一个挑战, 但它也可能是使团队紧密联系的身临其境的体验！

“设计”系统思维的常见问题

流利的设计语言将通过传播福音来确保系统的质量, 其中包括：

• 培训新设计师；
• 指导初级员工和管理承包商；要么
• 在发布之前, 直接与工程师合作完善产品前端。

通过这些协作, 设计人员将能够确保根据需要坚持或完善系统准则。

无论承担什么职责, 有关设计系统的几个常见问题都认为设计师可能要负责：

在设计系统中进行设计时应该考虑什么？

根据设计系统的复杂性, 从全面解决问题的方法入手非常重要。考虑一下之前的按钮示例。

如果将颜色预设为＃1f9efc并且设计人员将其设置为＃1b3e9b, 而没有先咨询使用同一图案库的其他设计人员, 则可能导致系统错误。

在设计系统中工作时, 请考虑要解决的问题将如何影响整个产品开发周期。在很多情况下, 由于模式库已经过验证, 因此不会有, 也不会造成太大影响。

如果要解决的问题是设计系统的新问题, 则可能会有机会发展模式库并帮助定义新的设计模式。

随着系统的发展, 这对于团队的工作流程来说是新的。在这里, 需要灵活性, 因为设计模式会随着时间的流逝而迭代。但是, 虽然很容易更改按钮的颜色, 但必须始终考虑更大的系统复杂性。

为此, 定义分类法以组织设计系统和模式库将很有帮助。所使用的术语应易于跨功能理解。

单击以查看完整图像。

该图为如何组织设计系统的模式库提供了一个高级层次结构。

通过将设计工件分组为通常理解的主题, 模式库使系统可以跨团队工作流进行操作, 并以谈论设计模式的方式进行交流。

我如何知道何时需要在设计系统中中断样式或创建新样式？

打破或创建新设计模式的需要通常取决于系统的成熟度。当设计系统不断发展时, 模式经常发生变化。随着系统的建立, 应该有一个变更请求流程来帮助确保连续性和质量。

系统的复杂性也很重要。如果更改模式会影响其他设计者和团队, 则该过程可能需要更长的时间才能实现, 并且通常需要更深层次的工作或资源(例如, 更新设计语言准则, 模式库或前端代码库)。

通常, 模式库并不意味着严格。将其视为可以解决问题和完成任务的工具箱。如果在模式库的范围内进行的所有设计尝试均未达到项目目标, 则直觉可能会导致寻找新工具, 或者可能是对现有模式进行更改。

看一下下面的图。一般的经验法则是, 作为基本品牌构建块的身份和元素很少更改, 因为它们有助于定义品牌和设计工件。

大多数大型组织都有针对品牌相关元素(尤其是徽标, 颜色和字体)的单独样式指南, 这些指南不经常更改。对于诸如按钮之类的元素, 这可能会或可能不会重复, 这取决于设计语言的发展, 但是由于它们与产品的各个方面都有联系, 因此更改的频率也较小。

设计模式更改或新模式经常在组件和交互级别上出现, 因为它们定义了用户流程和功能集。通常在产品路线图中定义新的用户流, 尤其是在推出功能时。

新的设计模式将具有与库中已定义的模式(例如, 字体和颜色)相似的属性, 但除设计语言外, 还可能需要界面更新或交互状态。

与设计师一起工作的产品经理或产品负责人将提供与业务目标一致的新功能的要求。在决定破坏或创建新的设计模式时, 请记住复杂系统的理论, 并确保解决方案是一个共同的决定。

设计系统样式指南中的示例页面。

在考虑如何中断或更改设计模式时, 可以考虑以下几个步骤：

确保质量控制和连续性

请记住, 质量是共同的产品目标。每个人都有责任确保设计系统完成其工作。

始终采用整体方法, 并仔细考虑打破模式或创建新模式的潜在影响。

问你自己：

• 打破模式是解决我的问题的唯一方法吗？
• 如果打破这种格局, 其他团队会受到怎样的影响？
• 如果我破坏此模式, 模式库会发生什么？

与合作者沟通

与设计师和跨职能团队的成员交谈, 以了解是否有人受到相同的限制。了解有关平台要求以及提议的模式如何在整个产品系列中工作的所有知识。

问你自己：

• 还有谁在该产品或平台上工作？
• 我要设计平台的最佳实践是什么？
• 我可以与谁交谈, 这可能会对我的决定和建议有所帮助？

了解前端功能

了解前端实现的可能性。如果更改只是对HTML / CSS / JavaScript属性的更新, 则通常不需要中断模式或创建全新的内容。

相反, 它可能是对设计语言指南的简单更新。作为设计师, 与前端紧密合作并潜在地找到每周或每天进行协作的方式非常重要。

问你自己：

• 前端团队是否已进入此设计更新？
• 我正在考虑的更改是前端更新吗？
• 最佳做法指南中缺少什么？

验证决定

如果确定需要一种新模式, 则应与合作者和最终用户一起验证该决策, 并使其与业务目标保持一致。

如果前端组件与指标相关联, 则快速的A / B测试将有助于验证。如果没有, 那么进行可用性测试将非常有用。

问你自己：

• 我们的团队是否有用于验证新设计模式的变更请求流程？
• 我需要做些什么来验证我的决定？
• 这个决定会创建一个新的用户流, 还是一个新增功能？

相同的工作, 不同的心态

在系统内进行设计时, 至关重要的是, 产品设计师必须采用决策所需的全局思维。复杂的系统原理和系统思维将对设计师的职业发展有所帮助。从模式库进行构建的过程也是如此。

从Mailchimp到Mozilla, 用于创建模式库的思维方式和方法可以应用于各种数字产品和应用程序。

这些方法对于启动一种新的设计语言或对现有的设计语言有所帮助, 因为一旦心态就绪, 系统的方法就会变得”系统化”。

多年以来, 其他行业和设计学科都知道使用类似的方法来简化工作流程, 这为产品设计师提供了最佳实践的绝佳参考点。

归根结底, 在系统内进行设计不会完全改变工作的完成方式。当然, 将会有一些用于连接和管理复杂性的新工具, 但是最终, 这是向整体心态的转变, 它将真正帮助改善工作流程。

• • •

在srcmini设计博客上进一步阅读：

• 如何创建草图样式指南, 库和UI套件
• 设计问题陈述–它们是什么以及如何构成它们
• 发挥灵感-情绪板指南
• 协同设计-成功的企业产品设计指南
• 设计未来：等待我们的工具和产品