结构的力量——设计系统模型指南
已发表: 2022-03-11设计系统可帮助组织保持跨多种产品、服务和业务的体验一致性。 尽管通常与视觉指南和组件库相关联,但设计系统却完全不同。 随着越来越多的公司意识到设计连续性的价值,新成立的设计系统团队正在建立最佳实践,以确保其组织设计工作的长期相关性。
当多人从事相同的设计追求时,就会出现共同的问题。 如果这些问题的答案不容易获得或不容易理解,那么设计一致性就会被搁置。 进入设计系统。
尽管在当代设计讨论中很受欢迎,但设计系统的根源在报纸和杂志出版领域已有数十年的历史。 即使是现在,编辑页面的系统化层次结构也很明显,预先配置的模式可以实现文本和视觉效果的一致放置。
2007 年之后,数字化的涌入迫使企业更加注重跨产品和平台的设计凝聚力。 随后强调视觉指南和组件库,但这些文档很快在 PDF 和共享文件的页面中固化。 通过反复试验,现代设计系统的制造者开始将他们的工作视为有生命的产品,而不是静态文件。
Zalando 是欧洲领先的在线时尚市场。 Atlassian 因其软件开发工具而享誉全球。 每个都有庞大的产品团队和复杂的设计需求。 从他们的设计系统模型中可以学到什么?
Zalando:作为设计系统模型的协作
Zalando 是欧洲最大的鞋类和高端街头服饰在线零售商。 拥有 1,900 多个品牌,其庞大的数字店面由数百名设计师和开发人员组成的团队管理。 为了确保在如此广泛的商品系列中获得一致的购物体验,该公司依赖于高度结构化的设计系统。
有人可能会认为,为这样一个知名品牌维护一个设计系统需要严格的治理和一个紧密的设计决策者圈子。 相反,Zalando 的方法绝对是协作的。 Zalando 没有将其设计系统视为处于熵威胁下的完美实体,而是鼓励其功能团队根据需要贡献新想法。 它是如何工作的?
Zalando 设计系统团队 (ZDS) 的主要目标是帮助功能团队开发使产品大放异彩所需的组件。 同时,ZDS 确保设计系统的完整性不受影响。 这样一来,ZDS 既是联络人,又是安全网。
当 Zalando 功能团队发现自己需要与公司设计系统不一致的解决方案时,它会使用简单的 Google 表单提交一份贡献。 收到贡献单后,ZDS 会审核更改请求并将其分类为Light 、 Medium或Heavy 。 每个类别都有自己的协作审查、设计和迭代序列。
一旦贡献通过此过程并成为现实,ZDS 团队就会更新集中共享的设计系统门户,在其每周演示中展示更改,并将更新传达给利益相关者和客户。
Zalando 贡献模型的简单性使公司内的不同声音能够在系统的演变中拥有发言权。 从哲学上讲,Zalando 将其系统视为一种产品,而不仅仅是一种旨在使产品在视觉上保持一致的文档资源。 从这份展望中可以得出适用于不同设计系统模型的实用要点:
- 治理很重要,但监督设计系统的团队应该关注组织内其他团队的成功。
- 使特征贡献过程简单、透明和协作,并记录所有沟通。
- 让设计人员和开发人员一起对系统进行更改,从而培养一种共享的系统语言。
- 创建一个清单,确保对系统的每次更新都能解决可访问性问题。
Atlassian:重新构想设计系统思维
Atlassian 创建了用于软件开发和协作的工具,例如 Jira 和 Trello。
2017 年,Atlassian 对其设计指南进行了更名并推出了一个网站。 同时,该公司托管了一个单独的站点,专门用于其 UI 组件及其相应的代码示例。

随着时间的推移,这两个网站相互吻合,导致内部设计和开发团队、第二方应用程序集成供应商和 Atlassian 的客户感到沮丧和困惑。
认识到设计和开发之间的分歧越来越大,Atlassian 选择重新思考其设计系统的方法。 它不能再将设计和开发文档视为为 Atlassian 产品生成代码和图形输出的一种手段。 设计系统必须作为产品本身而受到尊重。
为了充分了解其问题,Atlassian 进行了外部审计并发布了客户满意度调查。 可以预见的是,这两个网站被认为是错位和过时的。 凭借其名声在外,以及由设计师、开发人员和利益相关者组成的庞大生态系统要求变革,Atlassian 承认了自己的不足,并着手重新构想其设计系统。
2020 年 8 月开始,Atlassian 的设计系统团队 (ADS) 推出了一个新网站,整合了品牌、视觉、内容、组件和模式的指南。
此外,ADS 团队:
- 将其一半的 UI 组件迁移到新系统(其余部分正在进行中)
- 在整个过程中重写和简化文档
- 改进了系统内的搜索
- 添加了点击复制代码链接
Atlassian 成熟的心态最有力的证据来自 ADS 首席设计师 Jennie Yip:“关于设计系统的一个常见误解是,一旦发布,它们就会成为不可改变的事实来源。 设计系统永远不会完整。 在 Atlassian,我们开始将我们对设计系统的看法转变为一个活生生的实体。”
5 条值得记住的设计系统原则
今天的尖端就是明天的钝刀片——这是一个贯穿所有设计学科的问题。 用于创建和托管设计系统的工具和平台有很多,但是数字设计的快速发展使得从指导原则的角度考虑设计系统更有利可图。
1. 设计系统是数字产品。
像所有数字产品一样,设计系统需要定期维护。 长期处于休眠状态的系统将遭受废弃和衰退。
2. 设计系统是协作的。
设计系统必须满足代表多种业务功能的利益相关者的需求。 提供协作途径可以防止系统存在于设计和工程孤岛中,并确保产品创意不会被忽视。
3. 设计系统因简单而蓬勃发展。
设计系统是寻找答案的地方,而不是因为华丽的视觉效果、复杂的动画或诙谐的文案而获得赞誉。 信息应该组织良好,易于导航和搜索,而文本描述应该平衡上下文和简洁的说明。
4. 设计系统需要沟通和参与策略。
管理设计系统的团队需要考虑如何定期向利益相关者传达更新和新功能。 时事通讯、问答环节和其他外展策略应告知和参与: “这些就是变化。 这就是你应该关心的原因。”
5. 设计系统是集中的。
设计系统应该可以在一个单一的、基于云的位置访问。 导航系统或获取资产不应该需要特定设计程序的知识。 请记住,发布单独的设计和开发指南是导致产品失调的必经之路。
设计中结构灵活性的力量
设计系统并不意味着是巨石,庞大而壮观,永远不变。 它们也不仅仅是设计组件和样式的存储库。 它们是活生生的、会呼吸的产品,是需要种植和修剪的有机产品。 因此,他们应该得到由致力于持续维护和更新的设计师组成的专门团队。 毕竟,设计系统永远不会完成。
最终,最好的设计系统是直接的、协作的和灵活的。 他们清晰地回答紧迫的设计问题,欢迎来自多个利益相关者的意见,并优先考虑有效的解决方案而不是教条公式。
让我们知道您的想法! 请在下方留下您的想法、评论和反馈。
• • •
进一步阅读 Toptal 设计博客:
- 一致性是关键——如何构建 Figma 设计系统
- 了解设计系统和模式
- Figma vs. Sketch vs. Axure——基于任务的评论
- 为什么使用材料设计? 权衡利弊
- 过去依然存在——永恒设计概述