Progress Design System Kit 让 UI 设计变得有趣的 6 种方法

关键要点

• Telerik 的 Progress 设计系统是一种独特的端到端 UI 设计解决方案，提供开箱即用的主题、无 CSS 自定义和内置协作，使其成为开发人员和设计师的杰出选择。
• Progress Design System 套件提供了一种独特的 UI 设计方法，使团队能够提供一致且直观的用户体验。它包括 ThemeBuilder 工具，该工具允许轻松进行精细的自定义，而无需复杂的 CSS，并允许团队成员之间无缝协作。
• Progress 设计系统还支持 Figma，允许设计师整合 Sass/CSS 变量和设计令牌。此外，Telerik 和 Kendo UI 提供详细且交互式的前端文档，使其成为满足 UI 设计需求的全面解决方案。

在本文中，我们将介绍 Telerik 的Progress 设计系统，这是一种用于创建简单、直观和美观体验的端到端设计语言。我们将讨论 Progress 设计系统如何成为脱颖而出的 UI 设计解决方案，以及这种方法如何将组件库定位为良好 UI 的基础。

Telerik 的进度设计系统

Telerik 的 Kendo UI 组件库在开发社区中非常受欢迎，对 UI 设计的需求也在不断增长。Progress设计系统对 UI 样式有独特的方法，因为它是为开发人员和设计师量身定制的。这确保了开发工作能够及时交付，而不会因 UI 问题而陷入困境。

Progress 通过其独特的方法来增强团队协作，从而在竞争中脱颖而出。该设计系统提供主题、工具和文档来支持大多数设计需求。设计系统简介页面提供了一个很好的入门指南。

Telerik 和 Kendo UI 的许多用户都是后端开发人员，他们没有时间或技能来处理高级样式要求。设计师还通过工具与开发人员合作，帮助他们为设计工作做出贡献。Progress 在设计和开发工作中解决了这两种用例。

关于设计系统

设计系统通常可以帮助团队提供一致、用户友好且直观的用户界面。这巩固了应用程序的外观和感觉。

任何应用程序开发工作（无论是内部使用还是外部使用）成功的关键在于其是否能够满足 UI 设计要求。如果 UI 不一致、不美观且不直观，用户就不会喜欢使用它。由于 UI 体验不一致或令人困惑，支持负担和成本也会增加。

如果用户界面不是最好的，竞争对手就会胜出。开发团队可以创建最具创新性的应用程序，但如果用户不采用新的用户界面，这一切都是徒劳的。

问题在于时间、资源和人才。开发人员必须浪费时间来完善 CSS，而他们本应该专注于功能和工程。开发团队可能会从设计团队、样式指南甚至成熟的设计系统那里获得模型。无论如何，危险的 CSS 工作以及开发和设计之间的反复，使整个工作变得令人生畏，有时甚至不切实际。当团队成员必须重做任何工作时，即使是一个精心策划的开发项目也可能很快出现问题。

没有任何设计师投入的团队也可以从 Progress 设计系统中受益。全栈开发人员通常不具备构建良好 UI 的设计能力。Progress 旨在帮助您以最小的努力实现出色的 UI 设计。

Progress 有一个独特的方法来解决这个问题，那就是 Progress 设计系统套件。

让我们来谈谈这个设计系统提供的功能。

开箱即用的主题

Kendo UI 组件库带有四个专业设计的主题（Default、Material、Fluent 和 Bootstrap）。开发人员和设计人员可以选择其中任何一个，这些主题将自动在整个项目中一致应用。如果不需要自定义，这是获得出色 UI 的最简单方法。

• 默认：基于 Telerik 和 Kendo 设计系统的中性样式
• Bootstrap：与Bootstrap 5 样式匹配
• 材质：遵循Material Design 指南
• Fluent：实现微软设计系统

主题是精心制作的视觉属性集合，例如颜色、字体和间距。Material、Bootstrap 和 Fluent 等设计系统广受欢迎且众所周知。应用主题后，您无需付出任何进一步的努力即可获得一致的外观。

Telerik 网站上有数百个演示。请务必更改主题和调色板以亲自查看这些主题。例如，查看网格组件和可用的开箱即用选项。

无 CSS 自定义（基本或高级）

ThemeBuilder是一个非常强大的设计工具，它可以帮助开发人员和设计人员进行全局或细粒度的定制，而无需编写复杂的 CSS。

ThemeBuilder 是一款可视化工具，因此几乎没有学习难度。您可以为 Telerik 和 Kendo UI 组件的每个元素设计样式，从高影响力的原色到最小的细节。

开发人员可以专注于丰富的功能，而设计师可以创造令用户满意的美妙体验。CSS 很难，最好留给经验丰富的专业人士来掌握这套技能。

只需单击几下即可设置颜色、边框半径和排版等全局属性，或者您可以进入高级模式并进行精细到原子级别的自定义。ThemeBuilder 是一款 Web 应用程序，可让您轻松设置组件样式。

一旦设计师确定了项目设计，他们只需点击几下即可分享他们的定制设计。

内置协作

ThemeBuilder 是一款云应用，可将项目安全地存储在您的帐户中。当团队成员需要贡献时，他们只需登录并打开项目即可。无需手动或通过源代码控制共享文件。这使设计师能够无缝协作并与开发人员分享想法。

ThemeBuilder 可供设计人员和开发人员使用。这使该工具成为所有 UI 自定义的核心，并最大限度地减少了团队成员之间的隔阂。

此外，经理可以为每个项目设置权限，以加强团队控制。团队可以专注于完成工作，而不会被一堆无关紧要的项目所淹没。

设计师的 DIY

一般来说，设计师一旦将设计交给开发人员，就不再关注项目了。这意味着在应用程序完善过程中，设计师和开发人员之间需要多次往返沟通。

ThemeBuilder 无需代码，易于访问，因此设计师可以自行登录并更新实际设计，无需来回往返。开发人员也可以获得该工具的访问权限，以便他们随时了解最新的设计。该工具有助于开发项目获得动力，因此团队可以相对轻松地解决具有挑战性的 UI 设计问题。

随着 Telerik 和 Kendo UI 的发展，设计师能够通过自动更新跟上最新的组件功能。这可以无缝调整您的样式以匹配更新的 HTML，确保一致的体验和令人兴奋的新组件功能。

Figma 支持

设计师可以将 Figma 中的 Sass/CSS 变量合并到 ThemeBuilder 中。还可以导入颜色、字体和效果等设计标记。

Figma 的 ThemeBuilder 插件可以从 Figma 导出以下内容：

• 颜色、字体和效果等样式：这些是 Sass 或 CSS 标记
• 自定义 SVG 图标：这些图标被导出并转换为图标字体

要安装 Figma 插件，您需要一个 Figma 帐户作为先决条件。然后，找到Figma 的 Progress ThemeBuilder 插件（可通过 Figma 的社区页面获取）并单击Install。

为了进一步增强设计师与开发人员的交接，Telerik 和 Kendo UI 通过两种方式支持 Figma：

• Figma UI 套件：Progress 提供 Figma UI 套件，代表库中的每个组件。设计师可以根据他们认为最终产品的外观进行像素完美的设计。
• 在 ThemeBuilder 中导入设计令牌：开发人员可以直接从 Figma 获取设计令牌，以进一步简化设计师与开发人员的交接。

进度设计系统的构建充分考虑了设计师和开发人员的需要，旨在最大限度地减少项目交付中的意外延迟。

详细且交互式的前端文档

Telerik 和 Kendo UI 拥有一流的文档。它详细、全面且具有交互性。开发人员和设计人员可以阅读有关 Progress 设计系统的一般信息，还可以了解每个组件的标记、样式和配置选项。

例如，开发人员可以访问文档、设置一些属性并检查标记。要快速查看文档，请查看按钮组件的可用文档。

一个具体的例子是React 内置的自动完成组件文档。开发人员可以快速评估标记和可用的 props。他们还可以选择 JavaScript 或 TypeScript 作为标记语言。

如果 React 不是您的首选工具，还有其他可用选项，例如 Angular、Blazor、jQuery 和 Vue。文档很全面，因此无论您选择哪种工具，您都会获得支持。

这种技术可以极大地增强后端系统的开发——例如必须与 UI 设计集成的 API。例如，后端开发人员可以检查设计并开始想象域数据模型可能是什么样子。有了对域的清晰认识，开发人员可以快速开始充实解决方案的其他部分，例如 DTO、后端存储和缓存。

注意：Telerik 和 Kendo UI 仍在编写文档，截至本文撰写时，尚未涵盖所有组件。希望到 2024 年能达到这一目标。

改变你的工作方式

数十年来，Telerik 和 Kendo UI 一直以其出色的 UI 体验而受到开发人员的信赖。随着 UI 样式需求的不断发展，Progress 设计系统及其工具也在不断发展。如今，Progress 已达到设计师和开发人员拥有独特样式解决方案的地步，在竞争中脱颖而出。无论您需要开箱即用的产品还是真正独特的定制设计，这条路径都为您提供了真正取悦客户的最简单方法。