扩展您的应用程序功能既令人兴奋又充满挑战。它需要大量的准备、研究、雇佣新的团队成员、管理跨部门的协作，并投入大量的财务资源来构建一个可以容纳大量用户群和新功能的新架构。 在决定踏上这段旅程之前，请确保您已经用尽了所有扩展机会。  ‍ 在将成本保持在最低水平的同时实现增长 许多企业家将“扩展”与“增长”混为一谈，并互换使用这两个术语，而忽略了在将成本和资源保持在最低水平的同时吸引更多用户和增加收入的巨大商业潜力。实现这一目标的一种方法是将设计系统集成到您的应用程序开发周期中。 即使设计系统在过去几年中广受欢迎，围绕这个概念似乎仍然存在一些混淆，特别是对于那些不是该领域专家的人。 因此，让我们从基础开始。 什么是设计系统？ 设计系统是设计规则、交互模式、指南、可重用组件和可在创建数字产品时使用的文档的集合。它是一个动态文档，为设计和构建新功能以及维护现有功能提供了基础。 因此，它促进了设计人员和开发人员之间更好的沟通，确保更快的迭代时间、更低的成本和设计的一致性。这些将有助于提供无缝的用户体验。  ‍ 设计系统组件 每个设计系统都是不同的，但总的来说，它包含 4 个主要支柱： 是所有将定义系统组件的视觉元素，例如颜色、排版和网格系统。 使用它们来维护一致的设计，并作为创建组件库属性的基础。 设计标记 产品团队 重新组合了将用于构建应用程序界面的交互元素，例如头像、按钮、徽章、复选框、日期选择器、输入元素、单选按钮和进度条，仅举几例。如上所述，它们是根据设计语言元素设计的，具有特定的属性，这使它们具有动态性。它们对于 组件库 开发阶段的程序员尤为重要。 包含在应用程序内的公共路径（例如导航菜单和表单）中使用的组件和设计标记。通常使用 实现，这显示了何时以及如何使用组件以及它们的不同状态（悬停、单击、转换等）。这确保了应用程序最终用户的一致体验。 模式库 原子设计方法 是设计系统用户在使用系统时必须考虑的所有规则和原则。它作为一本手册，展示组件的行为和交互，同时也使新成员的入职更加高效。 指南 现在我们已经了解了基础，让我们看看如何利用设计系统来扩展应用程序，而无需投入大量资源。  ‍ 应用功能扩展成本 让我们考虑一个早期技术 B2C 公司的例子，它面临着不能在最后期限完成产品功能开发的挑战，并且需要找到解决方案以满足利益相关者和投资者的期望。 他们的产品团队由 1 名产品负责人、1 名设计师、5 名开发人员（前端和后端）和 1 名质量保证人员组成。 我们将进一步探讨决策者通常会考虑实施的潜在情景，包括每个选项的成本和资源分配。 ‍  ‍  ：在这种情况下，他们可能会指派现有团队成员在日常任务之外支持新功能，并聘请基于项目的专家来处理额外的工作量。这需要大量的财政资源来支持额外的劳动力成本，此外还需要大量的时间来招募新成员。 选项 A 所有这一切的替代方案是投资设计系统。 将设计系统开发外包给专门的设计机构，系统上线后自行设计订阅路径。 方案B： 选项A 选项B 额外的劳动力 1 x 用户体验设计师 (  )  2 x 开发人员 ( ) 平均工资/小时：49$ 平均薪水/小时：57$ 前端开发 设计机构/自由职业者（ 但费用取决于代理地点和专业知识）   分钟。 $60/小时 项目实施时间框架 - 招聘：分钟。 1个月（侦察、面试、文书工作）  - 入职：2 周 订阅路径设计：1 个月（研究、线框图、设计、测试、反馈循环和更新）  - 订阅路径开发：2 个月 - 测试和优化：2 周 - UI/UX 机构招聘和协作设置：2 周 - 设计系统开发：±2个月 - 订阅路径设计：1周 - 订阅路径开发：2 周 - 测试和优化：3 天 总时间 5个月 4个月 额外费用 4万美元 （1 x 设计师 8000 美元 + 2 x 开发人员 32000 美元）  ±$20k  （对于设计系统的平均每小时 ±60 美元，订阅路径本身由现有团队开发，因此不被视为额外费用） 基于以上场景，开始思考实施设计系统以更快推出订阅路径不仅效率要高得多，而且这实际上是一项至少五年才会见效的投资。 出于本练习的目的，我们对实施基于订阅的模型所需的时间和资源进行了基本分析，该模型需要设计和开发最终用户支付的新路径。 我们决定采用一种简单易懂的方法，以改变人们普遍认为设计系统的实施是一项繁琐的工作，需要太多时间和资源的误解。出于这个原因，许多企业家倾向于推迟采用，从而失去真正实现业务自动化和优化的机会。 当然，这种计算会根据每个企业的具体情况而有所不同，我们鼓励企业家逐案研究他们的实际成本。  ‍ 现在让我们更深入地了解为什么成长中的初创企业应该考虑设计系统。  ‍ 设计系统的好处 根据我们的经验，实施设计系统可将全周期团队的设计和实施速度提高 65%，将工作时间从两周的冲刺时间从 10 天缩短到 3.5 天。构建和设置它需要几个月的时间，但每次团队选择这种方法时，他们都会看到惊人的结果。  ‍ 设计系统的主要好处之一是可扩展性。一旦设计了所有组件，就很容易复制它们并根据特定需求进行小的调整。 减少工作量和成本 这样，您的团队不必在每次您的应用程序需要新功能时都从头开始，您的团队可以选择部分设计系统并在其基础上构建。与其将时间浪费在决定按钮的外观上，他们可以专注于业务的更重要方面，例如改善用户流量或解决不仅可以降低成本，而且实际上会产生额外现金流的问题。 改善跨团队协作 有了适当的设计系统，设计师和开发人员可以更有效地协作，因为他们可以跨项目访问相同的信息，例如 UI 模式和组件。它减少了反馈循环和无数浪费在会议上的时间，并消除了猜测。该过程变得更加可预测，并且入职变得更加容易。每当有新成员加入团队时，设计系统文档将使团队保持一致。 快速产品部署 设计系统可以通过为新设计师提供示例和指南来减少他们上岗所需的时间。这意味着他们可以更快地开始做出贡献，因此您的团队将更具凝聚力。它允许您通过反复使用相同的模式来扩展您的团队。这意味着花在培训新员工上的时间更少，而花在创造优质产品上的时间更多。 这些系统还可以帮助开发人员了解事物的外观和感觉。他们可以在构建新功能或更改现有功能时参考风格指南，而不是在美学上浪费时间。这确保所有内容在所有平台和设备上看起来都一致。 提高客户保留率 直观且深思熟虑的体验能够提高转化率并建立客户忠诚度，从长远来看会产生复合效应。 正如 Nielsen Norman Group ：“如果与用户的期望相比，一项任务特别容易完成，那么这种体验可能会对产品产生积极影响——用户可能会向朋友推荐该产品并成为回头客” . 所指出的 一致性、更好的团队协作和智能资源分配有助于跨平台和应用内为您的客户创造无缝体验，以高效的方式为长期增长奠定基础。 设计系统采用选项 如果您已经开始考虑如何将这些好处整合到您的业务中，则必须在两个采用选项之间做出选择： 创建自定义设计系统 改编现有的，比如开源 在设置设计系统项目并仔细评估权衡之前，必须清楚地了解您组织的需求。 如果组织有开源设计系统无法满足的特定要求，那么创建自定义设计系统将是一项明智的投资。 要测试设计系统，您可以检查一些最流行的开源系统：  最后的想法 实现应用程序扩展的方法有很多种，但设计系统为有效的可扩展性提供了坚实的基础，因此代表了一种面向未来的整个系统的解决方案。它不仅具有长期优势，而且我们的快速计算证明，对于近期计划来说，这是一个更明智的财务选择。 通过使用设计系统，我们可以减少重新发明轮子所花费的时间，提高产品之间的一致性，并通过重复使用组件而不是每次都从头开始构建它们来降低成本。 最初发布 在这里

Walkthroughs, tutorials, guides, and tips. This story will teach you how to do something new or how to do something better.

This story contains new, firsthand information uncovered by the writer.

Let's Design Your App

Portfolio

Hire Me

該音頻是用故事的原始語言製作的！

设计系统：有效扩展应用程序的关键

About Author

註釋

標籤

这篇文章刊登在

Related Stories

Claude Sonnet 3.5 系统提示泄漏：法医分析

比特币 UTXO 模型，为独特的生态系统提供动力

HackerNoon Decoded: The Top 10 Countries Where HackerNoon Is the Most Active

扬帆起航：利用数据湖开发生产级 RAG 应用程序

Claude Sonnet 3.5 系统提示泄漏：法医分析

比特币 UTXO 模型，为独特的生态系统提供动力

HackerNoon Decoded: The Top 10 Countries Where HackerNoon Is the Most Active

扬帆起航：利用数据湖开发生产级 RAG 应用程序

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps